plc_editor/src/views/CommandInfo.vue

<template>
  <div class="command-info">
    <div class="header">
      <div class="go-back" @click="router.push(`/project-info/${crtProject!.id}`)">
        <van-button size="small"><van-icon name="arrow-left" />返回</van-button>
      </div>
      <div class="btn-group">
        <van-button size="small" type="primary" @click="handleAddCommand('condition')">增加条件</van-button>
        <van-button size="small" type="primary" @click="handleAddCommand('delay')">增加延时</van-button>
        <van-button size="small" type="primary" @click="handleAddCommand('exec')">增加执行</van-button>
        <van-button size="small" type="danger" @click="handleAddCommand('del')">删除任务</van-button>
        <van-icon name="question-o" size="24" @click="showHelpDoc = true" />
      </div>
    </div>

    <div class="container">
      <div class="card-group" v-if="crtCommand!.stepList.length">
        <div class="card" v-for="(item, index) in crtCommand!.stepList">
          <div class="card-header">
            <div class="step">
              第
              <div class="num">{{ index + 1 }}</div>
              步
            </div>
            <div class="label">{{ textMap[item.type] }}</div>
          </div>
          <template v-if="item.type === 'condition' || item.type === 'exec'">
            <div class="item" v-for="(cItem, cIndex) in item.list">
              <div class="tip" v-show="cIndex !== 0 && item.type !== 'exec'">或</div>
              <div class="wrap">
                <div class="content">
                  <template v-if="cItem.type !== 'time'">
                    <van-field
                      v-model="cItem.label"
                      is-link
                      readonly
                      placeholder="请选择"
                      style="width: 30%"
                      @click="
                        showSelect(
                          cItem.label.includes('DI') || cItem.label.includes('AI') ? 'inputLabel' : 'outputLabel',
                          index,
                          cIndex,
                          'label'
                        )
                      "
                    />
                    <template v-if="cItem.label.includes('DI') || cItem.label.includes('DO')">
                      <van-field
                        v-model="cItem.value"
                        is-link
                        readonly
                        placeholder="请选择"
                        style="width: 70%"
                        @click="showSelect('commandValue', index, cIndex, 'value')"
                      />
                    </template>
                    <template v-if="cItem.label.includes('AI') || cItem.label.includes('AO')">
                      <van-field
                        v-if="item.type === 'condition'"
                        v-model="cItem.operation"
                        is-link
                        readonly
                        placeholder="请选择"
                        style="width: 35%"
                        @click="showSelect('operation', index, cIndex, 'operation')"
                      />
                      <div class="operation" v-if="item.type === 'exec'">=</div>
                      <van-field
                        v-model="cItem.value"
                        placeholder="请输入"
                        type="number"
                        :style="{ width: item.type === 'exec' ? '60%' : '35%' }"
                      />
                    </template>
                  </template>
                  <template v-else>
                    <van-field
                      v-model="cItem.label"
                      is-link
                      readonly
                      placeholder="请选择"
                      style="width: 60%"
                      @click="showSelect('timeLabel', index, cIndex, 'label')"
                    />
                    <van-field
                      v-model="cItem.value"
                      is-link
                      readonly
                      placeholder="请选择"
                      style="width: 40%"
                      @click="showSelect('timeValue', index, cIndex, 'value')"
                    />
                  </template>
                </div>
                <div class="del-icon">
                  <van-icon name="cross" @click="handleEditCommand('delChild', index, cIndex)" />
                </div>
              </div>
            </div>
          </template>

          <template v-else-if="item.type === 'delay'">
            <div class="delay-content">延时<van-stepper v-model="item.value" />秒</div>
          </template>
          <div class="btn-group">
            <template v-if="item.type === 'condition'">
              <van-button size="small" type="primary" @click="handleEditCommand('condition', index)"
                >增加条件</van-button
              >
              <van-button size="small" type="primary" @click="handleEditCommand('delay', index)">增加定时</van-button>
            </template>
            <van-button
              v-if="item.type === 'exec'"
              size="small"
              type="primary"
              @click="handleEditCommand('exec', index)"
              >添加执行</van-button
            >
            <van-button size="small" type="danger" @click="handleEditCommand('del', index)"
              >&nbsp;删除&nbsp;</van-button
            >
          </div>
        </div>
      </div>
      <div class="empty" v-else>当前没有可执行任务</div>
      <div class="footer" v-if="crtCommand!.stepList.length">
        <div class="tip">如果条件不满足，将会从第一步开始重新执行</div>
        <van-button type="primary" :disabled="!crtCommand!.stepList.length" @click="handleSaveCommand()"
          >保存</van-button
        >
      </div>
    </div>

    <van-popup v-model:show="showOptionsPicker" destroy-on-close round position="bottom">
      <van-picker
        v-if="pickerType !== 'timeValue'"
        v-model="pickerValue"
        :columns="columnsMap[pickerType]"
        @cancel="showOptionsPicker = false"
        @confirm="onConfirm"
      />
      <van-time-picker
        v-else
        @cancel="showOptionsPicker = false"
        @confirm="onConfirm"
        v-model="currentTime"
        title="选择时间"
      />
    </van-popup>

    <van-calendar v-model:show="showCalendar" type="range" @confirm="calendarConfirm" />

    <van-popup v-model:show="showHelpDoc" round :style="{ width: '80%' }">
      <div class="help-label">帮助文档</div>
      <div class="help-content">
        &nbsp;&nbsp;&nbsp;&nbsp;增加条件：意思为增加设备运行的条件，当设备满足设置的条件后才可执行其他操作，可设置DI状态、AI数值范围，以及定时触发。<br />
        &nbsp;&nbsp;&nbsp;&nbsp;增加执行：增加执行为控制设备做某些操作，可单独添加，也可在设置条件和延时后添加。<br />
        &nbsp;&nbsp;&nbsp;&nbsp;注意：条件和延时下面需添加执行才能完成自动化控制。整个运行逻辑为从上往下顺序执行。
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { useGlobalStore } from '@/stores/global'
import type { CommandType, ConditionType, ProjectType } from '@/types/global'
import { deepClone } from '@/utils/tools'
import { storeToRefs } from 'pinia'
import { v4 as uuid4 } from 'uuid'
import { showConfirmDialog } from 'vant'

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

