94 lines
		
	
	
		
			3.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			94 lines
		
	
	
		
			3.1 KiB
		
	
	
	
		
			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="播发级别" :value="info.name"></ai-info-item>
 | |
|               <ai-info-item label="播放方式" :value="info.createTime"></ai-info-item>
 | |
|               <ai-info-item label="开始日期" :value="info.name"></ai-info-item>
 | |
|               <ai-info-item label="播放天数" :value="info.name"></ai-info-item>
 | |
|               <ai-info-item label="开始时间" :value="info.name"></ai-info-item>
 | |
|               <ai-info-item label="结束时间" :value="info.areaName"></ai-info-item>
 | |
|               <ai-info-item label="创建人" :value="info.idNumber"></ai-info-item>
 | |
|               <ai-info-item label="创建时间" :value="info.areaName"></ai-info-item>
 | |
|               <ai-info-item label="起止时间" :value="info.name"></ai-info-item>
 | |
|               <ai-info-item label="详细地址" isLine :value="info.address"></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;">10</span>个设备</div>
 | |
|         </template>
 | |
|         <template #content>
 | |
|           <ai-table
 | |
|             class="detail-table__table"
 | |
|             :tableData="tableData"
 | |
|             :col-configs="colConfigs"
 | |
|             :total="total"
 | |
|             :current.sync="search.current"
 | |
|             :size.sync="search.size"
 | |
|             @getList="getList">
 | |
|           </ai-table>
 | |
|         </template>
 | |
|       </ai-card>
 | |
|       <ai-card title="播发素材" v-show="currIndex == 2">
 | |
|         <template #content>
 | |
|           <div class="audios">
 | |
|             <ai-audio :src="info.url"  skin="flat"/>
 | |
|           </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: 'messageName', label: '设备名称', width: 400},
 | |
|         {prop: 'messageType', label: '行政区划', align: 'center', dict: "dlbResourceType"},
 | |
|         {prop: 'messageUrgency', label: '状态', align: 'center', dict: "dlbMessageUrgency"},
 | |
|       ],
 | |
|     }
 | |
|   },
 | |
|   methods: {
 | |
|     cancel(isRefresh) {
 | |
|       this.$emit('change', {
 | |
|         type: 'list',
 | |
|         isRefresh: !!isRefresh,
 | |
|       })
 | |
|     },
 | |
|   }
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
| .Detail {
 | |
|   height: 100%;
 | |
| }
 | |
| </style> |