feat(sycm_prd): 竞品分析_复制竞店代码

.env.development

@@ -2,9 +2,9 @@
 VITE_APP_TITLE = 王小卤-链路中心
 
 # 基地址
-# VITE_APP_BASE_API = '/dev-api'
+VITE_APP_BASE_API = '/dev-api'
 # VITE_APP_BASE_API = '/qllan'
-VITE_APP_BASE_API = '/bclan'
+# VITE_APP_BASE_API = '/bclan'
 # VITE_APP_BASE_API = '/home'
 
 # 开发环境配置

src/api/bi/competitor.js

@@ -15,6 +15,13 @@ export function getStoreListAPI() {
   })
 }
 
+// 竞品列表
+export function getComPrdListAPI(){
+  return request({
+    url: '/bi/oppo/sycm/prdInfo'
+  })
+}
+
 // 生意参谋-各大竞店
 export function getSycmStoreListAPI(params) {
   return request({

src/views/bi/competitor/index.vue

@@ -24,7 +24,7 @@ const list = ref([
   { name: '生意参谋-竞店', component: shallowRef(sycmStore) },
   { name: '生意参谋-竞品', component: shallowRef(sycmPrd) }
 ])
-const activeName = ref(list.value[1].name)
+const activeName = ref(list.value[2].name)
 </script>
 
 <style scoped

src/views/bi/competitor/sycm_prd/GradientArea.vue

+<template>
+  <div ref="echartsRef"
+    :class="className"
+    :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+import { formatNumberWithUnit } from '@/utils'
+import { useWindowResize } from '@/hooks'
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: 'chart'
+  },
+  width: {
+    type: String,
+    default: '100%'
+  },
+  height: {
+    type: String,
+    default: '600px'
+  },
+  autoResize: {
+    type: Boolean,
+    default: true
+  },
+  chartData: {
+    type: Object,
+    required: true
+  }
+})
+const echartsRef = ref(null)
+const chart = shallowRef(null)
+let myThousand = false // 是否显示万单位
+
+const emits = defineEmits(['changeType'])
+
+const setOptions = () => {
+  chart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      },
+      formatter: function (params) {
+        let tooltip = '';
+        params.forEach((item) => {
+          // 获取系列颜色
+          var color = item.color;
+          // 拼接提示内容
+          if (item.seriesName.split('-')[1].includes('速')) {
+            tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '%', false, false) + '<br>';
+          } else {
+            tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ':' + formatNumberWithUnit(item.value, '人', false, true) + '<br>';
+          }
+        });
+        return tooltip;
+      }
+    },
+    // legend: {
+    //   data: props.chartData.legend
+    // },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
+        magicType: {
+          type: ['stack', 'tiled'] // 切换图表类型
+        },
+        myTool1: {
+          show: true,
+          title: '切换表格',
+          icon: 'path://M5,5 L5,15 L15,15 L15,5 Z M20,5 L20,15 L30,15 L30,5 Z M5,20 L5,30 L15,30 L15,20 Z M20,20 L20,30 L30,30 L30,20 Z',
+          onclick: () => {
+            emits('changeType', 'table')
+          }
+        }
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        // type: 'category',
+        // boundaryGap: false,
+        data: props.chartData.xAxis
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: props.chartData.series
+  }, true)
+}
+
+watchEffect(() => {
+  if (!chart.value) return
+  myThousand = props.chartData.series?.some(o => {
+    return o.data.some(num => num >= 10000)
+  })
+  setOptions()
+})
+
+const initChart = () => {
+  chart.value = echarts.init(echartsRef.value)
+}
+
+const resize = () => {
+  chart.value.resize()
+}
+useWindowResize(resize)
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+  })
+})
+
+onBeforeUnmount(() => {
+  if (!chart.value) {
+    return
+  }
+  chart.value.dispose()
+  chart.value = null
+})
+</script>
\ No newline at end of file

src/views/bi/competitor/sycm_prd/TableList.vue

+<template>
+  <div class="toolbar">
+    <right-toolbar :search="false"
+      @queryTable="queryTable">
+      <el-tooltip class="item"
+        effect="dark"
+        content="日期合并/分散"
+        placement="top">
+        <el-button circle
+          icon="Calendar"
+          @click="dateMergeFn()" />
+      </el-tooltip>
+      <el-tooltip class="item"
+        effect="dark"
+        content="切换图表"
+        placement="top">
+        <el-button circle
+          icon="Histogram"
+          @click="changeType()" />
+      </el-tooltip>
+
+    </right-toolbar>
+  </div>
+  <el-table :data="data"
+    style="width: 100%">
+    <el-table-column prop="platformStore"
+      label="店铺" />
+    <el-table-column prop="date"
+      label="日期"
+      v-if="!dateMerge" />
+    <el-table-column v-for="str in column"
+      :prop="columnKey[str]"
+      :label="str"
+      :formatter="formatterFn" />
+  </el-table>
+</template>
+
+<script lang="ts"
+  setup>
+  const columnKey = {
+    '支付买家数': 'zfmj',
+    '交易增速': 'jyzs',
+    '独立访客范围': 'uv',
+    '流量增速': 'llzs'
+  }
+  defineProps({
+    column: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    dateMerge: { // 是否把日期数据合并
+      type: Boolean
+    }
+  })
+
+  const formatterFn = (row, column, cellValue) => {
+    if (column.property === 'jyzs' || column.property === 'llzs') {
+      return cellValue + '%'
+    } else {
+      return cellValue
+    }
+  }
+
+  const emits = defineEmits(['changeType', 'queryTable', 'dateMergeFn'])
+
+  const queryTable = () => {
+    emits('queryTable')
+  }
+
+  const changeType = () => {
+    emits('changeType', 'charts')
+  }
+
+  const dateMergeFn = () => {
+    emits('dateMergeFn')
+  }
+
+</script>
+
+<style scoped
+  style="sass">
+  .toolbar {
+    float: right;
+  }
+</style>
\ No newline at end of file

