月报详情

package.json

@@ -12,9 +12,11 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.4.3",
+    "echarts": "^4.8.0",
     "element-ui": "^2.15.1",
     "single-spa-vue": "^1.5.4",
     "systemjs-webpack-interop": "^1.1.2",
+    "v-charts": "^1.19.0",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
     "vuex": "^3.6.2"

src/api/modules/forecast.js

@@ -0,0 +1,12 @@
+import request from '@/api'
+import qs from 'qs'
+
+// 周报详情
+export function getPotenList (data) {
+  data = qs.stringify(data)
+  return request({
+    url: '/forecast/forPList',
+    method: 'post',
+    data: data
+  })
+}

src/api/modules/index.js

@@ -1,3 +1,4 @@
 export * from './home'
 export * from './user'
 export * from './report'
+export * from './forecast'

src/components/forecast/ForeCast.vue

@@ -58,24 +58,47 @@
     </ul>
     <!-- 潜在项目预测 -->
     <ul class="listData_ul" v-show="type=='potential'">
-      <li class="list_li poten_li" v-for="(item, index) in 10" :key="index">
+      <li class="list_li poten_li" v-for="(item, index) in this.listState.list" :key="index">
         <div class="list_name">
           <div class="list_name_left">
             <span class="pur_company">采购单位</span>
-            <span class="list_pur_name">北京市工商行政管理局朝阳分局</span>
+            <span class="list_pur_name">{{item.buyer}}</span>
           </div>
           <div class="list_time">
-            2019-09-30
+            {{item.createtime}}
           </div>
         </div>
         <div class="list_unit list_poten">
           <div class="pur_unit poten_unit">
             <span class="unit_label poten_label"><span class="point"></span>预测线索</span>
-            <span class="unit_name poten_name">淮安市高级职业技术学校台式电脑采购项目招标公告</span>
+            <span class="unit_name poten_name">{{item.title}}</span>
           </div>
           <div class="pur_unit poten_unit poten_margin">
             <span class="unit_label poten_label"><span class="point"></span>预测采购内容</span>
-            <span class="unit_name poten_name">该单位将采购钢筋、水泥、隔热板、大理石砖、玻璃、木材、钢筋、水泥、隔热板、大理石砖、玻璃</span>
+            <span class="unit_name poten_name">该单位将<span v-for="(data, i) in item.results" :key="i">{{data.purchasing}}</span></span>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <!-- 潜在项目预测近似项目列表 -->
+    <ul class="listData_ul" v-show="type=='potensimilar'">
+      <li class="list_li potensimilar_li" v-for="(item, index) in 10" :key="index">
+        <div class="list_unit">
+          <div class="pur_unit">
+            <span class="unit_label">预测采购内容：</span>
+            <span class="unit_name">HIS、医院信息系统</span>
+          </div>
+          <div class="pur_unit">
+            <span class="unit_label">同类项目：</span>
+            <span class="unit_name similar_name">关于泉州市第一医院内HIS系统改造项目</span>
+          </div>
+          <div class="pur_unit">
+            <span class="unit_label">联系人：</span>
+            <span class="unit_name">王女士</span>
+          </div>
+          <div class="pur_unit">
+            <span class="unit_label">联系电话：</span>
+            <span class="unit_name">0595-22277035</span>
           </div>
         </div>
       </li>
@@ -98,8 +121,9 @@
 <script>
 import { Pagination } from 'element-ui'
 // import { getPushList } from '@/api/modules/'
+// potenObj 潜在项目预测返回数据
 export default {
-  props: ['type', 'title'],
+  props: ['type', 'title', 'potenObj'],
   name: 'listData',
   components: {
     [Pagination.name]: Pagination
@@ -116,6 +140,9 @@ export default {
       }
     }
   },
+  created () {
+    this.listState = this.potenObj
+  },
   methods: {
 
   }
@@ -245,6 +272,38 @@ export default {
         }
       }
     }
