feat:筛选条件组件、项目明细组件开发

src/jfw/modules/app/src/web/staticres/jyapp/big-member/js/report_detail_month.js

@@ -3,6 +3,9 @@ var vNode = {
     el: '#report_month',
     components: {
       monthReportExample: monthReportExample,
+      filterComponent: filterComponent,
+      projectHeader: projectHeaderComponent,
+      projectCell: projectCellComponent
     },
     data: {
         scrollTop:0,
@@ -121,7 +124,8 @@ var vNode = {
             renderer:'svg'
         },
         power: [],
-        bigStatus: 0
+        bigStatus: 0,
+        tabActive: '0'
     },
     computed: {
         showCurMonthCount: function () {

src/jfw/modules/app/src/web/templates/big-member/page_report_detail_month.html

@@ -20,6 +20,8 @@
     <link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/v-charts/1.19.0/style.min.css />
     <!--E-当前页面的css资源-->
     <link rel="stylesheet" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/css/index.css?v={{Msg "seo" "version"}}' />
+    <link rel="stylesheet" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/filter/css/project_header.css?v={{Msg "seo" "version"}}' />
+    <link rel="stylesheet" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/filter/css/project_cell.css?v={{Msg "seo" "version"}}' />
     <link rel="stylesheet" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/css/report_detail_month.css?v={{Msg "seo" "version"}}' />
     <style>
       .example-title{
@@ -106,384 +108,396 @@
             <p>项目预算/项目规模：少量预算金额、中标金额未公开或为空的项目，在计算项目总预算、总规模时不参与统计；</p>
             <p>项目重复统计：一个招标项目可能同属于多个关键词组，故各关键词组的数据统计之和可能大于整体市场的统计。</p>
         </div>
-        <!-- 项目数量 1-->
-        <div class="chart count_chart" v-if="isShow.show_1">
-            <div class="chart_title">项目数量</div>
-            <div>
-                <ve-histogram
-                    height="284px"
-                    :init-options="initRendererSvg"
-                    :data="pCountData"
-                    :after-config="barConfig1 "
-                    :extend="barChart.chartExtend">
-                </ve-histogram>
+        <van-tabs v-model:active="tabActive" sticky>
+          <van-tab name="0" title="本月分析">
+            <!-- 项目数量 1-->
+            <div class="chart count_chart" v-if="isShow.show_1">
+                <div class="chart_title">项目数量</div>
+                <div>
+                    <ve-histogram
+                        height="284px"
+                        :init-options="initRendererSvg"
+                        :data="pCountData"
+                        :after-config="barConfig1 "
+                        :extend="barChart.chartExtend">
+                    </ve-histogram>
+                </div>
+                <div v-if="!getStatus" @click="goCollect('month_project_count')" class="mark-words">分析市场年度项目增长趋势！<em class="mark-icon-right"></em></div>
             </div>
-            <div v-if="!getStatus" @click="goCollect('month_project_count')" class="mark-words">分析市场年度项目增长趋势！<em class="mark-icon-right"></em></div>
-        </div>
-        <!-- 项目规模 2-->
-        <div class="chart scale_chart" v-if="isShow.show_2">
-            <div class="chart_title">项目规模</div>
-            <div>
-                <ve-histogram
-                    height="284px"
-                    :init-options="initRendererSvg"
-                    :data="pScaleData"
-                    :after-config="barConfig2"
-                    :settings="settings1"
-                    :extend="barChart.chartExtend">
-                </ve-histogram>
+            <!-- 项目规模 2-->
+            <div class="chart scale_chart" v-if="isShow.show_2">
+                <div class="chart_title">项目规模</div>
+                <div>
+                    <ve-histogram
+                        height="284px"
+                        :init-options="initRendererSvg"
+                        :data="pScaleData"
+                        :after-config="barConfig2"
+                        :settings="settings1"
+                        :extend="barChart.chartExtend">
+                    </ve-histogram>
+                </div>
+                <div v-if="!getStatus" @click="goCollect('month_project_bidamount_count')" class="mark-words">分析年度市场容量，挖掘销售商机！<em class="mark-icon-right"></em></div>
             </div>
-            <div v-if="!getStatus" @click="goCollect('month_project_bidamount_count')" class="mark-words">分析年度市场容量，挖掘销售商机！<em class="mark-icon-right"></em></div>
-        </div>
-        <!-- 本月项目数量 3-->
-        <div class="chart scale_chart" v-if="isShow.show_3">
-            <div class="chart_title">本月项目数量</div>
-            <div class="progress-bar-container">
-                <div class="progress-bar-item" v-for="(item,index) in showCurMonthCount" :key="index">
-                    <div class="item-label">
-                        <span class="item-name">${item.item}</span>
-                        <span class="item-count" :class="[index < 3 && !getStatus ? 'shade': '']">${item.count}个</span>
+            <!-- 本月项目数量 3-->
+            <div class="chart scale_chart" v-if="isShow.show_3">
+                <div class="chart_title">本月项目数量</div>
+                <div class="progress-bar-container">
+                    <div class="progress-bar-item" v-for="(item,index) in showCurMonthCount" :key="index">
+                        <div class="item-label">
+                            <span class="item-name">${item.item}</span>
+                            <span class="item-count" :class="[index < 3 && !getStatus ? 'shade': '']">${item.count}个</span>
+                        </div>
+                        <div class="item-progress">
+                            <span class="item-progress-count" :class="index > 2 ? 'blue-progress' : 'yellow-progress'" :style="{width: item.parent}"></span>
+                        </div>
                     </div>
-                    <div class="item-progress">
-                        <span class="item-progress-count" :class="index > 2 ? 'blue-progress' : 'yellow-progress'" :style="{width: item.parent}"></span>
+                </div>
+                <div v-if="curMonthCount.list.length > 5 && !curMonthCount.showAll">
+                    <div class="more">
+                        <span @click="curMonthCount.showAll = true">查看更多</span>
                     </div>
                 </div>
+                <div v-if="!getStatus" @click="goCollect('month_project_matchitem_count')" class="mark-words">分析行业市场容量，为企业决策提供数据支持！<em class="mark-icon-right"></em></div>
             </div>
-            <div v-if="curMonthCount.list.length > 5 && !curMonthCount.showAll">
-                <div class="more">
-                    <span @click="curMonthCount.showAll = true">查看更多</span>
+            <!-- 本月项目规模 4-->
+            <div class="chart month_scale_chart" v-if="isShow.show_4">
+                <div class="chart_title">本月项目规模</div>
+                <div>
+                    <ve-histogram
+                        height="284px"
+                        :init-options="initRendererSvg"
+                        :data="curMonthScaleData"
+                        :settings="settings2"
+                        :after-config="monthScaleConfig"
+                        :extend="barChart2.chartExtend">
+                    </ve-histogram>
                 </div>
+                <div v-if="!getStatus" @click="goCollect('month_project_matchitem_bidamount')" class="mark-words">对比项目规模、环比增长率，分析市场变化趋势！<em class="mark-icon-right"></em></div>
             </div>
-            <div v-if="!getStatus" @click="goCollect('month_project_matchitem_count')" class="mark-words">分析行业市场容量，为企业决策提供数据支持！<em class="mark-icon-right"></em></div>
-        </div>
-        <!-- 本月项目规模 4-->
-        <div class="chart month_scale_chart" v-if="isShow.show_4">
-            <div class="chart_title">本月项目规模</div>
-            <div>
-                <ve-histogram
-                    height="284px"
-                    :init-options="initRendererSvg"
-                    :data="curMonthScaleData"
-                    :settings="settings2"
-                    :after-config="monthScaleConfig"
-                    :extend="barChart2.chartExtend">
-                </ve-histogram>
-            </div>
-            <div v-if="!getStatus" @click="goCollect('month_project_matchitem_bidamount')" class="mark-words">对比项目规模、环比增长率，分析市场变化趋势！<em class="mark-icon-right"></em></div>
-        </div>
-        <!-- 本月项目数量分布 5-->
-        <div class="chart month_scale_chart" v-if="isShow.show_5">
-            <div class="chart_title">本月项目数量分布</div>
-            <div>
-                <ve-map
-                    height="400px"
-                    :init-options="initRendererSvg"
-                    :data="mapCountData"
-                    :after-config="mapCountConfig"
-                    :settings="mapSettings.chartSettings"
-                    :extend="mapSettings.chartExtend">
-                </ve-map>
+            <!-- 本月项目数量分布 5-->
+            <div class="chart month_scale_chart" v-if="isShow.show_5">
+                <div class="chart_title">本月项目数量分布</div>
+                <div>
+                    <ve-map
+                        height="400px"
+                        :init-options="initRendererSvg"
+                        :data="mapCountData"
+                        :after-config="mapCountConfig"
+                        :settings="mapSettings.chartSettings"
+                        :extend="mapSettings.chartExtend">
+                    </ve-map>
+                </div>
+                <div v-if="!getStatus" @click="goCollect('month_project_area_count')" class="mark-words">直观获取各省市场区域热度，帮助挖掘和拓展商机！<em class="mark-icon-right"></em></div>
             </div>
-            <div v-if="!getStatus" @click="goCollect('month_project_area_count')" class="mark-words">直观获取各省市场区域热度，帮助挖掘和拓展商机！<em class="mark-icon-right"></em></div>
-        </div>
-        <!-- 本月项目规模分布 6-->
-        <div class="chart" v-if="isShow.show_6">
-            <div class="chart_title">本月项目规模分布</div>
-            <div>
-                <ve-map
-                    height="400px"
-                    :init-options="initRendererSvg"
-                    :data="mapScaleData"
-                    :after-config="mapScaleConfig"
-                    :settings="mapSettings2.chartSettings"
-                    :extend="mapSettings2.chartExtend">
-                </ve-map>
+            <!-- 本月项目规模分布 6-->
+            <div class="chart" v-if="isShow.show_6">
+                <div class="chart_title">本月项目规模分布</div>
+                <div>
+                    <ve-map
+                        height="400px"
+                        :init-options="initRendererSvg"
+                        :data="mapScaleData"
+                        :after-config="mapScaleConfig"
+                        :settings="mapSettings2.chartSettings"
+                        :extend="mapSettings2.chartExtend">
+                    </ve-map>
+                </div>
+                <div v-if="!getStatus" @click="goCollect('month_project_area_bidamount')" class="mark-words">全面分析各省市场容量，帮助拓展渠道和市场！<em class="mark-icon-right"></em></div>
             </div>
-            <div v-if="!getStatus" @click="goCollect('month_project_area_bidamount')" class="mark-words">全面分析各省市场容量，帮助拓展渠道和市场！<em class="mark-icon-right"></em></div>
-        </div>
-        <!-- 本月项目数量TOP10采购行业 7-->
-        <div class="chart rank" v-if="isShow.show_7 && getStatus"> 
-            <!-- <div class="chart_title">本月项目数量TOP10采购行业</div> -->
-            <div class="chart_title">本月项目数量采购行业排行榜</div>
-            <div class="warm_">注：采购行业为“其它”不参与排名</div>
-            <div class="progress-bar-container">
-                <div class="progress-bar-item" v-for="(item,index) in showCurMonthCountTop" :key="index">
-                    <div class="item-label">
-                        <span class="item-name">${item.buyerclass}</span>
-                        <span class="item-count">${item.count}个</span>
+            <!-- 本月项目数量TOP10采购行业 7-->
+            <div class="chart rank" v-if="isShow.show_7 && getStatus"> 
+                <!-- <div class="chart_title">本月项目数量TOP10采购行业</div> -->
+                <div class="chart_title">本月项目数量采购行业排行榜</div>
+                <div class="warm_">注：采购行业为“其它”不参与排名</div>
+                <div class="progress-bar-container">
+                    <div class="progress-bar-item" v-for="(item,index) in showCurMonthCountTop" :key="index">
+                        <div class="item-label">
+                            <span class="item-name">${item.buyerclass}</span>
+                            <span class="item-count">${item.count}个</span>
+                        </div>
+                        <div class="item-progress">
+                            <span class="item-progress-count" :class="index > 2 ? 'blue-progress' : 'yellow-progress'" :style="{width: item.parent}"></span>
+                        </div>
                     </div>
-                    <div class="item-progress">
-                        <span class="item-progress-count" :class="index > 2 ? 'blue-progress' : 'yellow-progress'" :style="{width: item.parent}"></span>
+                </div>
+                <div v-if="curMonthCountTop.list.length > 5 && !curMonthCountTop.showAll">
+                    <div class="more">
+                        <!-- <span @click="curMonthCountTop.showAll = true">查看更多</span> -->
+                        <span @click="goTable('curMonthCountTop')">查看全部</span>
                     </div>
                 </div>
             </div>
-            <div v-if="curMonthCountTop.list.length > 5 && !curMonthCountTop.showAll">
-                <div class="more">
-                    <!-- <span @click="curMonthCountTop.showAll = true">查看更多</span> -->
-                    <span @click="goTable('curMonthCountTop')">查看全部</span>
-                </div>
+            <div v-if="!getStatus" >
+              <!-- <p class="example-title">本月项目数量TOP10采购行业</p> -->
+              <p class="example-title">本月项目数量采购行业排行榜</p>
+              <div class="vip_component" style="height:9.92rem;background:url('/common-module/collection/image/report/1.png') no-repeat;background-size:100% 100%">
+                <month-report-example :status="bigStatus" :power="power" type="item_1" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/1-1.png'></month-report-example>
+              </div>
             </div>
-        </div>
-        <div v-if="!getStatus" >
-          <!-- <p class="example-title">本月项目数量TOP10采购行业</p> -->
-          <p class="example-title">本月项目数量采购行业排行榜</p>
-          <div class="vip_component" style="height:9.92rem;background:url('/common-module/collection/image/report/1.png') no-repeat;background-size:100% 100%">
-            <month-report-example :status="bigStatus" :power="power" type="item_1" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/1-1.png'></month-report-example>
-          </div>
-        </div>
-        <!-- 本月项目规模TOP10采购行业 8-->
-        <div class="chart rank" v-if="isShow.show_8  && getStatus">
-            <!-- <div class="chart_title">本月项目规模TOP10采购行业</div> -->
-            <div class="chart_title">本月项目规模采购行业排行榜</div>
-            <div class="warm_">注：采购行业为“其它”不参与排名</div>
-            <div class="progress-bar-container">
-                <div class="progress-bar-item" v-for="(item,index) in showCurMonthScaleTop" :key="index">
-                    <div class="item-label">
-                        <span class="item-name">${item.buyerclass}</span>
-                        <span class="item-count">${item.bidamount}万元</span>
+            <!-- 本月项目规模TOP10采购行业 8-->
+            <div class="chart rank" v-if="isShow.show_8  && getStatus">
+                <!-- <div class="chart_title">本月项目规模TOP10采购行业</div> -->
+                <div class="chart_title">本月项目规模采购行业排行榜</div>
+                <div class="warm_">注：采购行业为“其它”不参与排名</div>
+                <div class="progress-bar-container">
+                    <div class="progress-bar-item" v-for="(item,index) in showCurMonthScaleTop" :key="index">
+                        <div class="item-label">
+                            <span class="item-name">${item.buyerclass}</span>
+                            <span class="item-count">${item.bidamount}万元</span>
+                        </div>
+                        <div class="item-progress">
+                            <span class="item-progress-count" :class="index > 2 ? 'blue-progress' : 'yellow-progress'" :style="{width: item.parent}"></span>
+                        </div>
                     </div>
-                    <div class="item-progress">
-                        <span class="item-progress-count" :class="index > 2 ? 'blue-progress' : 'yellow-progress'" :style="{width: item.parent}"></span>
+                </div>
+                <div v-if="curMonthScaleTop.list.length > 5 && !curMonthScaleTop.showAll">
+                    <div class="more">
+                        <!-- <span @click="curMonthScaleTop.showAll = true">查看更多</span> -->
+                        <span @click="goTable('curMonthScaleTop')">查看全部</span>
                     </div>
                 </div>
             </div>
-            <div v-if="curMonthScaleTop.list.length > 5 && !curMonthScaleTop.showAll">
-                <div class="more">
-                    <!-- <span @click="curMonthScaleTop.showAll = true">查看更多</span> -->
-                    <span @click="goTable('curMonthScaleTop')">查看全部</span>
-                </div>
+            <div v-if="!getStatus">
+              <!-- <p class="example-title">本月项目规模TOP10采购行业</p> -->
+              <p class="example-title">本月项目规模采购行业排行榜</p>
+              <div class="vip_component" style="height:9.92rem;background:url('/common-module/collection/image/report/2.png') no-repeat;background-size:100% 100%">
+                <month-report-example :status="bigStatus" :power="power" type="item_2" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/2-1.png'></month-report-example>
+              </div>
             </div>
-        </div>
-        <div v-if="!getStatus">
-          <!-- <p class="example-title">本月项目规模TOP10采购行业</p> -->
-          <p class="example-title">本月项目规模采购行业排行榜</p>
-          <div class="vip_component" style="height:9.92rem;background:url('/common-module/collection/image/report/2.png') no-repeat;background-size:100% 100%">
-            <month-report-example :status="bigStatus" :power="power" type="item_2" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/2-1.png'></month-report-example>
-          </div>
-        </div>
-        <!-- 本月项目平均规模TOP10采购行业 9-->
-        <div class="chart rank" v-if="isShow.show_9  && getStatus">
-            <!-- <div class="chart_title">本月项目平均规模TOP10采购行业</div> -->
-            <div class="chart_title">本月项目平均规模采购行业排行榜</div>
-            <div class="warm_">注：采购行业为“其它”不参与排名</div>
-            <div class="progress-bar-container">
-                <div class="progress-bar-item" v-for="(item,index) in showAverageScaleTop" :key="index">
-                    <div class="item-label">
-                        <span class="item-name">${item.buyerclass}</span>
-                        <span class="item-count">${item.average}万元</span>
+            <!-- 本月项目平均规模TOP10采购行业 9-->
+            <div class="chart rank" v-if="isShow.show_9  && getStatus">
+                <!-- <div class="chart_title">本月项目平均规模TOP10采购行业</div> -->
+                <div class="chart_title">本月项目平均规模采购行业排行榜</div>
+                <div class="warm_">注：采购行业为“其它”不参与排名</div>
+                <div class="progress-bar-container">
+                    <div class="progress-bar-item" v-for="(item,index) in showAverageScaleTop" :key="index">
+                        <div class="item-label">
+                            <span class="item-name">${item.buyerclass}</span>
+                            <span class="item-count">${item.average}万元</span>
+                        </div>
+                        <div class="item-progress">
+                            <span class="item-progress-count" :class="index > 2 ? 'blue-progress' : 'yellow-progress'" :style="{width: item.parent}"></span>
+                        </div>
                     </div>
-                    <div class="item-progress">
-                        <span class="item-progress-count" :class="index > 2 ? 'blue-progress' : 'yellow-progress'" :style="{width: item.parent}"></span>
+                </div>
+                <div v-if="averageScaleTop.list.length > 5 && !averageScaleTop.showAll">
+                    <div class="more">
+                        <!-- <span @click="averageScaleTop.showAll = true">查看更多</span> -->
+                        <span @click="goTable('averageScaleTop')">查看全部</span>
                     </div>
                 </div>
             </div>
-            <div v-if="averageScaleTop.list.length > 5 && !averageScaleTop.showAll">
-                <div class="more">
-                    <!-- <span @click="averageScaleTop.showAll = true">查看更多</span> -->
-                    <span @click="goTable('averageScaleTop')">查看全部</span>
+            <div v-if="!getStatus">
+              <!-- <p class="example-title">本月项目平均规模TOP10采购行业</p> -->
+              <p class="example-title">本月项目平均规模采购行业排行榜</p>
+              <div class="vip_component" style="height:9.92rem;background:url('/common-module/collection/image/report/3.png') no-repeat;background-size:100% 100%">
+                <month-report-example :status="bigStatus" :power="power" type="item_3" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/3-1.png'></month-report-example>
+              </div>
+            </div>
+            <!-- 本月中标企业注册地分布 10-->
+            <div class="chart" v-if="isShow.show_10  && getStatus">
+                <div class="chart_title">本月中标企业注册地分布</div>
+                <div>
+                    <ve-map
+                        ref="chartRegCount"
+                        :init-options="initRendererSvg"
+                        height="400px"
+                        :data="mapRegionData"
+                        :after-config="mapRegCountConfig"
+                        :settings="mapSettings3.chartSettings"
+                        :extend="mapSettings3.chartExtend">
+                    </ve-map>
                 </div>
             </div>
-        </div>
-        <div v-if="!getStatus">
-          <!-- <p class="example-title">本月项目平均规模TOP10采购行业</p> -->
-          <p class="example-title">本月项目平均规模采购行业排行榜</p>
-          <div class="vip_component" style="height:9.92rem;background:url('/common-module/collection/image/report/3.png') no-repeat;background-size:100% 100%">
-            <month-report-example :status="bigStatus" :power="power" type="item_3" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/3-1.png'></month-report-example>
-          </div>
-        </div>
-        <!-- 本月中标企业注册地分布 10-->
-        <div class="chart" v-if="isShow.show_10  && getStatus">
-            <div class="chart_title">本月中标企业注册地分布</div>
-            <div>
-                <ve-map
-                    ref="chartRegCount"
-                    :init-options="initRendererSvg"
-                    height="400px"
-                    :data="mapRegionData"
-                    :after-config="mapRegCountConfig"
-                    :settings="mapSettings3.chartSettings"
-                    :extend="mapSettings3.chartExtend">
-                </ve-map>
+            <div v-if="!getStatus">
+              <p class="example-title">本月中标企业注册地分布</p>
+              <div class="vip_component" style="height:9.8rem;background:url('/common-module/collection/image/report/4.png?v={{Msg "seo" "version"}}') no-repeat;background-size:100% 100%">
+                <month-report-example :status="bigStatus" :power="power" type="item_4" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/4-1.png?v={{Msg "seo" "version"}}'></month-report-example>
+              </div>
             </div>
-        </div>
-        <div v-if="!getStatus">
-          <p class="example-title">本月中标企业注册地分布</p>
-          <div class="vip_component" style="height:9.8rem;background:url('/common-module/collection/image/report/4.png?v={{Msg "seo" "version"}}') no-repeat;background-size:100% 100%">
-            <month-report-example :status="bigStatus" :power="power" type="item_4" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/4-1.png?v={{Msg "seo" "version"}}'></month-report-example>
-          </div>
-        </div>
-        <!-- 本月中标企业注册资本分布 11-->
-        <div class="chart rank" v-if="isShow.show_11  && getStatus">
-            <div class="chart_title">本月中标企业注册资本分布</div>
-            <div class="progress-bar-container">
-                <div class="progress-bar-item" v-for="(item,index) in regCapitalTop.list" :key="index">
-                    <div class="item-label">
-                        <span class="item-name">${item.range}</span>
-                        <span class="item-count">${item.count}个</span>
-                    </div>
-                    <div class="item-progress">
-                        <span class="item-progress-count blue-progress" :style="{width: item.parent}"></span>
+            <!-- 本月中标企业注册资本分布 11-->
+            <div class="chart rank" v-if="isShow.show_11  && getStatus">
+                <div class="chart_title">本月中标企业注册资本分布</div>
+                <div class="progress-bar-container">
+                    <div class="progress-bar-item" v-for="(item,index) in regCapitalTop.list" :key="index">
+                        <div class="item-label">
+                            <span class="item-name">${item.range}</span>
+                            <span class="item-count">${item.count}个</span>
+                        </div>
+                        <div class="item-progress">
+                            <span class="item-progress-count blue-progress" :style="{width: item.parent}"></span>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div v-if="!getStatus">
-          <p class="example-title">本月中标企业注册资本分布</p>
-          <div class="vip_component" style="height:10.8rem;background:url('/common-module/collection/image/report/5.png') no-repeat;background-size:100% 100%">
-            <month-report-example :status="bigStatus" :power="power" type="item_5" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/5-1.png'></month-report-example>
-          </div>
-        </div>
-        <!-- 本月中标企业中标项目数量分布 12-->
-        <div class="chart month_scale_chart" v-if="isShow.show_12  && getStatus">
-            <div class="chart_title">本月中标企业中标项目数量分布</div>
-            <div>
-                <ve-histogram
-                    height="284px"
-                    :init-options="initRendererSvg"
-                    :data="curWinEntCountData"
-                    :settings="settings3"
-                    :extend="barChart3.chartExtend">
-                </ve-histogram>
+            <div v-if="!getStatus">
+              <p class="example-title">本月中标企业注册资本分布</p>
+              <div class="vip_component" style="height:10.8rem;background:url('/common-module/collection/image/report/5.png') no-repeat;background-size:100% 100%">
+                <month-report-example :status="bigStatus" :power="power" type="item_5" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/5-1.png'></month-report-example>
+              </div>
             </div>
-        </div>
-        <div v-if="!getStatus">
-          <p class="example-title">本月中标企业中标项目数量分布</p>
-          <div class="vip_component" style="height:10.24rem;background:url('/common-module/collection/image/report/6.png') no-repeat;background-size:100% 100%">
-            <month-report-example :status="bigStatus" :power="power" type="item_6" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/6-1.png'></month-report-example>
-          </div>
-        </div>
-        <!-- 本月采购单位排行榜 13-->
-        <div class="chart rank" v-if="isShow.show_13  && getStatus">
-            <div class="chart_title">本月采购单位排行榜</div>
-            <div class="progress-bar-container">
-                <div class="progress-bar-item" v-for="(item,index) in showBuyerTop" :key="index">
-                    <div class="item-label">
-                        <span class="item-name">${item.buyer}</span>
-                        <span class="item-count">${item.count}个</span>
-                    </div>
-                    <div class="item-progress">
-                        <span class="item-progress-count" :class="index > 2 ? 'blue-progress' : 'yellow-progress'" :style="{width: item.parent}"></span>
-                    </div>
+            <!-- 本月中标企业中标项目数量分布 12-->
+            <div class="chart month_scale_chart" v-if="isShow.show_12  && getStatus">
+                <div class="chart_title">本月中标企业中标项目数量分布</div>
+                <div>
+                    <ve-histogram
+                        height="284px"
+                        :init-options="initRendererSvg"
+                        :data="curWinEntCountData"
+                        :settings="settings3"
+                        :extend="barChart3.chartExtend">
+                    </ve-histogram>
                 </div>
             </div>
-            <div v-if="buyerTop.list.length > 5 && !buyerTop.showAll">
-                <div class="more">
-                    <span @click="buyerTop.showAll = true">查看更多</span>
-                </div>
+            <div v-if="!getStatus">
+              <p class="example-title">本月中标企业中标项目数量分布</p>
+              <div class="vip_component" style="height:10.24rem;background:url('/common-module/collection/image/report/6.png') no-repeat;background-size:100% 100%">
+                <month-report-example :status="bigStatus" :power="power" type="item_6" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/6-1.png'></month-report-example>
+              </div>
             </div>
-        </div>
-        <div v-if="!getStatus">
-          <p class="example-title">本月采购单位排行榜</p>
-          <div class="vip_component" style="height:9.76rem;background:url('/common-module/collection/image/report/7.png') no-repeat;background-size:100% 100%">
-            <month-report-example :status="bigStatus" :power="power" type="item_7" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/7-1.png'></month-report-example>
-          </div>
-        </div>
-        <!-- 本月中标企业排行榜 14-->
-        <div class="chart rank" v-if="isShow.show_14  && getStatus">
-            <div class="chart_title">本月中标企业排行榜</div>
-            <div>
-                <div class="current-list" v-for="(item,index) in showEntWinTop">
-                    <div class="win-name">
-                        <span v-if="index === 0" class="index first-index">${index + 1}</span>
-                        <span v-else-if="index === 1" class="index second-index">${index + 1}</span>
-                        <span v-else-if="index === 2" class="index third-index">${index + 1}</span>
-                        <span v-else class="index ">${index + 1}</span>
-                        <span class="title">${item.winner || '--'}</span>
-                    </div>
-                    <div class="item-double">
-                        <div class="item-single">
-                            <span class="i-label">企业类型</span>
-                            <span class="i-value">${item.type || '--'}</span>
+            <!-- 本月采购单位排行榜 13-->
+            <div class="chart rank" v-if="isShow.show_13  && getStatus">
+                <div class="chart_title">本月采购单位排行榜</div>
+                <div class="progress-bar-container">
+                    <div class="progress-bar-item" v-for="(item,index) in showBuyerTop" :key="index">
+                        <div class="item-label">
+                            <span class="item-name">${item.buyer}</span>
+                            <span class="item-count">${item.count}个</span>
                         </div>
+                        <div class="item-progress">
+                            <span class="item-progress-count" :class="index > 2 ? 'blue-progress' : 'yellow-progress'" :style="{width: item.parent}"></span>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="buyerTop.list.length > 5 && !buyerTop.showAll">
+                    <div class="more">
+                        <span @click="buyerTop.showAll = true">查看更多</span>
                     </div>
-                    <div class="item-double">
-                        <div class="item-single">
-                            <span class="i-label">企业注册地</span>
-                            <span class="i-value">${item.area || '--'} ${item.city}</span>
+                </div>
+            </div>
+            <div v-if="!getStatus">
+              <p class="example-title">本月采购单位排行榜</p>
+              <div class="vip_component" style="height:9.76rem;background:url('/common-module/collection/image/report/7.png') no-repeat;background-size:100% 100%">
+                <month-report-example :status="bigStatus" :power="power" type="item_7" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/7-1.png'></month-report-example>
+              </div>
+            </div>
+            <!-- 本月中标企业排行榜 14-->
+            <div class="chart rank" v-if="isShow.show_14  && getStatus">
+                <div class="chart_title">本月中标企业排行榜</div>
+                <div>
+                    <div class="current-list" v-for="(item,index) in showEntWinTop">
+                        <div class="win-name">
+                            <span v-if="index === 0" class="index first-index">${index + 1}</span>
+                            <span v-else-if="index === 1" class="index second-index">${index + 1}</span>
+                            <span v-else-if="index === 2" class="index third-index">${index + 1}</span>
+                            <span v-else class="index ">${index + 1}</span>
+                            <span class="title">${item.winner || '--'}</span>
                         </div>
-                        <div class="item-single">
-                            <span class="i-label">注册资本（万元）</span>
-                            <span class="i-value">${item.capital || '--'}</span>
+                        <div class="item-double">
+                            <div class="item-single">
+                                <span class="i-label">企业类型</span>
+                                <span class="i-value">${item.type || '--'}</span>
+                            </div>
                         </div>
-                    </div>
-                    <div class="item-double">
-                        <div class="item-single">
-                            <span class="i-label">注册时间</span>
-                            <span class="i-value">${item.establish_date || '--'}</span>
+                        <div class="item-double">
+                            <div class="item-single">
+                                <span class="i-label">企业注册地</span>
+                                <span class="i-value">${item.area || '--'} ${item.city}</span>
+                            </div>
+                            <div class="item-single">
+                                <span class="i-label">注册资本（万元）</span>
+                                <span class="i-value">${item.capital || '--'}</span>
+                            </div>
                         </div>
-                        <div class="item-single">
-                            <span class="i-label">中标项目数量</span>
-                            <span class="i-value">${item.project_count || '--'}</span>
+                        <div class="item-double">
+                            <div class="item-single">
+                                <span class="i-label">注册时间</span>
+                                <span class="i-value">${item.establish_date || '--'}</span>
+                            </div>
+                            <div class="item-single">
+                                <span class="i-label">中标项目数量</span>
+                                <span class="i-value">${item.project_count || '--'}</span>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div v-if="curMonthEntWin.list.length > 3 && !curMonthEntWin.showAll">
-                <div class="more">
-                    <span @click="curMonthEntWin.showAll = true">查看更多</span>
+                <div v-if="curMonthEntWin.list.length > 3 && !curMonthEntWin.showAll">
+                    <div class="more">
+                        <span @click="curMonthEntWin.showAll = true">查看更多</span>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div v-if="!getStatus">
-          <p class="example-title">本月中标企业排行榜</p>
-          <div class="vip_component" style="height:10.4rem;background:url('/common-module/collection/image/report/8.png') no-repeat;background-size:100% 100%">
-            <month-report-example :status="bigStatus" :power="power" type="item_8" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/8-1.png'></month-report-example>
-          </div>
-        </div>
-        <!-- 本月项目规模排行榜 15-->
-        <div class="chart rank" v-if="isShow.show_15  && getStatus">
-            <div class="chart_title">本月项目规模排行榜</div>
-            <div>
-                <div class="current-list" v-for="(item,index) in showScaleWin">
-                    <div class="win-name">
-                        <span v-if="index === 0" class="index first-index">${index + 1}</span>
-                        <span v-else-if="index === 1" class="index second-index">${index + 1}</span>
-                        <span v-else-if="index === 2" class="index third-index">${index + 1}</span>
-                        <span v-else class="index ">${index + 1}</span>
-                        <span class="title">${item.projectname}</span>
-                    </div>
-                    <div class="item-double">
-                        <div class="item-single">
-                            <span class="i-label">所在地</span>
-                            <span class="i-value">${item.area || '--'} ${item.city}</span>
+            <div v-if="!getStatus">
+              <p class="example-title">本月中标企业排行榜</p>
+              <div class="vip_component" style="height:10.4rem;background:url('/common-module/collection/image/report/8.png') no-repeat;background-size:100% 100%">
+                <month-report-example :status="bigStatus" :power="power" type="item_8" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/8-1.png'></month-report-example>
+              </div>
+            </div>
+            <!-- 本月项目规模排行榜 15-->
+            <div class="chart rank" v-if="isShow.show_15  && getStatus">
+                <div class="chart_title">本月项目规模排行榜</div>
+                <div>
+                    <div class="current-list" v-for="(item,index) in showScaleWin">
+                        <div class="win-name">
+                            <span v-if="index === 0" class="index first-index">${index + 1}</span>
+                            <span v-else-if="index === 1" class="index second-index">${index + 1}</span>
+                            <span v-else-if="index === 2" class="index third-index">${index + 1}</span>
+                            <span v-else class="index ">${index + 1}</span>
+                            <span class="title">${item.projectname}</span>
                         </div>
-                    </div>
-                    <div class="item-double">
-                        <div class="item-single">
-                            <span class="i-label">项目规模(万元)</span>
-                            <span>${item.bidamount || '--'}</span>
+                        <div class="item-double">
+                            <div class="item-single">
+                                <span class="i-label">所在地</span>
+                                <span class="i-value">${item.area || '--'} ${item.city}</span>
+                            </div>
                         </div>
-                        <div class="item-single">
-                            <span class="i-label">成交时间</span>
-                            <span class="i-value">${item.jgtime}</span>
+                        <div class="item-double">
+                            <div class="item-single">
+                                <span class="i-label">项目规模(万元)</span>
+                                <span>${item.bidamount || '--'}</span>
+                            </div>
+                            <div class="item-single">
+                                <span class="i-label">成交时间</span>
+                                <span class="i-value">${item.jgtime}</span>
+                            </div>
                         </div>
-                    </div>
-                    <div class="item-double">
-                        <div class="item-single">
-                            <span class="i-label">采购单位</span>
-                            <span class="i-value">${item.buyer}</span>
+                        <div class="item-double">
+                            <div class="item-single">
+                                <span class="i-label">采购单位</span>
+                                <span class="i-value">${item.buyer}</span>
+                            </div>
                         </div>
-                    </div>
-                    <div class="item-double">
-                        <div class="item-single">
-                            <span class="i-label">中标单位</span>
-                            <span class="i-value">${item.winner}</span>
+                        <div class="item-double">
+                            <div class="item-single">
+                                <span class="i-label">中标单位</span>
+                                <span class="i-value">${item.winner}</span>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div v-if="curMonthScaleWin.list.length > 3 && !curMonthScaleWin.showAll">
-                <div class="more">
-                    <span @click="curMonthScaleWin.showAll = true">查看更多</span>
+                <div v-if="curMonthScaleWin.list.length > 3 && !curMonthScaleWin.showAll">
+                    <div class="more">
+                        <span @click="curMonthScaleWin.showAll = true">查看更多</span>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div v-if="!getStatus">
-          <p class="example-title">本月项目规模排行榜</p>
-          <div class="vip_component" style="height:13.04rem;background:url('/common-module/collection/image/report/9.png') no-repeat;background-size:100% 100%">
-            <month-report-example :status="bigStatus" :power="power" type="item_9" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/9-1.png'></month-report-example>
-          </div>
-        </div>
+            <div v-if="!getStatus">
+              <p class="example-title">本月项目规模排行榜</p>
+              <div class="vip_component" style="height:13.04rem;background:url('/common-module/collection/image/report/9.png') no-repeat;background-size:100% 100%">
+                <month-report-example :status="bigStatus" :power="power" type="item_9" imgurl='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/report/9-1.png'></month-report-example>
+              </div>
+            </div>
+          </van-tab>
+          <van-tab name="1" title="本月项目明细">
+            <div class="j-container search-filters bg-white">
+              <filter-component></filter-component>
+              <div class="project-detail-list">
+                <project-header></project-header>
+                <project-cell></project-cell>
+              </div>
+          </van-tab>
+        </van-tabs>
     </div>
 </div>
 
@@ -501,10 +515,18 @@
 <script src=//cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js></script>
 <script src=//cdn-common.jianyu360.com/cdn/lib/echarts/4.8.0/echarts.min.js></script>
 <script src=//cdn-common.jianyu360.com/cdn/lib/v-charts/1.19.0/index.min.js></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/public/js/china-map-data.js?v={{Msg "seo" "version"}}'></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/js/keyword-mobile.js?v={{Msg "seo" "version"}}'></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/js/area-city-mobile.js?v={{Msg "seo" "version"}}'></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/js/industry-mobile.js?v={{Msg "seo" "version"}}'></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/js/cate-mobile.js?v={{Msg "seo" "version"}}'></script>
 {{include "/big-member/commonjs.html"}}
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/js/echarts_option.js?v={{Msg "seo" "version"}}'></script>
 <!-- mock数据（与后端返回数据结构一致） 联调后可删除 -->
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/js/month-report-example.js?v={{Msg "seo" "version"}}'></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/filter/js/filter_limit.js?v={{Msg "seo" "version"}}'></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/filter/js/project_header.js?v={{Msg "seo" "version"}}'></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/filter/js/project_cell.js?v={{Msg "seo" "version"}}'></script>
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/js/report_detail_month.js?v={{Msg "seo" "version"}}'></script>
 
 </body>

src/web/staticres/common-module/collection/css/index.css

@@ -118,6 +118,7 @@
 
 .j-popup.collection .unitTab {
     height: 100%;
+    flex: 1;
 }
 
 .collection {
@@ -1493,3 +1494,50 @@
   margin-left: 0.08rem;
 
 }
+
+.filters-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: .32rem .32rem .12rem;
+  color: #171826;
+  line-height: .52rem;
+  font-size: .36rem;
+  font-weight: 400;
+}
+
+.j-popup .keys-popup .popup-header {
+  /* padding-top: .24rem;
+  padding-bottom: .24rem; */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  height: 1.28rem;
+  padding: 0 .32rem;
+}
+
+.keys-popup .header-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.keys-popup .header-title {
+  margin-right: .2rem;
+}
+.keys-popup .header-action {
+  padding: 0 .32rem;
+  font-size: .26rem;
+  line-height: .42rem;
+  color: #2ABDD1;
+  background: rgba(42, 189, 209, 0.1);
+  border-radius: .24rem;
+  border: 1px solid #2ABDD1;
+}
+
+.keys-popup .header-bottom {
+  margin-top: .1rem;
+  color: #2ABDD1;
+  font-size: .22rem;
+  line-height: .26rem;
+}

src/web/staticres/common-module/filter/css/project_cell.css

@@ -0,0 +1,60 @@
+.project-cell{
+  /* padding: .32rem; */
+}
+.project-cell .project-cell-title{
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+  font-size: 16px;
+  line-height: 24px;
+  color: #171826;
+}
+.project-cell .project-cell-tags{
+  display: flex;
+  align-items: center;
+  margin: .2rem 0 .08rem;
+}
+.project-cell .project-cell-tags>span {
+  margin-right: .08rem;
+  padding: .02rem .16rem;
+  background: #F7F9FA;
+  border: 0.01rem solid rgba(0, 0, 0, 0.05);
+  border-radius: .08rem;
+  line-height: .36rem;
+  font-size: .24rem;
+  color: #5F5E64;
+}
+.project-cell .project-unit{
+  margin: .16rem 0;
+}
+.project-cell .project-unit .van-cell{
+  height: auto;
+  padding: .16rem;
+  background: linear-gradient(180deg, rgba(108, 218, 237, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
+  border-radius: .12rem;
+}
+.project-cell .project-unit .van-cell .van-cell__title span:first-child{
+  font-size: .24rem;
+  color: #9B9CA3;
+}
+.project-cell .project-unit .van-cell .van-cell__title span:last-child{
+  font-size: .26rem;
+  color: #171826;
+}
+.project-cell .project-update-time{
+  display: flex;
+  align-items: center;
+  padding-left: .16rem;
+}
+.project-cell .project-update-time .update-time-label{
+  color: #9B9CA3;
+  font-size: .24rem;
+}
+.update-time-content{
+  color: #171826;
+  font-size: .2rem;
+}

src/web/staticres/common-module/filter/css/project_header.css

@@ -0,0 +1,62 @@
+.project-detail-list {
+  padding: 0 .32rem;
+}
+.project-detail-list .project-detail-title{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: .88rem;
+}
+.project-detail-title .p-d-t-left{
+  font-size: .28rem;
+  color: #5F5E64;
+}
+.project-detail-title .p-d-t-right {
+  display: flex;
+  align-items: center;
+  padding-right: .22rem;
+}
+.p-d-t-right .sort-label{
+  font-size: .28rem;
+  color: #9B9CA3;
+}
+.project-detail-title .p-d-t-right .van-dropdown-menu__bar{
+  box-shadow: none;
+}
+
+.project-detail-title .van-dropdown-menu__title{
+  padding-left: 0;
+}
+.project-detail-title .van-dropdown-menu__title .van-ellipsis{
+  font-size: .28rem;
+  color: #2ABED1;
+}
+.project-detail-list .van-dropdown-menu__title::after{
+  border: 5px solid;
+  border-color: transparent transparent #C0C4CC #C0C4CC;
+  margin-top: -.16rem;
+  right: -.2rem;
+}
+.project-detail-list .van-dropdown-item__content {
+  max-height: 100%;
+}
+.project-detail-list .van-dropdown-menu__title--down::after{
+  border-color: transparent transparent #2ABED1 #2ABED1;
+  margin-top: -.1rem;
+  right: -.2rem;
+}
+.project-detail-list .van-cell{
+  padding: 0 .32rem;
+  height: .88rem;
+}
+.project-detail-list .van-cell.van-dropdown-item__option{
+  font-size: .28rem;
+  color: #5F5E64;
+}
+.project-detail-list .van-cell.activeColor{
+  color: #2ABED1;
+}
+.project-detail-list .van-cell .select_active{
+  width: .48rem;
+  height: .48rem;
+}

src/web/staticres/common-module/filter/js/filter_limit.js

@@ -0,0 +1,446 @@
+var filterTemp = `
+<div class="j-container search-filters bg-white">
+  <div class="j-main">
+      <div class="filters-title pd-lr16">
+          <span>{{title}}</span>
+      </div>
+      <van-cell-group class="filters-list">
+          <van-cell center v-if="filterAction.keyModule.isShow" :title="filterAction.keyModule.label" is-link value-class="ellipsis" :value="resolveSelected('keys')" @click="clickCell('keys')"></van-cell>
+          <van-cell center v-if="filterAction.areaModule.isShow" :title="filterAction.areaModule.label" is-link value-class="ellipsis" :value="resolveSelected('area')" @click="clickCell('area')"></van-cell>
+          <van-cell center v-if="filterAction.buyerModule.isShow" :title="filterAction.buyerModule.label" value-class="ellipsis" is-link :value="resolveSelected('buyerclass')" @click="clickCell('buyerclass')"></van-cell>
+          <van-cell center v-if="filterAction.industryModule.isShow" :title="filterAction.industryModule.label" is-link value-class="ellipsis" :value="resolveSelected('industry')" @click="clickCell('industry')"></van-cell>
+      </van-cell-group>
+  </div>
+  <div class="j-footer j-button-group">
+      <button class="j-button-cancel" @click="resetAllFilters">{{cancelText}}</button>
+      <button class="j-button-confirm" @click="startAnalysis">{{confirmText}}</button>
+  </div>
+  <van-popup
+  v-model="filterDialogShow.keys"
+  closeable
+  round
+  position="bottom"
+  close-icon="clear"
+  class="j-popup collection"
+  overlay-class="j-overlay"
+  :lazy-render="false"
+  :style="{ height: '60%' }"
+  get-container="body">
+  <div class="j-container keys-popup">
+      <div class="popup-header">
+          <div class="header-top">
+              <div class="header-title">选择分析内容</div>
+              <div class="header-action" @click="toSubManageButtonClick">订阅管理</div>
+          </div>
+          <div class="header-bottom">注：如需新增分析内容，请完善您的订阅关键词</div>
+      </div>
+      <div class="j-main">
+          <keyword-component
+              ref="keywordSelector"
+              protype="bigmember"
+              :use-key-card="true"
+              @nokeys="showSetKeyTip"
+              @cancel="cancel($event, 'keys')"
+              @confirm="confirm($event, 'keys')"
+              :selectkeywordlist="filters.selectKeysArr"></keyword-component>
+      </div>
+  </div>
+</van-popup>
+<van-popup
+  v-model="filterDialogShow.area"
+  closeable
+  round
+  position="bottom"
+  close-icon="clear"
+  :lazy-render="false"
+  class="j-popup collection"
+  overlay-class="j-overlay"
+  :style="{ height: '60%' }"
+  get-container="body">
+  <div class="j-container report-popup">
+      <div class="popup-header header-title">选择区域</div>
+      <div class="j-main">
+          <area-city-mobile
+              ref="areaCitySelector"
+              @cancel="cancel($event, 'area')"
+              @confirm="confirm($event, 'area')"></area-city-mobile>
+      </div>
+  </div>
+</van-popup>
+<van-popup
+  v-model="filterDialogShow.industry"
+  closeable
+  round
+  position="bottom"
+  close-icon="clear"
+  class="j-popup collection"
+  overlay-class="j-overlay"
+  :lazy-render="false"
+  :style="{ height: '60%' }"
+  get-container="body">
+  <div class="j-container report-popup">
+      <div class="popup-header header-title">选择行业</div>
+      <div class="j-main">
+          <industry-component
+              ref="industrySelector"
+              :selectindustrylist="filters.industry"
+              @cancel="cancel($event, 'industry')"
+              @confirm="confirm($event, 'industry')"></industry-component>
+      </div>
+  </div>
+</van-popup>
+<van-popup
+  v-model="filterDialogShow.buyerclass"
+  closeable
+  round
+  position="bottom"
+  close-icon="clear"
+  class="j-popup collection"
+  :lazy-render="false"
+  overlay-class="j-overlay"
+  :style="{ height: '60%' }"
+  get-container="body">
+  <div class="j-container report-popup">
+      <div class="popup-header header-title">选择采购单位类型</div>
+      <div class="j-main">
+          <cate-component
+              ref="buyerclassSelector"
+              :selectcatelist="filters.buyerclass"
+              @cancel="cancel($event, 'buyerclass')"
+              @confirm="confirm($event, 'buyerclass')"></cate-component>
+      </div>
+  </div>
+</van-popup>
+</div>
+`
+
+var filterComponent = {
+  
+  name: 'filter-limit',
+  template: filterTemp,
+  components: {
+    keywordComponent: keywordComponent,
+    areaCityMobile: areaCityMobileComponent,
+    industryComponent: industryComponent,
+    cateComponent: cateComponent
+  },
+  props: {
+    title: {
+      type: String,
+      default: '筛选条件'
+    },
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    confirmText: {
+      type: String,
+      default: '确定'
+    },
+    filterAction: {
+      type: Object,
+      default () {
+        return {
+          keyModule: {
+            label: '关键词组',
+            isShow: true
+          },
+          areaModule: {
+            label: '项目地区',
+            isShow: true
+          },
+          buyerModule: {
+            label: '采购单位类型',
+            isShow: true
+          },
+          industryModule: {
+            label: '行业',
+            isShow: true
+          },
+          winnerModule: {
+            label: '中标单位',
+            isShow: true
+          },
+          buyerUnit: {
+            label: '采购单位',
+            isShow: true
+          }
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      filters: {
+        selectKeysArr: [], // 关键词简单数组，用于恢复选择状态
+        keys: [], // 关键词详细数组，用于提交数据
+        area: {},
+        industry: [],
+        industryDetail: {},
+        buyerclass: [],
+        rangeTime: {
+          start: '',
+          end: '',
+          exact: 'sinceYearBeforeLast',
+        },
+      },
+      filterDialogShow: {
+        keys: false,
+        area: false,
+        industry: false,
+        buyerclass: false,
+        rangeTime: false
+      }
+    }
+  },
+  methods: {
+    cancel: function (e, key) {
+      var dialog = this.filterDialogShow
+      this.resetFilter(key)
+      dialog[key] = false
+    },
+    confirm: function (e, key) {
+      var dialog = this.filterDialogShow
+      var filters = this.filters
+      if (key === 'keys') {
+        filters.keys = e.detail
+        filters.selectKeysArr = e.data
+      } else if (key === 'area') {
+        filters.area = e.data
+      } else if (key === 'industry') {
+        filters.industry = e.data
+        filters.industryDetail = e.detail
+      } else if (key === 'buyerclass') {
+        filters.buyerclass = e.data
+        console.log(e.data)
+      } 
+      dialog[key] = false
+    },
+    showLoading: function () {
+      return this.$toast.loading({
+        duration: 0,
+        forbidClick: true,
+        message: 'loading...',
+      })
+    },
+    setKeyTip: function () {
+      this.showDialog({
+        title: '',
+        message: '分析内容为您订阅的关键词组，您<br />当前尚未订阅，请前往完善',
+        className: 'j-confirm-dialog text-center',
+        showConfirmButton: true,
+        showCancelButton: true,
+        confirmButtonText: '订阅管理',
+        confirmButtonColor: '#2abed1'
+      }).then(() => {
+        if (this.isSubCount) {
+          // 提示联系管理员
+          this.showToast('请联系管理员完善订阅的关键词')
+          // this.showDialog({
+          //   title: '',
+          //   message: '请联系管理员完善订阅的关键词',
+          //   className: 'j-confirm-dialog text-center',
+          //   showConfirmButton: true,
+          //   showCancelButton: false,
+          //   confirmButtonText: '我知道了',
+          //   confirmButtonColor: '#2abed1'
+          // })
+        } else {
+          this.toSubManage()
+        }
+      })
+    },
+    clickCell: function (key) {
+      var _this = this
+      console.log(_this.$refs)
+      var dialog = this.filterDialogShow
+      if (key === 'keys') {
+        if (this.notSetKey) {
+          return this.setKeyTip()
+        }
+      } else if (key === 'area') {
+        setTimeout(function () {
+          _this.$refs.areaCitySelector.setState(_this.filters.area)
+        }, 200)
+      } else if (key === 'buyerclass') {
+        setTimeout(function () {
+          _this.$refs.buyerclassSelector.setState()
+        }, 200)
+      }  else if (key === 'industry') {
+        setTimeout(function () {
+          _this.$refs.industrySelector.setState()
+        }, 200)
+      }
+      dialog[key] = true
+    },
+    resolveSelected: function (type) {
+      var filters = this.filters
+      var prefix = '已选：'
+      var text = ''
+      if (type === 'keys') {
+        if (this.notSetKey) return '请设置'
+        text = this.resolveSelectKeysText(filters.keys)
+      } else if (type === 'area') {
+        text = this.resolveSelectAreaText(filters.area)
+      } else if (type === 'industry') {
+        text = this.resolveSelectIndustryText(filters.industryDetail)
+      } else if (type === 'buyerclass') {
+        text = this.resolveSelectBuyerclassText(filters.buyerclass)
+      }
+      return prefix + text
+    },
+    resolveSelectKeysText: function (keys) {
+      if (Array.isArray(keys)) {
+        if (keys.length === 0) {
+          return '全部'
+        } else {
+          var count = 0
+          var arr = []
+          keys.forEach(function (classify) {
+            if (Array.isArray(classify.a_key) && classify.a_key.length) {
+              count += classify.a_key.length
+              classify.a_key.forEach(function (item) {
+                arr.push(item.key.join(' '))
+              })
+            }
+          })
+          if (count <= 0) {
+            return '全部'
+          } else {
+            return arr.join('，')
+          }
+        }
+      } else {
+        return '全部'
+      }
+    },
+    resolveSelectAreaText: function (area) {
+      if (!area || Object.keys(area).length === 0) return '全国'
+      var areaArr = []
+      var cityArr = []
+      for (var key in area) {
+        if (area[key].length === 0) {
+          areaArr.push(key)
+        } else {
+          cityArr = cityArr.concat(area[key])
+        }
+      }
+      return areaArr.concat(cityArr).join('，')
+    },
+    resolveSelectIndustryText: function (industry) {
+      if (!industry || Object.keys(industry).length === 0) return '全部'
+      var keyArr = []
+      var valueArr = []
+      for (var key in industry) {
+        if (industry[key].length === 0) {
+          keyArr.push(key)
+        } else {
+          valueArr = valueArr.concat(industry[key])
+        }
+      }
+      return keyArr.concat(valueArr).join('，')
+    },
+    resolveSelectBuyerclassText: function (buyerclass) {
+      if (!Array.isArray(buyerclass)) return '全部'
+      if (buyerclass.length === 0) return '全部'
+      return buyerclass.join('，')
+    },
+    resetAllFilters: function () {
+      this.analysis.loaded = false
+      this.resetFilter('all')
+    },
+    getSelectedKeys () {
+      const keys = this.filters.keys
+      if (Array.isArray(keys) && keys.length) {
+        return JSON.stringify(keys)
+      } else {
+        var allKeys = this.$refs.keywordSelector.keywordGroupList
+        return JSON.stringify(allKeys)
+      }
+    },
+    startAnalysis: function () {
+      // this.dateTimeSelectorConfirm()
+
+      const query = {
+        keysItems: this.getSelectedKeys(),
+        area: JSON.stringify(this.filters.area),
+        industry: JSON.stringify(this.filters.industryDetail),
+        buyerclass: this.filters.buyerclass.join(',')
+      }
+
+      this.analysis.loaded = false
+      this.analysis.loading = true
+      this.showLoading()
+
+      $.ajax({
+        type: 'POST',
+        url: '/bigmember/marketAnalysis/doAnalysis',
+        data: query,
+        success: function (res) {
+          if (res && res.error_code === 0 && res.data) {
+            this.rid = res.data
+            this.analysis.loaded = true
+            // location.replace('./report_analysis?id=' + res.data)
+            this.rid = res.data
+            history.replaceState({}, null, '?id=' + this.rid)
+            this.getReportResult()
+          } else {
+            this.$toast(res.error_msg)
+          }
+        }.bind(this),
+        complete: function () {
+          this.analysis.loading = false
+        }.bind(this)
+      })
+    },
+    // 重置
+    resetFilter: function (type) {
+      var filters = this.filters
+      if (type === 'keys') {
+        filters.keys = []
+        filters.selectKeysArr = []
+        try {
+          this.$refs.keywordSelector.resetAllNoSelect()
+        } catch (error) {}
+      } else if (type === 'area') {
+        filters.area = {}
+      } else if (type === 'industry') {
+        filters.industry = []
+        filters.industryDetail = {}
+      } else if (type === 'buyerclass') {
+        filters.buyerclass = []
+      } else if (type === 'date') {
+        this.filters.rangeTime.start = ''
+        this.filters.rangeTime.edd = ''
+        this.filters.rangeTime.exact = 'sinceYearBeforeLast'
+        // this.initDateTimeSelector(this.filters.rangeTime.exact)
+      } else {
+        this.resetFilter('keys')
+        this.resetFilter('area')
+        this.resetFilter('industry')
+        this.resetFilter('buyerclass')
+        this.resetFilter('date')
+      }
+    },
+    toSubManageButtonClick: function () {
+      if (this.isSubCount) {
+        this.showToast('请联系管理员完善订阅的关键词')
+      } else {
+        this.toSubManage()
+      }
+    },
+    toSubManage: function () {
+      location.href = '/jyapp/vipsubscribe/toSetKeyWordPage?vSwitch=m'
+    },
+    showToast: function (message) {
+      return this.$toast({
+        duration: 1500,
+        forbidClick: true,
+        message: message,
+      })
+    },
+    showSetKeyTip: function () {
+      this.notSetKey = true
+    },
+  }
+}

src/web/staticres/common-module/filter/js/project_cell.js

@@ -0,0 +1,54 @@
+var projectCellTemp = `
+<div class="project-cell">
+  <div class="project-cell-title">
+    2019-2021年度水电气管理内部控制专项审计2019-2021年度水电气管理内部控制专项审计
+  </div>
+  <div class="project-cell-tags">
+    <span>四川</span>
+  </div>
+  <div class="project-unit">
+    <van-cell is-link>
+      <template #title>
+        <span>采购单位：</span>
+        <span>广东省高速公路有限公司深汕西分公司</span>
+      </template>
+      <template #label>
+        <span>预算金额：</span>
+        <span>9.09 万元</span>
+      </template>
+    </van-cell>
+  </div>
+  <div class="project-unit">
+    <van-cell is-link>
+      <template #title>
+        <span>中标单位：</span>
+        <span>广东省高速公路有限公司深汕西分公司</span>
+      </template>
+      <template #label>
+        <span>中标金额：</span>
+        <span>9.09 万元</span>
+      </template>
+    </van-cell>
+  </div>
+  <div class="project-update-time">
+    <div class="update-time-label">
+      本月项目更新时间：
+    </div>
+    <div class="update-time-content">2023-5-13</div>
+  </div>
+</div>
+`
+
+var projectCellComponent = {
+  
+  name: 'project-cell',
+  template: projectCellTemp,
+  props: {
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}

src/web/staticres/common-module/filter/js/project_header.js

@@ -0,0 +1,45 @@
+var projectHeaderTemp = `
+<div class="project-detail-title">
+  <div class="p-d-t-left">
+    共<span style="color:#2ABED1"> 9999 </span>个项目
+  </div>
+  <div class="p-d-t-right">
+    <span class="sort-label">排序：</span>
+    <van-dropdown-menu active-color="#2ABED1">
+      <van-dropdown-item ref="sortMenu" :title="sortOptionSelect">
+        <van-cell center :class="{'activeColor': item.active}" @click="setSortRules(item)" :title="item.text" v-for="(item, index) in sortOption" :key="index">
+          <template #right-icon>
+            <img v-if="item.active" class="select_active" src="/common-module/filter/image/right.png" alt="">
+          </template>
+        </van-cell>
+      </van-dropdown-item>
+    </van-dropdown-menu>
+  </div>
+</div>
+`
+
+var projectHeaderComponent = {
+  name: 'project-detail-title',
+  template: projectHeaderTemp,
+  data () {
+    return {
+      sortOptionSelect: '项目更新时间由晚到早',
+      sortOption: [
+        { text: '项目更新时间由晚到早', value: 0, active: true },
+        { text: '项目金额由大到小', value: 1, active: false }
+      ]
+    }
+  },
+  methods: {
+    // 选择排序方式
+    setSortRules: function (data) {
+      this.sortOption.forEach(option => {
+        option.active = false
+      })
+      data.active = true
+      this.sortOptionSelect = data.text
+      // 关闭菜单
+      this.$refs.sortMenu.toggle(false)
+    },
+  }
+}

src/web/templates/big-member/wx/page_report_detail_week.html

@@ -190,9 +190,9 @@
             </div>
             <div class="mark-words" @click="goCollect('week_project_seek_bidamount')">全面获取关注项目的规模，分析市场容量，寻找客户！<em class="mark-icon-right"></em></div>
         </div>
-        <!-- 项目金额排行榜 -->
+        <!-- 本周项目规模排行榜TOP30 -->
         <div class="chart" v-if="showItemAmount">
-            <div class="chart_title">项目金额排行榜</div>
+            <div class="chart_title">本周项目规模排行榜TOP30</div>
             <div>
                 <div class="current-list" v-for="(item,index) in amountWinArr">
                     <div class="win-name">