web/src/views/reportData/pageWeek.vue

<template>
  <Layout class="page_week">
    <div class="page_week_main">
      <!-- 选择周报时间 -->
      <div class="week_time">
        <SelectMonth v-if="!nonereport" ref="selectMonth" :from="from" :isp="ISP" @noReport="noReport" :queryDate="getQueryTime" @selectYm="getSelectTime"></SelectMonth>
        <div class="select_report">
          <div class="week_report" v-for="(item, index) in weekList" :key="index" @click="selectWeek(index, item)" :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">{{dateFormatter(item.startdate * 1000, 'MM月dd日')}}-{{dateFormatter(item.enddate * 1000, 'MM月dd日')}}</span>
                  <span class="red_point" v-if="item.unread === 1" ref="weekitempoint"></span>
                </div>
                <div class="repot_gettime">{{item.pushtime}}</div>
              </div>
              <div class="report_bot">
                <span class="push_text">推送数据条数</span>
                <div class="push_report">
                  <span class="push_num">{{item.pushcount}}</span>
                  <span class="el-icon-arrow-right"></span>
                </div>
              </div>
            </div>
          </div>
          <bmEmpty v-if="nonereport" functype="week" tip="本周结束后，将为您推送周报，敬请期待~"></bmEmpty>
          <Empty tip="暂无数据" v-if="!nodata && !nonereport"></Empty>
        </div>
      </div>
      <!-- 数据报告-周报 -->
      <div class="dataReport" v-if="nodata && !nonereport">
        <div class="dataReport_main">
          <div class="data_r_head">
            <div class="data_r_title">数据报告-周报</div>
            <div class="data_r_week">（{{dateFormatter(start * 1000, 'MM月dd日')}}-{{dateFormatter(end * 1000, 'MM月dd日')}}）</div>
          </div>
          <div class="data_keys"  v-if="!ISP">
            <span class="keys_label">订阅关键词组：</span>
            <span class="list_key">{{keywordsGroup}}</span>
          </div>
          <div class="data_line"></div>
          <div class="data_item">
            <p class="item_handle">数据来源：<span v-if="ISP">基于您订阅的项目；</span><span v-else>基于您当前订阅条件所关联的招投标公告数据；</span></p>
            <p class="item_handle">项目预算/项目规模：少量预算金额、中标金额未公开或为空的项目，在计算项目总预算、总规模时不参与统计；</p>
            <p class="item_handle"  v-if="ISP">项目重复统计：一个招标项目可能同属于多个业务条线，故各业务条线的数据统计之和可能大于整体市场的统计。</p>
            <p class="item_handle"  v-else>项目重复统计：一个招标项目可能同属于多个关键词组，故各关键词组的数据统计之和可能大于整体市场的统计。</p>
          </div>
        </div>
      </div>
      <el-tabs class="tabs sticky-tab-container" v-model="tabActiveName" v-if="nodata" :before-leave="beforeTabLeave">
        <el-tab-pane label="本周分析" name="1">
          <div class="echartsView" v-if="tabActiveName === '1'">
            <!-- 本周新增招标项目数量 -->
            <div class="newAdd_bid" v-if="newDrawCount.show">
              <div class="chart-title">本周新增招标项目数量</div>
              <DuoToneChart :datas="newDrawCount.data"></DuoToneChart>
            </div>
            <!-- 本周新增招标项目预算 -->
            <div class="newAdd_bidBudget" v-if="newBudget.show">
              <div class="chart-title">本周新增招标项目预算</div>
              <BarLineChart :datas="newBudget.data" :options="newBudget.options"></BarLineChart>
            </div>
            <!-- 本周新增开标项目数量 -->
            <div class="newAdd_bidOpen" v-if="newOpenCount.show">
              <div class="chart-title">本周新增开标项目数量</div>
              <DuoToneChart :datas="newOpenCount.data"></DuoToneChart>
            </div>
            <!-- 本周新增招标项目规模 -->
            <div class="newAdd_scale" v-if="newScale.show">
              <div class="chart-title">本周新增开标项目规模</div>
              <BarLineChart :datas="newScale.data" :options="newScale.options"></BarLineChart>
            </div>
            <!-- 项目金额排行榜/本周项目规模排行榜TOP30(同一个东西，名字在p350改了，老报告展示老名字，新报告展示新名字) -->
            <template v-if="projectAmount.show">
              <ProjectTopTable v-if="useNewVersionReport" title="本周项目规模排行榜TOP30" :isp="ISP" :data="projectAmount.list" type='amount'></ProjectTopTable>
              <ProjectTop v-else title="项目金额排行榜" :data="projectAmount.list" type='amount'></ProjectTop>
            </template>

            <!-- 下周开标提醒 -->
            <div v-if="priority.nextweek_bidopen.length > 0">
              <CompanyDetail :linkable="useNewVersionReport" title="下周开标提醒" :isp="ISP" :datas="priority" type="bidopen"></CompanyDetail>
            </div>
            <!-- 重点关注项目 -->
            <div v-if="priority.follow_project.length > 0">
              <CompanyDetail :isp="ISP" :linkable="useNewVersionReport" title="重点关注项目" :datas="priority" type="project"></CompanyDetail>
            </div>
            <!-- 重点关注企业/已监控企业本周项目动态(同一个东西，名字在p350改了，老报告展示老名字，新报告展示新名字) -->
            <div v-if="priority.follow_ent.length > 0" >
              <ProjectTopTable class="follow-ent-module" v-if="useNewVersionReport" title="已监控企业本周项目动态" :isp="ISP" :data="priority.follow_ent" type="followEnt"></ProjectTopTable>
              <CompanyDetail v-else  :isp="ISP" :linkable="useNewVersionReport" title="重点关注企业" :datas="priority" type="ent"></CompanyDetail>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane lazy label="本周项目明细" name="2" v-if="useNewVersionReport">
          <ProjectDetailsList
            :key="detailListKey"
            :start="start - 0"
            :end="end - 0"
            reportType="week"
            :isp="ISP"
            :from="from"
            :subscribeClassList="projectDetailFilters.keywordsGroupList"
            :subscribeAreaMap="projectDetailFilters.subscribeAreaMap"
            :subscribeBuyerClass="projectDetailFilters.subscribeBuyerClass"
            :industryOptions="projectDetailFilters.industryMap"
            :showIndustry="showIndustry"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="page_week_artical"></div>
  </Layout>