+    // 潜在项目近似项目预测样式
+    .potensimilar_li{
+      .list_unit{
+        display: flex;
+        flex-direction: column;
+        margin-top: 0;
+        .pur_unit{
+          display: flex;
+          align-items: center;
+          margin-top: 12px;
+          .unit_label{
+            display: flex;
+            justify-content: flex-end;
+            width: 98px;
+            text-align: right;
+            font-size: 14px;
+            color: #999999;
+            line-height: 22px;
+          }
+          .unit_name{
+            flex: 1;
+            font-size: 14px;
+            color: #1d1d1d;
+            line-height: 22px;
+          }
+          .similar_name{
+            color: #2cb7ca;
+            text-decoration: underline;
+          }
+        }
+      }
+    }
     // 企业情报搜索结果组件样式
     .res_li{
       .list_name{

src/components/report-data/EchartsDetail.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="report-echarts">
+    <div class="chart_title">{{title}}</div>
+    <ve-histogram
+      height="284px"
+      :data="projectData"
+      :after-config="Config"
+      >
+    </ve-histogram>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['title', 'projectData', 'Config'],
+  name: 'report-echarts',
+  components: {
+  },
+  data () {
+    return {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-echarts{
+  width: 100%;
+  .chart_title{
+    font-size: 18px;
+    color: #1d1d1d;
+    line-height: 28px;
+  }
+}
+</style>

src/components/report-data/SelectMonth.vue

@@ -64,14 +64,14 @@ export default {
     getTimes (date) {
       // 处理月份
       var week
-      date = date + ''
+      const aloneWeek = []
       const nowweek = dateFormatter(new Date(), 'M')
+      date = date + ''
       if (date.slice(4, 5) === '0') {
         week = date.slice(5, 6)
       } else {
         week = date.slice(4, 6)
       }
-      const aloneWeek = []
       for (var a = week; a < nowweek; a++) {
         var weeks = a
         weeks = weeks - 1
@@ -79,7 +79,6 @@ export default {
       }
       aloneWeek.push(week)
       this.listWeek.push(aloneWeek)
-
       // 处理年份、添加12月
       const nowyear = dateFormatter(new Date(), 'yyyy')
       let year = date.slice(0, 4)
@@ -90,10 +89,10 @@ export default {
         this.isMany = true
       }
       this.listYear.push(Number(year))
+      var newArr = []
       for (var i = year; i < nowyear; i++) {
         year = year - 1
         this.listYear.push(year + '')
-        var newArr = []
         for (var tw = 1; tw <= 12; tw++) {
           var twM = tw
           twM = '' + twM
@@ -108,6 +107,7 @@ export default {
       if (month < 10) {
         month = '0' + month
       }
+      this.$emit('selectYear', this.listYear[index])
       this.$emit('selectYm', this.listYear[index] + month)
     },
     // 更多、收起

src/main.js

@@ -4,9 +4,11 @@ import store from './store'
 import router from './router'
 import singleSpaVue from 'single-spa-vue'
 import { Loading } from 'element-ui'
+import VCharts from 'v-charts'
 import '@/utils/'
 import axios from 'axios'
 
+Vue.use(VCharts)
 Vue.use(Loading.directive)
 Vue.config.productionTip = false
 

src/router.js

@@ -19,13 +19,13 @@ export default new Router({
       component: () => import('@/views/EmptyDemo.vue')
     },
     {
-      path: '/week',
+      path: '/report/week',
       name: 'week',
       component: () => import('@/views/reportData/pageWeek.vue')
     },
     // 月报详情
     {
-      path: '/month',
+      path: '/report/month',
       name: 'month',
       component: () => import('@/views/reportData/pageMonth.vue')
     },
@@ -47,12 +47,18 @@ export default new Router({
       name: 'entintel',
       component: () => import('@/views/ent-intel/EntIntel.vue')
     },
-    // 投标决策分析
+    // 潜在项目预测
     {
       path: '/potential',
       name: 'potential',
       component: () => import('@/views/potential-for/PotenTial.vue')
     },
+    // 潜在项目预测--相似项目
+    {
+      path: '/potensimilar',
+      name: 'potensimilar',
+      component: () => import('@/views/potential-for/PotenSimilar.vue')
+    },
     {
       path: '*',
       name: '404',

src/utils/echarts_option.js

@@ -0,0 +1,980 @@
+// 中国地图配置项
+export var mapSettings = {
+  chartSettings: {
+    positionJsonLink: './china.json',
+    beforeRegisterMapOnce (map) {
+      return map
+    },
+    beforeRegisterMap (map) {
+      return map
+    },
+    label: {
+      show: true,
+      fontSize: 9
+    },
+    selectedMode: false, // 去掉省份小圆点
+    itemStyle: {
+      normal: {
+        borderColor: '#F06326',
+        areaColor: '#FFFFFF'
+      }
+    }
+    // zoom:0.95, // 缩放比例
+  },
+  chartExtend: {
+    tooltip: {
+      confine: true,
+      backgroundColor: '#fff',
+      axisPointer: { // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+        shadowStyle: {
+          color: 'rgba(5,166,243,0.1)'
+        },
+        z: 3
+      },
+      textStyle: {
+        color: '#171826',
+        fontSize: 12
+      },
+      padding: [8, 12],
+      extraCssText: 'box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08)',
+      formatter: function (params, ticket, callback) {
+        if (params.data == null) {
+          return params.name + '：0'
+        } else {
+          return params.name + '：' + params.value
+        }
+      }
+    },
+    grid: {
+      height: '280px',
+      containLabel: true
+    },
+    legend: { // 隐藏图标上方小方块及文字
+      selectedMode: false,
+      textStyle: {
+        color: 'transparent'
+      },
+      itemWidth: 0,
+      itemHeight: 0
+    },
+    silent: false, // 禁用鼠标点击、滑过事件
+    series: {
+      showLegendSymbol: false,
+      selectedMode: false
+    },
+    graphic: [
+      {
+        type: 'group',
+        bottom: 54,
+        children: [
+          {
+            type: 'text',
+            z: 100,
+            left: 'left',
+            top: 'middle',
+            style: {
+              fill: '#333',
+              text: '市场分布数量',
+              font: '10px Microsoft YaHei'
+            }
+          }]
+      },
+      {
+        type: 'rect',
+        z: 101,
+        left: 0,
+        bottom: 34,
+        shape: {
+          width: 84,
+          height: 14
+        },
+        style: {
+          stroke: '#FB483D',
+          fill: 'transparent',
+          lineWidth: 0.5
+        }
+      },
+      rectGroup(0, '#F06326'),
+      rectGroup(14, '#F48A5D'),
+      rectGroup(28, '#FFB366'),
+      rectGroup(42, '#FFCF9F'),
+      rectGroup(56, '#FFE7CF'),
+      rectGroup(70, '#FFF4EB'),
+      {
+        type: 'group',
+        width: 84,
+        bottom: 20,
+        children: [
+          {
+            type: 'text',
+            z: 100,
+            left: 'left',
+            top: 'middle',
+            style: {
+              fill: '#333',
+              text: '100',
+              font: '10px Microsoft YaHei'
+            }
+          },
+          {
+            type: 'text',
+            z: 100,
+            left: 'right',
+            top: 'middle',
+            style: {
+              fill: '#333',
+              text: '0',
+              font: '10px Microsoft YaHei'
+            }
+          }]
+      }
+    ],
+    visualMap: {
+      show: false,
+      inRange: { // 定义 在选中范围中 的视觉元素
+        color: ['#FFF4EB', '#FFE7CF', '#FFCF9F', '#FFB366', '#F48A5D', '#F06326']
+      },
+      outOfRange: {
+        color: ['#F06326']
+      }
+    }
+  },
+  chart: null
+}
+// 月报本月项目规模分布
+export var mapSettings2 = {
+  chartSettings: {
+    positionJsonLink: './china.json',
+    beforeRegisterMapOnce (map) {
+      return map
+    },
+    beforeRegisterMap (map) {
+      return map
+    },
+    label: {
+      show: true,
+      fontSize: 9
+    },
+    selectedMode: false,
+    itemStyle: {
+      normal: {
+        borderColor: '#F06326',
+        areaColor: '#FFFFFF'
+      }
+    }
+  },
+  chartExtend: {
+    tooltip: {
+      confine: true,
+      backgroundColor: '#fff',
+      axisPointer: {
+        type: 'shadow', 
+        shadowStyle: {
+          color: 'rgba(5,166,243,0.1)'
+        },
+        z: 3
+      },
+      textStyle: {
+        color: '#171826',
+        fontSize: 12
+      },
+      padding: [8, 12],
+      extraCssText: 'box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08)',
+      formatter: function (params, ticket, callback) {
+        if (params.data == null) {
+          return params.name + '：0'
+        } else {
+          return params.name + '：' + params.value
+        }
+      }
+    },
+    grid: {
+      height: '280px',
+      containLabel: true
+    },
+    legend: {
+      selectedMode: false,
+      textStyle: {
+        color: 'transparent'
+      },
+      itemWidth: 0,
+      itemHeight: 0
+    },
+    silent: false,
+    series: {
+      showLegendSymbol: false,
+      selectedMode: false
+    },
+    graphic: [
+      {
+        type: 'group',
+        bottom: 54,
+        children: [
+          {
+            type: 'text',
+            z: 100,
+            left: 'left',
+            top: 'middle',
+            style: {
+              fill: '#333',
+              text: '单位：万元',
+              font: '10px Microsoft YaHei'
+            }
+          }]
+      },
+      {
+        type: 'rect',
+        z: 101,
+        left: 0,
+        bottom: 34,
+        shape: {
+          width: 84,
+          height: 14
+        },
+        style: {
+          stroke: '#FB483D',
+          fill: 'transparent',
+          lineWidth: 0.5
+        }
+      },
+      rectGroup(0, '#F06326'),
+      rectGroup(14, '#F48A5D'),
+      rectGroup(28, '#FFB366'),
+      rectGroup(42, '#FFCF9F'),
+      rectGroup(56, '#FFE7CF'),
+      rectGroup(70, '#FFF4EB'),
+      {
+        type: 'group',
+        width: 84,
+        bottom: 20,
+        children: [
+          {
+            type: 'text',
+            z: 100,
+            left: 'left',
+            top: 'middle',
+            style: {
+              fill: '#333',
+              text: '100',
+              font: '10px Microsoft YaHei'
+            }
+          },
+          {
+            type: 'text',
+            z: 100,
+            left: 'right',
+            top: 'middle',
+            style: {
+              fill: '#333',
+              text: '0',
+              font: '10px Microsoft YaHei'
+            }
+          }]
+      }
+    ],
+    visualMap: {
+      show: false,
+      inRange: {
+        color: ['#FFF4EB', '#FFE7CF', '#FFCF9F', '#FFB366', '#F48A5D', '#F06326']
+      },
+      outOfRange: {
+        color: ['#F06326']
+      }
+    }
+  },
+  chart: null
+}
+// 月报本月中标企业注册地分布
+export var mapSettings3 = {
+  chartSettings: {
+    positionJsonLink: './china.json',
+    beforeRegisterMapOnce (map) {
+      return map
+    },
+    beforeRegisterMap (map) {
+      return map
+    },
+    label: {
+      show: true,
+      fontSize: 9
+    },
+    selectedMode: false,
+    itemStyle: {
+      normal: {
+        borderColor: '#F06326',
+        areaColor: '#FFFFFF'
+      }
+    }
+  },
+  chartExtend: {
+    tooltip: {
+      confine: true,
+      backgroundColor: '#fff',
+      axisPointer: {
+        type: 'shadow', 
+        shadowStyle: {
+          color: 'rgba(5,166,243,0.1)'
+        },
+        z: 3
+      },
+      textStyle: {
+        color: '#171826',
+        fontSize: 12
+      },
+      padding: [8, 12],
+      extraCssText: 'box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08)',
+      formatter: function (params, ticket, callback) {
+        if (params.data == null) {
+          return params.name + '：0'
+        } else {
+          return params.name + '：' + params.value
+        }
+      }
+    },
+    grid: {
+      height: '280px',
+      containLabel: true
+    },
+    legend: {
+      selectedMode: false,
+      textStyle: {
+        color: 'transparent'
+      },
+      itemWidth: 0,
+      itemHeight: 0
+    },
+    silent: false,
+    series: {
+      showLegendSymbol: false,
+      selectedMode: false
+    },
+    graphic: [
+      {
+        type: 'group',
+        bottom: 54,
+        children: [
+          {
+            type: 'text',
+            z: 100,
+            left: 'left',
+            top: 'middle',
+            style: {
+              fill: '#333',
+              text: '单位：个',
+              font: '10px Microsoft YaHei'
+            }
+          }]
+      },
+      {
+        type: 'rect',
+        z: 101,
+        left: 0,
+        bottom: 34,
+        shape: {
+          width: 84,
+          height: 14
+        },
+        style: {
+          stroke: '#FB483D',
+          fill: 'transparent',
+          lineWidth: 0.5
+        }
+      },
+      rectGroup(0, '#F06326'),
+      rectGroup(14, '#F48A5D'),
+      rectGroup(28, '#FFB366'),
+      rectGroup(42, '#FFCF9F'),
+      rectGroup(56, '#FFE7CF'),
+      rectGroup(70, '#FFF4EB'),
+      {
+        type: 'group',
+        width: 84,
+        bottom: 20,
+        children: [
+          {
+            type: 'text',
+            z: 100,
+            left: 'left',
+            top: 'middle',
+            style: {
+              fill: '#333',
+              text: '100',
+              font: '10px Microsoft YaHei'
+            }
+          },
+          {
+            type: 'text',
+            z: 100,
+            left: 'right',
+            top: 'middle',
+            style: {
+              fill: '#333',
+              text: '0',
+              font: '10px Microsoft YaHei'
+            }
+          }]
+      }
+    ],
+    visualMap: {
+      show: false,
+      inRange: {
+        color: ['#FFF4EB', '#FFE7CF', '#FFCF9F', '#FFB366', '#F48A5D', '#F06326']
+      },
+      outOfRange: {
+        color: ['#F06326']
+      }
+    }
+  },
+  chart: null
+}
+// 中国地图例graphic配置函数
+export function rectGroup (left, color) {
+  return {
+    type: 'rect',
+    z: 100,
+    left: left,
+    bottom: 34,
+    shape: {
+      width: 14,
+      height: 14
+    },
+    style: {
+      fill: color
+    }
+  }
+}
+//  投标决策分析页面：预算分布、中标金额、折扣率分布三个图表配置项（只配置相同部分，不同部分在页面里单独配置）
+export var barChart = {
+  chartSettings: {},
+  chartExtend: {
+    grid: {
+      left: 4,
+      x: 0,
+      y: 20,
+      x2: 0,
+      bottom: 20
+    },
+    xAxis: {
+      axisLabel: {
+        interval: 0, // 强制显示x轴所有刻度
+        fontSize: 10
+      }
+    },
+    yAxis (item) {
+      item[0].splitLine = {
+        lineStyle: {
+          type: 'dashed', // y轴背景虚线
+          width: 0.5
+        }
+      }
+      item[0].axisLabel = {
+        margin: 2,
+        fontSize: 10
+      }
+      item[1].splitLine = {
+        show: false
+      }
+      item[1].axisLabel = {
+        show: false,
+        fontSize: 10
+      }
+      return item
+    },
+    tooltip: {
+      trigger: 'axis',
+      confine: true,
+      backgroundColor: '#fff',
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {},
+        z: 3
+      },
+      textStyle: {
+        color: '#171826',
+        fontSize: 12
+      },
+      padding: [7, 12],
+      extraCssText: 'box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08);transform: translate3d(0,0,0)',
+      formatter: function (params) {
+        // 移除重复的数据
+        for (var i = 0; i < params.length; i++) {
+          for (var j = params.length - 1; j > i; j--) {
+            if (params[j].data == params[i].data) {
+              params.splice(j, 1)
+              break
+            }
+          }
+        }
+        var tip = ''
+        // eslint-disable-next-line no-redeclare
+        for (var i = 0; i < params.length; i++) {
+          if (i == 0) {
+            tip = params[i].value == 0 ? '' : tip + params[i].seriesName + '：' + params[i].value + '个' + '<br/>'
+          } else if (i == 1) {
+            if (params[i].value != 0 || params[i].value != '0.00') {
+              if (params[i].seriesName === '平均折扣率') {
+                tip = tip + params[i].seriesName + '：' + params[i].value + '%' + '<br/>'
+              } else {
+                tip = tip + params[i].seriesName + '：' + params[i].value + '万元' + '<br/>'
+              }
+            } else {
+              // eslint-disable-next-line no-self-assign
+              tip = tip
+            }
+          }
+        }
+        return tip
+      }
+    },
+    legend: {
+      show: false,
+      orient: 'horizontal',
+      icon: 'circle',
+      bottom: 20,
+      align: 'left',
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 20,
+      textStyle: {
+        fontSize: 11,
+        rich: {
+          a: {
+            fontSize: 16,
+            verticalAlign: 'top',
+            align: 'center',
+            padding: [0, 15, 28, 0]
+          },
+          b: {
+            fontSize: 14,
+            align: 'center',
+            padding: [0, 15, 0, 0],
+            lineHeight: 25
+          }
+        }
+      },
+      formatter: function (name) {
+        var wnYuan = ['金额', '项目金额', '项目规划', '项目总预算', '项目总规模']
+        var ge = ['数量', '项目数量']
+        if (wnYuan.indexOf(name) !== -1) {
+          name += '（万元）'
+        } else if (ge.indexOf(name) !== -1) {
+          name += '（个）'
+        }
+        return name
+      }
+    },
+    series: {
+      barWidth: 20,
+      smooth: false,
+      symbol: 'none',
+      lineStyle: {
+        width: 0,
+        color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
+      }
+    }
+  }
+}
+
+// 平均折扣率配置
+export var multiBarChart = {
+  chartSettings: {
+    showLine: ['平均折扣率']
+  },
+  chartExtend: {
+    grid: {
+      x: 12,
+      y: 20,
+      x2: 12
+    },
+    yAxis: {
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed', // y轴背景虚线
+          width: 0.5
+        }
+      },
+      axisLabel: {
+        fontSize: 10
+      }
+    },
+    xAxis: {
+      axisLabel: {
+        fontSize: 10
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      confine: true,
+      backgroundColor: '#fff',
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(5,166,243,0.1)'
+        }
+      },
+      textStyle: {
+        color: '#171826',
+        fontSize: 12
+      },
+      padding: [8, 12],
+      extraCssText: 'box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08)',
+      formatter: function (params) {
+        var tip = ''
+        for (var i = 0; i < params.length; i++) {
+          if (i < 4) {
+            tip = tip + params[i].marker + params[i].seriesName + '：' + params[i].value + '<br/>'
+          } else {
+            tip = tip + params[i].marker + params[i].seriesName + '：' + params[i].value + '%' + '<br/>'
+          }
+        }
+        tip += '<div style="padding-top:2px;text-align:center;color:#9B9CA3;">' + ' - ' + params[0].name.substring(0, params[0].name.lastIndexOf('年')) + ' - ' + '</div>'
+        return tip
+      }
+    },
+    legend: {
+      orient: 'horizontal',
+      bottom: 20,
+      icon: 'circle',
+      itemWidth: 8,
+      itemHeight: 8,
+      padding: [0, 6],
+      data: ['日期', '0~5%', '5~10%', '10~30%', '30~100%', '平均折扣率'],
+      textStyle: {
+        fontSize: 11
+      }
+    },
+    series: {
+      smooth: false
+    },
+    color: ['#05A6F3', '#0BD991', '#FF9F40', '#8E6DF2', '#F1D090']
+  }
+}
+
+export var mBarChart = {
+  dataEmpty: true,
+  chartSettings: {},
+  chartExtend: {
+    grid: {
+      x: 14,
+      y: 20,
+      x2: 14
+    },
+    tooltip: {
+      trigger: 'axis',
+      confine: true,
+      backgroundColor: '#fff',
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(5,166,243,0.1)'
+        }
+      },
+      textStyle: {
+        color: '#171826',
+        fontSize: 12
+      },
+      padding: [8, 12],
+      extraCssText: 'box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08)',
+      z: 3
+    },
+    legend: {
+      orient: 'horizontal',
+      icon: 'circle',
+      bottom: 10,
+      left: 'center',
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 10,
+      textStyle: {
+        fontSize: 11
+      }
+    },
+    yAxis: {
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          width: 0.5,
+          color: 'rgba(0, 0, 0, 0.08)'
+        }
+      },
+      axisLabel: {
+        fontSize: 10
+      }
+    },
+    xAxis: {
+      axisLabel: {
+        fontSize: 10
+      }
+    },
+    series: {
+      barWidth: 20,
+      type: 'bar'
+    },
+    color: ['#9C72F4', '#6B78E8', '#05A6F3', '#2ABED1', '#0BD991', '#C0C4CC', '#B8D4F9', '#444A7A', '#F1D090', '#B8D4F9', '#C09BFC', '#104EA3', '#21CED2', '#FFB901', '#7BBFE5', '#82E9D6', '#62B8FF', '#7E56EE', '#B3E3E7', '#8591FF', '#96C3D8', '#3774E8', '#CDCEFE', '#6BBEF4', '#6E55B4', '#2B82FE', '#FF9A01', '#01C290', '#BAE1A8', '#EB97D8']
+  }
+}
+
+// 月报 （本月项目规模）
+export var barChart2 = {
+  chartExtend: {
+    grid: {
+      left: 4,
+      x: 0,
+      y: 20,
+      x2: 12
+    },
+    xAxis: {
+      axisLabel: {
+        fontSize: 10
+      }
+    },
+    yAxis (item) {
+      var maxCountList = vNode.data.curMonthScaleData.rows.map(v => {
+        return v['项目规模']
+      })
+      var maxPriceList = vNode.data.curMonthScaleData.rows.map(v => {
+        return v['环比增长率(%)-右纵轴']
+      })
+      var maxCount = Math.ceil(Math.max.apply(null, maxCountList)).toString()
+      var maxPrice = Math.ceil(Math.max.apply(null, maxPriceList)).toString()
+      var minRight = Math.ceil(Math.min.apply(null, maxPriceList)).toString()
+      maxCount = Math.ceil(maxCount / (Math.pow(10, maxCount.length - 1))) * Math.pow(10, maxCount.length - 1)
+      maxPrice = Math.ceil(maxPrice / (Math.pow(10, maxPrice.length - 1))) * Math.pow(10, maxPrice.length - 1)
+      if (minRight.indexOf('-') > -1) {
+        minRight = '-' + Math.ceil(minRight.replace('-', '') / (Math.pow(10, minRight.replace('-', '').length - 1))) * Math.pow(10, minRight.replace('-', '').length - 1)
+      } else {
+        minRight = 0
+      }
+      item[0].min = 0
+      item[1].min = minRight
+      item[0].max = maxCount
+      item[0].interval = Math.ceil(maxCount / 5)
+      item[1].max = maxPrice
+      item[1].interval = Math.ceil((maxPrice - minRight) / 5)
+      item[0].splitLine = {
+        lineStyle: {
+          type: 'dashed',
+          width: 0.5
+        }
+      }
+      item[1].splitLine = {
+        show: false,
+        lineStyle: {
+          type: 'dashed',
+          width: 0.5
+        }
+      }
+      item[1].axisLabel = {
+        show: true,
+        fontSize: 10
+      }
+      item[0].axisLabel = {
+        margin: 2,
+        fontSize: 10,
+        formatter: function (value, index) {
+          return value.toString().replace(/,/, '')
+        }
+      }
+      return item
+    },
+    tooltip: {
+      trigger: 'axis',
+      confine: true,
+      backgroundColor: '#fff',
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(5,166,243,0.1)'
+        }
+      },
+      textStyle: {
+        color: '#171826',
+        fontSize: 12
+      },
+      padding: [7, 12],
+      extraCssText: 'box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08)',
+      formatter: function (params) {
+        return formatterTip(params)
+      }
+    },
+    legend: {
+      show: true,
+      orient: 'horizontal',
+      icon: 'circle',
+      bottom: 20,
+      align: 'left',
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 20,
+      textStyle: {
+        fontSize: 11,
+        rich: {
+          a: {
+            fontSize: 16,
+            verticalAlign: 'top',
+            align: 'center',
+            padding: [0, 15, 28, 0]
+          },
+          b: {
+            fontSize: 14,
+            align: 'center',
+            padding: [0, 15, 0, 0],
+            lineHeight: 25
+          }
+        }
+      },
+      formatter: function (name) {
+        if (name == '项目规模') {
+          name = name + '（万元）'
+        }
+        return name
+      },
+      data: ['项目规模', '环比增长率(%)-右纵轴']
+    },
+    series: {
+      barWidth: 20,
+      smooth: false
+    },
+    color: ['#05A6F3', '#FF9F40']
+  }
+}
+// 月报 （本月中标企业中标项目数量分布）
+export var barChart3 = {
+  chartExtend: {
+    grid: {
+      x: 8,
+      y: 20,
+      x2: 12
+    },
+    xAxis: {
+      axisLabel: {
+        fontSize: 10,
+        formatter: function (val) {
+          return val + '个'
+        }
+      }
+    },
+    yAxis (item) {
+      var maxCountList = vNode.data.curWinEntCountData.rows.map(v => {
+        return v['企业数量']
+      })
+      var maxPriceList = vNode.data.curWinEntCountData.rows.map(v => {
+        return v['累计占比(%)-右纵轴']
+      })
+      var maxCount = Math.ceil(Math.max.apply(null, maxCountList)).toString()
+      var maxPrice = Math.ceil(Math.max.apply(null, maxPriceList)).toString()
+      maxCount = Math.ceil(maxCount / (Math.pow(10, maxCount.length - 1))) * Math.pow(10, maxCount.length - 1)
+      maxPrice = Math.ceil(maxPrice / (Math.pow(10, maxPrice.length - 1))) * Math.pow(10, maxPrice.length - 1)
+      item[0].min = 0
+      item[1].min = 0
+      item[0].max = maxCount
+      item[0].interval = Math.ceil(maxCount / 5)
+      item[1].max = maxPrice
+      item[1].interval = Math.ceil((maxPrice - 0) / 5)
+      item[0].splitLine = {
+        lineStyle: {
+          type: 'dashed',
+          width: 0.5
+        }
+      }
+      item[1].splitLine = {
+        show: false,
+        lineStyle: {
+          type: 'dashed',
+          width: 0.5
+        }
+      }
+      item[1].axisLabel = {
+        show: true,
+        fontSize: 10
+      }
+      item[0].axisLabel = {
+        margin: 2,
+        fontSize: 10,
+        formatter: function (value, index) {
+          return value.toString().replace(/,/, '')
+        }
+      }
+      return item
+    },
+    tooltip: {
+      trigger: 'axis',
+      confine: true,
+      backgroundColor: '#fff',
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(5,166,243,0.1)'
+        }
+      },
+      textStyle: {
+        color: '#171826',
+        fontSize: 12
+      },
+      padding: [7, 12],
+      extraCssText: 'box-shadow: 0px 4px 16px rgba(8, 31, 38, 0.08)',
+      formatter: function (params) {
+        return formatterTip(params)
+      }
+    },
+    legend: {
+      show: true,
+      orient: 'horizontal',
+      icon: 'circle',
+      bottom: 20,
+      align: 'left',
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 20,
+      textStyle: {
+        fontSize: 11,
+        rich: {
+          a: {
+            fontSize: 16,
+            verticalAlign: 'top',
+            align: 'center',
+            padding: [0, 15, 28, 0]
+          },
+          b: {
+            fontSize: 14,
+            align: 'center',
+            padding: [0, 15, 0, 0],
+            lineHeight: 25
+          }
+        }
+      },
+      formatter: function (name) {
+        if (name == '企业数量') {
+          name = name + '（个）'
+        }
+        return name
+      },
+      data: ['企业数量', '累计占比(%)-右纵轴']
+    },
+    series: {
+      barWidth: 20,
+      smooth: false
+    },
+    color: ['#05A6F3', '#FF9F40']
+  }
+}
+// 修改tooltip展示效果函数
+export function formatterTip (params) {
+  var tip = ''
+  for (var i = 0; i < params.length; i++) { // 这里是自己定义样式， params[i].marker 表示是否显示左边的那个小圆圈
+    params[i].value == undefined ? params[i].value = 0 : params[i].value
+    params[i].marker = '<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:' + params[i].color + '"></span>'
+    if (params[i].seriesName === '项目数量' || params[i].seriesName === '企业数量') {
+      tip = tip + params[i].marker + params[i].seriesName + '：' + params[i].value + '个' + '<br/>'
+    } else if (params[i].seriesName === '环比增长率(%)-右纵轴' || params[i].seriesName === '累计占比(%)-右纵轴') {
+      tip = tip + params[i].marker + params[i].seriesName + '：' + params[i].value + '%' + '<br/>'
+    } else {
+      tip = tip + params[i].marker + params[i].seriesName + '：' + params[i].value + '万元' + '<br/>'
+    }
+  }
+  tip += '<div style="padding-top:2px;text-align:center;color:#9B9CA3;">' + ' - ' + params[0].name + ' - ' + '</div>'
+  return tip
+}

