即时/定时发布

src/assets/styles/adminIndex.scss

@@ -151,7 +151,7 @@
   }
 
   .el-input__inner {
-    width: 336px;
+    // width: 336px;
     height: 40px;
     line-height: 40px;
   }

src/router/routers.js

@@ -165,12 +165,8 @@ export const constantRouterMap = [
       }
     },
     {
-      path: '/inRelease',
-      component: () => import('@/views/immediateRelease/index'),
-      meta: {
-        title: '即时发布',
-        icon: 'edit'
-      }
+      path: '/release',
+      component: () => import('@/views/immediateRelease/index')
     }]
   }
   // {

src/views/dashboard/ThemeGallery.vue

@@ -20,8 +20,8 @@
       <el-tab-pane label="书法" name="8">书法</el-tab-pane>
     </el-tabs>
     <div class="home_publish_btn">
-      <el-button round>即时发布</el-button>
-      <el-button round type="primary">定时发布</el-button>
+      <el-button round @click="publishHandle(0)">即时发布</el-button>
+      <el-button round type="primary" @click="publishHandle(1)">定时发布</el-button>
     </div>
   </div>
 </template>
@@ -39,6 +39,13 @@ export default {
   methods: {
     handleClick(tab, event) {
       console.log(tab, event)
+    },
+    publishHandle(index) {
+      this.$router.push(
+        {
+          path: '/release', query: { tag: index }
+        }
+      )
     }
   }
 }

src/views/device/deviceConfig.vue

@@ -88,7 +88,7 @@
                     <el-checkbox label="周六" name="onweek" />
                     <el-checkbox label="周日" name="onweek" />
                   </el-checkbox-group>
-                  </el-checkbox-groupv-model="form.onweek"></el-form-item>
+                </el-form-item>
                 <el-form-item
                   prop="ontimeValue"
                   :rules="[

src/views/immediateRelease/index.vue

@@ -2,13 +2,13 @@
   <div class="app-container">
     <el-form ref="form" :model="form" size="small">
       <el-row class="in_release_item" type="flex" justify="space-between">
-        <el-col :span="3" class="item_title">创建即时发布</el-col>
+        <el-col :span="3" class="item_title">创建{{ publishType === 0 ? "即时发布" : "定时发布" }}</el-col>
         <el-col :span="18">
           <div class="input_wrap">
             <span class="input_label">名称</span>
             <el-input
               v-model="form.name"
-              placeholder="即时发布 2022-1-1"
+              :placeholder="changePlaceholder"
               class="input_name"
             />
           </div>
@@ -36,6 +36,13 @@
             label-width="100px"
           >
             <el-date-picker
+              v-if="publishType === 0"
+              v-model="form.date"
+              type="date"
+              placeholder="选择日期"
+            />
+            <el-date-picker
+              v-else
               v-model="form.date"
               type="daterange"
               range-separator="至"
@@ -43,6 +50,39 @@
               end-placeholder="结束日期"
             />
           </el-form-item>
+          <el-form-item
+            v-if="publishType === 1"
+            label="设置周期"
+            prop="timePeriod"
+            :rules="[
+              { required: true, message: '请设置周期：', trigger: 'change' },
+            ]"
+            :class="['set_weekly',{'no_margin': form.timePeriod === '每周'}]"
+            label-width="100px"
+          >
+            <el-radio-group v-model="form.timePeriod" @change="clearCheckbox()">
+              <el-radio label="每天" value="everyday" />
+              <el-radio label="每周" value="weekly" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            v-if="form.timePeriod === '每周'"
+            :class="{'weekly_margin': form.timePeriod === '每周'}"
+            prop="onweek"
+            :rules="[
+              { required: true, message: '请选择每周开机时间', trigger: 'change' },
+            ]"
+          >
+            <el-checkbox-group v-model="form.onweek">
+              <el-checkbox label="周一" name="onweek" />
+              <el-checkbox label="周二" name="onweek" />
+              <el-checkbox label="周三" name="onweek" />
+              <el-checkbox label="周四" name="onweek" />
+              <el-checkbox label="周五" name="onweek" />
+              <el-checkbox label="周六" name="onweek" />
+              <el-checkbox label="周日" name="onweek" />
+            </el-checkbox-group>
+          </el-form-item>
           <!-- :rules="[
               { required: true, message: '请选择是否置顶', trigger: 'change' }
             ]" -->
