SMO/src/views/system/stations/components/strategySafeguard.vue

<template>
  <el-form :inline="true" :model="formInline" ref="formRef"  class="form-inline" label-position="top">
    <div style="display: flex;flex-direction: column;">
      <div style="flex-grow: 1;height: 66vh;overflow-y: auto;overflow-x: hidden">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-radio-group v-model="radio1">
              <el-radio-button  label="日常策略" value="日常策略" plain/>
              <el-radio-button  label="任务策略" value="任务策略" plain/>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="radio1==='任务策略'">
          <el-col :span="24">
<!--            <el-button type="primary" plain style="margin-top: 15px;" @click="handleUpdateTask">新增</el-button>-->
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="radio1==='日常策略'">
          <el-col :span="24">
            <div class="table-box" style="margin-top: 10px;height: 58vh" >
              <!-- 表格主体 -->
              <el-table stripe ref="tableRef" :border="true" :data="tableDailyData"  size="small">
                <template v-for="item in columns" :key="item">
                  <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
                    <template #default="scope">
                      <template v-if="item.prop === 'alarm'">
                        {{parseItemValue(scope.row[item.prop])}}
                      </template>
                      <template v-if="item.prop === 'eliminate'">
                        {{parseItemValue(scope.row[item.prop])}}
                      </template>
                      <template v-if="item.prop === 'alarmManner'">
                        {{getAlarmMannerItemValue(scope.row[item.prop])}}
                      </template>
                      <template v-if="item.prop === 'operation'">
                        <el-tooltip
                          class="box-item"
                          effect="dark"
                          content="编辑"
                          placement="top"
                        >
                          <el-button type="primary" link @click="handleUpdate(scope.row)">
                            <el-icon >
                              <Edit />
                            </el-icon>
                          </el-button>
                        </el-tooltip>
                      </template>
                    </template>
                  </el-table-column>
                </template>

                <!-- 无数据 -->
                <template #empty>
                  <div class="table-empty">
                    <slot name="empty">
                      <img src="@/assets/images/notData.png" alt="notData" />
                      <div>暂无数据</div>
                    </slot>
                  </div>
                </template>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="radio1==='任务策略'">
          <el-col :span="24">
            <div class="table-box" style="margin-top: 10px;height: 53vh" >
              <!-- 表格主体 -->
              <el-table stripe ref="tableRef" :border="true" :data="taskData"  size="small">
                <template v-for="item in columns2" :key="item">
                  <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
                    <template #default="scope">
                      <template v-if="item.prop === 'tact_name'">
                        {{scope.row[item.prop]}}
                      </template>
                      <template v-else-if="item.prop === 'tact_begin_dt_i'">
                        {{convertTimestampToDateTime(scope.row.tact_begin_dt_i)}}
                      </template>
                      <template v-else-if="item.prop === 'tact_end_dt_i'">
                        {{convertTimestampToDateTime(scope.row.tact_end_dt_i)}}
                      </template>
                      <template v-else>
                        {{parseItemValue(scope.row[item.prop])}}
                      </template>
                      <template v-if="item.prop === 'l'">
                       启用
                      </template>
                    </template>
                  </el-table-column>
                </template>

                <!-- 无数据 -->
                <template #empty>
                  <div class="table-empty">
                    <slot name="empty">
                      <img src="@/assets/images/notData.png" alt="notData" />
                      <div>暂无数据</div>
                    </slot>
                  </div>
                </template>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="disposition-bottom">
        <el-button disabled> 取消 </el-button>
        <el-button type="primary" plain disabled> 上一步 </el-button>
        <el-button type="primary" disabled> 下一步 </el-button>
      </div>
    </div>
  </el-form>

  <!-- 日常策略 添加或修改对话框 -->
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px" append-to-body class="tactics">
    <el-form ref="formRef" :model="dailyForm" :rules="rules" >
      <div class="disposition-title">警告设置</div>
      <el-form-item label="触发条件:" prop="relationship"  style="display: flex;align-items: center">
        <el-radio-group v-model="itemData.alarmCondition" disabled>
          <el-radio value="0" size="large">条件并且</el-radio>
          <el-radio value="1" size="large">条件或者</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="触发周期:" prop="cycle"  style="display: flex;align-items: center">
        <div class="flex-center">
          <el-input v-model="itemData.alarmTime" style="width: 150px"  disabled/>
          <div style="margin-left: 10px">分钟</div>
        </div>
      </el-form-item>
      <!-- <el-button type="primary" plain style="margin-top: 10px">新增</el-button>-->
      <div class="table-box" style="margin-top: 10px;height: 160px">
        <el-table stripe ref="tableRef" :border="true" :data="itemData.alarmList"  size="small" >
          <template v-for="item in columns3" :key="item">
            <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
              <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button type="primary" link >
                    <el-icon >
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </template>

          <!-- 无数据 -->
          <template #empty>
            <div class="table-empty">
              <slot name="empty">
                <img src="@/assets/images/notData.png" alt="notData" />
                <div>暂无数据</div>
              </slot>
            </div>
          </template>
        </el-table>
      </div>

      <div class="disposition-title">消警设置</div>
      <el-form-item label="解除条件:" prop="relationship"  style="display: flex;align-items: center">
        <el-radio-group v-model="itemData.eliminateCondition" disabled>
          <el-radio value="0" size="large">条件并且</el-radio>
          <el-radio value="1" size="large">条件或者</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="解除周期:" prop="cycle"  style="display: flex;align-items: center">
        <div class="flex-center">
          <el-input v-model="itemData.eliminateTime" disabled style="width: 150px" />
          <div style="margin-left: 10px">分钟</div>
        </div>
      </el-form-item>