</template>

<script>
import { Tabs, TabPane } from 'element-ui'
import SelectMonth from '@/components/report-data/SelectMonth.vue'
import Layout from '@/components/common/ContentLayout'
import CompanyDetail from '@/components/report-data/CompanyDetail.vue'
import ProjectTop from '@/components/report-data/ProjectTop.vue'
import ProjectTopTable from '@/components/report-data/ProjectTopTable.vue'
import { getReportDetail, getReportIndex } from '@/api/modules'
import { dateFormatter } from '@/utils/globalFunctions'
import DuoToneChart from '@/components/chart/DuoToneChart'
import BarLineChart from '@/components/chart/BarLineChart'
import bmEmpty from '@/components/common/BigMemberEmpty'
import Empty from '@/components/common/Empty'
import ProjectDetailsList from '@/views/reportData/components/ProjectDetailsList.vue'
import { tabsSticky } from '@/utils/mixins/el-tabs-sticky'

export default {
  name: 'page_week',
  mixins: [tabsSticky],
  components: {
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
    SelectMonth,
    CompanyDetail,
    ProjectTopTable,
    ProjectTop,
    DuoToneChart,
    BarLineChart,
    bmEmpty,
    Empty,
    ProjectDetailsList,
    Layout
  },
  data () {
    return {
      // 是否历史周报(历史周报部分功能使用旧的)
      useNewVersionReport: true,
      canQuery: true,
      tabActiveName: '1',
      isWeekIndex: 0,
      start: 0,
      end: 0,
      keywordsGroup: '',
      weekList: [],
      nodata: false, // ，没有周报列表显示空组件
      nonereport: false, // ，没有周报列表显示空组件
      // 本周新增招标项目数量
      newDrawCount: {
        show: false,
        data: []
      },
      // 本周新增招标项目预算
      newBudget: {
        show: false,
        data: {
          columns: ['日期', '项目总预算', '环比增长率(%)-右纵轴'],
          rows: []
        },
        options: {
          height: '300px',
          colors: ['#0BD991', '#FF9F40'],
          settings: {
            showLine: ['环比增长率(%)-右纵轴'],
            axisSite: { right: ['环比增长率(%)-右纵轴'] }
          },
          config: this.newBudgetConfig
        }
      },
      // 新增开标项目数量
      newOpenCount: {
        show: false,
        data: []
      },
      // 本周新增招标项目规模
      newScale: {
        show: false,
        data: {
          columns: ['日期', '项目总规模', '环比增长率(%)-右纵轴'],
          rows: []
        },
        options: {
          height: '320px',
          colors: ['#05A6F3', '#FF9F40'],
          settings: {
            showLine: ['环比增长率(%)-右纵轴'],
            axisSite: { right: ['环比增长率(%)-右纵轴'] }
          },
          config: this.newScaleConfig
        }
      },
      // 项目金额排行榜
      projectAmount: {
        show: false,
        list: []
      },
      // 开标提醒、重点关注项目、重点关注企业
      priority: {
        nextweek_bidopen: [],
        follow_ent: [],
        follow_project: []
      },
      scrollTopInfo: {
        stickyTop: 0,
        1: 0, // tabName===1
        2: 0 // tabName===2
      },
      projectDetailFilters: {
        keywordsGroupList: [],
        subscribeAreaMap: {},
        subscribeBuyerClass: [],
        industryMap: {}
      },
      from: '',
      showIndustry: true
    }
  },
  watch: {
    nodata () {
      this.$nextTick(() => {
        this.calcStickyTop()
      })
    }
  },
  created () {
    // from=yyszsyy 运营商专属服务携带参数
    this.from = this.$route.query.from || ''
  },
  mounted () {
    const nowtime = dateFormatter(new Date(), 'yyyyMM')
    let time = nowtime
    if (this.getQueryTime) {
      time = this.getQueryTime.ym
    }
    this.getReportList(time)
    if (this.$refs.weekitempoint && this.$refs.weekitempoint.length > 0) {
      this.$refs.weekitempoint[0].style.display = 'none'
    }
    this.calcStickyTop()
  },
  computed: {
    detailListKey () {
      return `${this.start}_${this.end}`
    },
    getQueryTime () {
      const paramsDate = this.$route.query.end
      if (paramsDate) {
        const paramsData = {
          year: dateFormatter(paramsDate * 1000, 'yyyy'),
          month: Number(dateFormatter(paramsDate * 1000, 'MM')).toString(),
          ym: dateFormatter(paramsDate * 1000, 'yyyyMM'),
          start: this.$route.query.start,
          end: this.$route.query.end
        }
        return paramsData
      }
      return false
    },
    // 运营商专属
    ISP () {
      return this.$route.query?.from === 'yyszsyy'
    }
  },
  methods: {
    dateFormatter,
    // 没有一条数据显示bmEmpty空状态组件
    noReport () {
      this.nonereport = true
    },
    // 周报列表
    getReportList (time) {
      getReportIndex({ ym: time, from: this.from }).then((res) => {
        if (res.data && res.data.list && res.data.list.length !== 0) {
          res.data.list.forEach(function (item, i) {
            if (item.pushtime) {
              item.pushtime = dateFormatter(item.pushtime * 1000, 'yyyy/MM/dd')
            } else {
              item.pushtime = ''
            }
            // 获取现在的时间戳，如果周报的时间大于现在的时间不显示本周周报
            const nowtime = new Date().getTime() / 1000
            if (item.enddate > nowtime) {
              res.data.list = res.data.list.slice(0, i).concat(res.data.list.slice(i + 1, res.data.list.length))
            }
          })
          this.weekList = res.data.list
          const queryData = {
            start: res.data.list[0].startdate,
            end: res.data.list[0].enddate
          }
          this.isWeekIndex = 0
          if (this.canQuery && this.getQueryTime) {
            if (this.getQueryTime.ym === time) {
              queryData.start = this.getQueryTime.start
              queryData.end = this.getQueryTime.end
              this.weekList.forEach((v, index) => {
                if (String(v.enddate) === queryData.end) {
                  this.isWeekIndex = index
                }
              })
            }
            this.canQuery = false
          }
          this.getDetail(queryData.start, queryData.end)
          this.start = queryData.start
          this.end = queryData.end
          this.nodata = true
        } else {
          this.weekList = []
          this.nodata = false
        }
      })
    },
    // 选择月份
    getSelectTime (data) {
      console.log(data)
      this.getReportList(data)
    },
    // 选择周报
    selectWeek (index, item) {
      item.unread = 0
      if (this.$refs.weekitempoint && this.$refs.weekitempoint.length > 0) {
        // this.$refs.weekitempoint[index].style.display = 'none'
      }
      this.isWeekIndex = index
      this.clickindex = index
      this.start = item.startdate
      this.end = item.enddate
      this.getDetail(item.startdate, item.enddate)
    },
    // 周报详情
    getDetail (start, end) {
      getReportDetail({ start: start, end: end, from: this.from }).then(res => {
        if (res.error_code === 0) {
          if (res.data) {
            this.useNewVersionReport = res.data.isNewData
          }
          // 订阅关键词组
          if (res.data && res.data.item && Array.isArray(res.data.item) && res.data.item.length > 0) {
            this.projectDetailFilters.keywordsGroupList = this.createKeywordGroupList(res.data.item)
            this.keywordsGroup = res.data.item.join('、')
          } else {
            this.projectDetailFilters.keywordsGroupList = []
            this.keywordsGroup = '--'
          }
          if (res.data && res.data.area) {
            this.projectDetailFilters.subscribeAreaMap = res.data.area
          } else {
            this.projectDetailFilters.subscribeAreaMap = {}
          }
          if (res.data && res.data.buyerClass) {
            this.projectDetailFilters.subscribeBuyerClass = res.data.buyerClass
          } else {
            this.projectDetailFilters.subscribeBuyerClass = []
          }
          if (res.data && res.data.industry) {
            if (this.ISP) {
              this.showIndustry = Object.keys(res.data.industry).length > 0
            }
            this.projectDetailFilters.industryMap = res.data.industry
          } else {
            this.showIndustry = !this.ISP
          }
          // 本周新增招标项目数量
          if (res.data.zhao_matchitem && res.data.zhao_matchitem.length > 0) {
            this.newDrawCount.show = true
            this.newDrawCount.data = this.formatProgressData(res.data.zhao_matchitem)
          } else {
            this.newDrawCount.show = false
          }
          // 本周新增招标项目预算
          if (res.data.budget && res.data.budget.length > 0) {
            this.newBudget.show = true
            this.formatNewBudget(res.data.budget)
          } else {
            this.newBudget.show = false
          }
          // 本周新增开标项目数量
          if (res.data.zhong_matchitem && res.data.zhong_matchitem.length > 0) {
            this.newOpenCount.show = true
            this.newOpenCount.data = this.formatProgressData(res.data.zhong_matchitem)
          } else {
            this.newOpenCount.show = false
          }
          // 本周新增招标项目规模
          if (res.data.bidamount && res.data.bidamount.length > 0) {
            this.newScale.show = true
            this.formatNewScaleData(res.data.bidamount)
          } else {
            this.newScale.show = false
          }
          // 项目金额排行榜
          if (res.data.project_amount && res.data.project_amount.length > 0) {
            if (!this.useNewVersionReport) {
              res.data.project_amount.forEach((item) => {
                // 万元转换成亿
                item.budget = item.budget ? (item.budget / 10000).fixed(2) : 0
                item.bidamount = item.bidamount ? (item.bidamount / 10000).fixed(2) : 0
              })
            }
            this.projectAmount.list = res.data.project_amount
            this.projectAmount.show = true
          } else {
            this.projectAmount.show = false
          }
          // 下周开标提醒
          if (res.data.nextweek_bidopen && res.data.nextweek_bidopen.length > 0) {
            this.priority.nextweek_bidopen = res.data.nextweek_bidopen
          } else {
            this.priority.nextweek_bidopen = []
          }
          // 重点关注企业
          if (res.data.follow_ent && res.data.follow_ent.length > 0) {
            this.priority.follow_ent = res.data.follow_ent
          } else {
            this.priority.follow_ent = []
          }
          // 重点关注项目
          if (res.data.follow_project && res.data.follow_project.length > 0) {
            this.priority.follow_project = res.data.follow_project
          } else {
            this.priority.follow_project = []
          }
        }
      })
    },
    createKeywordGroupList (arr) {
      let groupList = []
      if (!Array.isArray(arr)) return groupList
      groupList = arr.map(item => {
        return {
          s_item: item,
          a_key: []
        }
      })
      return groupList
    },
    scrollToTab () {
      const { stickyTop } = this.scrollTopInfo
      setTimeout(() => {
        window.scrollTo(0, stickyTop)
      }, 10)
    },
    calcStickyTop () {
      const tabs = this.$el.querySelector('.tabs.sticky-tab-container')
      if (tabs) {
        this.scrollTopInfo.stickyTop = tabs.offsetTop - 64
      }
    },
    recoverScrollTop (targetActiveName) {
      const { stickyTop } = this.scrollTopInfo
      if (stickyTop <= 0) return
      setTimeout(() => {
        const scrollTop = this.scrollTopInfo[targetActiveName]
        if (scrollTop < stickyTop) {
          window.scrollTo(0, stickyTop)
        } else {
          window.scrollTo(0, scrollTop)
        }
      }, 10)
    },
    recordScrollTop (tab) {
      const scrolled = $(window).scrollTop()
      this.scrollTopInfo[tab] = scrolled
    },
    beforeTabLeave (targetActiveName) {
      this.recordScrollTop(this.tabActiveName)
      if (targetActiveName === '1') {
        // 恢复到默认位置
        this.recoverScrollTop(targetActiveName)
      } else if (targetActiveName === '2') {
        // 滚动到顶部
        this.scrollToTab()
      }
      return true
    },
    /* 数据处理 */
    // 处理进度条数据
    formatProgressData (data) {
      if (!data) return
      data.forEach((v, i) => {
        v.name = v.item
        v.value = v.count + '个'
        v.parent = v.count / data[0].count * 100 + '%'
      })
      return data
    },
    // 处理本周新增招标项目预算
    formatNewBudget (data) {
      if (!data) return
      const budgetRows = []
      let count = 0
      data.forEach((item, index) => {
        count += item.budget
        count += item.growthrate
        budgetRows.push({
          /* eslint-disable */
          '日期': item.item,
          '项目总预算': Math.round(item.budget),
          '环比增长率(%)-右纵轴': item.growthrate.fixed(2)
          /* eslint-enable */
        })
      })
      if (count !== 0) {
        this.newBudget.show = true
        this.newBudget.data.rows = budgetRows
      } else {
        this.newBudget.show = false
      }
    },
    // 处理本周新增招标项目规模数据
    formatNewScaleData (data) {
      if (!data) return
      const rows = []
      let count = 0
      data.forEach((item, index) => {
        count += item.bidamount
        count += item.growthrate
        rows.push({
          /* eslint-disable */
          '日期': item.item,
          '项目总规模': Math.round(item.bidamount),
          '环比增长率(%)-右纵轴': item.growthrate.fixed(2)
          /* eslint-enable */
        })
      })
      if (count !== 0) {
        this.newScale.show = true
        this.newScale.data.rows = rows
      } else {
        this.newScale.show = false
      }
    },
    /* 配置处理 */
    newBudgetConfig (options) {
      options.tooltip.axisPointer.shadowStyle.color = 'rgba(5,166,243,0.1)'
      options.yAxis[1].axisLabel.show = true
      const maxCountList = this.newBudget.data.rows.map((v) => {
        return v['项目总预算']
      })
      const maxPriceList = this.newBudget.data.rows.map((v) => {
        return v['环比增长率(%)-右纵轴']
      })
      let maxCount = Math.ceil(Math.max.apply(null, maxCountList)).toString()
      let maxPrice = Math.ceil(Math.max.apply(null, maxPriceList)).toString()
      let 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
      }
      const item = options.yAxis
      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)
      options.tooltip.formatter = (params) => {
        return this.commonTooltip(params)
      }
      return options
    },
    // 本周新增招标项目规模数据配置
    newScaleConfig (options) {
      options.tooltip.axisPointer.shadowStyle.color = 'rgba(5,166,243,0.1)'
      options.yAxis[1].axisLabel.show = true
      const maxCountList = this.newScale.data.rows.map((v) => {
        return v['项目总规模']
      })
      const maxPriceList = this.newScale.data.rows.map((v) => {
        return v['环比增长率(%)-右纵轴']
      })
      let maxCount = Math.ceil(Math.max.apply(null, maxCountList)).toString()
      let maxPrice = Math.ceil(Math.max.apply(null, maxPriceList)).toString()
      let 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
      }
      const item = options.yAxis
      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)
      options.tooltip.formatter = (params) => {
        let tip = ''
        for (let i = 0; i < params.length; i++) {
          if (params[i].value === undefined) {
            params[i].value = 0
          }
          if (i === 0) {
            tip = tip + params[i].marker + params[i].seriesName + '：' + params[i].value + '万元' + '<br/>'
          } else if (i === 1) {
            tip = tip + params[i].marker + params[i].seriesName + '：' + params[i].value + '%' + '<br/>'
          }
        }
        tip += '<div style="padding-top:2px;text-align:center;color:#9B9CA3;">' + ' - ' + params[0].name + ' - ' + '</div>'
        return tip
      }
      return options
    },
    commonTooltip (params) {
      let tip = ''
      for (let i = 0; i < params.length; i++) {
        if (params[i].value === undefined) {
          params[i].value = 0
        }
        if (i === 0) {
          tip = tip + params[i].marker + params[i].seriesName + '：' + params[i].value + '万元' + '<br/>'
        } else if (i === 1) {
          tip = tip + params[i].marker + params[i].seriesName + '：' + params[i].value + '%' + '<br/>'
        }
      }
      tip += '<div style="padding-top:2px;text-align:center;color:#9B9CA3;">' + ' - ' + params[0].name + ' - ' + '</div>'
      return tip
    }
  }
}
</script>