src/views/bi/competitor/sycm_store/GradientArea.vue

@@ -76,7 +76,7 @@ const setOptions = () => {
           title: '切换表格',
           icon: 'path://M5,5 L5,15 L15,15 L15,5 Z M20,5 L20,15 L30,15 L30,5 Z M5,20 L5,30 L15,30 L15,20 Z M20,20 L20,30 L30,30 L30,20 Z',
           onclick: () => {
-           emits('changeType', 'table')
+            emits('changeType', 'table')
           }
         }
       }
@@ -119,6 +119,7 @@ const resize = () => {
   chart.value.resize()
 }
 useWindowResize(resize)
+
 onMounted(() => {
   nextTick(() => {
     initChart()

src/views/bi/competitor/sycm_store/TableList.vue

 <template>
   <div class="toolbar">
-    <right-toolbar :search="false" @queryTable="queryTable">
-      <el-tooltip class="item" effect="dark" content="切换图表" placement="top">
-        <el-button circle icon="Histogram" @click="changeType()" />
+    <right-toolbar :search="false"
+      @queryTable="queryTable">
+      <el-tooltip class="item"
+        effect="dark"
+        content="日期合并/分散"
+        placement="top">
+        <el-button circle
+          icon="Calendar"
+          @click="dateMergeFn()" />
       </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="日期合并/分散" placement="top">
-        <el-button circle icon="Calendar" @click="dateMergeFn()" />
+      <el-tooltip class="item"
+        effect="dark"
+        content="切换图表"
+        placement="top">
+        <el-button circle
+          icon="Histogram"
+          @click="changeType()" />
       </el-tooltip>
+
     </right-toolbar>
   </div>
   <el-table :data="data"
@@ -14,7 +26,8 @@
     <el-table-column prop="platformStore"
       label="店铺" />
     <el-table-column prop="date"
-      label="日期" v-if="!dateMerge"/>
+      label="日期"
+      v-if="!dateMerge" />
     <el-table-column v-for="str in column"
       :prop="columnKey[str]"
       :label="str"
@@ -24,7 +37,6 @@
 
 <script lang="ts"
   setup>
-
   const columnKey = {
     '支付买家数': 'zfmj',
     '交易增速': 'jyzs',

src/views/bi/competitor/sycm_store/index.vue

@@ -54,8 +54,7 @@
             :data="tableList"
             @changeType="changeType"
             @queryTable="getList"
-            @dateMergeFn="dateMergeFn"
-            :dateMerge="dateMerge"></table-list>
+            @dateMergeFn="dateMergeFn"></table-list>
         </template>
       </template>
       <no-data v-else-if="!loading"></no-data>
@@ -63,12 +62,6 @@
     <levitated-sphere>
       <el-button type="danger"
         @click="reset">重置本页</el-button>
-      <el-button type="primary"
-        @click="changeType(showType === 'charts' ? 'table' : 'charts')">切换{{ showType === 'charts' ? '表格' :
-          '图表' }}</el-button>
-      <el-button v-if="showType === 'table'"
-        type="warning"
-        @click="dateMergeFn">日期{{ dateMerge ? '分散' : '合并' }}</el-button>
     </levitated-sphere>
   </div>
 </template>
@@ -112,9 +105,7 @@ const chartData = reactive({ // 图表内要用的数据
 const allTableList = ref([])
 const tableList = ref([])
 
-const changeType = (val) => {
-  showType.value = val
-}
+
 
 // 获取竞店列表
 const getStoreList = async () => {
@@ -292,7 +283,6 @@ const filterChartsData = () => {
 
   chartData.legend = legend
   chartData.series = series
-  console.log(allChartData.xAxis)
   chartData.xAxis = allChartData.xAxis
 }
 
@@ -369,18 +359,21 @@ async function init() {
   await getList()
 };
 
-watch(showType, () => {
-  getList()
-})
-
 onMounted(() => {
   init()
 })
 
+// 图例点击直接过滤数据
 const legendChangeFn = () => {
   filterChartsData()
 }
 
+// 图表/表格类型切换
+const changeType = (val) => {
+  showType.value = val
+  getList()
+}
+
 // 查询条件改变
 const queryChangeFn = async (arg) => {
   getList()