dvcp_v2_webapp/packages/device/AppBroadcast/components/Detail.vue

<template>
  <ai-detail isHasSidebar>
    <template slot="title">
      <ai-title title="任务详情" isShowBack isShowBottomBorder @onBackClick="cancel(true)">
      </ai-title>
    </template>
    <template slot="content">
      <AiSidebar :tabTitle="tabList" v-model="currIndex"></AiSidebar>
      <div v-show="currIndex == 0">
        <ai-card title="播发任务" v-show="currIndex === 0">
          <template #content>
            <ai-wrapper
              label-width="120px">
              <ai-info-item label="播发级别">{{ $dict.getLabel('dlbMessageUrgency',info.messageLevel) }} - {{ $dict.getLabel('dlbDyclingType', info.cyclingType) }}</ai-info-item>
              <ai-info-item label="播放方式">{{ info.taskType==1? '定时播放': '立即播放'}}</ai-info-item>
              <ai-info-item label="创建人" :value="info.createUserName"></ai-info-item>
              <ai-info-item label="创建时间" :value="info.createTime"></ai-info-item>
                <ai-info-item label="开始日期" :value="info.startDate" v-if="info.taskType == 1"></ai-info-item>
                <ai-info-item label="播放天数" :value="info.broadcastDay" v-if="info.cyclingType == 3 && info.taskType == 1"></ai-info-item>
                <ai-info-item label="播放天数"  v-if="info.cyclingType == 2 && info.taskType == 1">
                  <span v-for="(item, index) in info.cyclingDateList" :key="index"><span v-if="index > 0">,</span>{{dayList[item]}}</span>
                </ai-info-item>
                <ai-info-item label="开始时间" :value="info.startTime" v-if="info.taskType == 1"></ai-info-item>
                <ai-info-item label="结束时间" :value="info.endTime" v-if="info.taskType == 1"></ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>
      </div>
      <ai-card title="播发设备" v-show="currIndex == 1">
        <template #right>
           <div style="color: #333;font-size: 15px;">共<span style="color: #0082ff;font-size: 15px;" v-if="info.devices.length">{{info.devices.length}}</span>个设备</div>
        </template>
        <template #content>
          <ai-table
            class="detail-table__table"
            :tableData="tableData"
            :col-configs="colConfigs"
            :total="total"
            @getList="getDetail">
          </ai-table>
        </template>
      </ai-card>
      <ai-card title="播发素材" v-show="currIndex == 2">
        <template #content>
          <div class="audios">
            <ai-audio :src="item.url" v-for="item in info.materials" :key="item.id" skin="flat" style="margin-bottom: 8px;"/>
          </div>
        </template>
      </ai-card>
    </template>
  </ai-detail>
</template>

<script>
export default {
  name: 'Detail',
  components: {},
  props: {
    dict: Object,
    params: Object,
    instance: Function,
  },
  data() {
    return {
      tabList: ['播发任务','播发设备','播发素材'],
      currIndex: 0,
      info: {},
      tableData: [],
      search: {},
      total: 0,
      colConfigs: [
        {prop: 'name', label: '设备名称', width: 400},
        {prop: 'areaName', label: '行政区划', align: 'center'},
        {prop: 'devStatus', label: '状态', align: 'center', render: (h, { row })=>{
          return h('span',null,this.dict.getLabel('dlbDevStatus',row.devStatus))
        }},
      ],
      dayList: ['', '每周一', '每周二', '每周三', '每周四', '每周五', '每周六', '每周日'],
      voiceList: [],
    }
  },
  created() {
    this.$dict.load('dlbMessageUrgency','dlbDyclingType','dlbDevStatus').then(()=>{
      if(this.params.id) {
        this.getDetail()
      }
    })
    
    
  },
  methods: {
    cancel(isRefresh) {
      this.$emit('change', {
        type: 'list',
        isRefresh: !!isRefresh,
      })
    },
    getDetail() {
      this.instance.post(`/app/appzyvideobroadcast/queryDetailById?id=${this.params.id}`).then((res) => {
        if(res?.data) {
          this.info = res.data
          this.tableData = res.data.devices
          this.total = res.data.devices.length
          if(this.info.cyclingType == 2) {
            this.info.cyclingDateList = this.info.cyclingDate.split(',')
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.Detail {
  height: 100%;
}
</style>