xiaodou-ai-admin/src/pages/cvs/edge/plan.vue

<template>
<a-card title="计划模板" >
  <table-pro
    :service="AiboxCloudController.plan"
    :columns="columns"
    ref="tableProDom"
    @add="openModal"
  >
    <template #render="{ column, record }">
        <template v-if="column.key === 'planUse'">
          <a-space>
            <a-tag :color="planUseMap.get(record.planUse)?.color" >{{planUseMap.get(record.planUse)?.label}}</a-tag>
          </a-space>
        </template>
        <template v-if="column.key === 'action'">
          <a-popconfirm
            title="确定要删除这计划吗"
            ok-text="Yes"
            cancel-text="No"
            @confirm="delPlan(record.planNum)"
          >
            <a>删除</a>
          </a-popconfirm>
        </template>
      </template>
  </table-pro>
</a-card>

<modal-pro
  style="width: 800px;"
  label="新增工作计划"
  :open="state.visible"
  @cancel="state.visible = false"
  destroyOnClose
  @ok="onsubmitSchedule"
>
  <a-row  >
    <a-col  :span="4">计划名称:</a-col>
    <a-col ><a-input v-model:value="state.scheduleName"></a-input></a-col>
  </a-row>
  <a-row style="margin-top: 20px;" >
    <table border="" style="user-select: none;" >
      <thead>
        <tr>
          <td  width="100" :rowSpan="2" :colSpan="0" > 星期/时间</td>
          <td  colSpan="12" style='text-align: center' > 00:00-12:00</td>
          <td  colSpan="12" style='text-align: center' > 12:00-24:00</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td ></td>
          <td
            v-for="(item, index) in new Array(24).fill(1)"
            :key="index"
            width="25"
            :col-span="1"
          >
            {{index >= 10 ? index: "0" + index}}
          </td>
        </tr>
        <tr
          :key="i"
          v-for="(item , i) in new Array(7).fill(1)"
        >
         <th > 星期{{calcWeek(String(i + 1))}} </th>
         <td
            :col-span="1"
            v-for="(item, index) in new Array(24).fill(1)"
            :key="index"
            :time="JSON.stringify({
              week: String(i + 1),
              hour: calcTime(index)
            })"
            @mousedown="onMouseDown"
            @mouseenter="onMouseEnter"
            @mouseup="onMouseUp"
            style="cursor: pointer"
          ></td>
       </tr>
      </tbody>
    </table>
    <a-row style="margin-top: 16px; width: 100%" :gutter="[8, 8]" >
      <a-col> <a-row> <div style="width: 15px;height: 30px; border: 1px solid #ccc; margin-right: 5px" ></div> 未选</a-row> </a-col>
      <a-col> <a-row> <div style="width: 15px;height: 30px; background-color: skyblue; margin-right: 5px"  > </div> 已选</a-row> </a-col>
      <a-row  style="margin-top: 20px; width: 100%" >
        <a-col :span="24" :key="item.week" v-for="item in state.selectTime" >
          <a-row :gutter="[8, 8]">
            <a-col :span="4" >星期{{calcWeek(item.week)}}:</a-col>
            <a-col :span="20" >
              <a-row :guttr="[8, 2]" >
                <a-col style="margin-right: 5px;" v-for="_ in item.desc" :key="_" >{{_}}</a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-row>
  </a-row>
</modal-pro>
</template>
<script lang='ts'  setup >
import { AiboxCloudController } from '@/controller'
import { message } from 'ant-design-vue'
import { ref, reactive, onMounted, watch, onUnmounted } from 'vue'

