|
|
@@ -0,0 +1,251 @@
|
|
|
+<template>
|
|
|
+ <div class="custom-report">
|
|
|
+ <div class="c-a-r-top">
|
|
|
+ <div class="c-a-r-title">
|
|
|
+ <div class="r-title-text">定制化分析报告</div>
|
|
|
+ <div class="r-title-tip">
|
|
|
+ 量身定制个性化报告，分析市场竞争格局，为企业找准市场机会！
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="c-a-r-option">
|
|
|
+ <div class="c-view-report c-view-common">查看完整报告</div>
|
|
|
+ <div class="c-view-interest c-view-common">感兴趣点我</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="c-a-r-chart">
|
|
|
+ <div class="chart-common" id="customerChart" v-if="showModuleChart!=='customer_scale'">
|
|
|
+ <div class="chart-title">客户分布：</div>
|
|
|
+ <div class="c-c-content">
|
|
|
+ <div id="chartTreeMap"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-common" id="winnerChart" v-if="showModuleChart!=='winner_time_distribution'">
|
|
|
+ <div class="chart-title">中标规模分布：</div>
|
|
|
+ <div class="c-c-content chart-line">
|
|
|
+ <div id="chartLineChart"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-common" id="buyerChart" v-if="showModuleChart!=='buyer_time_distribution'">
|
|
|
+ <div class="chart-title">采购规模分布：</div>
|
|
|
+ <div class="c-c-content chart-line">
|
|
|
+ <div id="chartLineChartBuyer"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { formatPrice } from '@/utils/'
|
|
|
+export default {
|
|
|
+ name: 'custom-report',
|
|
|
+ props: {
|
|
|
+ chartCustomData: {
|
|
|
+ type: Object,
|
|
|
+ default () {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ showModuleChart () {
|
|
|
+ const chartKeyArr = Object.keys(this.chartCustomData)
|
|
|
+ const fieldText = this.getRandomArrayElements(chartKeyArr, 2)
|
|
|
+ const noShowFiled = _.difference(chartKeyArr, fieldText)
|
|
|
+ return noShowFiled[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'chartCustomData' (newval) {
|
|
|
+ let data
|
|
|
+ const chartKeyArr = Object.keys(newval)
|
|
|
+ chartKeyArr.forEach(item => {
|
|
|
+ if (item === 'customer_scale') {
|
|
|
+ data = newval.customer_scale.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ name: item.buyclass,
|
|
|
+ value: item.total,
|
|
|
+ amount: formatPrice(item.amount / 10000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ vComponentChart('#chartTreeMap', data, {}, 've-treemap')
|
|
|
+ } else if (item === 'winner_time_distribution') {
|
|
|
+ data = {
|
|
|
+ columns: ['采购规模分布', '采购总金额占比', '采购单位总数占比'],
|
|
|
+ rows: []
|
|
|
+ }
|
|
|
+ let total = 0
|
|
|
+ const chartLIst = newval.winner_time_distribution
|
|
|
+ if (Array.isArray(chartLIst)) {
|
|
|
+ const field = {
|
|
|
+ [data.columns[0]]: 'key',
|
|
|
+ [data.columns[1]]: 'total_amount',
|
|
|
+ [data.columns[2]]: 'total_number'
|
|
|
+ }
|
|
|
+ chartLIst.forEach(item => {
|
|
|
+ const row = {}
|
|
|
+ data.columns.forEach(column => {
|
|
|
+ if (field[column] === 'total_amount' || field[column] === 'total_number') {
|
|
|
+ row[column] = (item[field[column]] * 100).toFixed(2)
|
|
|
+ total += (item[field[column]] - 0)
|
|
|
+ } else {
|
|
|
+ row[column] = item[field[column]]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ data.rows.push(row)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (total) {
|
|
|
+ data.rows.reverse()
|
|
|
+ vComponentChart('#chartLineChartBuyer', data, {}, 've-line')
|
|
|
+ }
|
|
|
+ } else if (item === 'buyer_time_distribution') {
|
|
|
+ data = {
|
|
|
+ columns: ['中标规模分布', '中标总金额占比', '中标单位总数占比'],
|
|
|
+ rows: []
|
|
|
+ }
|
|
|
+ let total = 0
|
|
|
+ const buyerclassList = newval.buyer_time_distribution
|
|
|
+ if (Array.isArray(buyerclassList)) {
|
|
|
+ const field = {
|
|
|
+ [data.columns[0]]: 'key',
|
|
|
+ [data.columns[1]]: 'total_amount',
|
|
|
+ [data.columns[2]]: 'total_number'
|
|
|
+ }
|
|
|
+ buyerclassList.forEach(item => {
|
|
|
+ const row = {}
|
|
|
+ data.columns.forEach(column => {
|
|
|
+ if (field[column] === 'total_amount' || field[column] === 'total_number') {
|
|
|
+ row[column] = (item[field[column]] * 100).toFixed(2)
|
|
|
+ total += (item[field[column]] - 0)
|
|
|
+ } else {
|
|
|
+ row[column] = item[field[column]]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ data.rows.push(row)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (total) {
|
|
|
+ data.rows.reverse()
|
|
|
+ vComponentChart('#chartLineChart', data, {}, 've-line')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // /* 随机获取数组中的数据*/
|
|
|
+ getRandomArrayElements (arr, count) {
|
|
|
+ const shuffled = arr.slice(0)
|
|
|
+ let i = arr.length
|
|
|
+ const min = i - count
|
|
|
+ let temp
|
|
|
+ let index
|
|
|
+ while (i-- > min) {
|
|
|
+ index = Math.floor((i + 1) * Math.random())
|
|
|
+ temp = shuffled[index]
|
|
|
+ shuffled[index] = shuffled[i]
|
|
|
+ shuffled[i] = temp
|
|
|
+ }
|
|
|
+ return shuffled.slice(min)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .custom-report{
|
|
|
+ padding: 0 32px;
|
|
|
+ .c-a-r-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 60px;
|
|
|
+ border-bottom: 1px dashed #E0E0E0;
|
|
|
+ .c-a-r-title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 21px;
|
|
|
+ font-family: 'Microsoft YaHei';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ .r-title-text{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: fit-content;
|
|
|
+ height: 95%;
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #2CB7CA;
|
|
|
+ font-size: 16px;
|
|
|
+ border-bottom: 2px solid #2CB7CA;
|
|
|
+ }
|
|
|
+ .r-title-tip{
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-left: 32px;
|
|
|
+ color: #686868;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .c-a-r-option{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .c-view-common{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 17px;
|
|
|
+ height: 30px;
|
|
|
+ font-family: 'Microsoft YaHei';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .c-view-report{
|
|
|
+ border: 1px solid #2ABED1;
|
|
|
+ color: #2ABED1;
|
|
|
+ }
|
|
|
+ .chart-common{
|
|
|
+ /* width: 590px; */
|
|
|
+ height: 280px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .c-c-content{
|
|
|
+ width: 383px;
|
|
|
+ height: 211px;
|
|
|
+ }
|
|
|
+ .c-c-content.chart-line {
|
|
|
+ width: 558px;
|
|
|
+ }
|
|
|
+ .c-view-interest{
|
|
|
+ margin-left: 36px;
|
|
|
+ background: #2ABED1;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .c-a-r-chart{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ .chart-title {
|
|
|
+ padding: 16px 0 12px 0;
|
|
|
+ font-family: 'Microsoft YaHei';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #1D1D1D;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
