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

<template>
  <div>
    <a-row style="background: #fff; padding: 10px 15px; color: rgba(0, 0, 0, 0.85); margin-bottom: 10px">
      <!--      v-if="siteinfo.length != 1"-->
      <a-col :span="24">
        <span>请选择站点：</span>
        <a-select show-search option-filter-prop="children" :filter-option="filterOption" v-model="siteId" @change="changeUser" style="width: 300px">
          <a-select-option v-for="data in siteinfo" :key="data.id" :value="data.id">
            {{ data.name }}
          </a-select-option>
        </a-select>
        <a-button type="dashed" icon="reload" @click="reloadPage" style="margin-left: 20px">刷新</a-button>
      </a-col>
    </a-row>

    <a-row :gutter="10" class="middle-row">
      <a-col :xl="9" :lg="9" :md="9" :sm="24" :xs="24">
        <a-card :bordered="false" :body-style="{ padding: '0' }">
          <div class="salesCard">
            <a-tabs default-active-key="1" size="large">
              <a-tab-pane tab="询盘有效性饼图" key="1">
                <a-card :loading="mediumViewPieloading" :bordered="false" :body-style="{ padding: '0', width: '100%' }">
                  <v-chart v-if="mediumViewPie.length > 1" :height="chartheight" :forceFit="true" :data="mediumPieData" :scale="mediumPieScale">
                    <v-tooltip :showTitle="false" dataKey="item*percent" />
                    <v-axis />
                    <v-legend dataKey="item" />
                    <v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig" />
                    <v-coord type="theta" />
                  </v-chart>
                  <a-empty v-else>
                    <template #description>
                      <span>暂无数据</span>
                    </template>
                  </a-empty>
                </a-card>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-card>
      </a-col>

      <a-col :xl="15" :lg="15" :md="15" :sm="24" :xs="24">
        <a-card :bordered="false" :body-style="{ padding: '0' }">
          <div class="salesCard">
            <a-tabs default-active-key="1" size="large">
              <a-tab-pane tab="询盘统计折线图" key="1">
                <a-card :loading="mediumViewLineloading" :bordered="false" :body-style="{ padding: '0', width: '100%' }">
                  <line-chart-multid
                    v-if="mediumViewLine.length > 1"
                    :dataSource="mediumViewLine"
                    :aliases="[{ field: 'num', alias: '询盘数' }]"
                    :height="chartheight"
                  />

                  <a-empty v-else>
                    <template #description>
                      <span>暂无数据</span>
                    </template>
                  </a-empty>
                </a-card>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row style="margin-top: 10px">
      <a-col :span="24">
        <a-card :loading="enquiryChartloading" :bordered="false" title="询盘统计">
          <template #extra>
            <a :href="'/inquiry/list?siteId=' + siteId">询盘列表</a>
          </template>
          <a-row>
            <a-col :span="6">
              <head-info title="累计网站询盘" :content="enquiryInfo.total" />
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <template #indicator>
                  <a-icon type="rise" style="font-size: 24px" />
                </template>
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="近7日累计询盘" :content="enquiryInfo.thisWeek" />
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <template #indicator>
                  <a-icon type="rise" style="font-size: 24px" />
                </template>
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="近30日累计询盘" :content="enquiryInfo.thisMonth" />
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <template #indicator>
                  <a-icon type="rise" style="font-size: 24px" />
                </template>
              </a-spin>
            </a-col>
          </a-row>
          <bar-multid v-if="enquiryInfo.enquiryChart.length > 1" :dataSource="enquiryInfo.enquiryChart" :fields="enquiryInfo.enquiryFild" />
          <a-empty v-else>
            <template #description>
              <span>暂无数据</span>
            </template>
          </a-empty>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { DataSet } from '@antv/data-set';
  import { postAction, getAction } from '/@/api/manage/manage';
  import Qs from 'qs';
  import LineChartMultid from '/@/components/chart/LineMulti.vue';
  import Bar from '/@/components/chart/Bar.vue';
  import BarMultid from '/@/components/chart/BarMulti.vue';
  import MapAdweb from '/@/components/chart/mapAdweb.vue';
  import HeadInfo from '/@/components/tools/HeadInfo.vue';
  import ACol from 'ant-design-vue/es/grid/Col';

  export default {
    name: 'TrafficTrends',
    components: {
      BarMultid,
      LineChartMultid,
      Bar,
      HeadInfo,
      ACol,
      MapAdweb,
    },
    data() {
      return {
        mediumViewLineloading: true,
        mediumViewPieloading: true,
        mediumViewListloading: true,
        enquiryChartloading: true,
        siteinfo: [],
        defaultValue: '',
        siteId: '',
        siteCode: '',
        //图表高度
        chartheight: 400,
        mediumViewPie: [],
        mediumViewLine: [],
        mediumViewList: [],
        mediumPieScale: [
          {
            dataKey: 'percent',
            min: 0,
            formatter: '.0%',
          },
        ],
        pieStyle: {
          stroke: '#fff',
          lineWidth: 1,
        },
        labelConfig: [
          'percent',
          {
            formatter: (val, item) => {
              return item.point.item + ': ' + val;
            },
          },
        ],
        //询盘数据
        enquiryInfo: {
          total: '0',
          thisWeek: '0',
          thisMonth: '0',
          enquiryFild: [],
          enquiryChart: [],
        },
      };
    },

    computed: {
      mediumPieData() {
        const dv = new DataSet.View().source(this.mediumViewPie);
        dv.transform({
          type: 'percent',
          field: 'count',
          dimension: 'item',
          as: 'percent',
        });
        return dv.rows;
      },
    },
    created() {
      this.getSiteInfo();
    },

    methods: {
      //进入获取站点code
      getSiteInfo() {
        let that = this;
        getAction('/sys/api/getSiteListByUid').then(function (res) {
          if (res.code == 0) {
            that.siteinfo = res.data;

            let isInSite = false;
            for (let i in res.data) {
              if (localStorage.getItem('siteCode') !== null && res.data[i].code === localStorage.getItem('siteCode')) {
                isInSite = true;
                that.siteId = res.data[i].id;
              }
            }
            if (localStorage.getItem('siteCode') !== null && isInSite) {
            } else {
              that.siteId = res.data[0].id;
              localStorage.setItem('siteCode', res.data[0].code);
            }

            that.getAllInfo();
          } else {
            that.$message.error('站点获取失败，请刷新重试');
          }
        });
      },

      //改变code的时候
      changeUser(value) {
        this.siteId = value;
        for (let i in this.siteinfo) {
          if (value == this.siteinfo[i].id) {
            localStorage.setItem('siteCode', this.siteinfo[i].code);
          }
        }
        this.getAllInfo();
      },

      //刷新获取全部数据
      getGoogleInfo() {
        let that = this;
        //获取图表数据

        let siteData = that.siteinfo;
        for (let i in siteData) {
          if (siteData[i].id == that.siteId) {
            that.siteCode = siteData[i].code;
          }
        }

        let chartd = {
          siteCode: that.siteCode,
          startTime: '',
          endTime: '',
        };
        //饼图
        postAction('/adweb/adwebEnquiry/effectivenessAnalysis/pie', Qs.stringify(chartd), 1000 * 60 * 2).then(function (res) {
          that.mediumViewPieloading = false;
          if (res.code == 200) {
            if (res.result[0].count == 0 && res.result[1].count == 0) {
              that.mediumViewPie = [];
            } else {
              that.mediumViewPie = res.result;
            }
          } else {
            that.mediumViewPie = [];
          }
        });

        //折线图
        postAction('/adweb/adwebEnquiry/effectivenessAnalysis/line', Qs.stringify(chartd), 1000 * 60 * 2).then(function (res) {
          that.mediumViewLineloading = false;
          if (res.code == 200) {
            that.mediumViewLine = res.result;
          } else {
            that.mediumViewLine = [];
          }
        });
      },

      getAllInfo() {
        let that = this;
        that.mediumViewPieloading = true;
        that.mediumViewLineloading = true;
        that.mediumViewListloading = true;

        //在请求完内部adweb接口后，请求google数据
        that.getGoogleInfo();

        //询盘数据
        let enquiryd = {
          siteId: that.siteId,
          day: 6,
          dayEnd: 1,
        };
        postAction('/adweb/adwebEnquiry/selectEnquiryCountV2', Qs.stringify(enquiryd), 1000 * 60 * 2).then(function (res) {
          that.enquiryChartloading = false;
          console.log(res.data.countDto.total);
          if (res.code == 0) {
            that.enquiryInfo.total = res.data.countDto.total.toString();
            that.enquiryInfo.thisWeek = res.data.countDto.thisWeek.toString();
            that.enquiryInfo.thisMonth = res.data.countDto.thisMonth.toString();

            let dateList = res.data.trendDto.dates;
            let dictsList = res.data.trendDto.dicts;
            let valuesList = res.data.trendDto.values;
            if (valuesList != null) {
              let arr = [];
              for (let i = 0; i < dictsList.length; i++) {
                let dict = dictsList[i];
                let value = dict.value;
                let label = dict.label;
                let values = valuesList[value];
                let obj = {};
                obj['label'] = label;
                for (let j = 0; j < dateList.length; j++) {
                  obj[dateList[j]] = values[j];
                }
                arr.push(obj);
              }
              that.enquiryInfo.enquiryFild = dateList;
              that.enquiryInfo.enquiryChart = arr;
            } else {
              that.enquiryInfo.enquiryChart = [];
            }
          } else {
            that.enquiryInfo.total = 0;
            that.enquiryInfo.thisWeek = 0;
            that.enquiryInfo.thisMonth = 0;
            that.enquiryInfo.enquiryFild = [];
            that.enquiryInfo.enquiryChart = [];
          }
        });
      },

      //刷新页面
      reloadPage() {
        this.getAllInfo();
      },

      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
      },
    },
  };
</script>

<style lang="less" scoped>
  .circle-cust {
    position: relative;
    top: 28px;
    left: -100%;
  }

  .middle-row .ant-tabs-tabpane .ant-card {
    height: 430px;
    align-items: center;
    justify-content: center;
    display: flex;
  }
</style>