open-platform-admin-ui/src/views/statistics/popularFeelings/DetailPage.vue

<template>
  <el-dialog
    v-if="visible"
    title=""
    :visible.sync="visible"
    width="1200px"
  >
    <el-row :gutter="16">
      <el-col :span="12">网站名称：{{ rowData.siteName }}</el-col>
      <el-col :span="12">监控舆论词：{{ rowData.keywords }}</el-col>
    </el-row>
    <el-row :gutter="16">
      <el-col :span="12">监控域名：{{ rowData.domain }}</el-col>
      <el-col :span="12">
        启动地址：
        <el-tag v-for="tag in rowData.startUrls" :key="tag"> {{ tag }}</el-tag>
      </el-col>
    </el-row>
    <el-table
      v-loading="isLoading"
      :data="pageData.records"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="标题" prop="title" />
      <el-table-column label="网址" prop="url" />
      <el-table-column label="采集时间" prop="spiderTime" :formatter="dateTimeFormatter" width="200" />
      <el-table-column label="详情" width="70">
        <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank">详情</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination-container"
      background
      layout="prev, pager, next"
      :total="pageData.total"
      :page-size="pageData.pageSize"
      @current-change="paginationChange"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>

import { findDetailPage } from '@/api/statistics/popular_feelings'
import { dateTimeFormatter } from '@/utils/formater'

export default {
  components: {},
  data() {
    return {
      visible: false,
      isLoading: false,
      rowData: false,

      pageData: {},
      currentPage: 1
    }
  },
  mounted() {
  },
  methods: {
    dateTimeFormatter,
    open(rowData) {
      this.rowData = rowData
      this.visible = true
      this.isLoading = false
      console.log(this.rowData)
      this.fetchData()
    },
    paginationChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      this.isLoading = true
      findDetailPage({ ...this.queryForm, current: this.currentPage, popularFeelingsId: this.rowData.id })
        .then((response) => {
          this.pageData = response
        })
        .finally(() => (this.isLoading = false))
    }
  }
}
</script>