<!--      <el-button type="primary" plain style="margin-top: 10px">新增</el-button>-->
      <div class="table-box" style="margin-top: 10px;height: 160px">
        <el-table stripe ref="tableRef" :border="true" :data="itemData.eliminateList"  size="small" >
          <template v-for="item in columns4" :key="item">
            <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
              <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button type="primary" link >
                    <el-icon >
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </template>

          <!-- 无数据 -->
          <template #empty>
            <div class="table-empty">
              <slot name="empty">
                <img src="@/assets/images/notData.png" alt="notData" />
                <div>暂无数据</div>
              </slot>
            </div>
          </template>
        </el-table>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm" disabled>确 定</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 任务策略 添加或修改对话框 -->
  <el-dialog :title="dialogTask.title" v-model="dialogTask.visible" width="800px" append-to-body class="tactics">
    <el-form ref="formRef" :model="taskForm" :rules="rules" style="overflow: auto;height: 70vh;overflow-x: hidden;">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务名称:" prop="name"  style="display: flex;align-items: center">
            <el-input v-model="taskForm.name" style="width: 240px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 10px">
        <el-col :span="12">
          <el-form-item label="开始时间:" prop="startTime"  style="display: flex;align-items: center">
            <el-date-picker
              style="width: 240px"
              v-model="taskForm.startTime"
              type="date"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间:" prop="endTime"  style="display: flex;align-items: center">
            <el-date-picker
              style="width: 240px"
              v-model="taskForm.endTime"
              type="date"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="display: flex;align-items: center; margin-top: 10px">
        <el-radio-group v-model="taskForm.type">
          <el-radio-button  label="能见度" value="能见度" plain/>
          <el-radio-button  label="风速" value="风速" plain/>
          <el-radio-button  label="大气电场" value="大气电场" plain/>
          <el-radio-button  label="云量" value="云量" plain/>
          <el-radio-button  label="云高" value="云高" plain/>
          <el-radio-button  label="温度" value="温度" plain/>
          <el-radio-button  label="湿度" value="湿度" plain/>
          <el-radio-button  label="小时雨量" value="小时雨量" plain/>
          <el-radio-button  label="累年平均值" value="累年平均值" plain/>
        </el-radio-group>
      </el-form-item>
      <div class="disposition-title">警告设置</div>
      <el-form-item label="触发关系:" prop="relationship"  style="display: flex;align-items: center">
        <el-radio-group v-model="dailyForm.relationship">
          <el-radio value="1" size="large">条件并且</el-radio>
          <el-radio value="2" size="large">条件或者</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="告警方式:" prop="manner"  style="display: flex;align-items: center">
        <el-radio-group v-model="dailyForm.manner">
          <el-radio value="1" size="large">字幕提示</el-radio>
          <el-radio value="2" size="large">声音提示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-button type="primary" plain style="margin-top: 10px">新增</el-button>
      <div class="table-box" style="margin-top: 10px;height: 160px">
        <el-table stripe ref="tableRef" :border="true" :data="processTableData3"  size="small" >
          <template v-for="item in columns3" :key="item">
            <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
              <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button type="primary" link >
                    <el-icon >
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </template>

          <!-- 无数据 -->
          <template #empty>
            <div class="table-empty">
              <slot name="empty">
                <img src="@/assets/images/notData.png" alt="notData" />
                <div>暂无数据</div>
              </slot>
            </div>
          </template>
        </el-table>
      </div>

      <div class="disposition-title">消警设置</div>
      <el-form-item label="触发关系:" prop="relationship"  style="display: flex;align-items: center">
        <el-radio-group v-model="dailyForm.relationship">
          <el-radio value="1" size="large">条件并且</el-radio>
          <el-radio value="2" size="large">条件或者</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-button type="primary" plain style="margin-top: 10px">新增</el-button>
      <div class="table-box" style="margin-top: 10px;height: 160px">
        <el-table stripe ref="tableRef" :border="true" :data="processTableData4"  size="small" >
          <template v-for="item in columns4" :key="item">
            <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
              <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button type="primary" link >
                    <el-icon >
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </template>

          <!-- 无数据 -->
          <template #empty>
            <div class="table-empty">
              <slot name="empty">
                <img src="@/assets/images/notData.png" alt="notData" />
                <div>暂无数据</div>
              </slot>
            </div>
          </template>
        </el-table>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm" disabled>确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="tsx">
