refactor(competitor): 无筛选条件则显示无数据效果

src/assets/icons/svg/nodata.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1733134004532" class="icon" viewBox="0 0 1638 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2512" xmlns:xlink="http://www.w3.org/1999/xlink" width="319.921875" height="200"><path d="M819.2 1024c453.12 0 819.2-79.36 819.2-179.2s-366.08-179.2-819.2-179.2c-284.16 0-535.04 30.72-680.96 79.36C51.2 773.12 0 808.96 0 844.8c0 99.84 366.08 179.2 819.2 179.2z" fill="#8a8a8a" p-id="2513"></path><path d="M1420.8 601.6h-1203.2v-253.44L481.28 48.64C494.08 25.6 517.12 12.8 540.16 12.8h558.08c23.04 0 46.08 12.8 61.44 38.4l261.12 296.96v253.44z m-1177.6-25.6h1152v-220.16l-256-291.84c-12.8-17.92-25.6-28.16-40.96-28.16H540.16c-15.36 0-28.16 10.24-38.4 25.6L243.2 355.84v220.16z" fill="#8a8a8a" p-id="2514"></path><path d="M517.12 358.4c30.72 0 56.32 33.28 56.32 74.24 0 40.96 25.6 74.24 56.32 74.24h378.88c30.72 0 56.32-33.28 56.32-74.24 0-40.96 25.6-74.24 56.32-74.24H1408v463.36c0 53.76-33.28 99.84-74.24 99.84H304.64C263.68 921.6 230.4 878.08 230.4 821.76V358.4h286.72z" fill="#8a8a8a" p-id="2515"></path><path d="M1333.76 934.4H304.64c-48.64 0-87.04-51.2-87.04-112.64V345.6h299.52c38.4 0 69.12 38.4 69.12 87.04 0 33.28 20.48 61.44 43.52 61.44h378.88c23.04 0 43.52-28.16 43.52-61.44 0-48.64 30.72-87.04 69.12-87.04h299.52v476.16c0 61.44-38.4 112.64-87.04 112.64z m-1090.56-563.2v450.56c0 48.64 28.16 87.04 61.44 87.04H1331.2c35.84 0 61.44-38.4 61.44-87.04V371.2H1121.28c-23.04 0-43.52 28.16-43.52 61.44 0 48.64-30.72 87.04-69.12 87.04H629.76c-38.4 0-69.12-38.4-69.12-87.04 0-33.28-20.48-61.44-43.52-61.44H243.2z" fill="#8a8a8a" p-id="2516"></path></svg>
\ No newline at end of file

src/components/NoData/index.vue

+<template>
+  <div class="wrap">
+    <svg-icon icon-class="nodata" class="icon"/>
+    <p><slot>无数据，切换筛选条件再试</slot></p>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped lang="scss">
+.wrap{
+  text-align: center;
+  .icon{
+    font-size: 60px;
+    color: #ccc;
+  }
+}
+</style>

src/main.js

@@ -42,6 +42,8 @@ import CommonMenu from '@/components/CommonMenu'
 import LevitatedSphere from '@/components/LevitatedSphere'
 // 自定义图例组件
 import GroupLegend from '@/components/ECharts/GroupLegend'
+// 无数据
+import NoData from '@/components/NoData'
 
 const app = createApp(App)
 
@@ -66,6 +68,7 @@ app.component('Editor', Editor)
 app.component('CommonMenu', CommonMenu)
 app.component('LevitatedSphere', LevitatedSphere)
 app.component('GroupLegend', GroupLegend)
+app.component('NoData', NoData)
 
 app.use(router)
 app.use(store)

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

@@ -34,6 +34,7 @@
           type="daterange"
           align="right"
           unlink-panels
+          :clearable="false"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
@@ -42,10 +43,13 @@
         </el-date-picker>
       </el-form-item>
     </el-form>