src/utils/index.js

@@ -2,3 +2,4 @@ import './globalDirectives'
 import './globalFilters'
 
 export * from './globalFunctions'
+export * from './echarts_option'

src/views/potential-for/PotenSimilar.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="potensimilar">
+    <forLayOut>
+      <span class="icon_ai el-icon-arrow-down" slot="icon"></span>
+      <span class="bidfor_text" slot="proname">潜在项目预测</span>
+      <img class="bidfor_img" src="@/assets/images/item_4.png" alt="" slot="bidImg">
+      <div class="similar_list" slot="main">
+          <div class="poten_li">
+            <div class="list_name">
+              <div class="list_name_left">
+                <span class="pur_company">采购单位</span>
+                <span class="list_pur_name">北京市工商行政管理局朝阳分局</span>
+              </div>
+              <div class="list_time">
+                查看采购单位画像
+              </div>
+            </div>
+            <div class="list_poten">
+              <div class="poten_unit">
+                <span class="unit_label poten_label">预测时间：</span>
+                <span class="poten_name">2020/10/20</span>
+              </div>
+              <div class="poten_unit poten_margin">
+                <span class="unit_label poten_label">预测线索：</span>
+                <span class="unit_name poten_name">中泉州市第一医院改造项目</span>
+              </div>
+            </div>
+            <div class="poten_tips">预测说明：潜在项目预测基于对历史招标信息统计分析，仅供参考</div>
+          </div>
+        </div>
+      <ForeCast type="potensimilar" title="预测项目" slot="main"></ForeCast>
+    </forLayOut>
+  </div>
+</template>
+
+<script>
+import forLayOut from '@/components/forecast/ForLayout.vue'
+import ForeCast from '@/components/forecast/ForeCast.vue'
+export default {
+  name: 'potensimilar',
+  components: {
+    ForeCast,
+    forLayOut
+  }
+}
+</script>
+
+<style lang="scss">
+.potensimilar{
+  width: 100%;
+  .bidfor_search{
+    display: none!important;
+  }
+  .for_main{
+    top: 159px!important;
+  }
+  .similar_list{
+    padding: 40px;
+    padding-bottom: 0;
+    .poten_li{
+      .list_name{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 25px;
+        .pur_company{
+          margin-right: 8px;
+          padding: 2px 8px;
+          width: 68px;
+          height: 24px;
+          background: rgba(245,101,0,0.10);
+          border-radius: 2px;
+          box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.05) inset;
+          font-size: 13px;
+          font-weight: 400;
+          text-align: center;
+          color: #f56500;
+          line-height: 20px;
+        }
+        .list_time{
+          width: 144px;
+          height: 32px;
+          background: #2cb7ca;
+          border-radius: 4px;
+          font-size: 14px;
+          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+          font-weight: 400;
+          text-align: CENTER;
+          color: #ffffff;
+          line-height: 32px;
+          cursor: pointer;
+        }
+      }
+      .list_poten{
+        display: flex;
+        flex-direction: column;
+        .poten_unit{
+          display: flex;
+          .poten_label{
+            font-size: 14px;
+            color: #999999;
+            line-height: 22px;
+            text-shadow: 0px -1px 0px 0px rgba(0,0,0,0.05) inset;
+          }
+          .poten_name{
+            font-size: 14px;
+            color: #1d1d1d;
+            line-height: 22px;
+            text-shadow: 0px -1px 0px 0px rgba(0,0,0,0.05) inset;
+          }
+          .unit_name{
+            color: #2cb7ca;
+            text-decoration: underline;
+            cursor: pointer;
+          }
+        }
+        .poten_margin{
+          margin-top: 10px;
+        }
+      }
+      .poten_tips{
+        margin-top: 39px;
+        width: 100%;
+        height: 32px;
+        background: #FFF5EC;
+        font-size: 13px;
+        text-align: CENTER;
+        color: #ff9f40;
+        line-height: 32px;
+      }
+    }
+  }
+}
+</style>