const { projectList } = storeToRefs(useGlobalStore())

const crtCommand = ref<CommandType>()
const crtProject = ref<ProjectType>()

const textMap: Record<string, string> = {
  condition: '条件',
  delay: '延时',
  exec: '执行'
}

watch(
  () => route,
  () => {
    const project = projectList.value.find((item) => item.id === route.params.pid)
    crtProject.value = project
    if (project) {
      const command = project.commandList!.find((item) => item.id === route.params.id) || []
      crtCommand.value = deepClone(command) as CommandType
      console.log(crtCommand.value)
    }
  },
  {
    deep: true,
    immediate: true,
    once: true
  }
)
const showOptionsPicker = ref(false)
const pickerValue = ref([])
const currentTime = ref(['00', '00'])
const pickerType = ref('')
const columnsMap: Record<string, any> = {
  inputLabel: [
    { text: 'DI1', value: 'DI1' },
    { text: 'DI2', value: 'DI2' },
    { text: 'AI1', value: 'AI1' },
    { text: 'AI2', value: 'AI2' }
  ],
  outputLabel: [
    { text: 'DO1', value: 'DO1' },
    { text: 'DO2', value: 'DO2' },
    { text: 'AO1', value: 'AO1' },
    { text: 'AO2', value: 'AO2' }
  ],
  commandValue: [
    { text: '闭合', value: '闭合' },
    { text: '打开', value: '打开' }
  ],
  operation: [
    { text: '≥', value: '≥' },
    { text: '≤', value: '≤' },
    { text: '=', value: '=' },
    { text: '≠', value: '≠' }
  ],
  timeLabel: [
    { text: '每天', value: '每天' },
    { text: '仅一次', value: '仅一次' },
    { text: '周一', value: '周一' },
    { text: '周二', value: '周二' },
    { text: '周三', value: '周三' },
    { text: '周四', value: '周四' },
    { text: '周五', value: '周五' },
    { text: '周六', value: '周六' },
    { text: '周日', value: '周日' },
    { text: '自定义', value: '自定义' }
  ]
}

