异常监控

src/views/music/monitor/index.vue

@@ -7,42 +7,56 @@
       </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-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-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">搜索</el-button>
-        <el-button icon="el-icon-refresh">重置</el-button>
+        <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" align="center" />
-      <el-table-column label="音频ID" align="center" />
-      <el-table-column label="音频名称" align="center" />
-      <el-table-column label="音频类型" align="center" />
-      <el-table-column label="资源平台" align="center" />
-      <el-table-column label="异常时间" align="center" />
+      <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>
-          <el-button type="text" @click="getDialog">查看</el-button>
+        <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："></el-descriptions-item>
+        <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="下线次数："></el-descriptions-item>
+        <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>
@@ -50,6 +64,7 @@
 
 <script>
 import { platformMixin, audioMixin } from '@/mixin/index'
+import { list, detail } from '@/api/music/monitor'
 export default {
   mixins: [platformMixin, audioMixin],
   data() {
@@ -59,25 +74,21 @@ export default {
       // 表单
       form: {
         pageNum: 1,
-        pageSize: 10,
-        platformId: null,
-        audioType: null
+        pageSize: 10
       },
       // 列表
       tableData: [],
+      // 总数
+      total: 0,
       // 弹窗
-      dialogVisible: false
+      dialogVisible: false,
+      // 详情
+      dialogForm: {}
     }
   },
   watch: {
     'form.audioType'(val) {
-      if (val) {
-        this.getPlatform({
-          audioType: val
-        })
-      } else {
-        this.platformOptions = this.platformTypeOptions
-      }
+      this.getPlatform(val ? { audioType: val } : {})
     },
     'form.platformId'(val) {
       if (val) {
@@ -88,16 +99,59 @@ export default {
     }
   },
   mounted() {
+    this.getPlatform({})
     this.audioTypeOptions = this.audioOptions
-    this.platformOptions = this.platformTypeOptions
+    this.getList()
   },
   methods: {
-    getDialog() {
+    // 列表
+    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>