src/views/potential-for/PotenTial.vue

@@ -4,7 +4,7 @@
       <span class="icon_ai el-icon-arrow-down" slot="icon"></span>
       <span class="bidfor_text" slot="proname">潜在项目预测</span>
       <img class="bidfor_img" src="@/assets/images/item_4.png" alt="" slot="bidImg">
-      <ForeCast type="potential" slot="main"></ForeCast>
+      <ForeCast type="potential" :potenObj="listState" title="潜在项目" slot="main"></ForeCast>
     </forLayOut>
   </div>
 </template>
@@ -12,11 +12,50 @@
 <script>
 import forLayOut from '@/components/forecast/ForLayout.vue'
 import ForeCast from '@/components/forecast/ForeCast.vue'
+import { getPotenList } from '@/api/modules'
 export default {
   name: 'potential',
   components: {
     ForeCast,
     forLayOut
+  },
+  data () {
+    return {
+      listState: {
+        loaded: true, // 是否已经搜索过
+        loading: false,
+        pageNum: 1, // 当前页
+        pageSize: 10, // 每页多少条数据
+        total: 2, // 一共多少条数据
+        list: [
+          {
+            buyer: '凌源市松岭子中心小学',
+            createtime: '2020-09-22',
+            id: 'ABCY2FdcDI%2FMD8sAll2cAcSDDIvQCRgR3h2KAUnKiFFWmpzeAFUCUU%3D',
+            results: [
+              {
+                keys: [
+                  '污水泵'
+                ],
+                purchasing: '污水泵,污水提升器,铸铁管,污水提升设备,过滤器,不锈钢水管,水处理,雨水收集系统,塑胶管道,阀门,二次供水设备,镀锌钢管,压力容器,PPR管,排气阀,钢管,给水设备,镀锌管,不锈钢水箱,螺旋钢管,阀门配件,无负压供水设备,泵,水表,液位计,水泵,给排水设备,流量计,不锈钢管,污水处理设备,PVC管,钢塑复合管,给水钢管,供水设备,不锈钢管道,沟槽管件,水池,水处理设备,阀门管件,水处理成套设备,虹吸排水,水管,水箱,污水处理,净水设备,管材管件,法兰垫片,塑料管道,钢管套管,污水处理工程,调节阀,净水器,PVC阻燃塑料管,管道支架,蝶阀,给排水管道'
+              }
+            ],
+            title: '泉州师范学院租赁中国大学MOOC学校云空间及课程运维服务采购项目单一来源采购公告'
+          }
+        ] // 查询请求返回的数据
+      }
+    }
+  },
+  created () {
+    this.getnewList()
+  },
+  methods: {
+    getnewList () {
+      getPotenList({ pageNum: this.listState.pageNum }).then(res => {
+        console.log(res)
+        res.data.list = this.list
+      })
+    }
   }
 }
 </script>

