no message

package.json

@@ -18,8 +18,11 @@
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
     "@fullcalendar/core": "^6.1.11",
+    "@fullcalendar/interaction": "^6.1.11",
     "@fullcalendar/resource": "^6.1.11",
+    "@fullcalendar/resource-timegrid": "^6.1.11",
     "@fullcalendar/resource-timeline": "^6.1.11",
+    "@fullcalendar/vue3": "^6.1.11",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.6.1",
     "axios": "0.27.2",

src/components/GanttChart/index.vue

@@ -12,36 +12,31 @@
         <el-option v-for="item in storeData.options" :key="item.id" :value="item.id" :label="item.name" />
       </el-select>
     </el-form-item>
-    <el-form-item style="float:right">
+    <el-form-item style="float:right; margin: 0">
       <el-button type="primary" plain icon="Plus" @click="getDetail()">新增预设</el-button>
     </el-form-item>
   </el-form>
-  <div class="timer">
-    <div class="item" v-for="(item, index) in data.timeList" :key="item">
-      <div class="value">
-        <span>{{ item.time[0].slice(0, 5) }}</span>
-        <span class="solid"></span>
-      </div>
-      <draggable class="label_box" v-model="item.list" group="componentGroup" :item-key="index.toString()"
-        :move="onMove" @end="onEnd">
+  <div class="chart">
+    <div class="time" v-for="item in data.timeList" :key="item">
+      <div class="label">{{ item }}:00</div>
+      <div class="line" />
+    </div>
+    <div class="grid">
+      <draggable class="label_box" v-model="data.list" group="componentGroup" item-key="item" :move="onMove"
+        @end="onEnd" chosen-class="chosenClass">
         <template #item="{ element, index }">
-          <div @mousedown.stop style="width: 100%">
+          <div :style="{
+        display: getDisplay(element), top: getTop(element), left: getLeft(element),
+        height: getHeight(element), width: getWidth(element)
+      }" class="grid-item" @mousedown.stop>
             <el-popover placement="bottom" trigger="click" width="300px" popper-class="popper"
               :popper-style="popperStyle" :hide-after="0">
               <div class="title">
-                <h2>{{ props.type === 'scene' ? element.takeName : element.name }}</h2>
+                <h2>{{ element.name }}</h2>
                 <div style="display:flex; justify-content: space-between;">
-                  <div v-if="props.type === 'scene'">
-                    <span v-if="element.listDate">{{ element.listDate.startTime }} - {{ element.listDate.endTime }}</span>
-                  </div>
-                  <div v-else>
-                    <div v-if="element.listDate">{{ element.listDate.startTime.split(' ')[0] }}</div>
-                    <div v-if="element.listDate">
-                      {{ element.listDate.startTime.split(' ')[1] }} - {{ element.listDate.endTime.split(' ')[1] }}
-                    </div>
-                  </div>
+                  {{ element.startTime }} - {{ element.endTime }}
                   <div style="display:flex; align-items: center">
-                    <el-icon style="margin-right: 10px" @click="getDetail({...element, disabled: true})">
+                    <el-icon style="margin-right: 10px" @click="getDetail({ ...element, disabled: true })">
                       <Edit />
                     </el-icon>
                     <el-icon @click="getDelete(element)">
@@ -56,7 +51,10 @@
                 <span>当前状态：{{ proxy.selectDictLabel(sys_change_status, element.status) }}</span>
               </div>
               <template #reference>
-                <span class="label">{{ props.type === 'scene' ? element.takeName : element.name }}</span>
+                <div style="height: 100%">
+                  <div>{{ element.startTime }} - {{ element.endTime }}</div>
+                  <div>{{ element.name }}</div>
+                </div>
               </template>
             </el-popover>
           </div>
