|
|
@@ -1,5 +1,1338 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- 33333333
|
|
|
+ <div id="page-clone-template" style="display: none">
|
|
|
+ <div class="doc-head">
|
|
|
+ <img
|
|
|
+ src="https://cdn-ali2.jianyu360.cn/images/index/logo_main.png?v=24574"
|
|
|
+ alt="剑鱼标讯"
|
|
|
+ />
|
|
|
+ <span class="highlight-text">www.jianyu360.cn</span>
|
|
|
+ </div>
|
|
|
+ <div class="doc-footer">
|
|
|
+ <div class="doc-footer-container">
|
|
|
+ <span style="color: transparent">www.jianyu360.cn</span>
|
|
|
+ <div>
|
|
|
+ <span class="now-page-num">1</span> /
|
|
|
+ <span class="all-page-num">16</span>
|
|
|
+ </div>
|
|
|
+ <span class="highlight-text">www.jianyu360.cn</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page title-page" size="A4">
|
|
|
+ <div class="flex-c-box" style="height: 100%;justify-content: unset">
|
|
|
+ <div class="page-cover-title">
|
|
|
+ {{ info.projectname }}
|
|
|
+ <div class="page-sub-title" >目标企业：{{info.buyer}}</div>
|
|
|
+ <div class="page-sub-title">下载时间：{{nowDate}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page report-content static-page" size="A4" >
|
|
|
+ <div class="doc-head">
|
|
|
+ <img
|
|
|
+ src="https://cdn-ali2.jianyu360.cn/images/index/logo_main.png?v=24574"
|
|
|
+ alt="剑鱼标讯"
|
|
|
+ />
|
|
|
+ <span class="highlight-text">www.jianyu360.cn</span>
|
|
|
+ </div>
|
|
|
+ <div class="static-page--main">
|
|
|
+ <div class="strong-text">报告解读：</div>
|
|
|
+ <p> 1.本报告深度融合各政府采购、公共资源交易中心及企事业网站的招标采购信息，利用云计算、大数据和人工智能技术进行数据挖掘分析整理。</p>
|
|
|
+ <p> 2.七大核心维度剖析，帮助您及所在单位拓展业务更方便、掌握企业动态更全面、了解企业更快速：</p>
|
|
|
+ <p class="flex-text"><span>√</span>年度中标全景图：洞察整年中标趋势。</p>
|
|
|
+ <p class="flex-text"><span>√</span>月度金额追踪：精准把脉每月中标金额波动。</p>
|
|
|
+ <p class="flex-text"><span>√</span>区域市场图谱：揭示中标地域热点分布。</p>
|
|
|
+ <p class="flex-text"><span>√</span>客户折扣解析：平均折扣率透视，了解市场议价空间。</p>
|
|
|
+ <p class="flex-text"><span>√</span>客户类型细分：深挖各类客户占比，定位潜在市场。</p>
|
|
|
+ <p class="flex-text"><span>√</span>关键合作伙伴：揭示重点客户网络，助力精准合作。</p>
|
|
|
+ <p class="flex-text"><span>√</span>首次合作新机遇：识别新兴合作伙伴，拓宽业务版图。</p>
|
|
|
+ <div><span class="strong-text"> 报告声明：</span>本数据报告基于公开数据整理，各数据指标不代表任何权威观点，报告仅供参考！</div>
|
|
|
+ </div>
|
|
|
+ <div class="doc-footer">
|
|
|
+ <div class="doc-footer-container">
|
|
|
+ <span style="color: transparent">www.jianyu360.cn</span>
|
|
|
+ <div>
|
|
|
+ <span class="now-page-num">2</span> /
|
|
|
+ <span class="all-page-num">{{ computedPageNum }}</span>
|
|
|
+ </div>
|
|
|
+ <span class="highlight-text">www.jianyu360.cn</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page report-content static-page" size="A4">
|
|
|
+ <div class="doc-head">
|
|
|
+ <img
|
|
|
+ src="https://cdn-ali2.jianyu360.cn/images/index/logo_main.png?v=24574"
|
|
|
+ alt="剑鱼标讯"
|
|
|
+ />
|
|
|
+ <span class="highlight-text">www.jianyu360.cn</span>
|
|
|
+ </div>
|
|
|
+ <div class="static-page--main">
|
|
|
+ <div style="text-align:center;">目录</div>
|
|
|
+ <div class="catalogue-container" v-html="catalogueHtml"></div>
|
|
|
+ </div>
|
|
|
+ <div class="doc-footer">
|
|
|
+ <div class="doc-footer-container">
|
|
|
+ <span style="color: transparent">www.jianyu360.cn</span>
|
|
|
+ <div>
|
|
|
+ <span class="now-page-num">2</span> /
|
|
|
+ <span class="all-page-num">{{ computedPageNum }}</span>
|
|
|
+ </div>
|
|
|
+ <span class="highlight-text">www.jianyu360.cn</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page report-content" id="report-content" size="A4">
|
|
|
+ <div class="doc-head">
|
|
|
+ <img
|
|
|
+ src="https://cdn-ali2.jianyu360.cn/images/index/logo_main.png?v=24574"
|
|
|
+ alt="剑鱼标讯"
|
|
|
+ />
|
|
|
+ <span class="highlight-text">www.jianyu360.cn</span>
|
|
|
+ </div>
|
|
|
+ <section>
|
|
|
+ <h1>一、工商信息</h1>
|
|
|
+ <div class="sub-section">
|
|
|
+ <EntForm :id="eId" ></EntForm>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <h1>二、企业中标分析</h1>
|
|
|
+ <div class="analyse-condition">
|
|
|
+ <p>定制条件：</p>
|
|
|
+ <p><span>√</span>关键词：{{ analysisCondition.match || '-'}} <span v-if="analysisCondition.match">（模糊，包含其中1个关键词即可）</span></p>
|
|
|
+ <p><span>√</span>搜索范围：{{ analysisCondition.matchRange | formatSelectType}}</p>
|
|
|
+ <p><span>√</span>项目地区：{{analysisCondition.area || '-'}}</p>
|
|
|
+ <p><span>√</span>行业：{{ analysisCondition.scopeClass}}</p>
|
|
|
+ <p><span>√</span>采购单位类型：{{analysisCondition.s_buyerClass}}</p>
|
|
|
+ <p><span>√</span>成交时间：{{analysisCondition.timeRange | formatTimeRange}}</p>
|
|
|
+ <div class="tip-red">注：注：以下分析统计已根据项目去重</div>
|
|
|
+ </div>
|
|
|
+ <h2>1、概况</h2>
|
|
|
+ <div v-if="!emptyShow">
|
|
|
+ <ul class="pro_info_ul">
|
|
|
+ <li
|
|
|
+ class="pro_list"
|
|
|
+ v-for="(item, index) in proData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="pro_li_con">{{ item.count }}</div>
|
|
|
+ <div class="pro_li_label">{{ item.label }}</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="pro_info_tip">
|
|
|
+ 数据统计范围：{{ dateRange.start }}-{{
|
|
|
+ dateRange.end
|
|
|
+ }}（结果类公告发布时间）
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <h2>2.年度项目统计</h2>
|
|
|
+ <div class="sub-section" v-if="annual.show">
|
|
|
+ <div class="chart-title">年度项目统计</div>
|
|
|
+ <bar-chart
|
|
|
+ id="annual"
|
|
|
+ :options="annual.options"
|
|
|
+ :datas="annual.data"
|
|
|
+ ></bar-chart>
|
|
|
+ <div class="chart-tips">
|
|
|
+ 注：项目金额指所有项目的中标金额之和，少数缺失的中标金额，用项目预算补充。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <h2>3.月度中标金额统计</h2>
|
|
|
+ <div v-if="monthZb.show">
|
|
|
+ <line-chart
|
|
|
+ id="monthZb"
|
|
|
+ :options="monthZb.options"
|
|
|
+ :datas="monthZb.data"
|
|
|
+ ></line-chart>
|
|
|
+ <div class="chart-tips">注：少数缺失的中标金额，用项目预算补充。</div>
|
|
|
+ </div>
|
|
|
+ <h2>4.市场区域分布</h2>
|
|
|
+ <div v-if="areaFb.show">
|
|
|
+ <map-chart
|
|
|
+ id="areaFb"
|
|
|
+ :options="areaFb.options"
|
|
|
+ :datas="areaFb.data"
|
|
|
+ ></map-chart>
|
|
|
+ </div>
|
|
|
+ <!-- 各类客户平均折扣率 -->
|
|
|
+ <h2>5.各类客户平均折扣率</h2>
|
|
|
+ <div v-if="rateFb.show">
|
|
|
+ <line-chart
|
|
|
+ id="rateFb"
|
|
|
+ :options="rateFb.options"
|
|
|
+ :datas="rateFb.data"
|
|
|
+ ></line-chart>
|
|
|
+ <div class="chart-tips">
|
|
|
+ 注：平均折扣率=(全部项目预算-全部中标金额)/全部项目预算，是指价格减让部分与原价的比率，仅统计预算和中标金额同时存在的项目。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 客户类型分布 -->
|
|
|
+ <h2>6.客户类型分布</h2>
|
|
|
+ <div v-if="clientFb.show">
|
|
|
+ <div class="chart-title">客户类型分布</div>
|
|
|
+ <pie-chart
|
|
|
+ id="clientFb"
|
|
|
+ :height="'420px'"
|
|
|
+ :options="clientFb.options"
|
|
|
+ :datas="clientFb.data"
|
|
|
+ ></pie-chart>
|
|
|
+ <div class="chart-tips">
|
|
|
+ 注：各客户类型占比以中标金额计算，最多展示占比排名前十的客户类型。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 重点客户 -->
|
|
|
+ <h2>7.重点合作客户</h2>
|
|
|
+ <div v-if="keyClient.show">
|
|
|
+ <progress-chart type="ent" :datas="keyClient.data"></progress-chart>
|
|
|
+ </div>
|
|
|
+ <h2>8.首次合作客户</h2>
|
|
|
+ <div v-if="keyClient.show">
|
|
|
+ <progress-chart type="ent" :datas="keyClient.data"></progress-chart>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <h1>三.中标动态</h1>
|
|
|
+ <div class="tip-red">注：1个项目如同时发布了中标、成交、合同等结果类公告，则有多条数据。</div>
|
|
|
+ <el-table :data="tableList" border>
|
|
|
+ <el-table-column label="序号" width="50" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.$index + 1}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="公告标题" prop="title" align="center"></el-table-column>
|
|
|
+ <el-table-column label="中标单位" prop="buyer" align="center"></el-table-column>
|
|
|
+ <el-table-column label="中标金额（万元）" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ calcMoney(scope.row.bidamount) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="发布时间">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{
|
|
|
+ dateFormatter(
|
|
|
+ scope.row.firsttime ? scope.row.firsttime * 1000 : null,
|
|
|
+ 'yyyy-MM-dd HH:mm'
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div>
|
|
|
+ <span class="tip-red">*</span>
|
|
|
+ 按照“公告时间”排序，最多展示前100条记录，可使用“数据导出”服务查看更多公告信息。
|
|
|
+ </div>
|
|
|
+ <!--联系二维码-->
|
|
|
+ <div class="split-line"></div>
|
|
|
+ <PageBottom />
|
|
|
+ </section>
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import EntChart from '@/views/portrayal/components/EntChart'
|
|
|
+import EntForm from '@/views/portrayal/components/EntForm'
|
|
|
+import BarChart from '@/components/chart/BarLineChart'
|
|
|
+import LineChart from '@/components/chart/LineChart'
|
|
|
+import MapChart from '@/components/chart/MapChart'
|
|
|
+import PieChart from '@/components/chart/PieChart'
|
|
|
+import ProgressChart from '@/components/chart/ProgressChart'
|
|
|
+import DynamicList from '@/views/portrayal/components/DynamicList'
|
|
|
+import CommonTable from '@/views/download-pdf/components/CommonTable'
|
|
|
+import PageBottom from '@/views/download-pdf/components/PageBottom.vue'
|
|
|
+
|
|
|
+import { getEntChart, getPdfDetail, getNewMsg, getSvipNewMsg } from '@/api/modules/'
|
|
|
+import { bSort, dateFormatter, moneyUnit, formatMoney } from '@/utils/'
|
|
|
+import ComputedPageEdge from './utils'
|
|
|
+import { mapState } from 'vuex'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ BarChart,
|
|
|
+ LineChart,
|
|
|
+ MapChart,
|
|
|
+ PieChart,
|
|
|
+ ProgressChart,
|
|
|
+ DynamicList,
|
|
|
+ EntForm,
|
|
|
+ CommonTable,
|
|
|
+ PageBottom
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ info: {
|
|
|
+ projectname: '剑鱼标讯企业中标分析报告',
|
|
|
+ buyer: ''
|
|
|
+ },
|
|
|
+ // 页面报告id
|
|
|
+ sid: '',
|
|
|
+ eId: 'ABCYFxZcz0eLyw6RHRoc3IsCCRfIxF3dmhwKD8gPz0wfGlkdSMsIC8aMmNmUnAtHlxTDY0%3D',
|
|
|
+ entname: '',
|
|
|
+ nowDate: dateFormatter(new Date(),'yyyy年MM月dd日'),
|
|
|
+ proData: [],
|
|
|
+ dateRange: {
|
|
|
+ // 数据统计范围
|
|
|
+ start: 0,
|
|
|
+ end: 0
|
|
|
+ },
|
|
|
+ filter: {
|
|
|
+ entId: 'ABCYFxZcz0eLyw6RHRoc3IsCCRfIxF3dmhwKD8gPz0wfGlkdSMsIC8aMmNmUnAtHlxTDY0%3D',
|
|
|
+ buyer: '',
|
|
|
+ match: '', // 关键词
|
|
|
+ exactMatch: '0', // 模糊、精准搜索
|
|
|
+ matchRange: '', // 搜索范围
|
|
|
+ area: {}, // 地区
|
|
|
+ scopeClass: '', // 行业
|
|
|
+ timeRange: ''
|
|
|
+ },
|
|
|
+ entPortraitInfo: {},
|
|
|
+ // 年度项目统计
|
|
|
+ annual: {
|
|
|
+ show: false,
|
|
|
+ data: {
|
|
|
+ columns: ['日期', '项目数量', '项目金额'],
|
|
|
+ rows: []
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ height: '328px',
|
|
|
+ colors: [
|
|
|
+ new this.$echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#2ABED1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: '#2ABED1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#8DE0EB'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ '#FF9F40'
|
|
|
+ ],
|
|
|
+ settings: {
|
|
|
+ showLine: ['项目金额'],
|
|
|
+ axisSite: { right: ['项目金额'] }
|
|
|
+ },
|
|
|
+ config: this.annualConfig
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 月度中标金额统计
|
|
|
+ monthZb: {
|
|
|
+ show: false,
|
|
|
+ data: {
|
|
|
+ columns: [],
|
|
|
+ rows: []
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ height: '328px',
|
|
|
+ colors: ['#05A6F3', '#0BD991', '#FF9F40'],
|
|
|
+ config: this.monthZbConfig
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 市场区域分布
|
|
|
+ areaFb: {
|
|
|
+ show: false,
|
|
|
+ data: {
|
|
|
+ columns: ['name', 'value'],
|
|
|
+ rows: []
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ height: '800px',
|
|
|
+ colors: ['#05A6F3', '#0BD991', '#FF9F40'],
|
|
|
+ config: this.areaFbConfig
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 折扣率
|
|
|
+ rateFb: {
|
|
|
+ show: false,
|
|
|
+ data: {
|
|
|
+ columns: [],
|
|
|
+ rows: []
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ height: '328px',
|
|
|
+ colors: [
|
|
|
+ '#FB483D',
|
|
|
+ '#05A6F3',
|
|
|
+ '#0BD991',
|
|
|
+ '#FF9F40',
|
|
|
+ '#8E6DF2',
|
|
|
+ '#C0C4CC'
|
|
|
+ ],
|
|
|
+ config: this.rateFbConfig
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 客户类型分布
|
|
|
+ clientFb: {
|
|
|
+ show: false,
|
|
|
+ data: [],
|
|
|
+ options: {
|
|
|
+ tooltip: {
|
|
|
+ formatter: event
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 重点客户
|
|
|
+ keyClient: {
|
|
|
+ show: false,
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ getEntPortraitInfoTimes: 0,
|
|
|
+ // 点击中标信息调用一次接口，再点击不调用接口
|
|
|
+ haveGetData: '0',
|
|
|
+ initParams: {
|
|
|
+ entId: '',
|
|
|
+ match: '', // 关键词
|
|
|
+ exactMatch: 0, // 模糊、精准搜索
|
|
|
+ matchRange: '', // 搜索范围
|
|
|
+ area: {}, // 地区
|
|
|
+ scopeClass: '', // 行业
|
|
|
+ timeRange: ''
|
|
|
+ },
|
|
|
+ allBool: [],
|
|
|
+ emptyShow: false,
|
|
|
+ computedPageNum: 1,
|
|
|
+ catalogueHtml: '',
|
|
|
+ dynamicKey: new Date().getTime(), // 筛选重新渲染动态数据
|
|
|
+ tableList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ formatSelectType: function (value) {
|
|
|
+ if(!value) return '-'
|
|
|
+ const arr = value.split(',')
|
|
|
+ const strArr = []
|
|
|
+ const str = ''
|
|
|
+ const obj = {
|
|
|
+ purchasing: '项目名称/标的物',
|
|
|
+ buyer: '采购单位',
|
|
|
+ winner: '中标企业',
|
|
|
+ agency: '招标代理机构'
|
|
|
+ }
|
|
|
+ for(let item of arr) {
|
|
|
+ strArr.push(obj[item])
|
|
|
+ }
|
|
|
+ return strArr.join('，')
|
|
|
+ },
|
|
|
+ formatTimeRange (value) {
|
|
|
+ if(!value) return ''
|
|
|
+ const arr = value.split('_')
|
|
|
+ return arr[0] + '/01/01-' + arr[1] + '/12/31'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ allBool: {
|
|
|
+ handler(newval) {
|
|
|
+ if (newval.indexOf(true) !== -1) {
|
|
|
+ this.emptyShow = false
|
|
|
+ } else {
|
|
|
+ this.emptyShow = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ userInfo: (state) => state.user.info
|
|
|
+ }),
|
|
|
+ analysisCondition () {
|
|
|
+ console.log(4444444)
|
|
|
+ return this.entPortraitInfo.analysis_condition || {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if(this.$route.query.pid) {
|
|
|
+ this.sid = this.$route.query.pid
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+ // this.getChartData()
|
|
|
+ // this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ dateFormatter,
|
|
|
+ async getData () {
|
|
|
+ const sid = this.sid
|
|
|
+ const {data, error_code: code} = await getPdfDetail({sid})
|
|
|
+ if(code === 0 && data) {
|
|
|
+ // this.formatterData(data)
|
|
|
+ // 将数据保存到data中
|
|
|
+ this.entPortraitInfo = Object.assign({}, data)
|
|
|
+ if (data.timeRange && data.timeRange.start) {
|
|
|
+ this.entPortraitInfo.timeRangeStart = data.timeRange.start
|
|
|
+ }
|
|
|
+ if (data.timeRange && data.timeRange.end) {
|
|
|
+ this.entPortraitInfo.timeRangeEnd = data.timeRange.end
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ !this.entPortraitInfo.project_count &&
|
|
|
+ !this.entPortraitInfo.bidamount_count &&
|
|
|
+ !this.entPortraitInfo.area_count &&
|
|
|
+ !this.entPortraitInfo.buyer_count
|
|
|
+ ) {
|
|
|
+ this.allBool.push(false)
|
|
|
+ } else {
|
|
|
+ this.allBool.push(true)
|
|
|
+ }
|
|
|
+ this.getEntInfo(this.entPortraitInfo)
|
|
|
+ this.initChartsData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ calcMoney(budget) {
|
|
|
+ if (budget) {
|
|
|
+ return formatMoney(budget, {
|
|
|
+ type: 'number',
|
|
|
+ digit: 2,
|
|
|
+ level: 1
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getList() {
|
|
|
+ const entId = this.filter?.entId
|
|
|
+ if (!entId) return
|
|
|
+ let query = {
|
|
|
+ entId: entId,
|
|
|
+ companyName: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 100
|
|
|
+ }
|
|
|
+
|
|
|
+ let res = {}
|
|
|
+ if (this.userInfo.memberStatus > 0) {
|
|
|
+ // 大会员-企业画像
|
|
|
+ // fix: 新增自定义版大会员判断
|
|
|
+ if (this.userInfo.power.indexOf(13) > -1) {
|
|
|
+ res = await getNewMsg(query)
|
|
|
+ } else {
|
|
|
+ res = await getSvipNewMsg(query)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ //超级订阅及免费用户-企业画像
|
|
|
+ res = await getSvipNewMsg(query)
|
|
|
+ }
|
|
|
+ const resData = res.data?.list || []
|
|
|
+ if (res.data?.count && resData) {
|
|
|
+ this.tableList = resData
|
|
|
+ } else {
|
|
|
+ this.tableList = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getChartData() {
|
|
|
+ this.allBool = []
|
|
|
+ this.getEntPortraitInfoTimes++
|
|
|
+ if (this.haveGetData === '0') {
|
|
|
+ const res = await getEntChart(this.filter)
|
|
|
+ if (res.error_code === 0) {
|
|
|
+ if (res.data && Object.keys(res.data).length !== 0) {
|
|
|
+ // 将数据保存到data中
|
|
|
+ for (var key in res.data) {
|
|
|
+ this.entPortraitInfo[key] = res.data[key]
|
|
|
+ }
|
|
|
+ if (res.data.timeRange && res.data.timeRange.start) {
|
|
|
+ this.entPortraitInfo.timeRangeStart = res.data.timeRange.start
|
|
|
+ }
|
|
|
+ if (res.data.timeRange && res.data.timeRange.end) {
|
|
|
+ this.entPortraitInfo.timeRangeEnd = res.data.timeRange.end
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ !this.entPortraitInfo.project_count &&
|
|
|
+ !this.entPortraitInfo.bidamount_count &&
|
|
|
+ !this.entPortraitInfo.area_count &&
|
|
|
+ !this.entPortraitInfo.buyer_count
|
|
|
+ ) {
|
|
|
+ this.allBool.push(false)
|
|
|
+ } else {
|
|
|
+ this.allBool.push(true)
|
|
|
+ }
|
|
|
+ this.getEntInfo(this.entPortraitInfo)
|
|
|
+ // 初始化图表数据
|
|
|
+ // if (this.active === '2') {
|
|
|
+ // this.initChartsData()
|
|
|
+ // }
|
|
|
+ this.initChartsData()
|
|
|
+ } else {
|
|
|
+ if (this.getEntPortraitInfoTimes < 5) {
|
|
|
+ this.getChartData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getEntInfo(data) {
|
|
|
+ this.proData = [
|
|
|
+ {
|
|
|
+ label: '项目数量',
|
|
|
+ count: data.project_count + '个'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '项目金额',
|
|
|
+ count: moneyUnit(data.bidamount_count)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '项目省份',
|
|
|
+ count: data.area_count + '个'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '项目客户',
|
|
|
+ count: data.buyer_count + '个'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.dateRange.start = dateFormatter(
|
|
|
+ data.timeRange.start * 1000,
|
|
|
+ 'yyyy/MM/dd'
|
|
|
+ )
|
|
|
+ this.dateRange.end = dateFormatter(
|
|
|
+ data.timeRange.end * 1000,
|
|
|
+ 'yyyy/MM/dd'
|
|
|
+ )
|
|
|
+ },
|
|
|
+// 初始化图表数据
|
|
|
+ initChartsData() {
|
|
|
+ const dataSet = this.entPortraitInfo
|
|
|
+ // 初始化 年度项目统计数据
|
|
|
+ this.arrangeAnnualData(dataSet.yearData)
|
|
|
+ // 初始化 月度统计数据
|
|
|
+ this.arrangeMonthZbData(dataSet.monthData)
|
|
|
+ // 初始化 市场区域分布数据
|
|
|
+ this.arrangeMapData(dataSet.areaData)
|
|
|
+ // 初始化 平局折扣率数据
|
|
|
+ this.arrangeRateData(dataSet.rate)
|
|
|
+ // 初始化客户类型分布 饼图
|
|
|
+ this.initPieChartData(dataSet.top10)
|
|
|
+ // 初始化重点客户
|
|
|
+ this.arrangeImportantData(dataSet.topShow)
|
|
|
+ },
|
|
|
+ /* *********** 画像数据处理 ********** */
|
|
|
+ // 整理年度项目统计数据
|
|
|
+ arrangeAnnualData(data) {
|
|
|
+ if (!data || Object.keys(data).length === 0) {
|
|
|
+ this.allBool.push(false)
|
|
|
+ } else {
|
|
|
+ let rows = []
|
|
|
+ let count = 0
|
|
|
+ for (var key in data) {
|
|
|
+ const item = data[key]
|
|
|
+ // 统计数据总数是否为0
|
|
|
+ count += item.Count
|
|
|
+ count += item.Money
|
|
|
+ /* eslint-disable */
|
|
|
+ rows.push({
|
|
|
+ 日期: parseInt(key),
|
|
|
+ 项目数量: item.Count,
|
|
|
+ 项目金额: Math.round(item.Money / 10000)
|
|
|
+ })
|
|
|
+ /* eslint-enable */
|
|
|
+ }
|
|
|
+ rows = bSort(rows, '日期')
|
|
|
+ // 数据总量为0，不赋值
|
|
|
+ if (count !== 0) {
|
|
|
+ this.annual.data.rows = rows
|
|
|
+ this.annual.show = true
|
|
|
+ this.allBool.push(true)
|
|
|
+ } else {
|
|
|
+ this.allBool.push(false)
|
|
|
+ this.annual.show = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 整理月度中标金额数据
|
|
|
+ arrangeMonthZbData(data) {
|
|
|
+ if (!data || Object.keys(data).length === 0) {
|
|
|
+ this.allBool.push(false)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const rows = []
|
|
|
+ const columns = ['月份']
|
|
|
+ let count = 0
|
|
|
+ const allNum = []
|
|
|
+ // 1. 先将月份提取出来, 并排序
|
|
|
+ const yearArr = []
|
|
|
+ for (const key in data) {
|
|
|
+ yearArr.push(parseInt(key))
|
|
|
+ for (const n in data[key]) {
|
|
|
+ allNum.push(data[key][n])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ yearArr.sort((a, b) => {
|
|
|
+ return a - b
|
|
|
+ })
|
|
|
+ // 2. 循环12个月份，并进行处理
|
|
|
+ yearArr.forEach((item) => {
|
|
|
+ columns.push(item + '年')
|
|
|
+ })
|
|
|
+ for (var i = 1; i <= 12; i++) {
|
|
|
+ var columnsItem = {}
|
|
|
+ columns.forEach(function (item) {
|
|
|
+ let value = ''
|
|
|
+ if (item === '月份') {
|
|
|
+ value = i + '月'
|
|
|
+ } else if (/年/g.test(item)) {
|
|
|
+ if (data[item.slice(0, -1)]) {
|
|
|
+ value = data[item.slice(0, -1)][i]
|
|
|
+ value = (value / 10000).fixed(2)
|
|
|
+ count += parseInt(value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ columnsItem[item] = value
|
|
|
+ })
|
|
|
+ rows.push(columnsItem)
|
|
|
+ }
|
|
|
+ const maxNum = Math.max.apply(
|
|
|
+ Math,
|
|
|
+ allNum.map((o) => {
|
|
|
+ return o
|
|
|
+ })
|
|
|
+ )
|
|
|
+ console.log('数据最大值为：', maxNum)
|
|
|
+ if (count !== 0 && maxNum !== 0) {
|
|
|
+ this.monthZb.show = true
|
|
|
+ this.monthZb.data.columns = columns
|
|
|
+ this.monthZb.data.rows = rows
|
|
|
+ this.allBool.push(true)
|
|
|
+ } else {
|
|
|
+ this.allBool.push(false)
|
|
|
+ this.monthZb.show = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 整理主要市场分布（中国地图）数据
|
|
|
+ arrangeMapData(data) {
|
|
|
+ if (!data || data.length === 0) {
|
|
|
+ this.areaFb.show = false
|
|
|
+ this.areaFb.data.rows = []
|
|
|
+ this.allBool.push(false)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.allBool.push(true)
|
|
|
+ const mapRows = []
|
|
|
+ let count = 0
|
|
|
+ if (data && $.isArray(data)) {
|
|
|
+ data.forEach((n) => {
|
|
|
+ count += n.projectCount
|
|
|
+ mapRows.push({
|
|
|
+ name: n.areaName,
|
|
|
+ value: n.projectCount,
|
|
|
+ amount: (n.bidamountCount / 10000).fixed(2)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (count !== 0) {
|
|
|
+ this.areaFb.show = true
|
|
|
+ this.areaFb.data.rows = mapRows
|
|
|
+ } else {
|
|
|
+ this.areaFb.show = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 整理平均折扣率数据
|
|
|
+ arrangeRateData(data) {
|
|
|
+ if (!data || Object.keys(data).length === 0) {
|
|
|
+ this.allBool.push(false)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.allBool.push(true)
|
|
|
+ const rows = []
|
|
|
+ const columns = ['日期', '全部客户']
|
|
|
+ let count = 0
|
|
|
+ for (const c in data) {
|
|
|
+ if (c !== '全部客户') {
|
|
|
+ columns.push(c)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const yearArr = []
|
|
|
+ for (const key in data['全部客户']) {
|
|
|
+ yearArr.push(key)
|
|
|
+ }
|
|
|
+ yearArr.sort((a, b) => {
|
|
|
+ return a - b
|
|
|
+ })
|
|
|
+ yearArr.forEach((item) => {
|
|
|
+ const rowsItem = {
|
|
|
+ 日期: item + '年' // eslint-disable-line
|
|
|
+ }
|
|
|
+ for (const k in data) {
|
|
|
+ count += data[k][item] * 100
|
|
|
+ rowsItem[k] =
|
|
|
+ data[k][item] == null ? null : (data[k][item] * 100).fixed(2)
|
|
|
+ }
|
|
|
+ rows.push(rowsItem)
|
|
|
+ })
|
|
|
+ if (count !== 0) {
|
|
|
+ this.rateFb.show = true
|
|
|
+ this.rateFb.data.columns = columns
|
|
|
+ this.rateFb.data.rows = rows
|
|
|
+ } else {
|
|
|
+ this.rateFb.show = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 整理客户类型分布数据
|
|
|
+ initPieChartData(res) {
|
|
|
+ if (!res || res.length === 0) {
|
|
|
+ this.clientFb.data = []
|
|
|
+ this.clientFb.show = false
|
|
|
+ this.allBool.push(false)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.allBool.push(true)
|
|
|
+ const arr = []
|
|
|
+ const data = JSON.parse(JSON.stringify(res))
|
|
|
+ // 降序排列
|
|
|
+ data.sort((a, b) => {
|
|
|
+ return b.bidamount_share - a.bidamount_share
|
|
|
+ })
|
|
|
+ data.forEach((item) => {
|
|
|
+ item.bidamount_share =
|
|
|
+ item.bidamount_share !== null && !isNaN(item.bidamount_share)
|
|
|
+ ? (item.bidamount_share * 100).fixed(2) + '%'
|
|
|
+ : '--'
|
|
|
+ item.rate_avg =
|
|
|
+ item.rate_avg !== null && !isNaN(item.rate_avg)
|
|
|
+ ? (item.rate_avg * 100).fixed(2) + '%'
|
|
|
+ : '--'
|
|
|
+ arr.push(
|
|
|
+ item.buyerClass,
|
|
|
+ item.bidamount_share,
|
|
|
+ item.bidamount_count,
|
|
|
+ item.project_count,
|
|
|
+ item.rate_avg
|
|
|
+ )
|
|
|
+ })
|
|
|
+ const normal = [
|
|
|
+ '行业',
|
|
|
+ '中标金额占比',
|
|
|
+ '中标金额',
|
|
|
+ '项目数量',
|
|
|
+ '平均折扣率'
|
|
|
+ ]
|
|
|
+ const newArr = this.arrTrans(5, arr)
|
|
|
+ newArr.unshift(normal)
|
|
|
+ this.clientFb.data = newArr
|
|
|
+ this.clientFb.show = true
|
|
|
+ this.clientFb.options.tooltip.formatter = (params) => {
|
|
|
+ let tip = ''
|
|
|
+ const d = params.data
|
|
|
+ params.marker =
|
|
|
+ '<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:' +
|
|
|
+ params.color +
|
|
|
+ '"></span>'
|
|
|
+ const percent =
|
|
|
+ '<span style="padding-left:13px;">中标金额占比：' +
|
|
|
+ d[1] +
|
|
|
+ '</span></br>'
|
|
|
+ const scale =
|
|
|
+ '<span style="padding-left:13px;">中标金额：' +
|
|
|
+ moneyUnit(d[2].fixed(2)) +
|
|
|
+ '</span></br>'
|
|
|
+ const count =
|
|
|
+ '<span style="padding-left:13px;">项目数量：' +
|
|
|
+ d[3] +
|
|
|
+ '个</span></br>'
|
|
|
+ const rate =
|
|
|
+ d[4] === '--'
|
|
|
+ ? ''
|
|
|
+ : '<span style="padding-left:13px;">平均折扣率：' +
|
|
|
+ d[4] +
|
|
|
+ '</span></br>'
|
|
|
+ tip =
|
|
|
+ params.marker + params.name + '<br/>' + percent + scale + count + rate
|
|
|
+ return tip
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 整理重要客户数据
|
|
|
+ arrangeImportantData(data) {
|
|
|
+ if (!data || data.length === 0) {
|
|
|
+ this.keyClient.data = []
|
|
|
+ this.keyClient.show = false
|
|
|
+ this.allBool.push(false)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.allBool.push(true)
|
|
|
+ const arr = []
|
|
|
+ if ($.isArray(data)) {
|
|
|
+ data.forEach((list) => {
|
|
|
+ const i1 = {
|
|
|
+ buyerclass: list.buyerclass,
|
|
|
+ topData: [],
|
|
|
+ firstData: []
|
|
|
+ }
|
|
|
+ // 重点客户
|
|
|
+ if (list.topData && $.isArray(list.topData)) {
|
|
|
+ list.topData.forEach((item) => {
|
|
|
+ i1.topData.push({
|
|
|
+ name: item.BuyerName,
|
|
|
+ money: item.CountMoney,
|
|
|
+ count: item.CountProject,
|
|
|
+ rate: item.AvgRate
|
|
|
+ ? (item.AvgRate * 100).fixed(2)
|
|
|
+ : item.AvgRate,
|
|
|
+ time: new Date(item.lastTime * 1000).pattern('yyyy/MM/dd'),
|
|
|
+ parent:
|
|
|
+ (item.CountMoney / list.topData[0].CountMoney) * 100 + '%'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 首次合作客户
|
|
|
+ if (list.firstData && $.isArray(list.firstData)) {
|
|
|
+ list.firstData.forEach((item) => {
|
|
|
+ i1.firstData.push({
|
|
|
+ name: item.BuyerName,
|
|
|
+ money: item.CountMoney,
|
|
|
+ count: item.CountProject,
|
|
|
+ rate: item.AvgRate
|
|
|
+ ? (item.AvgRate * 100).fixed(2)
|
|
|
+ : item.AvgRate,
|
|
|
+ time: new Date(item.lastTime * 1000).pattern('yyyy/MM/dd'),
|
|
|
+ parent:
|
|
|
+ (item.CountMoney / list.firstData[0].CountMoney) * 100 + '%'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 重点客户无数据时，首次合作客户必无数据
|
|
|
+ if (
|
|
|
+ list.buyerclass &&
|
|
|
+ $.isArray(list.topData) &&
|
|
|
+ list.topData.length > 0
|
|
|
+ ) {
|
|
|
+ arr.push(i1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.keyClient.data = arr
|
|
|
+ this.keyClient.show = arr.length > 0
|
|
|
+ },
|
|
|
+ /* *********** 配置项 *********** */
|
|
|
+ // 1. 年度项目统计图表单独配置
|
|
|
+ annualConfig(options) {
|
|
|
+ options.tooltip.axisPointer.shadowStyle.color = 'rgba(42, 190, 209,0.1)' // 修改点击柱条后背景颜色
|
|
|
+ options.legend.show = true // 显示底部数量、金额、圆点
|
|
|
+ options.yAxis[1].axisLabel.show = true // 显示右侧y轴刻度
|
|
|
+ const maxCountList = this.annual.data.rows.map((v) => {
|
|
|
+ return v['项目数量']
|
|
|
+ })
|
|
|
+ const maxPriceList = this.annual.data.rows.map((v) => {
|
|
|
+ return v['项目金额']
|
|
|
+ })
|
|
|
+ let maxCount = Math.ceil(Math.max.apply(null, maxCountList)).toString() // 取出数量中最大值
|
|
|
+ let maxPrice = Math.ceil(Math.max.apply(null, maxPriceList)).toString() // 取出金额中最大值
|
|
|
+ maxPrice =
|
|
|
+ Math.ceil(maxPrice / Math.pow(10, maxPrice.length - 1)) *
|
|
|
+ Math.pow(10, maxPrice.length - 1)
|
|
|
+ maxCount =
|
|
|
+ Math.ceil(maxCount / Math.pow(10, maxCount.length - 1)) *
|
|
|
+ Math.pow(10, maxCount.length - 1)
|
|
|
+ const item = options.yAxis
|
|
|
+ item[0].min = 0
|
|
|
+ item[1].min = 0
|
|
|
+ item[0].max = maxCount
|
|
|
+ item[0].interval = Math.ceil(maxCount / 5)
|
|
|
+ item[1].max = maxPrice
|
|
|
+ item[1].interval = Math.ceil((maxPrice - 0) / 5)
|
|
|
+ // 处理点击浮窗显示效果
|
|
|
+ options.tooltip.formatter = (params) => {
|
|
|
+ let tip = ''
|
|
|
+ for (let i = 0; i < params.length; i++) {
|
|
|
+ // 因柱状图颜色为渐变色，此处获取到的柱状图颜色，css不能识别，需单独设置小圆点的颜色
|
|
|
+ params[0].marker =
|
|
|
+ '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#2ABED1"></span>'
|
|
|
+ if (i === 0) {
|
|
|
+ tip =
|
|
|
+ tip +
|
|
|
+ params[i].marker +
|
|
|
+ params[i].seriesName +
|
|
|
+ '：' +
|
|
|
+ params[i].value +
|
|
|
+ '个' +
|
|
|
+ '<br/>'
|
|
|
+ } else if (i === 1) {
|
|
|
+ tip =
|
|
|
+ tip +
|
|
|
+ params[i].marker +
|
|
|
+ params[i].seriesName +
|
|
|
+ '：' +
|
|
|
+ params[i].value +
|
|
|
+ '万元' +
|
|
|
+ '<br/>'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tip +=
|
|
|
+ '<div style="padding-top:2px;text-align:center;color:#9B9CA3;">' +
|
|
|
+ ' - ' +
|
|
|
+ params[0].name +
|
|
|
+ ' - ' +
|
|
|
+ '</div>'
|
|
|
+ return tip
|
|
|
+ }
|
|
|
+ options.legend.formatter = (name) => {
|
|
|
+ const wnYuan = ['金额', '项目金额']
|
|
|
+ const ge = ['数量', '项目数量']
|
|
|
+ if (wnYuan.indexOf(name) !== -1) {
|
|
|
+ name += '（万元）-右轴'
|
|
|
+ } else if (ge.indexOf(name) !== -1) {
|
|
|
+ name += '（个）'
|
|
|
+ }
|
|
|
+ return name
|
|
|
+ }
|
|
|
+ return options
|
|
|
+ },
|
|
|
+ // 2.月度统计配置
|
|
|
+ monthZbConfig(options) {
|
|
|
+ options.legend.itemGap = 32
|
|
|
+ options.tooltip.formatter = (params) => {
|
|
|
+ let tip = ''
|
|
|
+ for (let i = 0; i < params.length; i++) {
|
|
|
+ params[i].marker =
|
|
|
+ '<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:' +
|
|
|
+ params[i].color +
|
|
|
+ ';"></span>'
|
|
|
+ if (
|
|
|
+ params[i].value[1] !== undefined &&
|
|
|
+ params[i].value[1] !== null &&
|
|
|
+ !isNaN(params[i].value[1])
|
|
|
+ ) {
|
|
|
+ tip =
|
|
|
+ tip +
|
|
|
+ params[i].marker +
|
|
|
+ params[i].seriesName +
|
|
|
+ params[i].name +
|
|
|
+ '中标金额：' +
|
|
|
+ params[i].value[1].toString().replace(/,/, '') +
|
|
|
+ '万元' +
|
|
|
+ '<br/>'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tip +=
|
|
|
+ '<div style="padding-top:2px;text-align:center;color:#9B9CA3;">' +
|
|
|
+ ' - ' +
|
|
|
+ params[0].name +
|
|
|
+ ' - ' +
|
|
|
+ '</div>'
|
|
|
+ return tip
|
|
|
+ }
|
|
|
+ return options
|
|
|
+ },
|
|
|
+ // 3.市场区域分布配置
|
|
|
+ areaFbConfig(options) {
|
|
|
+ const arr = this.areaFb.data.rows
|
|
|
+ // 最大值、最小值
|
|
|
+ const maxNum = Math.max.apply(
|
|
|
+ Math,
|
|
|
+ arr.map((o) => {
|
|
|
+ return o.value
|
|
|
+ })
|
|
|
+ )
|
|
|
+ const minNum = Math.min.apply(
|
|
|
+ Math,
|
|
|
+ arr.map((o) => {
|
|
|
+ return o.value
|
|
|
+ })
|
|
|
+ )
|
|
|
+ options.visualMap.min = minNum
|
|
|
+ options.visualMap.max = maxNum < 100 ? 100 : maxNum
|
|
|
+ // 设置最大值
|
|
|
+ options.graphic[options.graphic.length - 1].children[0].style.text =
|
|
|
+ maxNum > 100 ? maxNum : 100
|
|
|
+ options.graphic[options.graphic.length - 1].children[1].style.text = 1
|
|
|
+ options.visualMap.min = 1
|
|
|
+ options.visualMap.max = maxNum < 100 ? 100 : maxNum
|
|
|
+ options.graphic[0].children[0].style.text = '项目数量（个）'
|
|
|
+ options.tooltip.formatter = (params) => {
|
|
|
+ const index = params.dataIndex
|
|
|
+ const item = arr[index]
|
|
|
+ let string = ''
|
|
|
+ if (item) {
|
|
|
+ if (item.value && item.amount) {
|
|
|
+ string =
|
|
|
+ item.name +
|
|
|
+ '<br/>项目数量：' +
|
|
|
+ item.value +
|
|
|
+ '个<br/>中标金额：' +
|
|
|
+ item.amount +
|
|
|
+ '万元'
|
|
|
+ } else if (item.value) {
|
|
|
+ string = item.name + '<br/>项目数量：' + item.value + '个'
|
|
|
+ } else if (item.amount) {
|
|
|
+ string = item.name + '<br/>中标金额：' + item.amount + '万元'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return string
|
|
|
+ }
|
|
|
+ return options
|
|
|
+ },
|
|
|
+ // 各类型客户折扣率配置
|
|
|
+ rateFbConfig(options) {
|
|
|
+ options.yAxis[0].axisLabel.formatter = '{value}%'
|
|
|
+ options.tooltip.formatter = (params) => {
|
|
|
+ let tip = ''
|
|
|
+ for (let i = 0; i < params.length; i++) {
|
|
|
+ params[i].marker =
|
|
|
+ '<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:' +
|
|
|
+ params[i].color +
|
|
|
+ ';"></span>'
|
|
|
+ if (params[i].value[1] === undefined || params[i].value[1] === null) {
|
|
|
+ tip = tip + params[i].marker + params[i].seriesName + '：--<br/>'
|
|
|
+ } else {
|
|
|
+ tip =
|
|
|
+ tip +
|
|
|
+ params[i].marker +
|
|
|
+ params[i].seriesName +
|
|
|
+ '：' +
|
|
|
+ params[i].value[1] +
|
|
|
+ '%<br/>'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tip +=
|
|
|
+ '<div style="padding-top:2px;text-align:center;color:#9B9CA3;">' +
|
|
|
+ ' - ' +
|
|
|
+ params[0].name +
|
|
|
+ ' - ' +
|
|
|
+ '</div>'
|
|
|
+ return tip
|
|
|
+ }
|
|
|
+ return options
|
|
|
+ },
|
|
|
+ // 公共函数
|
|
|
+ arrTrans(num, arr) {
|
|
|
+ const newArr = []
|
|
|
+ arr.forEach((item, index) => {
|
|
|
+ // 计算该元素为第几个素组内
|
|
|
+ const page = Math.floor(index / num)
|
|
|
+ // 判断是否存在
|
|
|
+ if (!newArr[page]) {
|
|
|
+ newArr[page] = []
|
|
|
+ }
|
|
|
+ newArr[page].push(item)
|
|
|
+ })
|
|
|
+ return newArr
|
|
|
+ },
|
|
|
+ // 加载头部和顶部以及目录
|
|
|
+ onAjaxLoaded() {
|
|
|
+ const pageEdge = new ComputedPageEdge({
|
|
|
+ firstPageNum: 4,
|
|
|
+ callback: ({ pageNum, catalogueHtml }) => {
|
|
|
+ this.computedPageNum = pageNum
|
|
|
+ this.catalogueHtml = catalogueHtml
|
|
|
+ console.log(777777)
|
|
|
+ console.log(this.catalogueHtml )
|
|
|
+ }
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ pageEdge.addPageFooter('#report-content', 1360, 60)
|
|
|
+ }, 3 * 1000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.page-line {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ background: green;
|
|
|
+ opacity: 0.5;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+body {
|
|
|
+ position: relative;
|
|
|
+ margin: 0;
|
|
|
+ min-width: unset !important;
|
|
|
+ background: rgb(204, 204, 204);
|
|
|
+}
|
|
|
+
|
|
|
+.doc-container {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.doc-head img {
|
|
|
+ height: 30px;
|
|
|
+}
|
|
|
+.fixed-page-inset {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 9;
|
|
|
+ width: 100%;
|
|
|
+ background: transparent;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.doc-head {
|
|
|
+ position: relative;
|
|
|
+ width: 830px;
|
|
|
+ height: 130px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ color: #c0c0c0;
|
|
|
+ background: white;
|
|
|
+}
|
|
|
+.doc-footer {
|
|
|
+ .doc-footer-container {
|
|
|
+ width: 830px;
|
|
|
+ height: 60px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ position: relative;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ color: #c0c0c0;
|
|
|
+ text-align: center;
|
|
|
+ width: 830px;
|
|
|
+ background: white;
|
|
|
+}
|
|
|
+.doc-head::after,
|
|
|
+.doc-head::before,
|
|
|
+.doc-footer::after,
|
|
|
+.doc-footer::before {
|
|
|
+ top:50px;
|
|
|
+ position:absolute;
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ border-width: 0 1px 1px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.doc-head::after {
|
|
|
+ border-width: 0 0 1px 1px;
|
|
|
+ right:-30px;
|
|
|
+}
|
|
|
+.doc-head::before {
|
|
|
+ left:-30px;
|
|
|
+}
|
|
|
+.doc-footer::before {
|
|
|
+ top:15px;
|
|
|
+ left:-30px;
|
|
|
+ border-width: 1px 1px 0 0;
|
|
|
+
|
|
|
+}
|
|
|
+.doc-footer::after {
|
|
|
+ top:15px;
|
|
|
+ right: -30px;
|
|
|
+ border-width: 1px 0 0 1px;
|
|
|
+}
|
|
|
+.page[size='A4'].static-page {
|
|
|
+ height: 1360px;
|
|
|
+ .static-page--main {
|
|
|
+ height: 1150px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import '~@/assets/style/page/pdf.scss';
|
|
|
+
|
|
|
+.pro_info_ul {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .pro_list {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 32px;
|
|
|
+ width: 210px;
|
|
|
+ height: 78px;
|
|
|
+
|
|
|
+ .pro_li_con {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #2cb7ca;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pro_li_label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #686868;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pro_list:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ width: 0px;
|
|
|
+ height: 46px;
|
|
|
+ border: 0.5px solid #ececec;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pro_list:nth-child(4)::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ width: 0px;
|
|
|
+ height: 46px;
|
|
|
+ border: 0px solid #ececec;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pro_info_tip {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 25px;
|
|
|
+ width: 840px;
|
|
|
+ height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+.chart-tips {
|
|
|
+ padding: 10px 0 32px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+::v-deep {
|
|
|
+ .freetextBox{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .entform {
|
|
|
+ .ent_head {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .ent_ul .ent_list .ent_li_main {
|
|
|
+ width:250px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-table{
|
|
|
+ table{
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+
|
zhangsiya