src/views/reportData/pageMonth.vue

@@ -3,14 +3,14 @@
     <div class="page_week_main">
       <!-- 选择月报时间 -->
       <div class="week_time">
-        <SelectMonth></SelectMonth>
+        <SelectMonth @selectYear="selectYear"></SelectMonth>
       </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月31日）</div>
+            <div class="data_r_week">（{{dateFormatter(start * 1000, 'MM月dd日')}}-{{dateFormatter(end * 1000, 'MM月dd日')}}）</div>
           </div>
           <div class="data_keys">
             <span class="keys_label">订阅关键词组：</span>
@@ -26,31 +26,182 @@
       </div>
       <div class="echartsView">
         <!-- 项目数量 -->
-        <div class="newAdd_bid"></div>
+        <EchartsDetail title="项目数量" :Config="barConfig1" :projectData="pCountData"></EchartsDetail>
         <!-- 项目规模 -->
-        <div class="newAdd_bidBudget"></div>
+        <EchartsDetail title="项目规模" :Config="barConfig2" :projectData="pScaleData"></EchartsDetail>
         <!-- 本月项目数量 -->
-        <div class="newAdd_bidOpen"></div>
+        <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">{{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="curMonthCount.list.length > 5 && !curMonthCount.showAll">
+                <div class="more">
+                    <span @click="curMonthCount.showAll = true">查看更多</span>
+                </div>
+            </div>
+        </div>
         <!-- 本月项目规模 -->
-        <div class="newAdd_scale"></div>
+        <EchartsDetail title="本月项目规模" :Config="barConfig2" :projectData="curMonthScaleData"></EchartsDetail>
         <!-- 本月项目数量分布 -->
-        <div class="proNum_distrib"></div>
+        <div class="chart month_scale_chart" v-if="isShow.show_5">
+            <div class="chart_title">本月项目数量分布</div>
+            <div>
+                <ve-map
+                    height="300px"
+                    :init-options="initRendererSvg"
+                    :data="mapCountData"
+                    :after-config="mapCountConfig"
+                    :settings="mapSettings.chartSettings"
+                    :extend="mapSettings.chartExtend">
+                </ve-map>
+            </div>
+        </div>
         <!-- 本月项目规模分布 -->
-        <div class="pro_scale"></div>
-        <!-- 本月项目数量TOP10采购行业 -->
-        <div class="proNum_top"></div>
-        <!-- 本月项目规模TOP10采购行业 -->
-        <div class="proScale_top"></div>
-        <!-- 本月项目平均规模TOP10采购行业 -->
-        <div class="proAverage_top"></div>
-        <!-- 本月中标企业注册地分布 -->
-        <div class="bident_register"></div>
-        <!-- 本月中标企业注册资本分布 -->
-        <div class="bident_regprice"></div>
-        <!-- 本月中标企业中标项目数量分布 -->
-        <div class="bident_bidnum"></div>
-        <!-- 本月采购单位排行榜 -->
-        <div class="month_top"></div>
+        <div class="chart" v-if="isShow.show_6">
+            <div class="chart_title">本月项目规模分布</div>
+            <div>
+                <ve-map
+                    height="300px"
+                    :init-options="initRendererSvg"
+                    :data="mapScaleData"
+                    :after-config="mapScaleConfig"
+                    :settings="mapSettings2.chartSettings"
+                    :extend="mapSettings2.chartExtend">
+                </ve-map>
+            </div>
+        </div>
+        <!-- 本月项目数量TOP10采购行业 7-->
+        <div class="chart rank" v-if="isShow.show_7">
+            <div class="chart_title">本月项目数量TOP10采购行业</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>
+            <div v-if="curMonthCountTop.list.length > 5 && !curMonthCountTop.showAll">
+                <div class="more">
+                    <span @click="curMonthCountTop.showAll = true">查看更多</span>
+                </div>
+            </div>
+        </div>
+        <!-- 本月项目规模TOP10采购行业 8-->
+        <div class="chart rank" v-if="isShow.show_8">
+            <div class="chart_title">本月项目规模TOP10采购行业</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>
+            <div v-if="curMonthScaleTop.list.length > 5 && !curMonthScaleTop.showAll">
+                <div class="more">
+                    <span @click="curMonthScaleTop.showAll = true">查看更多</span>
+                </div>
+            </div>
+        </div>
+        <!-- 本月项目平均规模TOP10采购行业 9-->
+        <div class="chart rank" v-if="isShow.show_9">
+            <div class="chart_title">本月项目平均规模TOP10采购行业</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>
+            <div v-if="averageScaleTop.list.length > 5 && !averageScaleTop.showAll">
+                <div class="more">
+                    <span @click="averageScaleTop.showAll = true">查看更多</span>
+                </div>
+            </div>
+        </div>
+        <!-- 本月中标企业注册地分布 10-->
+        <div class="chart" v-if="isShow.show_10">
+            <div class="chart_title">本月中标企业注册地分布</div>
+            <div>
+                <ve-map
+                    ref="chartRegCount"
+                    :init-options="initRendererSvg"
+                    height="300px"
+                    :data="mapRegionData"
+                    :after-config="mapRegCountConfig"
+                    :settings="mapSettings3.chartSettings" 
+                    :extend="mapSettings3.chartExtend">
+                </ve-map>
+            </div>
+        </div>
+        <!-- 本月中标企业注册资本分布 11-->
+        <div class="chart rank" v-if="isShow.show_11">
+            <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>
+        <!-- 本月中标企业中标项目数量分布 12-->
+        <div class="chart month_scale_chart" v-if="isShow.show_12">
+            <div class="chart_title">本月中标企业中标项目数量分布</div>
+            <div>
+                <ve-histogram
+                    height="284px"
+                    :init-options="initRendererSvg"
+                    :data="curWinEntCountData"
+                    :settings="settings3"
+                    :extend="barChart3.chartExtend">
+                </ve-histogram>
+            </div>
+        </div>
+        <!-- 本月采购单位排行榜 13-->
+        <div class="chart rank" v-if="isShow.show_13">
+            <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>
+        </div>
         <!-- 本月中标企业排行榜 -->
         <ProjectTop title="本月中标企业排行榜" :data="winner" type="winner"></ProjectTop>
         <!-- 本月项目规模排行榜 -->