type ChangeInfo = {
  stepIndex: number
  index: number
  key: keyof ConditionType
}

const changeInfo: ChangeInfo = {
  stepIndex: 0,
  index: 0,
  key: 'label' as keyof ConditionType
}
const showSelect = (colType: string, stepIndex: number, index: number, key: keyof ConditionType) => {
  pickerType.value = colType
  changeInfo.stepIndex = stepIndex
  changeInfo.index = index
  changeInfo.key = key
  showOptionsPicker.value = true
}

const showCalendar = ref(false)
const onConfirm = () => {
  console.log(pickerValue.value)
  if (crtCommand.value) {
    if (pickerType.value !== 'timeValue') {
      if (pickerValue.value.length && pickerValue.value[0] === '自定义') {
        showCalendar.value = true
      } else {
        crtCommand.value.stepList[changeInfo.stepIndex].list![changeInfo.index][changeInfo.key] = pickerValue.value[0]
        if (pickerType.value.includes('AI') || pickerType.value.includes('DI')) {
          crtCommand.value.stepList[changeInfo.stepIndex].list![changeInfo.index].value = ''
        }
      }
    } else {
      crtCommand.value.stepList[changeInfo.stepIndex].list![changeInfo.index][changeInfo.key] =
        currentTime.value.join(':')
    }
    currentTime.value = ['00', '00']
    pickerValue.value = []
  }
  showOptionsPicker.value = false
}

const calendarConfirm = (vals: any) => {
  const [start, end] = vals
  if (!crtCommand.value) return
  crtCommand.value.stepList[changeInfo.stepIndex].list![changeInfo.index][changeInfo.key] =
    `${new Date(start).toLocaleDateString()}-${new Date(end).toLocaleDateString()}`
  showCalendar.value = false
}

const handleEditCommand = (type: string, index: number, cIndex?: number) => {
  if (!crtCommand.value) return
  const x = crtCommand.value.x
  console.log(crtCommand.value.stepList)
  let y = 0
  const crtStep = crtCommand.value.stepList[index]
  if (crtStep.type === 'delay') {
    y = crtCommand.value.y + 100
  } else {
    y = crtCommand.value.y + 100 * crtCommand.value.stepList[index].list!.length
  }
  switch (type) {
    case 'condition':
      crtCommand.value.stepList[index].list!.push({
        id: '' + Date.now(),
        type: 'input',
        label: 'DI1',
        value: '',
        x,
        y
      })
      break
    case 'exec':
      crtCommand.value.stepList[index].list!.push({
        id: '' + Date.now(),
        type: 'output',
        label: 'DO1',
        value: '',
        x,
        y
      })
      break
    case 'delay':
      crtCommand.value.stepList[index].list!.push({
        id: uuid4(),
        type: 'time',
        label: '每天',
        operation: '=',
        value: '',
        x,
        y
      })
      break
    case 'delChild':
      crtCommand.value.stepList[index].list!.splice(cIndex!, 1)
      break
    case 'del':
      crtCommand.value.stepList.splice(index, 1)
      break
  }
}

