feat(sycm_store): 生意参谋-竞店分析完成

src/api/bi/competitor.js

@@ -8,6 +8,13 @@ export function getCmmListAPI(params) {
   })
 }
 
+// 竞店列表
+export function getStoreListAPI() {
+  return request({
+    url: '/bi/oppo/sycm/store/all'
+  })
+}
+
 // 生意参谋-各大竞店
 export function getSycmStoreListAPI(params) {
   return request({
@@ -22,4 +29,4 @@ export function getSycmListAPI(params) {
     url: '/bi/oppo/sycm/list',
     params
   })
-}
\ No newline at end of file
+}

src/components/LevitatedSphere/index.vue

@@ -15,8 +15,7 @@
     <!-- 工具抽屉 -->
     <el-drawer title="工具箱"
       v-model="drawer"
-      size="300px"
-      @click.native="drawer = false">
+      size="300px">
       <slot></slot>
     </el-drawer>
   </div>

src/components/RightToolbar/index.vue

@@ -22,6 +22,8 @@
           </template>
         </el-dropdown>
       </el-tooltip>
+      <!-- 自定义功能 -->
+      <slot></slot>
     </el-row>
     <el-dialog :title="title" v-model="open" append-to-body>
       <el-transfer

src/views/bi/competitor/cmm/LineAndBar.vue

@@ -151,7 +151,6 @@ const setOptions = () => {
       //       tooltip += item.marker + item.seriesName + ': ' + toFixed2(item.value) + (this.myThousand ? '万' : '') + '人<br>';
       //     }
       //   });
-      //   console.log(tooltip)
       //   return tooltip;
       // }
     },

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

@@ -240,7 +240,6 @@ init()
 
 // 筛选条件改变了
 const queryChangeFn = async (arg) => {
-  if (arg === 'date' && !queryParams.date) return
   if (arg === 'date' && queryParams.date) {
     await getList()
   }
@@ -262,12 +261,14 @@ const reset = async () => {
 
 <style scoped
   lang="scss">
+  
   .tabs-container {
     min-height: 100%;
     display: flex;
     flex-direction: column;
 
     .chart_wrap {
+      padding: 20px 0;
       flex: 1;
       display: flex;
       flex-direction: column;

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[0].name)
+const activeName = ref(list.value[1].name)
 </script>
 
 <style scoped

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

@@ -35,6 +35,8 @@ const echartsRef = ref(null)
 const chart = shallowRef(null)
 let myThousand = false // 是否显示万单位
 
+const emits = defineEmits(['changeType'])
+
 const setOptions = () => {
   chart.value.setOption({
     tooltip: {
@@ -52,11 +54,9 @@ const setOptions = () => {
           var color = item.color;
           // 拼接提示内容
           if (item.seriesName.split('-')[1].includes('速')) {
-            tooltip += '<span style="display:inline-block;margin-right:5px;width:12px;height:6px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '%', false, false) + '<br>';
-          } else if (item.seriesName.split('-')[1] === '观看人次') {
-            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, '人', myThousand) + '<br>';
+            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 + ':' + item.value + '<br>';
+            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;
@@ -71,6 +71,14 @@ const setOptions = () => {
         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: {

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()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="日期合并/分散" placement="top">
+        <el-button circle icon="Calendar" @click="dateMergeFn()" />
+      </el-tooltip>
+    </right-toolbar>
+  </div>
   <el-table :data="data"
     style="width: 100%">
     <el-table-column prop="platformStore"
       label="店铺" />
     <el-table-column prop="date"
-      label="日期" />
-    <el-table-column prop="zfmjPeakTotal"
-      label="支付买家数" />
-    <el-table-column prop="jyzsPeakTotal"
-      label="交易增速" />
-    <el-table-column prop="uvPeakTotal"
-      label="独立访客范围" />
-    <el-table-column prop="llzsPeakTotal"
-      label="流量增速" />
+      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 props = defineProps({
+
+  const columnKey = {
+    '支付买家数': 'zfmj',
+    '交易增速': 'jyzs',
+    '独立访客范围': 'uv',
+    '流量增速': 'llzs'
+  }
+  defineProps({
     column: {
       type: Object,
       default: () => {
@@ -30,8 +43,39 @@
       default: () => {
         return []
       },
+    },
+    dateMerge: { // 是否把日期数据合并
+      type: Boolean
     }
   })
-  console.log(props)
-  
-</script>
\ No newline at end of file
+
+  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