import {defineProps, onMounted, reactive, ref} from "vue";
import {ColumnProps} from "@/components/ProTable/interface";
import {getAstactList, getRgDataList, getYaspacketList, getYasthreshold} from "@/api/modules/allData";
const props = defineProps<{
  selectData?: {};
}>();

const pageable = ref<any>({
  asCode: props.selectData.as_code,
  pageNum: 1,
  pageSize: 20,
});
const getList= async ()=>{
  const { data } = await getAstactList(pageable.value);
  const dataList = data[props.selectData.as_code]
  if(dataList!==undefined){
    dataList.forEach(item => {
      if (item.tact_index === 1) {
        dailyData.value.push(item);
        getDailyData()
      } else {
        taskData.value.push(item);
      }
    });

  }

}



const getDailyData=()=>{
  if(dailyData.value!=undefined&&dailyData.value.length>0){
    const data = dailyData.value[0]
    tableDailyData.value.forEach(item => {
      if (item.name === '能见度') {
        item.alarm = data.tact_njd_on;
        item.eliminate = data.tact_njd_off;
        item.alarmTime = getAlarmTime(data.tact_njd_on)
        item.eliminateTime = getEliminateTime(data.tact_njd_off)
        item.alarmManner = getAlarmManner(data.tact_njd_on)
        item.alarmCondition =getAlarmCondition(data.tact_njd_on)
        item.eliminateCondition =getEliminateCondition(data.tact_njd_off)
        item.alarmList = parseItemList(data.tact_njd_on)
        item.eliminateList = parseItemList(data.tact_njd_off)

      } else if (item.name === '风速') {
        item.alarm = data.tact_fs_on;
        item.eliminate = data.tact_fs_off;
        item.alarmTime = getAlarmTime(data.tact_fs_on)
        item.eliminateTime = getEliminateTime(data.tact_fs_off)
        item.alarmManner = getAlarmManner(data.tact_fs_on)
        item.alarmCondition =getAlarmCondition(data.tact_fs_on)
        item.eliminateCondition =getEliminateCondition(data.tact_fs_off)
        item.alarmList = parseItemList(data.tact_fs_on)
        item.eliminateList = parseItemList(data.tact_fs_off)
      } else if (item.name === '大气电场') {
        item.alarm = data.tact_dqdc_on;
        item.eliminate = data.tact_dqdc_off;
        item.alarmTime = getAlarmTime(data.tact_dqdc_on)
        item.eliminateTime = getEliminateTime(data.tact_dqdc_off)
        item.alarmManner = getAlarmManner(data.tact_dqdc_on)
        item.alarmCondition =getAlarmCondition(data.tact_dqdc_on)
        item.eliminateCondition =getEliminateCondition(data.tact_dqdc_off)
        item.alarmList = parseItemList(data.tact_dqdc_on)
        item.eliminateList = parseItemList(data.tact_dqdc_off)
      } else if (item.name === '云量') {
        item.alarm = data.tact_yl_on;
        item.eliminate = data.tact_yl_off;
        item.alarmTime = getAlarmTime(data.tact_yl_on)
        item.eliminateTime = getEliminateTime(data.tact_yl_off)
        item.alarmManner = getAlarmManner(data.tact_yl_on)
        item.alarmCondition =getAlarmCondition(data.tact_yl_on)
        item.eliminateCondition =getEliminateCondition(data.tact_yl_off)
        item.alarmList = parseItemList(data.tact_yl_on)
        item.eliminateList = parseItemList(data.tact_yl_off)
      } else if (item.name === '云高') {
        item.alarm = data.tact_yg_on;
        item.eliminate = data.tact_yg_off;
        item.alarmTime = getAlarmTime(data.tact_yg_on)
        item.eliminateTime = getEliminateTime(data.tact_yg_off)
        item.alarmManner = getAlarmManner(data.tact_yg_on)
        item.alarmCondition =getAlarmCondition(data.tact_yg_on)
        item.eliminateCondition =getEliminateCondition(data.tact_yg_off)
        item.alarmList = parseItemList(data.tact_yg_on)
        item.eliminateList = parseItemList(data.tact_yg_off)
      } else if (item.name === '气温') {
        item.alarm = data.tact_wd_on;
        item.eliminate = data.tact_wd_off;
        item.alarmTime = getAlarmTime(data.tact_wd_on)
        item.eliminateTime = getEliminateTime(data.tact_wd_off)
        item.alarmManner = getAlarmManner(data.tact_wd_on)
        item.alarmCondition =getAlarmCondition(data.tact_wd_on)
        item.eliminateCondition =getEliminateCondition(data.tact_wd_off)
        item.alarmList = parseItemList(data.tact_wd_on)
        item.eliminateList = parseItemList(data.tact_wd_off)
      } else if (item.name === '湿度') {
        item.alarm = data.tact_sd_on;
        item.eliminate = data.tact_sd_off;
        item.alarmTime = getAlarmTime(data.tact_sd_on)
        item.eliminateTime = getEliminateTime(data.tact_sd_off)
        item.alarmManner = getAlarmManner(data.tact_sd_on)
        item.alarmCondition =getAlarmCondition(data.tact_sd_on)
        item.eliminateCondition =getEliminateCondition(data.tact_sd_off)
        item.alarmList = parseItemList(data.tact_sd_on)
        item.eliminateList = parseItemList(data.tact_sd_off)
      } else if (item.name === '小时雨量') {
        item.alarm = data.tact_xsyl_on;
        item.eliminate = data.tact_xsyl_off;
        item.alarmTime = getAlarmTime(data.tact_xsyl_on)
        item.eliminateTime = getEliminateTime(data.tact_xsyl_off)
        item.alarmManner = getAlarmManner(data.tact_xsyl_on)
        item.alarmCondition =getAlarmCondition(data.tact_xsyl_on)
        item.eliminateCondition =getEliminateCondition(data.tact_xsyl_off)
        item.alarmList = parseItemList(data.tact_xsyl_on)
        item.eliminateList = parseItemList(data.tact_xsyl_off)
      }
    });

    console.log(tableDailyData.value)
  }
}