@@ -63,7 +103,7 @@
             <div>内容总时长：0.00s</div>
           </div>
           <div class="step_select_list">
-            <div class="step_upload"></div>
+            <div class="step_upload" @click="selectContVisible = true"></div>
             <draggable
               v-model="listData"
               class="drag_list"
@@ -137,6 +177,78 @@
         </el-col>
       </el-row>
     </el-form>
+    <!-- 选择素材 -->
+    <div class="release_layer">
+      <el-dialog
+        :close-on-click-modal="false"
+        :visible.sync="selectContVisible"
+        width="1000px"
+      >
+        <div slot="title" class="layer_tab_title">
+          <span :class="{'active': activeIndex === 0}" @click="tabAll(0)">素材库</span>
+          <span :class="{'active': activeIndex === 1}" @click="tabAll(1)">主题库</span>
+        </div>
+        <!-- 素材库 -->
+        <div v-if="activeIndex === 0">
+          <ul class="tab_item">
+            <li
+              v-for="(item, index) in materialTabItem"
+              :key="index"
+              :class="{'active': activeItemIndex === index}"
+              @click="tab(index)"
+            >{{ item.name }}<span>{{ item.num }}</span></li>
+          </ul>
+          <div class="material_list">
+            <div
+              v-for="(item, index) in listData"
+              :key="index"
+              :class="['material_item', 'item_cont']"
+              @click="selectedItem(item.id,item)"
+            >
+              <img v-if="item.coverImg" :src="item.coverImg" alt />
+              <div v-if="item.type == 'audio'" class="radio_img"></div>
+              <div class="item_format">
+                <span class="item_type">{{ item.type }}</span>
+                <span v-if="item.type !== 'JPG'" class="item_time">03:00</span>
+              </div>
+              <div class="file_name">{{ item.name }}</div>
+              <div v-if="contentIds.includes(item.id)" class="select_handle">
+                <div class="select_delt" @click.stop="selectDelt(item.id,index)">
+                  <svg class="font-icon icon1" aria-hidden="true">
+                    <use xlink:href="#icon-guanbi2" />
+                  </svg>
+                </div>
+                <div class="select_edit" @click.stop="selectEdit()">
+                  <svg class="font-icon icon1" aria-hidden="true">
+                    <use xlink:href="#icon-bianji" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 主题库 -->
+        <div v-if="activeIndex === 1">
+          <ul class="tab_item">
+            <li
+              v-for="(item, index) in tabItem"
+              :key="index"
+              :class="{'active': activeItemIndex === index}"
+              @click="tab(index)"
+            >{{ item.name }}</li>
+          </ul>
+          <div class="theme_img">
+            <img
+              v-for="(item, index) in 12"
+              :key="index"
+              src="@/assets/images/home/theme_Img_03.png"
+              alt
+            />
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+    <!-- 编辑播放内容 -->
     <div class="upload_layer">
       <el-dialog
         title="请选择播放内容"
@@ -144,6 +256,9 @@
         :visible.sync="listEditVisible"
         width="800px"
       >
+        <div class="total_time">
+          内容总时长：3m15s
+        </div>
         <div
           v-for="(item, index) in selectedData"
           :key="index"
@@ -154,6 +269,29 @@
             <div v-if="item.type == 'audio'" class="radio_img"></div>
             <span class="">{{ index+1 }}</span>
           </div>
+          <div class="edit_cont">
+            <div class="edit_cont_base">
+              <p>{{ item.name }}</p>
+              <span>{{ item.type }}</span>
+              <span>{{ item.size }}</span>
+            </div>
+            <div v-if="item.type === 'JPG'" class="edit_cont_set">
+              <div class="set_time">
+                <span>展示时长</span>
+                <el-input v-model="time" type="text" style="width: 66px" />
+                <em>秒</em>
+              </div>
+              <div class="set_animation">
+                <span class="set_item">切换动效</span>
+                <el-select v-model="animation" style="width:100px">
+                  <el-option label="无动画" value="0">无动画</el-option>
+                  <el-option label="动画1" value="1">动画1</el-option>
+                  <el-option label="动画2" value="2">动画2</el-option>
+                </el-select>
+              </div>
+            </div>
+            <div v-else class="edit_cont_other">内容时长：{{ item.time }}</div>
+          </div>
         </div>
         <div class="upload_list_right">
           <div class="save_btn">保存</div>