@@ -86,33 +84,9 @@ const props = defineProps({
 })
 
 const data = reactive({
-  timeList: [
-    { time: ['00:00:00', '01:00:00'], list: [] },
-    { time: ['01:00:00', '02:00:00'], list: [] },
-    { time: ['02:00:00', '03:00:00'], list: [] },
-    { time: ['03:00:00', '04:00:00'], list: [] },
-    { time: ['04:00:00', '05:00:00'], list: [] },
-    { time: ['05:00:00', '06:00:00'], list: [] },
-    { time: ['06:00:00', '07:00:00'], list: [] },
-    { time: ['07:00:00', '08:00:00'], list: [] },
-    { time: ['08:00:00', '09:00:00'], list: [] },
-    { time: ['09:00:00', '10:00:00'], list: [] },
-    { time: ['10:00:00', '11:00:00'], list: [] },
-    { time: ['11:00:00', '12:00:00'], list: [] },
-    { time: ['12:00:00', '13:00:00'], list: [] },
-    { time: ['13:00:00', '14:00:00'], list: [] },
-    { time: ['14:00:00', '15:00:00'], list: [] },
-    { time: ['15:00:00', '16:00:00'], list: [] },
-    { time: ['16:00:00', '17:00:00'], list: [] },
-    { time: ['17:00:00', '18:00:00'], list: [] },
-    { time: ['18:00:00', '19:00:00'], list: [] },
-    { time: ['19:00:00', '20:00:00'], list: [] },
-    { time: ['20:00:00', '21:00:00'], list: [] },
-    { time: ['21:00:00', '22:00:00'], list: [] },
-    { time: ['22:00:00', '23:00:00'], list: [] },
-    { time: ['23:00:00', '00:00:00'], list: [] },
-    { time: ['00:00:00', '01:00:00'], list: [] }
-  ]
+  timeList: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
+  list: [],
+  number: {}
 })
 
 // 时间轴表单
@@ -120,32 +94,6 @@ const organizationIds = ref(null)
 const storeId = ref(null)
 const nowDate = ref(new Date(props.date))
 
