temu-plugin/src/components/AiProductDetail.vue

<template>
  <ai-detail class="audit">
    <template slot="content">
      <ai-card title="基本信息">
        <ai-product-drop-down v-if="info" :params="info" slot="right"></ai-product-drop-down>
        <template #content>
          <div class="flex">
            <ai-avatar v-model="info.imgUrl" :editable="false" :preview="true"/>
            <ai-wrapper
              label-width="120px" class="fill">
              <ai-info-item label="价格："   :value="'$' + info.price"></ai-info-item>
              <ai-info-item label="销量："   :value="info.saleTotal"></ai-info-item>
            </ai-wrapper>
          </div>
        </template>
      </ai-card>
      <ai-card title="趋势信息">
        <template #content>
          <div id="dataChart"></div>
        </template>
      </ai-card>
    </template>
  </ai-detail>
</template>
<script>
import AiProductDropDown from './AiProductDropDown.vue'
import { DualAxes } from '@antv/g2plot'

export default {
  name: "AiProductDetail",
  props: ['params', 'url'],
  components: {
    AiProductDropDown
  },
  data() {
    return {
      info: {}
    }
  },
  computed: {
  },
  mounted() {
    // this.info = this.params
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init() {
      this.$http.post(this.url ? this.url: '/api/monitorDetail/queryProductDetail',null,{
        params: {
          goodsId: this.params.goodsId,
          monitorId: this.params.monitorId
        }
      }).then(res => {
        this.info = res.data
          
        const dualAxes = new DualAxes('dataChart', {
          data: [this.info.priceAndSale, this.info.priceAndSale],
          xField: '日期',
          yField: ['价格', '销量'],
          geometryOptions: [
            {
              geometry: 'line',
              color: '#5B8FF9',
            },
            {
              geometry: 'line',
              color: '#5AD8A6',
            }
          ],
        });

        dualAxes.render();
      })
    }
  }
}
</script>
<style scoped lang="scss">
</style>