web/src/views/analysisReport/components/ProjectScatter.vue

<template>
  <div class="project-scatter">
    <div class="project-scatter-chart" v-if="chartData.rows.length">
      <SimpleHistogramChart
        :id="id"
        :data="chartData"
      />
    </div>
    <div class="ar-table" v-if="tableData.length">
      <p class="ar-table-title">项目规模TOP10</p>
      <el-table
        :data="tableData"
        header-row-class-name="ar-table-thead"
        row-class-name="ar-table-row"
        border
        style="width: 100%">
        <el-table-column
          align="center"
          header-align="center"
          type="index"
          label="序号"
          width="50">
          <template slot-scope="scope">
            <span
              :class="{
                'table-index-rect': scope.$index < 3,
                red: scope.$index === 0,
                orange: scope.$index === 1,
                'soft-orange': scope.$index === 2
              }"
              >{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          class-name="cursor"
          label="项目名称">
          <template slot-scope="scope">
            <div @click="toContentPage(scope.row)">{{ scope.row.projectname }}</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          width="100px"
          prop="area"
          label="省份">
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          prop="city"
          width="100px"
          label="城市">
        </el-table-column>
        <el-table-column
          align="right"
          header-align="center"
          width="140px"
          prop="sortprice"
          label="项目金额(万元)">
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          prop="jgtime"
          width="120px"
          label="成交时间">
        </el-table-column>
        <el-table-column
          header-align="center"
          class-name="cursor"
          label="中标单位">
          <template slot-scope="scope">
            <el-link
              @click="toEntProPage(item.id)"
              :underline="false"
              :disabled="!item.id"
              v-for="(item, index) in (scope.row.winner_s || [])"
              :key="index"
            >{{ item.name }}<span v-if="index !== scope.row.winner_s.length - 1">，</span></el-link>
            <div v-if="scope.row.winner_s.length === 0">-</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { Table, TableColumn, Link } from 'element-ui'
import SimpleHistogramChart from '@/components/chart/SimpleHistogramChart.vue'
export default {
  name: 'project-scatter',
  components: {
    [Link.name]: Link,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    SimpleHistogramChart
  },
  props: {
    chartData: {
      type: Object,
      default () {
        return {
          columns: ['项目规模', '项目总金额占比', '项目总数占比'],
          rows: [
          //   {
          //     项目规模: '≥1亿',
          //     项目总金额占比: 20,
          //     项目总数占比: 10
          //   },
          //   {
          //     项目规模: '1000万-1亿',
          //     项目总金额占比: 50,
          //     项目总数占比: 40
          //   },
          //   {
          //     项目规模: '500万-1000万',
          //     项目总金额占比: 20,
          //     项目总数占比: 30
          //   },
          //   {
          //     项目规模: '100万-500万',
          //     项目总金额占比: 20,
          //     项目总数占比: 30
          //   }
          ]
        }
      }
    },
    tableData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      id: `ve-histogram-${Date.now()}`
    }
  },
  methods: {
    // 去三级页
    toContentPage (row) {
      window.open(`/article/content/${row._id}.html`)
    },
    // 去企业画像
    toEntProPage (id) {
      const routeUrl = this.$router.resolve({
        path: `/svip/ent_ser_portrait/${id}`
      })
      window.open(routeUrl.href)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>