const tableDailyData =ref(
  [
    {
      name:'能见度',
     alarm:'',
     eliminate:'',
     alarmTime:'',
     eliminateTime:'',
     alarmManner:'',
     alarmCondition:'',
     eliminateCondition:'',
     alarmList:[],
     eliminateList:[]
    },
    {
      name:'风速',
      alarm:'',
      eliminate:'',
      alarmTime:'',
      eliminateTime:'',
      alarmManner:'',
      alarmCondition:'',
      eliminateCondition:'',
      alarmList:[],
      eliminateList:[]
    },
    {
      name:'大气电场',
      alarm:'',
      eliminate:'',
      alarmTime:'',
      eliminateTime:'',
      alarmManner:'',
      alarmCondition:'',
      eliminateCondition:'',
      alarmList:[],
      eliminateList:[]
    },
    {
      name:'云量',
      alarm:'',
      eliminate:'',
      alarmTime:'',
      eliminateTime:'',
      alarmManner:'',
      alarmCondition:'',
      eliminateCondition:'',
      alarmList:[],
      eliminateList:[]
    },
    {
      name:'云高',
      alarm:'',
      eliminate:'',
      alarmTime:'',
      eliminateTime:'',
      alarmManner:'',
      alarmCondition:'',
      eliminateCondition:'',
      alarmList:[],
      eliminateList:[]
    },
    {
      name:'气温',
      alarm:'',
      eliminate:'',
      alarmTime:'',
      eliminateTime:'',
      alarmManner:'',
      alarmCondition:'',
      eliminateCondition:'',
      alarmList:[],
      eliminateList:[]
    },
    {
      name:'湿度',
      alarm:'',
      eliminate:'',
      alarmTime:'',
      eliminateTime:'',
      alarmManner:'',
      alarmCondition:'',
      eliminateCondition:'',
      alarmList:[],
      eliminateList:[]
    },
    {
      name:'小时雨量',
      alarm:'',
      eliminate:'',
      alarmTime:'',
      eliminateTime:'',
      alarmManner:'',
      alarmCondition:'',
      eliminateCondition:'',
      alarmList:[],
      eliminateList:[]
    }
  ]
)



