|
|
@@ -0,0 +1,612 @@
|
|
|
+<script setup>
|
|
|
+import { getCurrentInstance, watch} from 'vue'
|
|
|
+import MarketUserScatter from '@/views/analysisReport/components/MarketUserScatter'
|
|
|
+import BuyerScaleScatter from '@/views/analysisReport/components/BuyerScaleScatter'
|
|
|
+import { SearchBidModel } from '../model'
|
|
|
+const {
|
|
|
+ recommendCardCircleModel
|
|
|
+} = SearchBidModel
|
|
|
+
|
|
|
+const that = getCurrentInstance().proxy
|
|
|
+
|
|
|
+const {
|
|
|
+ toggleAdvancedContent,
|
|
|
+ advancedInfo,
|
|
|
+ onClickInterested,
|
|
|
+ goToContent,
|
|
|
+ getProjectTitle,
|
|
|
+ goToReport,
|
|
|
+ getShowChart,
|
|
|
+ getNotModuleDataStatus,
|
|
|
+ getNowInfo,
|
|
|
+ nowModuleName,
|
|
|
+ chartCustomData,
|
|
|
+ showModuleChart,
|
|
|
+ chart,
|
|
|
+ test
|
|
|
+} = recommendCardCircleModel
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <!-- 超前项目推荐&&市场分析报告 -->
|
|
|
+ <div id="jyChartCom">
|
|
|
+ <div class="advanced-pro-rec" v-show="advancedInfo.show">
|
|
|
+ <div class="p-lr-32">
|
|
|
+ <div class="c-a-r-top">
|
|
|
+ <div class="c-a-r-title">
|
|
|
+ <div class="r-title-text">{{ getNowInfo.title }}</div>
|
|
|
+ <div class="r-title-tip">
|
|
|
+ <span
|
|
|
+ v-if="advancedInfo.showContent || getNotModuleDataStatus"
|
|
|
+ >{{ getNowInfo.desc }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-else
|
|
|
+ class="total-item"
|
|
|
+ v-for="(item, index) in advancedInfo.briefList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ item.key }}：<span class="highlight-text"
|
|
|
+ ><em>{{ item.value }}</em
|
|
|
+ >条</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="c-a-r-option">
|
|
|
+ <div
|
|
|
+ v-if="nowModuleName === '市场分析报告'"
|
|
|
+ class="c-view-report c-view-common"
|
|
|
+ @click="goToReport"
|
|
|
+ >
|
|
|
+ 查看完整报告
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="c-view-interest c-view-common"
|
|
|
+ @click="
|
|
|
+ onClickInterested(
|
|
|
+ nowModuleName === '市场分析报告' ? 'B' : 'A'
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 感兴趣点我
|
|
|
+ </div>
|
|
|
+ <div class="c-up-or-down" @click="toggleAdvancedContent()">
|
|
|
+ <el-button type="text">
|
|
|
+ {{ advancedInfo.showContent ? '收起' : '展开' }}
|
|
|
+ <i
|
|
|
+ class="el-icon--right"
|
|
|
+ :class="
|
|
|
+ 'el-icon-arrow-' +
|
|
|
+ (advancedInfo.showContent ? 'up' : 'down')
|
|
|
+ "
|
|
|
+ ></i>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-collapse-transition>
|
|
|
+
|
|
|
+ <div v-show="advancedInfo.showContent">
|
|
|
+ <!-- 超前项目 -->
|
|
|
+ <div
|
|
|
+ class="project-module"
|
|
|
+ v-if="nowModuleName === '超前项目推荐'"
|
|
|
+ :class="{ 'remove-bl': !getShowChart }"
|
|
|
+ >
|
|
|
+ <div class="project-item">
|
|
|
+ <div class="left-tag total-color">累计发布</div>
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ class="total-item"
|
|
|
+ v-for="(item, index) in advancedInfo.briefList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ item.key }}：<span class="highlight-text"
|
|
|
+ ><em>{{ item.value }}</em
|
|
|
+ >条</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="project-item">
|
|
|
+ <div class="left-tag new-color">最新项目</div>
|
|
|
+ <div class="new-group">
|
|
|
+ <span
|
|
|
+ class="ellipsis new-item"
|
|
|
+ @click="goToContent(item)"
|
|
|
+ v-for="(item, index) in advancedInfo.projectList"
|
|
|
+ :key="index"
|
|
|
+ v-html="getProjectTitle(item)"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 市场分析报告 -->
|
|
|
+ <div class="custom-report" v-if="getShowChart">
|
|
|
+ <div class="c-a-r-top" v-if="nowModuleName === '超前项目推荐'">
|
|
|
+ <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"
|
|
|
+ @click="goToReport"
|
|
|
+ >
|
|
|
+ 查看完整报告
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="c-view-interest c-view-common"
|
|
|
+ @click="onClickInterested('B')"
|
|
|
+ >
|
|
|
+ 感兴趣点我
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="c-a-r-chart">
|
|
|
+ <div
|
|
|
+ class="chart-common"
|
|
|
+ id="customerChart"
|
|
|
+ v-show="showModuleChart !== 'customer_scale'"
|
|
|
+ >
|
|
|
+ <div class="chart-title">客户分布：</div>
|
|
|
+ <div class="c-c-content">
|
|
|
+ <!-- <div id="chartTreeMap"></div> -->
|
|
|
+ <MarketUserScatter
|
|
|
+ min-height="min-height: 211px"
|
|
|
+ top="-8px"
|
|
|
+ :key="chart.treeMapKey"
|
|
|
+ ref="treeMap"
|
|
|
+ :chartData="chart.treeMapData"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="chart-common"
|
|
|
+ id="winnerChart"
|
|
|
+ v-show="showModuleChart !== 'winner_time_distribution'"
|
|
|
+ >
|
|
|
+ <div class="chart-title">中标规模分布：</div>
|
|
|
+ <div class="c-c-content chart-line">
|
|
|
+ <!-- <div id="chartLineChart"></div> -->
|
|
|
+ <BuyerScaleScatter
|
|
|
+ :key="chart.winnerLineKey"
|
|
|
+ height="211px"
|
|
|
+ :chartData="chart.winnerLineData"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="chart-common"
|
|
|
+ id="buyerChart"
|
|
|
+ v-show="showModuleChart !== 'buyer_time_distribution'"
|
|
|
+ >
|
|
|
+ <div class="chart-title">采购规模分布：</div>
|
|
|
+ <div class="c-c-content chart-line">
|
|
|
+ <!-- <div id="chartLineChartBuyer"></div> -->
|
|
|
+ <BuyerScaleScatter
|
|
|
+ :key="chart.buyLineKey"
|
|
|
+ height="211px"
|
|
|
+ :chartData="chart.buyLineData"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <custom-report :show-title="nowModuleName === '超前项目推荐'" @onReport="goToReport" @onInterest="onClickInterested('B')" v-if="getShowChart" :chartCustomData="chartCustomData"></custom-report> -->
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ custom-class="advanced-dialog"
|
|
|
+ :visible.sync="advancedInfo.showDialog"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="advanced-dialog--head"
|
|
|
+ src="@/assets/images/advanced/dialog-head.png"
|
|
|
+ alt="剑鱼标讯"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="advanced-dialog--qrcode"
|
|
|
+ src="@/assets/images/advanced/dialog-qrcode.png"
|
|
|
+ alt="扫码联系客服"
|
|
|
+ />
|
|
|
+ <div class="advanced-dialog--info">
|
|
|
+ <h4>扫码联系客服</h4>
|
|
|
+ <h4>{{ advancedInfo.dialogContent }}</h4>
|
|
|
+ <p>专业招投标大数据服务平台丨国家信息中心大数据战略合作商</p>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+#jyChartCom {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .advanced-pro-rec {
|
|
|
+ margin-top: 16px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .custom-report {
|
|
|
+ padding: 0 16px 0 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 超前项目模块
|
|
|
+ $total-color: #2abed1;
|
|
|
+ $new-color: #ff9f40;
|
|
|
+
|
|
|
+ .total-item {
|
|
|
+ line-height: 24px;
|
|
|
+
|
|
|
+ em {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ & + .total-item {
|
|
|
+ margin-left: 72px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-module {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #1d1d1d;
|
|
|
+ padding: 24px 32px;
|
|
|
+ border-bottom: 1px solid #ececec;
|
|
|
+
|
|
|
+ &.remove-bl {
|
|
|
+ border-bottom-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-tag {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 0 9px;
|
|
|
+ border-radius: 0 12px 12px 0;
|
|
|
+ margin-right: 24px;
|
|
|
+
|
|
|
+ &.total-color {
|
|
|
+ background: $total-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.new-color {
|
|
|
+ background: $new-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ & + .project-item {
|
|
|
+ margin-top: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .new-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .new-item {
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ max-width: calc(50% - 72px);
|
|
|
+
|
|
|
+ & + .new-item {
|
|
|
+ margin-left: 36px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 7px;
|
|
|
+ height: 7px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 8px;
|
|
|
+ background: $new-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .p-lr-32 {
|
|
|
+ padding: 0 16px 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-up-or-down {
|
|
|
+ margin-left: 32px;
|
|
|
+
|
|
|
+ .el-icon--right {
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button--text {
|
|
|
+ padding: 0;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 19px;
|
|
|
+ color: #686868;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .c-view-interest {
|
|
|
+ margin-left: 36px;
|
|
|
+ background: #2abed1;
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid #2abdd1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.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;
|
|
|
+ border: 1px solid #2abdd1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep {
|
|
|
+ .advanced-dialog {
|
|
|
+ width: 370px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__close {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2abdd1;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__header,
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--head {
|
|
|
+ margin-top: -58px;
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--qrcode {
|
|
|
+ margin-top: 26px;
|
|
|
+ margin-bottom: 22px;
|
|
|
+ width: 154px;
|
|
|
+ height: 154px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--info {
|
|
|
+ padding: 24px 20px;
|
|
|
+ padding-top: 0;
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ color: #1d1d1d;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-top: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18px;
|
|
|
+ text-align: center;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
zhangsiya