const columns = [
  {
    title: '模版编号',
    dataIndex: 'planNum',
    key: 'planNum'
  },
  {
    title: '模版状态',
    dataIndex: 'planUse',
    key: 'planUse'
  },
  {
    title: '模板名称',
    dataIndex: 'planName',
    key: 'planName'
  },
  {
    title: '模板时间',
    dataIndex: 'planTime',
    key: 'planTime'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const weekMap = new Map([
  ['1', '一'],
  ['2', '二'],
  ['3', '三'],
  ['4', '四'],
  ['5', '五'],
  ['6', '六'],
  ['7', '天']
])
const calcWeek = (week: string) => weekMap.get(week)

const calcTime = (index: number) => index < 10 ? '0' + index : index

const calcLtTen = (time: number) => time < 10 ? `0${time}` : time

const tableProDom = ref()

const initSelectTime = [
  { week: '1', time: [], desc: [], value: '000000000000000000000000' },
  { week: '2', time: [], desc: [], value: '000000000000000000000000' },
  { week: '3', time: [], desc: [], value: '000000000000000000000000' },
  { week: '4', time: [], desc: [], value: '000000000000000000000000' },
  { week: '5', time: [], desc: [], value: '000000000000000000000000' },
  { week: '6', time: [], desc: [], value: '000000000000000000000000' },
  { week: '7', time: [], desc: [], value: '000000000000000000000000' }
]

const planUseMap = new Map([
  [0, { color: 'volcano', label: '未使用' }],
  [1, { color: 'green', label: '使用中' }]
])

const state = reactive({
  loading: false,
  visible: false,
  selectVisible: false, // 是否开始选择
  dataSource: [],
  selectTime: JSON.parse(JSON.stringify(initSelectTime)),
  scheduleName: ''
})

const delPlan = async (planNum: number) => {
  await AiboxCloudController.delPlan(planNum)
  tableProDom.value.reload()
}

watch(
  () => state.selectVisible,
  () => {
    const $r = state.selectTime.map(item => {
      if (!item.time.length) {
        item.desc = []
        return item
      }

      const sortArr = item.time.sort((a, b) => a - b)

      let len = 0

      let start = sortArr[len]

      const r = [[start]]

      let col = 0

      const _value = item.value.split('')

      _value[Number(start)] = '1'

      while (len < sortArr.length - 1) {
        if (Number(start) + 1 !== Number(sortArr[len + 1])) {
          col++
          r.push([])
        }
        start = sortArr[len + 1]
        r[col].push(start)
        _value[Number(start)] = '1'

        len++
      }

      item.value = _value.join('')

      item.desc = r.map(v => {
        const isTwentyThree = Number(v[v.length - 1]) === 23 ? -1 : Number(v[v.length - 1])

        if (v.length !== 1) {
          return `${calcLtTen(Number(v[0]))}: 00 ~ ${calcLtTen(isTwentyThree + 1)}: 00`
        } else {
          return `${calcLtTen(Number(v[0]))}: 00 ~ ${calcLtTen(isTwentyThree + 1)}: 00`
        }
      })

      return item
    })

    state.selectTime = $r

    // tableProDom.value.reload()
  }
)

const onMouseUp = () => {
  state.selectVisible = false
}

const onMouseEnter = (e: MouseEvent) => {
  if (!state.selectVisible) return
  e.target.style.backgroundColor = e.target.style.backgroundColor ? '' : 'skyblue'
  const cusAttr = JSON.parse(Array.from(e.target.attributes).find(item => item.name === 'time').nodeValue)
  const $r = state.selectTime.map(item => {
    if (item.week === cusAttr.week) {
      if (e.target.style.backgroundColor) {
        item.time.push(cusAttr.hour)
      } else {
        item.time = item.time.filter(_ => _ !== cusAttr.hour)
      }
      item.time = Array.from(new Set([...item.time]))
    }
    return item
  })
  state.selectTime = $r
}

const onMouseDown = (e) => {
  const cusAttr = JSON.parse(Array.from(e.target.attributes).find(item => item.name === 'time').nodeValue)

  e.target.style.backgroundColor = e.target.style.backgroundColor ? '' : 'skyblue'
  const $r = state.selectTime.map(item => {
    if (item.week === cusAttr.week) {
      if (e.target.style.backgroundColor) {
        item.time.push(cusAttr.hour)
      } else {
        item.time = item.time.filter(_ => _ !== cusAttr.hour)
      }

      item.time = Array.from(new Set([...item.time]))
    }
    return item
  })

  state.selectTime = $r
  state.selectVisible = true
}

const onsubmitSchedule = async () => {
  if (state.scheduleName === '' || state.scheduleName === undefined) {
    message.warn('请填写计划名称')
    return
  }
  const summary = state.selectTime.map((item, index) => item.desc.length ? `星期${calcWeek(String(index + 1))} ${item.desc}` : '').filter(_ => _)

  const $par = {
    operation: 1,
    planName: state.scheduleName,
    planTime: JSON.stringify(summary),
    planValue: state.selectTime.map((item, index) => item.value).join('')
  }

  await AiboxCloudController.addPlan($par)

  state.scheduleName = ''
  state.selectTime = JSON.parse(JSON.stringify(initSelectTime))

  state.visible = false
  tableProDom.value.reload()
}

const openModal = () => {
  state.selectTime = JSON.parse(JSON.stringify(initSelectTime))
  state.visible = true
}

onUnmounted(() => {
  document.removeEventListener('mouseup', () => {})
})

onMounted(async () => {
  document.addEventListener('mouseup', () => state.selectVisible = false)
})

</script>
<style lang='less' scoped >

</style>