onMounted(() => {
  getAllRgDataList()
  setTimeout(() => {
    getList()
  }, 1000);

})

const dailyData = ref([])
const taskData = ref([])
function convertTimestampToDateTime(timestamp) {
  const date = new Date(timestamp * 1000); // JavaScript 的 Date 需要毫秒级时间戳
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以加 1
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
const rules = ref<any>(
  {
    name: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
    startTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
    endTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }],
  }
);
const dialog = reactive<any>({
  visible: false,
  title: '',
  isMode: true
});

const dialogTask = reactive<any>({
  visible: false,
  title: '',
  isMode: true
});

const dailyForm = ref<any>({
  relationship: "1",
  cycle:"",
  manner:""
});

const taskForm = ref<any>({
  relationship: "1",
  cycle:"",
  manner:"",
  name:"",
  startTime:"",
  endTime:"",
  type:""
});


/** 修改按钮操作 */
const handleUpdateTask = async (row?: any) => {
  reset();
  dialogTask.visible = true;
  dialogTask.title = "策略管理";
  dialogTask.isMode = false;
}

const getAlarmCondition = (itemValue) => {
  if (itemValue === '1|1|0') {
    const time = itemValue.split('|');
    return time[0]
  }else if (typeof itemValue === 'string') {
    const alarm = itemValue.split(';');
    const time = alarm[0].split('|');
    return time[0]
  }

  return '0';
}

const getEliminateCondition = (itemValue) => {
  if (itemValue === '0|15') {
    const time = itemValue.split('|');
    return time[0]
  }else if (typeof itemValue === 'string') {
    const alarm = itemValue.split(';');
    const time = alarm[0].split('|');
    return time[0]
  }
  return '0';
}

const getAlarmManner = (itemValue)=>{
  if (itemValue === '1|1|0') {
    const time = itemValue.split('|');
    return time[2]
  }else if (typeof itemValue === 'string') {
    const alarm = itemValue.split(';');
    const time = alarm[0].split('|');
    return time[2]
  }

  return '';
}
const getAlarmTime = (itemValue)=>{
  if (itemValue === '1|1|0') {
    const time = itemValue.split('|');
    return time[1]
  }else if (typeof itemValue === 'string') {
    const alarm = itemValue.split(';');
    const time = alarm[0].split('|');
    return time[1]
  }

  return '';
}
const getEliminateTime = (itemValue)=>{
  if (itemValue === '0|15') {
    const time = itemValue.split('|');
    return time[1]
  }else if (typeof itemValue === 'string') {
    const alarm = itemValue.split(';');
    const time = alarm[0].split('|');
    return time[1]
  }
  return '';
}

const getAlarmMannerItemValue = (itemValue) => {
  if(itemValue==='0'){
    return '字幕提示'
  }else if(itemValue==='1'){
   return '声音提示'
  }
  return ''
}

const parseItemList = (itemValue) => {
  if (itemValue === '1|1|0'||itemValue === '0|15') {
    return [];
  }
  if (typeof itemValue === 'string') {
    const alarm = itemValue.split(';');
    const data = []
    for (var i = 1; i < alarm.length; i++) {
      data.push(getItemList(alarm[i]))
    }
    return data;
  }
  return [];

}