@@ -191,9 +329,11 @@ import draggable from 'vuedraggable'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 const defaultForm = {
   name: '',
-  date: [],
+  date: null,
   isTop: null,
-  deviceSelect: ''
+  deviceSelect: '',
+  timePeriod: null,
+  onweek: []
 }
 export default {
   name: 'ImmediateRelease',
@@ -210,8 +350,14 @@ export default {
   mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
     return {
+      publishType: 0,
+      time: 15,
+      animation: null,
       selectDeviceVisible: false,
       listEditVisible: false,
+      selectContVisible: false,
+      activeIndex: 0,
+      activeItemIndex: 0,
       deviceAllTags: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'],
       deviceTags: [],
       listData: [
@@ -219,40 +365,97 @@ export default {
           id: '1',
           name: '1',
           type: 'JPG',
+          size: '12kb',
           coverImg: require('@/assets/images/background.jpg'),
           time: ''
         },
         {
           id: '2',
           name: '2',
-          type: 'vedio',
+          type: 'VEDIO',
+          size: '12kb',
           coverImg: require('@/assets/images/background.jpg'),
           time: '03:00'
         },
         {
           id: '3',
           name: '3',
-          type: 'vedio',
-          coverImg: require('@/assets/images/background.jpg'),
-          time: '03:00'
-        },
-        {
-          id: '4',
-          name: '4',
-          type: 'vedio',
-          coverImg: require('@/assets/images/background.jpg'),
-          time: '03:00'
-        },
-        {
-          id: '5',
-          name: '5',
           type: 'audio',
+          size: '12kb',
           coverImg: '',
           time: '01:20'
         }
       ],
       contentIds: [],
-      selectedData: []
+      selectedData: [],
+      materialTabItem: [
+        {
+          key: 1,
+          name: '全部',
+          num: '3'
+        },
+        {
+          key: 2,
+          name: '图片',
+          num: '1'
+        },
+        {
+          key: 3,
+          name: '视频',
+          num: '1'
+        },
+        {
+          key: 4,
+          name: '音频',
+          num: '1'
+        }
+      ],
+      tabItem: [
+        {
+          key: 1,
+          name: '为你推荐'
+        },
+        {
+          key: 2,
+          name: '人工智能'
+        },
+        {
+          key: 3,
+          name: '党建文化'
+        },
+        {
+          key: 4,
+          name: '节日节气'
+        },
+        {
+          key: 5,
+          name: '艺术鉴赏'
+        },
+        {
+          key: 6,
+          name: '名人介绍'
+        },
+        {
+          key: 7,
+          name: '摄影'
+        },
+        {
+          key: 8,
+          name: '书法'
+        }
+      ]
+    }
+  },
+
+  computed: {
+    changePlaceholder() {
+      return this.publishType === 0 ? '即时发布 2022-01-01' : '定时发布 2022-01-01'
+    }
+  },
+  mounted() {
+    console.log(this.$route.query.tag)
+    if (this.$route.query.tag) {
+      this.publishType = this.$route.query.tag
     }
   },
   methods: {
@@ -296,11 +499,23 @@ export default {
     },
     clearDevice() {
       this.deviceTags = []
+    },
+    tabAll(index) {
+      this.activeIndex = index
+      this.activeItemIndex = 0
+    },
+    tab(index) {
+      this.activeItemIndex = index
+    },
+    clearCheckbox() {
+      if (this.form.timePeriod === '每天') {
+        this.form.onweek = []
+      }
     }
   }
 }
 </script>