const handleAddCommand = (type: string) => {
  if (!crtCommand.value) return
  if (type === 'del') {
    if (crtProject.value && crtCommand.value) {
      showConfirmDialog({
        title: '提示',
        message: '确定要删除这个任务吗'
      })
        .then(() => {
          // on confirm
          console.log(crtProject.value, crtCommand.value)
          crtProject.value!.commandList = crtProject.value!.commandList.filter(
            (item) => crtCommand.value?.id !== item.id
          )
          router.push(`/project-info/${crtProject.value!.id}`)
        })
        .catch(() => {
          // on cancel
        })
    }
    return
  }
  const endCMD = crtCommand.value.stepList[crtCommand.value.stepList.length - 1]
  const isExistTime = endCMD?.list?.some((item) => item.type === 'time')
  const x = endCMD?.x || crtCommand.value.x
  console.log(endCMD, x)

  const y = 100 + crtProject.value!.commandList.length * 2000
  switch (type) {
    case 'condition':
      crtCommand.value.stepList.push({
        id: '' + Date.now(),
        type: 'condition',
        list: [],
        x: isExistTime ? (endCMD.x || 0) + 3000 : x + 400,
        y
      })
      break
    case 'delay':
      crtCommand.value.stepList.push({
        id: '' + Date.now(),
        type: 'delay',
        value: '1000',
        unit: 's',
        x: isExistTime ? (endCMD.x || 0) + 3000 : x + 400,
        y
      })
      break
    case 'exec':
      crtCommand.value.stepList.push({
        id: '' + Date.now(),
        type: 'exec',
        list: [],
        x: isExistTime ? (endCMD.x || 0) + 3000 : x + 400,
        y
      })
      break
  }
}

const handleSaveCommand = () => {
  console.log(crtCommand.value)

  let isExistNull = false
  crtCommand.value!.stepList.forEach((item) => {
    if (item.type === 'delay') {
      if (item.value === '' || item.value === null || item.value === undefined) {
        isExistNull = true
      }
    } else {
      item.list!.forEach((cItem) => {
        type keyType = keyof ConditionType
        for (let key in cItem) {
          if (cItem[key as keyType] === '' || cItem[key as keyType] === null || cItem[key as keyType] === undefined) {
            isExistNull = true
          }
        }
      })
    }
  })
  if (isExistNull) return showFailToast('请填写完整')
  const project = projectList.value.find((item) => item.id === route.params.pid)
  if (project) {
    const command = project.commandList!.find((item) => item.id === route.params.id)
    if (command) {
      command.stepList = crtCommand.value!.stepList
      showSuccessToast('保存成功')
    }
  }
}

const showHelpDoc = ref(false)
</script>

<style scoped>
.command-info {
  padding: 16px 0;
  height: 100%;
  overflow: hidden;
}
.header {
  padding: 0 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card {
  padding: 16px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 4px;
  background: #fff;
}
.card-header {
  display: flex;
  justify-content: space-between;
  color: #666;
}
.container {
  padding: 0 16px;
  height: calc(100% - 34px);
  overflow: auto;
}
.step {
  display: flex;
  align-items: center;
}
.step .num {
  margin: 0 4px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  color: #4fb5f9;
  border: 1px solid #4fb5f9;
}
.card .wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  /* margin-bottom: 8px; */
}
.tip {
  margin: 0 0 8px 8px;
  width: 100%;
  color: #999;
}
.card .item .content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card .content .operation {
  margin: 0 8px;
}
.card .item .del-icon {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ff0000;
  border-radius: 50%;
  color: #ff0000;
}
.card .item .van-cell {
  border: 1px solid #ccc;
  border-radius: 4px;
}
.card .delay-content {
  padding: 16px;
}
.van-stepper {
  margin: 0 16px;
}
.empty {
  height: 400px;
  text-align: center;
  line-height: 400px;
  font-size: 24px;
  color: #999;
}
.footer {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.footer .van-button {
  width: 70%;
}
.help-label {
  margin: 24px 16px 16px;
  font-size: 18px;
  font-weight: 600;
}
.help-content {
  padding: 0 24px 24px;
  line-height: 2;
}
</style>