@@ -65,61 +216,539 @@
 
 import SelectMonth from '@/components/report-data/SelectMonth.vue'
 import ProjectTop from '@/components/report-data/ProjectTop.vue'
+import { getReportDetail, getReportIndex, getReportStartTime } from '@/api/modules'
+import { dateFormatter } from '@/utils/globalFunctions'
+import { mapSettings, mapSettings2, mapSettings3, barChart3 } from '@/utils/echarts_option.js'
+import EchartsDetail from '@/components/report-data/EchartsDetail.vue'
 export default {
   name: 'page_week',
   components: {
     SelectMonth,
-    ProjectTop
+    ProjectTop,
+    EchartsDetail
   },
   data () {
     return {
       isWeekIndex: 0,
-      winner: [
-        {
-          area: '广东',
-          capital: 9000,
-          city: '广州市',
-          establish_date: '2015-11-04',
-          project_count: 4,
-          type: '内资公司',
-          winner: '广东崇好健康国际贸易有限公司'
-        },
-        {
-          area: '浙江',
-          capital: 10011,
-          city: '杭州市',
-          establish_date: '1996-04-05',
-          project_count: 3,
-          type: '内资公司',
-          winner: '浙江新中环建设有限公司'
-        }
-      ],
-      project_bidamount: [
-        {
-          area: '陕西',
-          bidamount: 1371059000,
-          buyer: '西安市儿童医院',
-          city: '西安市',
-          jgtime: 1599124420,
-          projectname: '西安市儿童医院经开院区项目工程总承包(EPC)',
-          winner: '中建八局第二建设有限公司'
-        },
-        {
-          area: '陕西',
-          bidamount: 1371059000,
-          buyer: '西安市儿童医院',
-          city: '西安市',
-          jgtime: 1599124420,
-          projectname: '西安市儿童医院经开院区项目工程总承包(EPC)',
-          winner: '中建八局第二建设有限公司'
-        }
-      ]
+      winner: [],
+      project_bidamount: [],
+      yearmonth: '', // 第一个月报的年份
+      start: 0,
+      end: 0,
+      project_count: [], // 项目规模
+      settings1: {
+        showLine: ['环比增长率(%)-右纵轴'],
+        axisSite: { right: ['环比增长率(%)-右纵轴'] }
+      },
+      settings2: {
+        showLine: ['环比增长率(%)-右纵轴'],
+        axisSite: { right: ['环比增长率(%)-右纵轴'] }
+      },
+      settings3: {
+        showLine: ['累计占比(%)-右纵轴'],
+        axisSite: { right: ['累计占比(%)-右纵轴'] }
+      },
+      // 项目数量  1
+      pCountData: {
+        columns: ['日期', '项目数量'],
+        rows: []
+      },
+      // 项目规模 2
+      pScaleData: {
+        columns: ['日期', '项目规模', '环比增长率(%)-右纵轴'],
+        rows: []
+      },
+      // 本月项目数量 3
+      curMonthCount: {
+        list: [],
+        showAll: false
+      },
+      // 本月项目规模 4
+      curMonthScaleData: {
+        columns: ['项目类型', '项目规模', '环比增长率(%)-右纵轴'],
+        rows: []
+      },
+      // 地图配置项
+      mapSettings: mapSettings,
+      // 地图数据-本月项目数量分布 5
+      mapCountData: {
+        columns: ['name', 'value'],
+        rows: []
+      },
+      // 地图配置项
+      mapSettings2: mapSettings2,
+      mapSettings3: mapSettings3,
+      // 地图数据-本月项目规模分布 6
+      mapScaleData: {
+        columns: ['name', 'value'],
+        rows: []
+      },
+      // 本月项目数量Top10采购行业 7
+      curMonthCountTop: {
+        list: [],
+        showAll: false
+      },
+      // 本月项目规模TOP10采购行业 8
+      curMonthScaleTop: {
+        list: [],
+        showAll: false
+      },
+      // 本月项目平均规模TOP10采购行业 9
+      averageScaleTop: {
+        list: [],
+        showAll: false
+      },
+      // 地图数据-本月中标企业注册地分布 10
+      mapRegionData: {
+        columns: ['name', 'value'],
+        rows: []
+      },
+      // 本月中标企业注册资本分布 11
+      regCapitalTop: {
+        list: [],
+        showAll: false
+      },
+      // 本月中标企业中标项目数量分布 12
+      barChart3: barChart3,
+      curWinEntCountData: {
+        columns: ['项目数量', '企业数量', '累计占比(%)-右纵轴'],
+        rows: []
+      },
+      // 本月采购单位排行榜 13
+      buyerTop: {
+        list: [],
+        showAll: false
+      },
+      isShow: {
+        show_1: true,
+        show_2: true,
+        show_3: true,
+        show_4: true,
+        show_5: true,
+        show_6: true,
+        show_7: true,
+        show_8: true,
+        show_9: true,
+        show_10: true,
+        show_11: true,
+        show_12: true,
+        show_13: true,
+        show_14: true,
+        show_15: true
+      },
+      initRendererSvg: {
+        renderer: 'svg'
+      }
+    }
+  },
+  computed: {
+    showCurMonthCount () {
+      return this.curMonthCount.showAll ? this.curMonthCount.list : this.curMonthCount.list.slice(0, 5)
+    },
+    showCurMonthCountTop: function () {
+      return this.curMonthCountTop.showAll ? this.curMonthCountTop.list : this.curMonthCountTop.list.slice(0, 5)
+    },
+    showCurMonthScaleTop: function () {
+      return this.curMonthScaleTop.showAll ? this.curMonthScaleTop.list : this.curMonthScaleTop.list.slice(0, 5)
+    },
+    showAverageScaleTop: function () {
+      return this.averageScaleTop.showAll ? this.averageScaleTop.list : this.averageScaleTop.list.slice(0, 5)
+    },
+    showRegCapitalTop: function () {
+      return this.regCapitalTop.showAll ? this.regCapitalTop.list : this.regCapitalTop.list.slice(0, 5)
+    },
+    showBuyerTop: function () {
+      return this.buyerTop.showAll ? this.buyerTop.list : this.buyerTop.list.slice(0, 5)
+    },
+    showEntWinTop: function () {
+      return this.curMonthEntWin.showAll ? this.curMonthEntWin.list : this.curMonthEntWin.list.slice(0, 3)
+    },
+    showScaleWin: function () {
+      return this.curMonthScaleWin.showAll ? this.curMonthScaleWin.list : this.curMonthScaleWin.list.slice(0, 3)
     }
   },
+  created () {
+    this.getFirst()
+  },
+  mounted () {
+    // this.$refs['chartRegCount'].echarts.resize()
+  },
   methods: {
-    // 选择周报
-    selectWeek (data) {
-      this.isWeekIndex = data
+    dateFormatter,
+    // 格式化进度条图表数据
+    formatterWinData (data, type) {
+      const that = this
+      console.log(data)
+      data.forEach(function (v, i) {
+        console.log(v)
+        switch (type) {
+          case 'count':
+            v.parent = v.count / data[0].count * 100 + '%'
+            break
+          case 'scale':
+            v.bidamount = (v.bidamount / 10000).toFixed(2)
+            v.parent = v.bidamount / data[0].bidamount * 100 + '%'
+            break
+          case 'average':
+            v.average = (v.average / 10000).toFixed(2)
+            v.parent = v.average / data[0].average * 100 + '%'
+            break
+          case 'capital':
+            v.parent = v.count / that.maxNumForArray(data) * 100 + '%'
+            break
+        }
+      })
+      return data
+    },
+    getFirst () {
+      getReportStartTime().then((res) => {
+        console.log(res)
+        if (res.data) {
+          if (res.data.month_firsttime !== 0) {
+            this.yearmonth = res.data.month_firsttime.slice(0, 4)
+            this.getReportList(res.data.month_firsttime.slice(0, 4))
+          }
+        }
+      })
+    },
+    // 选择月报
+    selectYear (data) {
+      this.getReportList(data)
+    },
+    getReportList (time) {
+      getReportIndex({ ym: time }).then((res) => {
+        console.log(res)
+        if (res.data && res.data.list && res.data.list.length !== 0) {
+          res.data.list.forEach(function (item) {
+            if (item.pushtime) {
+              item.pushtime = dateFormatter(item.pushtime * 1000, 'yyyy/MM/dd')
+            } else {
+              item.pushtime = ''
+            }
+          })
+          this.getDetail(res.data.list[0].startdate, res.data.list[0].enddate)
+          this.start = res.data.list[0].startdate
+          this.end = res.data.list[0].enddate
+        }
+      })
+    },
+    // 月报详情
+    getDetail (start, end) {
+      getReportDetail({ start: start, end: end }).then(res => {
+        console.log(res)
+        if (res.error_code === 0) {
+          // 项目数量 1
+          if (res.data.project_count && res.data.project_count.length > 0) {
+            var pCount = res.data.project_count
+            const data = this.formatterBarLine(pCount, '1')
+            if (data) {
+              this.pCountData.rows = data
+            } else {
+              this.isShow.show_1 = false
+            }
+          } else {
+            this.isShow.show_1 = false
+          }
+          // 项目规模 2
+          if (res.data.project_bidamount_count && res.data.project_bidamount_count.length > 0) {
+            const data = this.formatterBarLine(res.data.project_bidamount_count, '2')
+            if (data) {
+              this.pScaleData.rows = data
+            } else {
+              this.isShow.show_2 = false
+            }
+          } else {
+            this.isShow.show_2 = false
+          }
+          // 本月项目数量 3
+          if (res.data.project_matchitem_bidamount && res.data.project_matchitem_count.length > 0) {
+            this.curMonthCount.list = this.formatterWinData(res.data.project_matchitem_count, 'count')
+          } else {
+            this.isShow.show_3 = false
+          }
+          // 本月项目规模 4
+          if (res.data.project_matchitem_bidamount && res.data.project_matchitem_bidamount.length > 0) {
+            var data = this.formatterBarLine(res.data.project_matchitem_bidamount, '3')
+            if (data) {
+              this.curMonthScaleData.rows = data
+            } else {
+              this.isShow.show_4 = false
+            }
+          } else {
+            this.isShow.show_4 = false
+          }
+          // 本月项目数量分布 5
+          if (res.data.project_area_count && Object.keys(res.data.project_area_count).length > 0) {
+            this.mapCountData.rows = this.formatterMapData(res.data.project_area_count)
+          } else {
+            this.isShow.show_5 = false
+          }
+          // 本月项目规模分布 6
+          if (res.data.project_area_bidamount && Object.keys(res.data.project_area_bidamount).length > 0) {
+            this.mapScaleData.rows = this.formatterMapData(res.data.project_area_bidamount)
+          } else {
+            this.isShow.show_6 = false
+          }
+          // 本月项目数量TOP10采购行业 7
+          if (res.data.project_buyerclass_count && res.data.project_buyerclass_count.length > 0) {
+            this.curMonthCountTop.list = this.formatterWinData(res.data.project_buyerclass_count, 'count')
+          } else {
+            this.isShow.show_7 = false
+          }
+          // 本月项目规模TOP10采购行业 8
+          if (res.data.project_buyerclass_bidamount && res.data.project_buyerclass_bidamount.length > 0) {
+            this.curMonthScaleTop.list = this.formatterWinData(res.data.project_buyerclass_bidamount, 'scale')
+          } else {
+            this.isShow.show_8 = false
+          }
+          // 本月项目平均规模TOP10采购行业 9
+          if (res.data.project_buyerclass_average_bidamount && res.data.project_buyerclass_average_bidamount.length > 0) {
+            var d = res.data.project_buyerclass_average_bidamount
+            this.averageScaleTop.list = this.formatterWinData(d, 'average')
+          } else {
+            this.isShow.show_9 = false
+          }
+          // 本月中标企业注册地分布 10
+          if (res.data.winner_area && Object.keys(res.data.winner_area).length > 0) {
+            this.mapRegionData.rows = this.formatterMapData(res.data.winner_area)
+          } else {
+            this.isShow.show_10 = false
+          }
+          // 本月中标企业注册资本分布  11
+          if (res.data.winner_capital && res.data.winner_capital.length > 0) {
+            this.regCapitalTop.list = this.formatterWinData(res.data.winner_capital, 'capital')
+          } else {
+            this.isShow.show_11 = false
+          }
+
+          // 本月中标企业中标项目数量分布 12
+          if (res.data.winner_project && res.data.winner_project.length > 0) {
+            var datas = this.formatterBarLine(res.data.winner_project, '4')
+            if (datas) {
+              this.curWinEntCountData.rows = datas
+            } else {
+              this.isShow.show_12 = false
+            }
+          } else {
+            this.isShow.show_12 = false
+          }
+
+          // 本月采购单位排行榜 13
+          if (res.data.buyer && res.data.buyer.length > 0) {
+            this.buyerTop.list = this.formatterWinData(res.data.buyer, 'count')
+          } else {
+            this.isShow.show_13 = false
+          }
+        }
+        this.winner = res.data.winner
+      })
+    },
+    // 处理地图图表数据（如果type传入的是money，需要进行单位换算，其他则不需要）
+    formatterMapData (data) {
+      var mapRows = []
+      for (var key in data) {
+        mapRows.push({
+          name: key,
+          value: data[key]
+        })
+      }
+      return mapRows
+    },
+    // 处理柱状图 + 折线图 图表数据
+    formatterBarLine (data, type) {
+      var that = this
+      var rows
+      var count = 0
+      switch (type) {
+        case '1':
+          rows = []
+          data.forEach(function (item, index) {
+            count += item.value
+            rows.push({
+              日期: that.formatterTime(item.key) + '月',
+              项目数量: item.value
+            })
+          })
+          break
+        case '2':
+          rows = []
+          data.forEach(function (item, index) {
+            console.log(item)
+            count += item.value
+            count += item.growthrate
+            if (item.growthrate === 0) {
+              item.growthrate = 0
+            } else {
+              item.growthrate = (item.growthrate).toFixed(2)
+            }
+            rows.push({
+              日期: that.formatterTime(item.key) + '月',
+              项目规模: Math.round(item.value),
+              '环比增长率(%)-右纵轴': item.growthrate
+            })
+          })
+          break
+        case '3':
+          rows = []
+          data.forEach(function (item, index) {
+            count += item.bidamount
+            count += item.growthrate
+            if (item.growthrate === 0) {
+              item.growthrate = 0
+            } else {
+              item.growthrate = (item.growthrate).toFixed(2)
+            }
+            rows.push({
+              项目类型: item.item,
+              项目规模: Math.round(item.bidamount),
+              '环比增长率(%)-右纵轴': item.growthrate
+            })
+          })
+          break
+        case '4':
+          console.log(data)
+          rows = []
+          data.forEach(function (item, index) {
+            count += item.entcount
+            count += item.proportion
+            rows.push({
+              项目数量: item.projectcount,
+              企业数量: item.entcount,
+              '累计占比(%)-右纵轴': (item.proportion).toFixed(2)
+            })
+          })
+          break
+      }
+      if (count !== 0) {
+        return rows
+      } else {
+        return null
+      }
+    },
+    // 处理时间戳
+    formatterTime (time) {
+      var date = new Date(parseInt(time) * 1000)
+      var month = date.getMonth() + 1
+      return month
+    },
+    // 获取数组对里的最大值
+    maxNumForArray (arr) {
+      // eslint-disable-next-line no-array-constructor
+      var sum = new Array()
+      for (var i = 0; i < arr.length; i++) {
+        sum.push(arr[i].count)
+      };
+      var max = sum.sort(function (a, b) {
+        return b - a
+      })
+      return max[0]
+    },
+    // 以下为配置项部分
+    mapCountConfig (options) {
+      options.graphic[0].children[0].style.text = '单位：个'
+      var arr = this.mapCountData.rows
+      var maxNum = Math.max.apply(Math, arr.map(function (o) { return o.value }))
+      options.visualMap.min = 1
+      options.visualMap.max = maxNum < 100 ? 100 : maxNum
+      options.graphic[options.graphic.length - 1].children[0].style.text = maxNum > 100 ? maxNum : 100
+      return options
+    },
+    mapScaleConfig (options) {
+      var arr = this.mapScaleData.rows
+      var maxNum = Math.max.apply(Math, arr.map(function (o) { return o.value }))
+      options.visualMap.min = 1
+      options.visualMap.max = maxNum < 100 ? 100 : maxNum
+      options.graphic[options.graphic.length - 1].children[0].style.text = maxNum > 100 ? maxNum : 100
+      return options
+    },
+    mapRegCountConfig (options) {
+      var arr = this.mapRegionData.rows
+      var maxNum = Math.max.apply(Math, arr.map(function (o) { return o.value }))
+      options.visualMap.min = 1
+      options.visualMap.max = maxNum < 100 ? 100 : maxNum
+      options.graphic[options.graphic.length - 1].children[0].style.text = maxNum > 100 ? maxNum : 100
+      return options
+    },
+    // 修改点击浮窗显示效果
+    formatter (params) {
+      var tip = ''
+      for (var i = 0; i < params.length; i++) {
+        // eslint-disable-next-line eqeqeq
+        // eslint-disable-next-line no-unused-expressions
+        params[i].value === undefined ? params[i].value = 0 : params[i].value
+        params[i].marker = '<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:' + params[i].color + '"></span>'
+        if (params[i].seriesName === '项目数量' || params[i].seriesName === '企业数量') {
+          tip = tip + params[i].marker + params[i].seriesName + '：' + params[i].value + '个' + '<br/>'
+        } else if (params[i].seriesName === '环比增长率(%)-右纵轴' || params[i].seriesName === '累计占比(%)-右纵轴') {
+          tip = tip + params[i].marker + params[i].seriesName + '：' + params[i].value + '%' + '<br/>'
+        } else {
+          tip = tip + params[i].marker + params[i].seriesName + '：' + params[i].value + '万元' + '<br/>'
+        }
+      }
+      tip += '<div style="padding-top:2px;text-align:center;color:#9B9CA3;">' + ' - ' + params[0].name + ' - ' + '</div>'
+      return tip
+    },
+    // 项目数量
+    barConfig1 (options) {
+      var that = this
+      console.log(options)
+      options.color = ['#0BD991']
+      options.legend.show = true
+      // options.grid.bottom = 60
+      // options.tooltip.axisPointer.shadowStyle.color = 'rgba(5,166,243,0.1)'
+      options.tooltip.formatter = function (params) {
+        return that.formatter(params)
+      }
+      return options
+    },
+    // 项目规模
+    barConfig2 (options) {
+      var that = this
+      // options.grid.left = 4
+      // options.grid.bottom = 60
+      options.color = ['#0BD991', '#FF9F40']
+      // options.tooltip.axisPointer.shadowStyle.color = 'rgba(5,166,243,0.1)'
+      options.legend.show = true
+      options.yAxis[1].axisLabel.show = true // 显示右侧y轴刻度
+      // options.series[1].lineStyle.width = 2 // 折线
+      // options.series[1].lineStyle.color = '#FF9F40'
+      options.yAxis[0].axisLabel.margin = 2
+      options.yAxis[0].axisLabel.formatter = function (value, index) {
+        return value.toString().replace(/,/, '')
+      }
+      // 以下代码为：处理左侧y轴与右侧y轴刻度保持在同一X轴水平线上
+      var maxCountList = that.pScaleData.rows.map(function (v) {
+        return v['项目规模']
+      })
+      var maxPriceList = that.pScaleData.rows.map(function (v) {
+        return v['环比增长率(%)-右纵轴']
+      })
+      var maxLeft = Math.ceil(Math.max.apply(null, maxCountList)).toString()
+      var maxRight = Math.ceil(Math.max.apply(null, maxPriceList)).toString()
+      var minRight = Math.ceil(Math.min.apply(null, maxPriceList)).toString()
+      maxLeft = Math.ceil(maxLeft / (Math.pow(10, maxLeft.length - 1))) * Math.pow(10, maxLeft.length - 1)
+      maxRight = Math.ceil(maxRight / (Math.pow(10, maxRight.length - 1))) * Math.pow(10, maxRight.length - 1)
+      if (minRight.indexOf('-') > -1) {
+        minRight = '-' + Math.ceil(minRight.replace('-', '') / (Math.pow(10, minRight.replace('-', '').length - 1))) * Math.pow(10, minRight.replace('-', '').length - 1)
+      } else {
+        minRight = 0
+      }
+      var item = options.yAxis
+      // eslint-disable-next-line eqeqeq
+      if (maxRight != minRight) {
+        item[0].min = 0
+        item[1].min = minRight
+        item[0].max = maxLeft
+        item[0].interval = Math.ceil(maxLeft / 5)
+        item[1].max = maxRight
+        item[1].interval = Math.ceil((maxRight - minRight) / 5)
+      } else {
+        options.yAxis[1].axisLabel.show = false
+      }
+      options.tooltip.formatter = function (params) {
+        return that.formatter(params)
+      }
+      return options
     }
   }
 }
@@ -202,6 +831,77 @@ export default {
         width: 100%;
         background: #ffffff;
       }
+      .chart{
+        height: auto;
+        margin-top: .16rem;
+        padding: 0 .32rem;
+        background-color: #fff;
+      }
+      .chart_title{
+          font-size: 18px;
+          color: #1d1d1d;
+          line-height: 28px;
+      }
+      .progress-bar-container {
+          background-color: #fff;
+          padding: 0 0 .32rem;
+      }
+
+      .progress-bar-item {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          /* height: 1.04rem; */
+          margin-top: 28px;
+      }
+
+      .progress-bar-item .item-label {
+          display: flex;
+          justify-content: space-between;
+      }
+
+      .progress-bar-item .item-label .item-name {
+          font-size: 13px;
+          line-height: 20px;
+          color: #5F5E64;
+          flex: 1;
+      }
+
+      .progress-bar-item .item-label .item-count {
+          font-size: 13px;
+          color: #171826;
+          line-height: 20px;
+      }
+
+      .progress-bar-item .item-progress {
+          position: relative;
+          height: 16px;
+          background-color: #EDEFF2;
+          border-radius: 0 28px 28px 0;
+          overflow: hidden;
+          margin-top: 14px;
+      }
+
+      .progress-bar-item .item-progress-count {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          border-radius: 0 28px 28px 0;
+      }
+      .yellow-progress{
+          background: linear-gradient(to right,#FAE7CA, #F1D090);
+      }
+      .blue-progress{
+          background: linear-gradient(to right,#8DE0EB, #2ABED1);
+      }
+      .more{
+          padding: 20px 0 36px;
+          text-align: center;
+          color: #2ABED1;
+          font-size: 14px;
+          line-height: 20px;
+      }
     }
   }
 </style>

src/views/reportData/pageWeek.vue

@@ -5,12 +5,12 @@
       <div class="week_time">
         <SelectMonth @selectYm="getSelectTime"></SelectMonth>
         <div class="select_report">
-          <div class="week_report" v-for="(item, index) in weekList" :key="index" @click="selectWeek(index)" :class="{weekActive:index==isWeekIndex}">
+          <div class="week_report" v-for="(item, index) in weekList" :key="index" @click="selectWeek(index, item.startdate, item.enddate)" :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">{{item.startdate}}-{{item.enddate}}</span>
+                  <span class="week_days">{{dateFormatter(item.startdate * 1000, 'MM月dd日')}}-{{dateFormatter(item.enddate * 1000, 'MM月dd日')}}</span>
                   <span class="red_point" v-show="item.unread == 0"></span>
                 </div>
                 <div class="repot_gettime">{{item.pushtime}}</div>
@@ -31,7 +31,7 @@
         <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 class="data_r_week">（{{dateFormatter(start * 1000, 'MM月dd日')}}-{{dateFormatter(end * 1000, 'MM月dd日')}}）</div>
           </div>
           <div class="data_keys">
             <span class="keys_label">订阅关键词组：</span>
@@ -85,6 +85,8 @@ export default {
   data () {
     return {
       isWeekIndex: 0,
+      start: 0,
+      end: 0,
       nextweek_bidopen: [
         {
           area: '湖北',
@@ -146,20 +148,7 @@ export default {
           projectname: '中国科学院沈阳自动化研究所实时增量大数据处理分析引擎软件采购项目'
         }
       ],
-      project_amount: [
-        {
-          budget: 5870080000,
-          buyer: '青岛市市政建设发展有限公司',
-          projectname: '康复大学项目室外配套工程(不含景观绿化等)施工图设计',
-          winner: '中国市政工程华北设计研究总院有限公司,天津市市政工程设计研究院'
-        },
-        {
-          bidamount: 1371059000,
-          buyer: '西安市儿童医院',
-          projectname: '西安市儿童医院经开院区项目工程总承包(EPC)',
-          winner: '中建八局第二建设有限公司'
-        }
-      ],
+      project_amount: [],
       weekList: []
     }
   },
@@ -168,17 +157,13 @@ export default {
     this.getReportList(nowtime)
   },
   methods: {
-    // 选择周报
-    selectWeek (data) {
-      this.isWeekIndex = data
-    },
+    dateFormatter,
+    // 周报列表
     getReportList (time) {
       getReportIndex({ ym: time }).then((res) => {
         console.log(res)
         if (res.data && res.data.list && res.data.list.length !== 0) {
           res.data.list.forEach(function (item) {
-            item.enddate = dateFormatter(item.enddate * 1000, 'MM月dd日')
-            item.startdate = dateFormatter(item.startdate * 1000, 'MM月dd日')
             if (item.pushtime) {
               item.pushtime = dateFormatter(item.pushtime * 1000, 'yyyy/MM/dd')
             } else {
@@ -186,14 +171,35 @@ export default {
             }
           })
           this.weekList = res.data.list
+          this.getDetail(res.data.list[0].startdate, res.data.list[0].enddate)
+          this.start = res.data.list[0].startdate
+          this.end = res.data.list[0].enddate
         } else {
           this.weekList = []
         }
       })
     },
+    // 选择月份
     getSelectTime (data) {
       console.log(data)
       this.getReportList(data)
+    },
+    // 选择周报
+    selectWeek (index, start, end) {
+      this.isWeekIndex = index
+      this.start = start
+      this.end = end
+      this.getDetail(start, end)
+    },
+    // 周报详情
+    getDetail (start, end) {
+      getReportDetail({ start: start, end: end }).then(res => {
+        console.log(res)
+        this.project_amount = res.data.project_amount
+        this.nextweek_bidopen = res.data.nextweek_bidopen
+        this.follow_ent = res.data.follow_ent
+        this.follow_project = res.data.follow_project
+      })
     }
   }
 }