-<style rel="stylesheet/scss" lang="scss">
+<style lang="scss" scoped>
 .app-container {
   background: none;
   padding: 0;
@@ -335,7 +550,7 @@ export default {
     }
     .input_name {
       width: 194px;
-      .el-input__inner {
+      ::v-deep .el-input__inner {
         border: none;
         background: #f5f6fa;
       }
@@ -361,6 +576,20 @@ export default {
   line-height: 54px;
   border-bottom: 1px solid #eee;
 }
+.set_weekly {
+  ::v-deep .el-form-item__label{
+    line-height: 40px;
+  }
+}
+.no_margin {
+  margin: 0;
+}
+.weekly_margin{
+  margin: 0 0 6px 100px;
+  ::v-deep .el-form-item__error{
+    top: 70%;
+  }
+}
 .step_select{
   display: flex;
   font-size: 14px;
@@ -420,10 +649,25 @@ export default {
 
 .drag_list{
   display: flex;
+  flex-wrap: wrap;
+}
+.upload_return{
+  color: #8ebcfe;
+}
+.total_time{
+  position: absolute;
+  top: 72px;
+  right: 24px;
+  font-size: 14px;
+  color: #000;
 }
 .edit_material{
+  display: flex;
   padding: 12px 0;
   border-bottom: 1px solid #f2f6fd;
+  &:nth-last-child(2){
+    border-bottom: none;
+  }
   .edit_img{
     position: relative;
     width: 58px;
@@ -443,8 +687,8 @@ export default {
     }
     span{
       position: absolute;
-      top: 0;
-      left: 0;
+      top: -1px;
+      left: -1px;
       display: block;
       width: 20px;
       height: 14px;
@@ -471,6 +715,143 @@ export default {
       }
     }
   }
-}
 
+  .edit_cont{
+    display: flex;
+    flex-direction: column ;
+    justify-content: space-between;
+    flex: 1;
+    padding: 10px 0 8px 0;
+    font-size: 14px;
+    margin-left: 25px;
+    .edit_cont_base{
+      display: flex;
+      p{
+        margin-right: 14px;
+        color: #000;
+      }
+      span{
+        display: inline-block;
+        padding: 0 5px;
+        margin-right: 8px;
+        font-size: 12px;
+        line-height: 16px;
+        color: #3a8aeb;
+        background: #cde4ff;
+        border-radius: 2px;
+      }
+    }
+    .edit_cont_set{
+      display: flex;
+      font-size: 12px;
+      color: #666;
+      line-height: 26px;
+      .set_time{
+        display: flex;
+        margin-right: 30px;
+        span{
+          margin-right: 8px;
+        }
+        em{
+          display: block;
+           margin-left: 8px;
+          font-style: normal;
+        }
+      }
+      .set_animation{
+        display: flex;
+        span.set_item{
+          margin-right: 8px;
+        }
+      }
+      .el-input__inner{
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+      }
+      .el-input__icon{
+        line-height: 26px;
+      }
+    }
+    .edit_cont_other{
+      line-height: 26px;
+      font-size: 12px;
+      color: #666;
+    }
+  }
+}
+.release_layer{
+  ::v-deep .el-dialog__header{
+    padding: 0;
+    height: 60px;
+  }
+  .layer_tab_title{
+    display: flex;
+    span{
+      position: relative;
+      display: block;
+      margin-right: 32px;
+      line-height: 60px;
+      font-size: 18px;
+      color: #666;
+      cursor: pointer;
+      &.active{
+        color: #333;
+      }
+      &.active::after{
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 3px;
+        background: #3a8aeb;
+      }
+    }
+  }
+  .tab_item{
+    display: flex;
+    font-size: 14px;
+    color: #666;
+    margin: -14px 0 16px 0;
+    li{
+      margin-right: 30px;
+      cursor: pointer;
+      span{
+        display: inline-block;
+        margin-left: 4px;
+      }
+      &.active{
+        color: #3a8aeb;
+      }
+    }
+  }
+  .material_list{
+    display: flex;
+    flex-wrap: wrap;
+    .item_cont{
+      margin: 0 27px 20px 0;
+      &:nth-child(5n){
+        margin: 0 0 20px 0;
+      }
+    }
+  }
+  .theme_img {
+    display: flex;
+    flex-wrap: wrap;
+    // padding-left: 26px;
+    img {
+      display: block;
+      width: 134px;
+      height: 182px;
+      border: 1px solid #f0f0f0;
+      border-radius: 4px;
+      margin: 0 12px 24px 13px;
+      overflow: hidden;
+      &:nth-child(6n){
+        margin: 0 0 24px 13px;
+      }
+    }
+  }
+}
 </style>