adweb3-web/src/views/adweb/data/enquiryAnalysis.vue

<template>
  <div class="wrap home">
    <!-- 站点选择和时间筛选 -->
    <a-row class="r1" :gutter="8">
      <a-col :xl="7" :xxl="6" v-if="siteList.length > 1">
        <div class="choose-site">
          <span class="t1">站点：</span>
          <select-site @comMethods="changeSite" />
<!--          <a-select v-model="queryParam.siteId"-->
<!--                    show-search-->
<!--                    :filter-option="filterOption"-->
<!--                    placeholder="全部站点"-->
<!--                    style="width: 70%"-->
<!--                    @change="reloadData">-->
<!--            <a-select-option v-for="data in siteList" :key="data.id" :value="data.id">-->
<!--              {{ data.name }}-->
<!--            </a-select-option>-->
<!--          </a-select>-->
        </div>
      </a-col>
      <a-col :xl="8" :xxl="6">
        <div class="choose-site">
          <span class="t1">统计时间：</span>
          <a-range-picker @change="onChangeDatePciker" :disabledDate="disabledDate" :value="rangeDate" style="width:70%"/>
        </div>
      </a-col>
      <a-col :xl="9" :xxl="12">
        <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间</a-button>
        <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''" @click="setTime('thirtyDay')">近30天</a-button>
        <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''" @click="setTime('sevenDay')">近一周</a-button>
        <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''" @click="setTime('yesterday')">昨日</a-button>
        <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')">今日</a-button>
      </a-col>
    </a-row>

    <!-- 占位 -->
    <div style="height: 20px;"></div>

    <a-spin :spinning="loading" tips="加载中...">
      <a-row class="r2">
        <a-col :span="8">
          <p class="t1"><img src="@/assets/V2-7/enquiryNum.svg"/>询盘数</p>
          <router-link :to="{ path: '/inquiry/list', query: {dateType: this.queryParam.dateType, start: this.queryParam.start, end: this.queryParam.end ,offset: 1} }">
            <p class="t2">{{ enquiryIndexNumber.enquiry }}</p>
          </router-link>
        </a-col>
        <a-col :span="8">
          <p class="t1"><img src="@/assets/V2-7/unReadEnquiryNum.svg"/>未读询盘数</p>
          <router-link :to="{ path: '/inquiry/list', query: {dateType: this.queryParam.dateType, start: this.queryParam.start, end: this.queryParam.end, readStatus: '0' , offset: 1} }">
            <p class="t2">{{ enquiryIndexNumber.unRead }}</p>
          </router-link>
        </a-col>
        <a-col :span="8">
          <p class="t1"><img src="@/assets/V2-7/conversionRate.svg"/>UV到询盘的转化率</p>
          <p class="t3">{{ enquiryIndexNumber.conversionRate }}</p>
        </a-col>
      </a-row>

      <a-row class="r3">
        <a-col><p class="title">询盘趋势图</p></a-col>
      </a-row>
      <a-row class="r5" :gutter="[20,20]">
        <a-row class="r5-1">
          <a-col :span="24">
            <div class="fr" v-if="coreDataChart.x.length > 0">
              <span><i style="background: #544BEB;"></i>UV</span>
              <span><i style="background: #58CCA8;"></i>询盘数</span>
            </div>
            <area-chart v-if="coreDataChart.x.length > 0" :dataSource="coreDataChart"></area-chart>
            <a-empty v-else style="float: right;width: 100%;margin-top: 110px;"></a-empty>
          </a-col>
        </a-row>
      </a-row>

      <a-row class="r3">
        <a-col><p class="title">询盘地域分布</p></a-col>
      </a-row>
      <a-row class="r5" :gutter="[20,20]">
        <a-col :span="12">
          <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData" :aliases="[{dataKey:'country',alias:'国家'},{dataKey:'num',alias:'访问数量'}]"
                     :height="chartheight"></map-adweb>
          <a-empty v-else style="margin-top: 50px;">
            <span slot="description">暂无数据</span>
          </a-empty>
        </a-col>
        <a-col :span="2">
        </a-col>
        <a-col :span="10">
          <a-table
            style="margin-top: 40px; margin-bottom: 40px;"
            :rowKey="(record,index)=>{return index}"
            class="chartTable"
            :scroll="{ y: 400 }"
            :pagination=false
            :columns="chartDetailDataCol"
            :customRow="clickRow"
            :data-source="chartDetailData"
            :showHeader="false">
            <template slot="flagSlot" slot-scope="text,record">
            <span class="img-box">
              <img src="../../../assets/flag_placeholder.png" :class="'flag flag-' + record.countryCode" alt="Czech Republic"/>
            </span>
            </template>
            <template slot="numSlot" slot-scope="text,record">
              {{ record.num }} | {{ record.proportion }}
            </template>
            <template slot="countryNameSlot" slot-scope="text,record">
              <a> {{ text === null ? record.country : text }}</a>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import enquiryTrack from '@views/adweb/enquiry/modules/enquiryTrack'
