<template>

  <div class="flow-select-main">
    <div style="font-size:12px;margin:20px 0;">累计：{{total}}</div>

    <el-table :data="tableData" :header-cell-style="{'background':'#f6f8fb!important',
    'color':'#495060'}"
              :cell-style="{'padding':'20px 0 !important','font-size':'12px'}">
      <el-table-column label="序号" prop="flow_id" width="180"/>
      <el-table-column label="来源" prop="flow_source" width="180"/>
      <el-table-column label="访问页面" prop="flow_target" width="180"/>
      <el-table-column label="操作系统" prop="flow_os" width="180"/>
      <el-table-column label="访问量" prop="number" width="180"/>
      <el-table-column label="比例" prop="percentage">
        <template #default="scope">
          <div> <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.percentage" /></div>
          <div class="percentage-txt">{{  scope.row.percentage  }} %</div>
        </template>
      </el-table-column>
    </el-table>
  </div>



</template>

<script lang="ts" setup>
import {getFlowSourceCount} from "~/service/flow.js"
import {reactive,ref} from "vue";
let tableData = ref([
])
let total = ref(0);


function  getList() {
  getFlowSourceCount().then((res) => {
    if (res['code'] == 0) {
      tableData.value = res.data['GDP']
      total.value = res['count']
    }
  })
}
getList()


</script>
<style scoped>
.el-card__body{
  padding-top:20px!important;
}
</style>