<style lang="scss" scoped>
  .page_week{
    margin: 32px auto;
    display: flex;
    justify-content: space-between;
    .chart-title{
      padding: 32px 0 16px;
      font-size: 18px;
      color: #1d1d1d;
      line-height: 28px;
      font-family: 'Microsoft YaHei, Microsoft YaHei-Regular';
    }
    .page_week_main{
      .week_time{
        padding-bottom: 24px;
        // width: 920px;
        // min-height: 349px;
        opacity: 1;
        background: #ffffff;
        border-radius: 4px;
        .setHeight{
          height: 72px;
          overflow: hidden;
        }
        .select_report{
          padding: 0 40px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-content: space-between;
          flex-wrap: wrap;
          .week_report{
            margin:0 0 16px 0;
            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;
                  }
                  .red_point{
                    display: flex;
                    margin-left: 4px;
                    width: 8px;
                    height: 8px;
                    background: #fb483d;
                    border-radius: 50%;
                  }
                }
                .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;
            min-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;
      }
    }
  }

  .follow-ent-module {
    padding-top: 0;
  }

  .tabs {
    margin-top: 24px;
    background-color: #fff;
    ::v-deep {
      .el-tabs__content {
        overflow: unset;
      }
      .fixed-nav {
        width: 920px;
        top: 53px;
        box-shadow: inset 0 -1px 0 0 rgb(0, 0, 0, 0.05);
      }
      .el-tabs__header {
        margin: 0;
        padding: 0 40px;
        border-bottom: 1px solid #ECECEC;
        background-color: #fff;
      }
      .el-tabs__item {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        color: #686868;
        &.is-active,
        &:hover {
          color: #2CB7CA;
        }
      }
      .el-tabs__nav-wrap {
        &::after {
          content: unset;
        }
      }
    }
  }
</style>