|
@@ -0,0 +1,469 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="page_week">
|
|
|
|
+ <div class="page_week_main">
|
|
|
|
+ <!-- 选择周报时间 -->
|
|
|
|
+ <div class="week_time">
|
|
|
|
+ <SelectMonth></SelectMonth>
|
|
|
|
+ <div class="select_report">
|
|
|
|
+ <div class="week_report" v-for="(item, index) in 4" :key="index" @click="selectWeek(index)" :class="{weekActive:index==isWeekIndex}">
|
|
|
|
+ <div class="week_report_main">
|
|
|
|
+ <div class="report_top">
|
|
|
|
+ <div class="reoprt_time">
|
|
|
|
+ <span class="week_text">周</span>
|
|
|
|
+ <span class="week_days">1月1日-1月7日</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="repot_gettime">2020/01/01</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="report_bot">
|
|
|
|
+ <span class="push_text">推送数据条数</span>
|
|
|
|
+ <div class="push_report">
|
|
|
|
+ <span class="push_num">19</span>
|
|
|
|
+ <span class="el-icon-arrow-right"></span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 数据报告-周报 -->
|
|
|
|
+ <div class="dataReport">
|
|
|
|
+ <div class="dataReport_main">
|
|
|
|
+ <div class="data_r_head">
|
|
|
|
+ <div class="data_r_title">数据报告-周报</div>
|
|
|
|
+ <div class="data_r_week">(1月1日-1月7日)</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="data_keys">
|
|
|
|
+ <span class="keys_label">订阅关键词组:</span>
|
|
|
|
+ <span class="list_key">端点安全、网络安全、应用安全、数据安全、身份与访问管理、安全管理;</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="data_line"></div>
|
|
|
|
+ <div class="data_item">
|
|
|
|
+ <p class="item_handle">数据来源:已为您推送的招标项目信息</p>
|
|
|
|
+ <p class="item_handle">项目预算/项目规模:少量预算金额、中标金额未公开或为空的项目,将通过剑鱼标讯预测模型进行填补,可能会与实际项目预算、项目规模略有差距;</p>
|
|
|
|
+ <p class="item_handle">项目重复统计:一个招标项目可能同属于多个关键词组,故各关键词组的数据统计之和可能大于整体市场的统计。</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="echartsView">
|
|
|
|
+ <!-- 本周新增招标项目数量 -->
|
|
|
|
+ <div class="newAdd_bid"></div>
|
|
|
|
+ <!-- 本周新增招标项目预算 -->
|
|
|
|
+ <div class="newAdd_bidBudget"></div>
|
|
|
|
+ <!-- 本周新增开标项目数量 -->
|
|
|
|
+ <div class="newAdd_bidOpen"></div>
|
|
|
|
+ <!-- 本周新增招标项目规模 -->
|
|
|
|
+ <div class="newAdd_scale"></div>
|
|
|
|
+ <!-- 项目金额排行榜 -->
|
|
|
|
+ <div class="proRank">
|
|
|
|
+ <div class="proRank_head">
|
|
|
|
+ 项目金额排行榜
|
|
|
|
+ </div>
|
|
|
|
+ <div class="pro_ul">
|
|
|
|
+ <div class="pro_list" v-for="(item, index) in 2" :key="index">
|
|
|
|
+ <div class="pro_list_head">
|
|
|
|
+ <span class="list_index">{{index+1}}</span>
|
|
|
|
+ <span class="list_title">北京神州绿盟科技有限公司</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="pru_unit">
|
|
|
|
+ <span class="unit_label">采购单位</span>
|
|
|
|
+ <span class="pur_unit_name">广东省高速公路有限公司深汕西分公司</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="pru_unit">
|
|
|
|
+ <span class="unit_label">中标单位</span>
|
|
|
|
+ <span class="pur_unit_name">广东省高速公路有限公司深汕西分公司</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="pro_amount">
|
|
|
|
+ <div class="pro_budget_money">
|
|
|
|
+ <span class="unit_label">预算金额(亿)</span>
|
|
|
|
+ <span class="budget_num">80.40</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="pro_bid_money pro_budget_money">
|
|
|
|
+ <span class="unit_label">中标金额(亿)</span>
|
|
|
|
+ <span class="budget_num">80.40</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="getMore" @click="getMore()">
|
|
|
|
+ 查看更多
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 下周开标提醒 -->
|
|
|
|
+ <CompanyDetail title="下周开标提醒" :data="proInfor"></CompanyDetail>
|
|
|
|
+ <!-- 重点关注项目 -->
|
|
|
|
+ <CompanyDetail title="重点关注项目" :data="proKey"></CompanyDetail>
|
|
|
|
+ <!-- 重点关注企业 -->
|
|
|
|
+ <CompanyDetail title="重点关注企业" :data="comPanyInfor"></CompanyDetail>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="page_week_artical"></div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+
|
|
|
|
+import SelectMonth from '@/components/SelectMonth.vue'
|
|
|
|
+import CompanyDetail from '@/components/CompanyDetail.vue'
|
|
|
|
+export default {
|
|
|
|
+ name: 'page_week',
|
|
|
|
+ components: {
|
|
|
|
+ SelectMonth,
|
|
|
|
+ CompanyDetail
|
|
|
|
+ },
|
|
|
|
+ data () {
|
|
|
|
+ return {
|
|
|
|
+ isWeekIndex: 0,
|
|
|
|
+ proInfor: [
|
|
|
|
+ [
|
|
|
|
+ {
|
|
|
|
+ label: '开标时间',
|
|
|
|
+ content: '2020/6/29 10:30'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '省市',
|
|
|
|
+ content: '广西'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '项目名称',
|
|
|
|
+ content: '云之龙招标集团有限公司雁山校区新增监控设备'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '采购单位',
|
|
|
|
+ content: '桂林理工大学'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '项目预算(万)',
|
|
|
|
+ content: '398.63'
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ ],
|
|
|
|
+ proKey: [
|
|
|
|
+ [
|
|
|
|
+ {
|
|
|
|
+ label: '项目名称',
|
|
|
|
+ content: '云之龙招标集团有限公司雁山校区新增监控设备'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '项目状态',
|
|
|
|
+ content: '预告'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '采购单位',
|
|
|
|
+ content: '桂林理工大学'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '项目预算(万)',
|
|
|
|
+ content: '398.63'
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ ],
|
|
|
|
+ comPanyInfor: [
|
|
|
|
+ [
|
|
|
|
+ {
|
|
|
|
+ label: '企业名称',
|
|
|
|
+ content: '广州市乾润信息技术有限公司'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '注册省市',
|
|
|
|
+ content: '广西'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '中标项目',
|
|
|
|
+ content: '广州市轻工高级技工学校邮箱采购及综合数据服务平台优化升级项目'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '中标日期',
|
|
|
|
+ content: '2020/6/26'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '中标金额(万)',
|
|
|
|
+ content: '398.63'
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created () {
|
|
|
|
+ this.getTimes()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 选择周报
|
|
|
|
+ selectWeek (data) {
|
|
|
|
+ this.isWeekIndex = data
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ .page_week{
|
|
|
|
+ margin: 32px auto;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ width: 1200px;
|
|
|
|
+ height: auto;
|
|
|
|
+ .page_week_main{
|
|
|
|
+ width: 920px;
|
|
|
|
+ height: auto;
|
|
|
|
+ .week_time{
|
|
|
|
+ padding-bottom: 24px;
|
|
|
|
+ width: 920px;
|
|
|
|
+ min-height: 349px;
|
|
|
|
+ opacity: 1;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ .putaway{
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 0;
|
|
|
|
+ bottom: 16px;
|
|
|
|
+ color: #2cb7ca;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ .put_text{
|
|
|
|
+ opacity: 1;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ }
|
|
|
|
+ .put_icon{
|
|
|
|
+ margin-left: 4px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .setHeight{
|
|
|
|
+ height: 72px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ }
|
|
|
|
+ .select_report{
|
|
|
|
+ margin: 24px auto;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-content: space-between;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ width: 840px;
|
|
|
|
+ height: 210px;
|
|
|
|
+ .week_report{
|
|
|
|
+ margin-bottom: 16px;
|
|
|
|
+ padding: 0 16px;
|
|
|
|
+ width: 412px;
|
|
|
|
+ opacity: 1;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ border: 1px solid #ececec;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ .week_report_main{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ .report_top{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ height: 47px;
|
|
|
|
+ border-bottom: 1px solid rgba(0,0,0,0.05);
|
|
|
|
+ .reoprt_time{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .week_text{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin-right: 8px;
|
|
|
|
+ width: 24px;
|
|
|
|
+ height: 24px;
|
|
|
|
+ opacity: 1;
|
|
|
|
+ background: #ff9f40;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ }
|
|
|
|
+ .week_days{
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #171826;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .repot_gettime{
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #9b9ca3;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .report_bot{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ height: 48px;
|
|
|
|
+ .push_text{
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #5f5e64;
|
|
|
|
+ }
|
|
|
|
+ .push_num{
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #171826;
|
|
|
|
+ line-height: 24px;
|
|
|
|
+ }
|
|
|
|
+ .el-icon-arrow-right{
|
|
|
|
+ margin-left: 4px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #c0c4cc;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .weekActive{
|
|
|
|
+ border: 2px solid #2cb7ca;
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .dataReport{
|
|
|
|
+ margin-top: 32px;
|
|
|
|
+ padding: 32px 40px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: auto;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ .dataReport_main{
|
|
|
|
+ width: 100%;
|
|
|
|
+ .data_r_head{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: flex-end;
|
|
|
|
+ .data_r_title{
|
|
|
|
+ height: 28px;
|
|
|
|
+ opacity: 1;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #1d1d1d;
|
|
|
|
+ line-height: 28px;
|
|
|
|
+ }
|
|
|
|
+ .data_r_week{
|
|
|
|
+ margin-left: 8px;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #999999;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .data_keys{
|
|
|
|
+ margin: 20px 0;
|
|
|
|
+ height: 24px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #1d1d1d;
|
|
|
|
+ line-height: 24px;
|
|
|
|
+ }
|
|
|
|
+ .data_line{
|
|
|
|
+ width: 840px;
|
|
|
|
+ height: 1px;
|
|
|
|
+ opacity: 1;
|
|
|
|
+ background: #ececec;
|
|
|
|
+ }
|
|
|
|
+ .data_item{
|
|
|
|
+ padding-top: 20px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #999999;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .echartsView{
|
|
|
|
+ margin-top: 16px;
|
|
|
|
+ padding: 0 40px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ .proRank{
|
|
|
|
+ padding: 32px 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ .pro_ul{
|
|
|
|
+ margin-top: 16px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ .pro_list{
|
|
|
|
+ padding: 24px;
|
|
|
|
+ width: 840px;
|
|
|
|
+ opacity: 1;
|
|
|
|
+ background: #f5f6f7;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.05) inset;
|
|
|
|
+ .pro_list_head{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .list_index{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ width: 16px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ background: #fb483d;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ }
|
|
|
|
+ .list_title{
|
|
|
|
+ margin-left: 12px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #1d1d1d;
|
|
|
|
+ line-height: 24px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .unit_label{
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #999999;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ }
|
|
|
|
+ .pru_unit{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ margin-top: 12px;
|
|
|
|
+ .pur_unit_name{
|
|
|
|
+ margin-top: 4px;
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ color: #1d1d1d;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .pro_amount{
|
|
|
|
+ display: flex;
|
|
|
|
+ margin-top: 12px;
|
|
|
|
+ .pro_budget_money{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ width: 155px;
|
|
|
|
+ .budget_num{
|
|
|
|
+ margin-top: 4px;
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ color: #1d1d1d;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .pro_bid_money{
|
|
|
|
+ margin-left: 45px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .getMore{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 48px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #2cb7ca;
|
|
|
|
+ background: #f5f6f7;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|