const parseItemValue = (itemValue) => {
  if (itemValue === '1|1|0'||itemValue === '0|15') {
    return '';
  }
  if (typeof itemValue === 'string') {
    const alarm = itemValue.split(';');
    let value = ''; // 初始化 value 为一个空字符串
    for (var i = 1; i < alarm.length; i++) { // 循环从数组的第二个元素开始
      if(i==1){
        value += getItemValue(alarm[i]) +' ';
      }else {
        value +=getCondition(alarm[0]) +' '+getItemValue(alarm[i]) +' ';
      }

    }
    // 如果需要在最后的结果中没有尾随空格，可以使用 trimEnd() 方法
    return value.trimEnd();
  }
  return '';
}


const getCondition=(itemValue)=>{
  const [element, operator, value] = itemValue.split('|');
  if(element==='0'){
    return '并且'
  }else if(element==='1'){
    return '或者'
  }else {
    return ''
  }
}

const getItemList=(itemValue)=>{
  const [element, operator, value] = itemValue.split('|');
  return {element:findDataName(element),operator:operatorDataName(operator),valueName:value}
}

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

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: 2,
    label: '=',
  },
  {
    value: 3,
    label: '≠',
  }
]

// 查询所有人工要素字典表
const elementList =ref<any>([])
const getAllRgDataList = async () => {
  const { data } = await getRgDataList();
  elementList.value = data.list
};
const findDataName = (id) => {
  const item = elementList.value?.find(item => item.data_id == parseInt(id));
  if (item) {
    return  item.data_name;
  } else {
    return ''
  }
};

const itemData = ref({})
/** 修改按钮操作 */
const handleUpdate = async (row?: any) => {
  itemData.value = row
  dialog.visible = true;
  dialog.title = "策略管理";
  dialog.isMode = false;
}


/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
  dailyForm.value = { ...dailyForm };
  formRef.value?.resetFields();
}





const formRef = ref<any>();
const formInline = ref<any>({

})

/** 提交按钮 */
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {

    }
  });
}

const radio1 = ref('日常策略')

const processTableData = ref([]);

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "name", label: "策略名称"},
  { prop: "alarm", label: "告警条件"},
  { prop: "eliminate", label: "消警条件" },
  { prop: "alarmTime", label: "告警时间" },
  { prop: "eliminateTime", label: "消警时间" },
  { prop: "alarmManner", label: "告警方式" },
  { prop: "operation", label: "操作", width:150,align: 'center' }
]);

const processTableData2 = ref([

]);

// 表格配置项
const columns2 = reactive<ColumnProps[]>([
  { prop: "tact_name", label: "任务名称"},
  { prop: "tact_begin_dt_i", label: "开始时间"},
  { prop: "tact_end_dt_i", label: "结束时间" },
  { prop: "tact_njd_on", label: "能见度" },
  { prop: "tact_fs_on", label: "风速" },
  { prop: "tact_dqdc_on", label: "大气电场" },
  { prop: "tact_yl_on", label: "云量" },
  { prop: "tact_yg_on", label: "云高" },
  { prop: "tact_wd_on", label: "气温" },
  { prop: "tact_sd_on", label: "湿度" },
  { prop: "tact_xsyl_on", label: "降水" },
  { prop: "l", label: "启停" }
]);


const processTableData3 = ref([

]);

// 表格配置项
const columns3 = reactive<ColumnProps[]>([
  { prop: "element", label: "消警要素"},
  { prop: "operator", label: "消警条件"},
  { prop: "valueName", label: "消警阈值" },
  // { prop: "operation", label: "操作", width:100,align: 'center' }
]);

const processTableData4 = ref([

]);

// 表格配置项
const columns4 = reactive<ColumnProps[]>([
  { prop: "element", label: "消警要素"},
  { prop: "operator", label: "消警条件"},
  { prop: "valueName", label: "消警阈值" },
  // { prop: "operation", label: "操作", width:100,align: 'center' }
]);
</script>

<style scoped>
.table-box{
  height: 100%;
}

.flex-center{
  display: flex;
  align-items: center
}

.tactics .el-form-item--default {
  margin-bottom: 0px;
}
</style>