-// 时间段
-function getTime() {
-  for (let i = 0; i <= data.timeList.length - 1; i++) {
-    data.timeList[i].timer = []
-    let start = proxy.hoursToSeconds(data.timeList[i].time[0])
-    let end = proxy.hoursToSeconds(data.timeList[i].time[1])
-    if (props.type === 'setting') {
-      let y = nowDate.value.getFullYear()
-      let m = nowDate.value.getMonth()
-      let d = nowDate.value.getDate()
-      start = new Date(y, m, d).getTime() + start * 1000
-      end = new Date(y, m, d).getTime() + end * 1000
-      if (i === 23) {
-        end = start + 3600000
-      }
-    } else {
-      if (i === 23) {
-        end = start + 3600
-      }
-    }
-    data.timeList[i].timer[0] = start
-    data.timeList[i].timer[1] = end
-  }
-}
-getTime()
-
 const popperStyle = ref({
   padding: 0,
   borderRadius: '10px'
@@ -153,7 +101,6 @@ const popperStyle = ref({
 
 // 时间轴
 function getTimeList() {
-  data.timeList.map(i => i.list = [])
   if (props.type === 'scene') {
     sceneTime({ storeId: storeId.value }).then(res => {
       modal(res)
@@ -166,34 +113,53 @@ function getTimeList() {
 }
 
 const modal = (res) => {
-  res.data.forEach(i => {
-    i.listDate.forEach(j => {
-      let start = null
-      let end = null
-      if (props.type === 'scene') {
-        start = proxy.hoursToSeconds(j.startTime)
-        end = proxy.hoursToSeconds(j.endTime)
-      } else {
-        start = new Date(j.startTime).getTime()
-        end = new Date(j.endTime).getTime()
-      }
-      const list = data.timeList.filter((e, index) => {
-        let st = e.timer[0]
-        let en = e.timer[1]
-        if (index !== 24) {
-          return start >= st && end <= en || start <= st && end >= en || start > st && start < en || end > st && end < en
-        }
-      })
-      list.map(e => {
-        e.list.push({ ...i, listDate: j })
+  data.list = []
+  data.number = []
+  if (res.code === 0 && res.data) {
+    res.data.forEach(i => {
+      i.listDate.forEach(j => {
+        data.list.push({
+          startTime: props.type === 'setting' ? j.startTime.split(' ')[1] : j.startTime,
+          endTime: props.type === 'setting' ? j.endTime.split(' ')[1] : j.endTime,
+          timeId: j.timeId,
+          id: i.id,
+          deviceIds: i.deviceIds,
+          name: i.name ? i.name : i.takeName,
+          status: i.status,
+          storeId: i.storeId,
+          sort: 0,
+          index: 0
+        })
       })
     })
-  })
+    data.list.sort((a, b) => proxy.hoursToSeconds(a.startTime) - proxy.hoursToSeconds(b.startTime))
+    for (let i = 0; i < data.list.length; i++) {
+      if (data.list[i + 1] !== undefined) {
+        let st = proxy.hoursToSeconds(data.list[i + 1].startTime)
+        let start = proxy.hoursToSeconds(data.list[i].startTime)
+        let end = proxy.hoursToSeconds(data.list[i].endTime)
+        if (st >= start && st < end) {
+          data.list[i + 1].sort = data.list[i].sort
+          data.list[i + 1].index = data.list[i].index + 1
+        } else {
+          data.list[i + 1].sort = data.list[i].sort + 1
+          data.list[i + 1].index = 0
+        }
+      }
+    }
+    for (let i = 0; i < data.list.length; i++) {
+      const index = data.list[i].sort
+      if (data.number[index]) {
+        data.number[index].push(data.list[i])
+      } else {
+        data.number[index] = [data.list[i]]
+      }
+    }
+  }
 }
 
 watch(() => props.date, (val) => {
   nowDate.value = val
-  getTime()
   getTimeList()
 })
 
@@ -219,7 +185,8 @@ function onEnd(params) {
 
 // 删除
 const getDelete = (row) => {
-  proxy.$modal.confirm(`是否删除预设名称为：${row.takeName}的数据?`).then(() => {
+  let name = row.name ? row.name : row.takeName
+  proxy.$modal.confirm(`是否删除预设名称为：${name}的数据?`).then(() => {
     if (props.type === 'setting') {
       removeSetting({ id: row.id }).then(res => {
         if (res.code === 0) {
@@ -252,7 +219,6 @@ watch(organizationIds, (val) => {
 })
 
 watch(() => storeData.storeId, (val) => {
-  data.timeList.map(i => i.list = [])
   storeId.value = val
 })
 
@@ -280,61 +246,83 @@ const storeName = (val) => {
   let e = storeData.options.find(i => i.id == val)
   return e ? e.name : val
 }
+
+const getHeight = (val) => {
+  if (val.startTime) {
+    let e = (proxy.hoursToSeconds(val.endTime) - proxy.hoursToSeconds(val.startTime)) / 3600
+    return e < 0.5 ? '20px' : e * 100 + 'px'
+  }
+}
+
+const getTop = (val) => {
+  if (val.startTime) {
+    return proxy.hoursToSeconds(val.startTime) / 3600 * 100 + 'px'
+  }
+}
+
+const getDisplay = (val) => {
+  return val.startTime ? '' : 'none'
+}
+
+const getWidth = (val) => {
+  if (val.startTime) {
+    let e = 100 / data.number[val.sort].length + '%'
+    return `calc(${e} - 10px)`
+  }
+}
+
+const getLeft = (val) => {
+  if (val.startTime) {
+    return val.index * (100 / data.number[val.sort].length) + '%'
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-.timer {
-  display: flex;
-  flex-direction: column;
-  width: calc(100% - 50px);
-  margin-left: 50px;
+.chart {
+  height: 100vh;
   overflow-y: auto;
-  padding: 20px 20px 20px 50px;
+  position: relative;
+  margin-left: 20px;
   user-select: none;
 
-  .item {
+  .time {
     width: 100%;
     height: 100px;
-    line-height: 100px;
-    position: relative;
-    border-left: 1px solid #e3e3e3;
     display: flex;
-    align-items: center;
-
-    .value {
-      width: 100px;
-      margin-left: -50px;
-
-      .solid {
-        border-top: 1px solid #e3e3e3;
-        width: 100%;
-        position: absolute;
-        top: 50px;
-        left: 0;
-      }
+
+    .label {
+      width: 50px;
+      height: 100%;
+      border-right: 1px solid #e3e3e3;
+      line-height: 100px
     }
 
+    .line {
+      width: calc(100% - 50px);
+      height: 1px;
+      background-color: #e3e3e3;
+    }
+  }
+
+  .grid {
+    position: absolute;
+    top: 0;
+    left: 50px;
+    width: calc(100% - 50px);
+
     .label_box {
-      display: flex;
-      width: 100%;
-      z-index: 99;
+      height: 2400px
+    }
+
+    .grid-item {
+      background-color: rgb(57 121 249 / 10%);
       position: absolute;
-      top: 70px;
-
-      .label {
-        background-color: #ebf1fe;
-        color: #3979F9;
-        height: 60px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-left: 4px solid #3979F9;
-        border-radius: 4px;
-        margin-right: 10px;
-        font-size: 12px;
-        padding: 0 20px;
-        flex: 1;
-      }
+      margin: 0 5px;
+      border-left: 4px solid #3979F9;
+      border-radius: 4px;
+      overflow: hidden;
+      color: #337ecc;
     }
   }
 }
@@ -361,6 +349,10 @@ const storeName = (val) => {
 }
 
 .search {
-  padding-left: 100px;
+  padding-left: 70px;
+}
+
+.chosenClass {
+  background: none !important;
 }
 </style>

src/views/content/list/index.vue

@@ -60,7 +60,7 @@
           <el-input v-model="data.dialogForm.name" disabled />
         </el-form-item>
         <el-form-item label="音频分类：" prop="sceneId">
-          <el-select v-model="data.dialogForm.sceneId" placeholder="请选择标签分类" clearable>
+          <el-select v-model="data.dialogForm.sceneId" placeholder="请选择音频分类" clearable>
             <el-option v-for="item in audioClassData.options" :key="item.id" :value="item.id" :label="item.name" />
           </el-select>
         </el-form-item>

src/views/content/scene/index.vue

@@ -20,7 +20,7 @@
           </div>
         </template>
       </draggable>
-      <pagination v-show="total > 10" layout="prev, pager, next" :background="false" :total="total"
+      <pagination v-show="total > 0" layout="prev, pager, next" :background="false" :total="total"
         v-model:page="data.form.pageNum" v-model:limit="data.form.pageSize" @pagination="getList" />
     </div>
     <div class="right">
@@ -238,6 +238,7 @@ draggable,
 }
 
 .chosenClass {
+  display: none;
   background: none !important;
 }
 </style>

src/views/content/setting/detail.vue

@@ -191,22 +191,6 @@ const data = reactive({
   business_store: []
 })
 
-// 传参
-const getAudioList = () => {
-  if (proxy.$route.query.audioList) {
-    let e = JSON.parse(proxy.$route.query.audioList)
-    data.form.audioList.push({
-      audioId: e.id,
-      audioName: e.name,
-      audioType: e.audioType,
-      categoryId: e.sceneId,
-      type: e.type,
-    })
-    getPushTime(e)
-  }
-}
-getAudioList()
-
 const getPushTime = (e) => {
   if (e.startTime) {
     let y = new Date().getFullYear()
@@ -222,6 +206,22 @@ const getPushTime = (e) => {
   }
 }
 
+// 传参
+const getAudioList = () => {
+  if (proxy.$route.query.audioList) {
+    var e = JSON.parse(proxy.$route.query.audioList)
+    data.form.audioList.push({
+      audioId: e.id,
+      audioName: e.name,
+      audioType: e.audioType,
+      categoryId: e.sceneId,
+      type: e.type,
+    })
+    getPushTime(e)
+  }
+}
+getAudioList()
+
 // 详情
 const getDetail = () => {
   let e = proxy.$route.query

src/views/content/setting/index.vue

@@ -82,7 +82,7 @@ const data = reactive({
   form: {
     pageNum: 1,
     pageSize: 10
-  },
+  }
 })
 
 // 日历
@@ -222,9 +222,8 @@ draggable,
 }
 
 .chosenClass {
+  display: none;
   background: none !important;
-  color: #3979F9 !important;
-  line-height: 60px;
 }
 
 .el-scrollbar {