-    <div class="chart_wrap">
+    <div class="chart_wrap" v-loading="loading">
+      <template v-if="queryParams.brandList.length > 0 && queryParams.typeList.length > 0">
         <group-legend :legendData="chartData.legend"
           @click-item="legendChangeFn"></group-legend>
         <line-charts :chartData="chartData"></line-charts>
+      </template>
+      <no-data v-else-if="!loading"></no-data>
     </div>
     <levitated-sphere>
       <el-button type="danger"
@@ -68,11 +72,12 @@ const dataTypeList = ['销售额', '观看人次'] // 数据类型
 const brandList = ref([])// 直播间列表
 const typeList = ref(dataTypeList) // 数据类型列表
 const { pickerOptions } = useDatePickerOptions()
+const loading = ref(true)
 
 const queryParams = reactive({ // 查询表单
   brandList: [],
   date: dateList,
-  typeList: dataTypeList
+  typeList: [dataTypeList[0]]
 })
 
 const allChartData = reactive({ // 图表所有数据
@@ -89,6 +94,7 @@ const chartData = reactive({ // 图表内要用的数据
 
 // 获取数据
 const getList = async () => {
+  loading.value = true
   // 重置数据源
   resetObjValue(allChartData)
   // 获取 x 轴时间
@@ -161,6 +167,7 @@ const getList = async () => {
     allChartData.series.push(saleObj)
     allChartData.series.push(gkrcObj)
   })
+  loading.value = false
   return data
 }
 
@@ -224,6 +231,8 @@ const init = async function () {
   const data = await getList()
   // 初始化直播间列表
   brandList.value = data.map(list => list[0].name)
+  // 默认显示第一个
+  queryParams.brandList = [brandList.value[0]]
   // 筛选图表数据
   filterData()
 }
@@ -246,7 +255,7 @@ const reset = async () => {
   // 重置查询参数
   queryParams.brandList = []
   queryParams.date = dateList
-  queryParams.typeList = dataTypeList
+  queryParams.typeList = [dataTypeList[0]]
   init()
 }
 </script>

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[0].name)
 </script>
 
 <style scoped

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

 <template>
-  <div>
+  <div v-if="!loading">
     <el-form :model="queryParams"
       inline>
       <el-form-item label="店铺">
@@ -31,6 +31,7 @@
         <el-date-picker v-model="queryParams.date"
           type="daterange"
           unlink-panels
+          :clearable="false"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
@@ -39,10 +40,14 @@
         </el-date-picker>
       </el-form-item>
     </el-form>
-    <div class="chart_wrap">
+    <div class="chart_wrap"
+      v-loading="loading">
+      <template v-if="queryParams.brandList.length > 0 && queryParams.typeList.length > 0">
         <group-legend :legendData="chartData.legend"
           @click-item="legendChangeFn"></group-legend>
         <gradient-area :chartData="chartData"></gradient-area>
+      </template>
+      <no-data v-else-if="!loading"></no-data>
     </div>
   </div>
 </template>
@@ -61,6 +66,7 @@ const dataTypeList = ['支付买家数', '交易增速', '独立访客范围', '
 const typeList = ref(dataTypeList)
 const { pickerOptions } = useDatePickerOptions()
 const brandList = ref([]) // 店铺列表
+const loading = ref(true)
 
 const queryParams = reactive({ // 查询表单
   brandList: [],
@@ -81,6 +87,7 @@ const chartData = reactive({ // 图表内要用的数据
 
 // 获取数据
 const getList = async () => {
+  loading.value = true
   resetObjValue(allChartData)
   // 获取 x 轴时间
   allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
@@ -202,6 +209,7 @@ const getList = async () => {
     // allChartData.legend.push(zfmjObj.name, uvObj.name, llzsObj.name, jyzsObj.name)
     allChartData.series.push(jyzsObj, llzsObj, uvObj, zfmjObj)
   })
+  loading.value = false
   return data
 }
 
@@ -272,7 +280,10 @@ async function init() {
   // 筛选图表数据
   filterData()
 };
-init()
+nextTick(() => {
+  init()
+})
+
 
 const legendChangeFn = () => {
   filterData()