ohplay_system/src/views/music/monitor/index.vue

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline size="mini">
      <el-form-item label="音频名称：">
        <el-input v-model="form.name" placeholder="请输入音频名称" clearable />
      </el-form-item>
      <el-form-item label="音频类型：">
        <el-select v-model="form.audioType" placeholder="请选择音频类型" clearable>
          <el-option v-for="item in audioTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="资源平台：">
        <el-select v-model="form.platformId" placeholder="请选择资源平台" clearable>
          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column label="异常ID" prop="id" align="center" show-overflow-tooltip />
      <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
      <el-table-column label="音频名称" prop="name" align="center" show-overflow-tooltip />
      <el-table-column label="音频类型" prop="audioType" align="center" :formatter="audioTypeFormatter" />
      <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformIdFormatter" />
      <el-table-column label="异常时间" align="center">
        <template slot-scope="scope">
          {{ parseTime(scope.row.abnormalTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="getDialog(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
      @pagination="getList" />
    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="详情" width="1000px">
      <el-descriptions title="音频信息" :column="2">
        <el-descriptions-item label="音频ID">{{ dialogForm.audioId }}</el-descriptions-item>
        <el-descriptions-item label="音频名称">{{ dialogForm.name }}</el-descriptions-item>
        <el-descriptions-item label="音频类型">{{ this.selectDictLabel(this.audioOptions, dialogForm.audioType)
        }}</el-descriptions-item>
        <el-descriptions-item label="资源平台">{{ this.selectDictLabel(this.platformOptions, dialogForm.platformId)
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="异常信息" :column="2">
        <el-descriptions-item label="下线次数">{{ dialogForm.officialCount }}</el-descriptions-item>
        <el-descriptions-item label="码率">{{ dialogForm.dialogForm }}</el-descriptions-item>
        <el-descriptions-item label="异常ID">{{ dialogForm.id }}</el-descriptions-item>
        <el-descriptions-item label="异常时间">
          {{ parseTime(dialogForm.abnormalTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import { platformMixin, audioMixin } from '@/mixin/index'
import { list, detail } from '@/api/music/monitor'
export default {
  mixins: [platformMixin, audioMixin],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表单
      form: {
        pageNum: 1,
        pageSize: 10
      },
      // 列表
      tableData: [],
      // 总数
      total: 0,
      // 弹窗
      dialogVisible: false,
      // 详情
      dialogForm: {}
    }
  },
  watch: {
    'form.audioType'(val) {
      this.getPlatform(val ? { audioType: val } : {})
    },
    'form.platformId'(val) {
      if (val) {
        this.getAudioType(val)
      } else {
        this.audioTypeOptions = this.audioOptions
      }
    }
  },
  mounted() {
    this.getPlatform({})
    this.audioTypeOptions = this.audioOptions
    this.getList()
  },
  methods: {
    // 列表
    getList() {
      this.loading = true
      list(this.form).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      })
    },

    // 搜索
    getSearch() {
      this.form.pageNum = 1
      this.getList()
    },

    // 重置
    getRefresh() {
      this.form = {
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },

    // 弹窗
    getDialog(id) {
      this.dialogVisible = true
      detail(id).then(res => {
        if (res.code === 0) {
          this.dialogForm = res.data
        }
      })
    },

    // 翻译
    audioTypeFormatter(row) {
      return this.selectDictLabel(this.audioOptions, row.audioType)
    },
    platformIdFormatter(row) {
      return this.selectDictLabel(this.platformTypeOptions, row.platformId)
    }
  }
}
</script>

<style lang="scss" scoped></style>