import enquiryGenzong from '@views/adweb/enquiry/modules/enquiryGenzong'
import enquiryDetail from '@views/adweb/enquiry/modules/enquiryDetail'
import XpRecycleBinModal from '../../system/modules/XpRecycleBinModal'
import blackList from '@views/adweb/enquiry/modules/blackList'
import moment from 'moment'
import dashChart from './chart/DashChartDemo'
import areaChart from './chart/areaChart'
import MapAdweb from '@/components/chart/mapAdweb'
import selectSite from '@/components/adweb/selectSite'

export default {
  name: 'EnquiryAnalysis',
  mixins: [JeecgListMixin],
  components: {
    enquiryTrack,
    enquiryGenzong,
    XpRecycleBinModal,
    enquiryDetail,
    blackList,
    areaChart,
    dashChart,
    MapAdweb,
    selectSite
  },
  data() {
    return {
      // 通用
      ipagination: {
        current: 1,
        pageSize: 30,
        pageSizeOptions: ['15', '30', '45', '60'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      disableMixinCreated: true,
      loading: true,
      // 筛选
      siteList: [],
      rangeDate: undefined,
      // uv、pv、询盘数
      enquiryIndexNumber: {
        unRead: 0,
        conversionRate: "0%",
        enquiry: 0
      },
      // 数据趋势的数据
      coreDataChart: {
        x: [],
        uv: [],
        pv: [],
        enquiry: []
      },
      // 访客数据地图分布
      chartheight: 400,
      countryMapData: [],
      // 访客地域分布列表
      chartDetailData: [],
      chartDetailDataCol: [
        {
          title: "国旗",
          align: "center",
          width: 30,
          scopedSlots: {customRender: 'flagSlot'}
        },
        {
          title: "国家",
          align: "left",
          dataIndex: 'countryName',
          scopedSlots: {customRender: 'countryNameSlot'}
        },
        {
          title: "数量",
          align: "right",
          dataIndex: 'num',
          scopedSlots: {customRender: 'numSlot'}
        },
      ]
    }
  },
  mounted() {
    this.queryParam.dateType = 'sevenDay';
    this.rangeDate = [moment().subtract(7, "days"), moment().subtract(1, "days")];
    this.getSiteList();
  },
  methods: {
    // ========================================== 筛选 ==========================================
    //获取站点列表
    getSiteList() {
      let that = this
      getAction('/sys/api/getSiteListByUid').then(function (res) {
        if (res.code == 0) {
          if (res.data || res.data.length) {
            let defaultSiteCode = localStorage.getItem('siteCode');
            if (defaultSiteCode) {
              let isInSite = false
              for (let i in res.data) {
                if (defaultSiteCode === res.data[i].code) {
                  isInSite = true;
                  that.queryParam.siteId = res.data[i].id;
                  break;
                }
              }
              if (!isInSite) {
                that.queryParam.siteId = res.data[0].id;
                localStorage.setItem('siteCode', res.data[0].code);
              }
            } else {
              that.queryParam.siteId = res.data[0].id;
              localStorage.setItem('siteCode', res.data[0].code);
            }
            that.siteList = res.data;
            that.reloadData()
          }
        } else {
          that.$message.error('获取站点失败！')
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    // 搜索
    filterOption(inputValue, option) {
      return option.componentOptions.children[0].text.indexOf(inputValue) >= 0
    },
    //搜索条件部分的逻辑
    onChangeDatePciker(date, dateString) {
      if (dateString.length > 0) {
        this.rangeDate = date
        this.queryParam.start = dateString[0]
        this.queryParam.end = dateString[1]
        this.queryParam.dateType = undefined
        this.reloadData();
      }
    },
    //日期选择只能今天之前
    disabledDate(current) {
      return current && current > moment().subtract(0, "days");
    },
    //设置列表的时间查询条件
    setTime(time) {
      this.queryParam.dateType = time
      this.queryParam.start = ''
      this.queryParam.end = ''
      if (time == '') {
        this.rangeDate = undefined
      } else if (time == 'sevenDay') {
        this.rangeDate = [moment().subtract(7, "days"), moment().subtract(1, "days")]
      } else if (time == 'thirtyDay') {
        this.rangeDate = [moment().subtract(30, "days"), moment().subtract(1, "days")]
      } else if (time == 'yesterday') {
        this.rangeDate = [moment().subtract(1, "days"), moment().subtract(1, "days")]
      } else if (time == 'today') {
        this.rangeDate = [moment(), moment()]
      }
      this.reloadData();
    },

    changeSite(value, e) {
      this.selectSiteInfo = e.data.attrs.info
      this.queryParam.siteId = this.selectSiteInfo.id;
      this.reloadData(this.queryParam.siteId)
    },

    //重新刷新页面数据
    reloadData(value) {
      this.loading = true;
      for (let i in this.siteList){
        if(value === this.siteList[i].id){
          localStorage.setItem("siteCode",this.siteList[i].code)
        }
      }
      this.getFlowIndexNumber();
      this.getCountryMapData();
    },
    // ========================================== 访客量、浏览量、询盘数量、折线图以及统计 ==========================================
    getFlowIndexNumber() {
      let that = this;
      getAction('/datacenter/daily/number', this.queryParam).then(function (res) {
        console.log('res', res);
        if (!res.result) {
          that.enquiryIndexNumber = {
            unRead: 0,
            conversionRate: "0%",
            enquiry: 0
          };
          that.coreDataChart = {
            x: [],
            uv: [],
            pv: [],
            enquiry: []
          };
          that.loading = false;
          return;
        }

        that.enquiryIndexNumber = res.result.enquiryIndexNumber;
        let r = res.result.dailyTrends;
        let x = [], uv = [], enquiry = [];
        if (r != null && r.length > 0) {
          for (let item of r) {
            x.push(item.date)
            uv.push(item.uvCount)
            enquiry.push(item.enquiryCount)
          }
        }
        that.coreDataChart.x = x
        that.coreDataChart.uv = uv
        that.coreDataChart.enquiry = enquiry
        that.loading = false;
      });
    },
    // ========================================== 访客数地域分布 ==========================================
    getCountryMapData() {
      let that = this;
      that.countryMapData = [];
      that.chartDetailData = [];
      getAction('/datacenter/enquiry/map', this.queryParam).then(function (res) {
        if (res.code == 200) {
          that.countryMapData = res.result.accessMap;
          that.chartDetailData = res.result.accessList;
          if (that.chartDetailData !== null && that.chartDetailData.length > 0) {
            for (let item of that.chartDetailData) {
              let searchText = item.countryName ? item.countryName : item.country;
              let itemQueryParam = {
                dateType: that.queryParam.dateType,
                start: that.queryParam.start,
                end: that.queryParam.end,
                offset: 1, //日期相对今天偏移1天
                searchText: searchText
              };
              item.queryParam = itemQueryParam;
            }
          }
        }
      })
    },
    clickRow(record,index) {
      return {
        on: {
          click: () => {
            this.$router.push({ path: '/inquiry/list', query: record.queryParam })
          }
        }
      }
    },

  }
}
</script>


<!-- 通用样式 -->
<style scoped>
@import '~@assets/less/common.less';
</style>


<!-- 询盘页面的样式 -->
<style lang="less" scoped>

.img-box {
  width: 22px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 100%;
    height: 100%;
  }
}

.ant-alert {
  /deep/ .ant-btn {
    border-radius: 0;
    margin-left: 10px;
  }
}

.theme-color {
  color: @primary-color;
}

.r1 {
  .choose-site {
    display: flex;

    /deep/ .ant-select-selection {
      background: transparent;
      color: #fff;
    }

    /deep/ .ant-select-selection__clear {
      background: transparent;
    }

    /deep/ i, /deep/ .ant-calendar-range-picker-separator {
      color: #fff;
    }
  }

  .t1 {
    font-size: 18px;
    color: #fff;
  }

  .ant-calendar-picker {
    margin-right: 20px;

    /deep/ .ant-input {
      background: transparent;
      color: #e2e2e2;
    }
  }

  /deep/ .ant-btn {
    background: transparent;
    color: #e2e2e2;
    margin-right: 10px;

    &.active {
      background: #fff;
      border-color: #fff;
      color: @primary-color;
    }
  }
}

.r2 {
  background: #fff;
  border-radius: 10px;
  padding: 30px 20px;

  .ant-col:not(:last-child) {
    border-right: 1px solid #e6e6e6;
  }

  p {
    margin: 0;
    text-align: center;

    &.t1 {
      color: #333;
      margin-bottom: 15px;

      img {
        margin-right: 10px;
        width: 15px;
        margin-top: -5px;
      }
    }

    &.t2 {
      color: @primary-color;
      font-size: 30px;
      font-weight: 500;
      line-height: 1;
      padding-left: 25px;
    }

    &.t3 {
      font-size: 30px;
      font-weight: 500;
      line-height: 1;
      padding-left: 25px;
    }
  }
}

.r3 {
  margin-top: 20px;
}

.r4 {
  margin-top: 20px;

  /deep/ .ant-table-tbody {
    background: #fff;
  }

  /deep/ .ant-table-tbody > tr > td {
    border-bottom: 1px solid #f7f7f7;
  }
}
</style>


<!-- 首页的样式 -->
<style scoped lang="less">
p, span {
  color: #000;
  margin: 0;
}

.theme-color {
  color: @primary-color;
}

.title {
  font-size: 18px;
  color: #000;
}

@import '../../dashboard/less/home2-7.less';
@import "../../../assets/less/flags.css";
</style>
<style lang="less">
.pop-wrap {
  .ant-popover-inner-content {
    padding: 0;
  }

  .wrap {
    width: 400px;
    padding: 20px 20px;
    background: url("../../../assets/home2-7/pop-bg.svg") no-repeat;
    background-position: bottom right;

    p {
      line-height: 1.8;

      i {
        color: @primary-color;
        margin-right: 10px;
      }
    }

    .name {
      font-size: 18px;
      margin-bottom: 20px;
    }

    .job {
      font-size: 15px;
      color: #9f9f9f;
    }

    .ant-col-8 {
      text-align: right;
    }
  }
}
</style>