|
|
@@ -19,15 +19,24 @@ import HeaderCard from '@/components/dataAnalysis/HeaderCard.vue'
|
|
|
|
|
|
import { useRequest } from '@/hooks/useRequest'
|
|
|
import { useCommonStore } from '@/stores/useCommon'
|
|
|
-import type { HeaderCardProps } from '@/types/dataAnalysis'
|
|
|
+import type { HeaderCardProps, ReqConfig } from '@/types/dataAnalysis'
|
|
|
import { reactive, ref } from 'vue'
|
|
|
|
|
|
-import { FilterType, type QueryInfo, type SelectInfo } from '@/types/table'
|
|
|
+import {
|
|
|
+ FilterType,
|
|
|
+ type QueryInfo,
|
|
|
+ type SelectInfo,
|
|
|
+ type TableFieldInfo,
|
|
|
+ type TableToolsConfig
|
|
|
+} from '@/types/table'
|
|
|
|
|
|
import TableFilterForm from '@/components/table/TableFilterForm/TableFilterForm.vue'
|
|
|
import { useTableChart } from '@/hooks/useTableChart.ts'
|
|
|
import { usePage } from '@/hooks/usePage.ts'
|
|
|
import PieBorderRadius from '@/components/echarts/PieBorderRadius.vue'
|
|
|
+import { createDateRange, formatDate } from '@/utils/common'
|
|
|
+import { FieldSpecialEffectType, TextType } from '@/types/tableText.ts'
|
|
|
+import { useAnalysis } from '@/hooks/useAnalysis.ts'
|
|
|
|
|
|
type MChartType = InstanceType<typeof PieBorderRadius>
|
|
|
|
|
|
@@ -35,6 +44,175 @@ const chartRef = ref<MChartType | null>(null)
|
|
|
const { tempMultipleChoice, selectInfo } = useCommonStore()
|
|
|
const { AllApi } = useRequest()
|
|
|
|
|
|
+const { updateReqConfig } = useAnalysis()
|
|
|
+
|
|
|
+// 分页设置
|
|
|
+const paginationConfig = reactive({
|
|
|
+ limit: 15, // 每页展示个数
|
|
|
+ currentPage: 1, // 当前页码
|
|
|
+ total: 0, // 数据总数
|
|
|
+ pageSizeList: [15, 30] // 页数大小列表
|
|
|
+})
|
|
|
+
|
|
|
+const tableFieldsInfo = reactive<Array<TableFieldInfo>>([
|
|
|
+ {
|
|
|
+ name: 'adsScene',
|
|
|
+ cnName: '广告场景',
|
|
|
+ isShow: true,
|
|
|
+ needSort: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'adsType',
|
|
|
+ cnName: '广告类型',
|
|
|
+ isShow: true,
|
|
|
+ needSort: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'adsState',
|
|
|
+ cnName: '广告状态',
|
|
|
+ isShow: true,
|
|
|
+ needSort: false,
|
|
|
+ specialEffect: {
|
|
|
+ type: FieldSpecialEffectType.TEXT,
|
|
|
+ otherInfo: {
|
|
|
+ translateMap: {
|
|
|
+ 0: '未播放',
|
|
|
+ 1: '未看完',
|
|
|
+ 2: '已看完'
|
|
|
+ },
|
|
|
+ color: {
|
|
|
+ 0: '#909399',
|
|
|
+ 1: '#E6A23C',
|
|
|
+ 2: '#67C23A'
|
|
|
+ },
|
|
|
+ textType: TextType.TEXT
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'openId',
|
|
|
+ cnName: '用户openID',
|
|
|
+ isShow: true,
|
|
|
+ needSort: false
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ name: 'date',
|
|
|
+ cnName: '日期',
|
|
|
+ isShow: true,
|
|
|
+ needSort: false,
|
|
|
+ specialEffect: {
|
|
|
+ type: FieldSpecialEffectType.CUSTOM,
|
|
|
+ otherInfo: {
|
|
|
+ render: formatDate
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'createdAt',
|
|
|
+ cnName: '创建时间',
|
|
|
+ isShow: true,
|
|
|
+ needSort: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'startTime',
|
|
|
+ cnName: '广告开始时间',
|
|
|
+ isShow: true,
|
|
|
+ needSort: false,
|
|
|
+ specialEffect: {
|
|
|
+ type: FieldSpecialEffectType.CUSTOM,
|
|
|
+ otherInfo: {
|
|
|
+ render: (val: string) => {
|
|
|
+ // 此格式为之前的数据，没有时间，需要特殊处理
|
|
|
+ if (val === '0001-01-01 00:00:00') {
|
|
|
+ return '无'
|
|
|
+ }
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'adsId',
|
|
|
+ cnName: '广告ID',
|
|
|
+ isShow: false,
|
|
|
+ needSort: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'userId',
|
|
|
+ cnName: '用户ID',
|
|
|
+ isShow: false,
|
|
|
+ needSort: false
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+// 表格请求配置
|
|
|
+const requestConfig = reactive<ReqConfig>({
|
|
|
+ url: AllApi.userAdsDetail,
|
|
|
+ otherOptions: {
|
|
|
+ pf: selectInfo.pf,
|
|
|
+ gid: selectInfo.gid,
|
|
|
+ startTime: createDateRange(7)[0],
|
|
|
+ endTime: createDateRange(7)[1],
|
|
|
+ adsState: [0, 1, 2] // 默认选所有
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const adStateOptions: Array<SelectInfo> = [
|
|
|
+ {
|
|
|
+ name: 'unPlay',
|
|
|
+ cnName: '未播放',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'unFinished',
|
|
|
+ cnName: '未看完',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'finished',
|
|
|
+ cnName: '已看完',
|
|
|
+ value: 2
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+// 查询字段设置
|
|
|
+const queryInfo = reactive<Array<QueryInfo>>([
|
|
|
+ {
|
|
|
+ name: 'adsState',
|
|
|
+ label: '广告状态',
|
|
|
+ type: FilterType.MULTI_SELECT,
|
|
|
+ placeholder: '请选择广告状态',
|
|
|
+ otherOption: adStateOptions,
|
|
|
+ default: [0, 1, 2],
|
|
|
+ supplementInfo: '此项全选与全不选均为查找所有'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'adsType',
|
|
|
+ label: '广告类型',
|
|
|
+ type: FilterType.INPUT,
|
|
|
+ placeholder: '请输入广告类型',
|
|
|
+ otherOption: null,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'openId',
|
|
|
+ label: '用户openId',
|
|
|
+ type: FilterType.INPUT,
|
|
|
+ placeholder: '请输入用户openId',
|
|
|
+ otherOption: null,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+// 工具栏配置
|
|
|
+const tableToolsConfig: TableToolsConfig = {
|
|
|
+ add: false,
|
|
|
+ filterFields: true,
|
|
|
+ refresh: true,
|
|
|
+ download: true
|
|
|
+}
|
|
|
+
|
|
|
const adTypeOptions: Array<SelectInfo> = [
|
|
|
{
|
|
|
name: 'Interstitial',
|
|
|
@@ -56,7 +234,8 @@ const filterInfo = reactive<Array<QueryInfo>>([
|
|
|
type: FilterType.SELECT,
|
|
|
placeholder: '请输入广告类型',
|
|
|
otherOption: adTypeOptions,
|
|
|
- default: ''
|
|
|
+ default: '',
|
|
|
+ clearable: true
|
|
|
},
|
|
|
{
|
|
|
name: 'createTime',
|
|
|
@@ -121,7 +300,7 @@ const updateAllReq = (pf: string[], gid: string) => {
|
|
|
queryFormData.value.gid = gid
|
|
|
queryFormData.value.pf = pf
|
|
|
updateChartData()
|
|
|
- console.log('更新GID')
|
|
|
+ updateReqConfig(requestConfig, { pf, gid })
|
|
|
// updateReqConfig(keepDataTableInfo.requestConfig, { pf, gid })
|
|
|
}
|
|
|
|
|
|
@@ -129,6 +308,8 @@ const { watchPageChange } = usePage()
|
|
|
|
|
|
const backupSelect = reactive([])
|
|
|
|
|
|
+const isLog = ref<boolean>(true)
|
|
|
+
|
|
|
watchPageChange(() => [tempMultipleChoice.pf, selectInfo.gid], backupSelect, updateAllReq)
|
|
|
|
|
|
const { updateChartData, chartOptions } = useTableChart(
|
|
|
@@ -137,7 +318,8 @@ const { updateChartData, chartOptions } = useTableChart(
|
|
|
filterInfo,
|
|
|
chartNeedFields,
|
|
|
isPie,
|
|
|
- chartRef
|
|
|
+ chartRef,
|
|
|
+ isLog
|
|
|
)
|
|
|
</script>
|
|
|
|
|
|
@@ -163,16 +345,35 @@ const { updateChartData, chartOptions } = useTableChart(
|
|
|
<div class="chartContainer">
|
|
|
<div class="chartContainer">
|
|
|
<div class="chartsTools">
|
|
|
- <el-radio-group class="formChangeRadioGroup" v-model="isPie" size="small">
|
|
|
- <el-radio-button label="饼图" :value="true" />
|
|
|
- <el-radio-button label="柱状图" :value="false" />
|
|
|
- </el-radio-group>
|
|
|
+ <div class="chartVal">
|
|
|
+ <el-radio-group class="formChangeRadioGroup" v-model="isLog" size="small">
|
|
|
+ <el-radio-button label="对数" :value="true" />
|
|
|
+ <el-radio-button label="原值" :value="false" />
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="chartForm">
|
|
|
+ <el-radio-group class="formChangeRadioGroup" v-model="isPie" size="small">
|
|
|
+ <el-radio-button label="饼图" :value="true" />
|
|
|
+ <el-radio-button label="柱状图" :value="false" />
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="chartDisplay">
|
|
|
<PieBorderRadius ref="chartRef" :options="chartOptions"></PieBorderRadius>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="adTableContent">
|
|
|
+ <CustomTable
|
|
|
+ :pagination-config="paginationConfig"
|
|
|
+ :table-fields-info="tableFieldsInfo"
|
|
|
+ :request-config="requestConfig"
|
|
|
+ :query-info="queryInfo"
|
|
|
+ :open-filter-query="true"
|
|
|
+ :tools="tableToolsConfig"
|
|
|
+ ></CustomTable>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -196,8 +397,9 @@ const { updateChartData, chartOptions } = useTableChart(
|
|
|
|
|
|
.chartsTools {
|
|
|
width: 100%;
|
|
|
- position: relative;
|
|
|
+ /*position: relative;*/
|
|
|
display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+ /*justify-content: flex-end;*/
|
|
|
}
|
|
|
</style>
|
