|
@@ -2,34 +2,40 @@
|
|
|
<div class="layout-container-main" id="jcsb">
|
|
<div class="layout-container-main" id="jcsb">
|
|
|
<div class="item" id="box1">
|
|
<div class="item" id="box1">
|
|
|
<div class="layout-container-main-top">
|
|
<div class="layout-container-main-top">
|
|
|
- <div class="top-left">
|
|
|
|
|
- <div class="line"></div>
|
|
|
|
|
- <span>{{ title }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="main" v-if="totalProfit">
|
|
|
|
|
- <el-row v-if="type === 'earn'">
|
|
|
|
|
- <el-col :span="8">
|
|
|
|
|
- <el-statistic class="statistic" title="今日收益" :value="totalProfit.today" :precision="2" />
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="8">
|
|
|
|
|
- <el-statistic title="昨日收益" :value="totalProfit.yesterday" :precision="2" />
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="8">
|
|
|
|
|
- <el-statistic title="本月收益" :value="totalProfit.month" :precision="2" />
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- <!-- <el-row v-else>
|
|
|
|
|
- <el-col :span="8">
|
|
|
|
|
- <el-statistic title="今日ECPM" :value="totalProfit.ecpmToday" :precision="2" />
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="8">
|
|
|
|
|
- <el-statistic title="昨日ECPM" :value="totalProfit.ecpmYesterday" :precision="2" />
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="8">
|
|
|
|
|
- <el-statistic title="本月ECPM" :value="totalProfit.ecpmMonth" :precision="2" />
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row> -->
|
|
|
|
|
|
|
+ <div class="left_title">
|
|
|
|
|
+ <div class="top-left">
|
|
|
|
|
+ <div class="line"></div>
|
|
|
|
|
+ <span>{{ title }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="main" v-if="totalProfit">
|
|
|
|
|
+ <el-row v-if="type === 'earn'">
|
|
|
|
|
+ <el-col :span="8">
|
|
|
|
|
+ <el-statistic class="statistic" title="今日收益" :value="totalProfit.today" :precision="2" />
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="8">
|
|
|
|
|
+ <el-statistic title="昨日收益" :value="totalProfit.yesterday" :precision="2" />
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="8">
|
|
|
|
|
+ <el-statistic title="本月收益" :value="totalProfit.month" :precision="2" />
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ <!-- <el-row v-else>
|
|
|
|
|
+ <el-col :span="8">
|
|
|
|
|
+ <el-statistic title="今日ECPM" :value="totalProfit.ecpmToday" :precision="2" />
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="8">
|
|
|
|
|
+ <el-statistic title="昨日ECPM" :value="totalProfit.ecpmYesterday" :precision="2" />
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="8">
|
|
|
|
|
+ <el-statistic title="本月ECPM" :value="totalProfit.ecpmMonth" :precision="2" />
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row> -->
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+
|
|
|
|
|
+ <el-select v-if="appList.length > 0" v-model="appId" @change="getChangeAppId">
|
|
|
|
|
+ <el-option v-for="item in appList" :key="item.appId" :value="item.appId" :label="item.appName" />
|
|
|
|
|
+ </el-select>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="main-echart" ref="chartRef">
|
|
<div class="main-echart" ref="chartRef">
|
|
|
<el-table class="table" :data="tableData" border height="100%" :fit="true" :scroll-x="false"
|
|
<el-table class="table" :data="tableData" border height="100%" :fit="true" :scroll-x="false"
|
|
@@ -51,6 +57,8 @@
|
|
|
import { ref, watch } from 'vue'
|
|
import { ref, watch } from 'vue'
|
|
|
import Chart from '@/components/charts/index.vue'
|
|
import Chart from '@/components/charts/index.vue'
|
|
|
|
|
|
|
|
|
|
+const emit = defineEmits(['update'])
|
|
|
|
|
+
|
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
|
// 表格数据
|
|
// 表格数据
|
|
|
tableData: {
|
|
tableData: {
|
|
@@ -80,6 +88,11 @@ const props = defineProps({
|
|
|
title: {
|
|
title: {
|
|
|
type: String,
|
|
type: String,
|
|
|
default: ''
|
|
default: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ // 应用数据
|
|
|
|
|
+ appList: {
|
|
|
|
|
+ type: Array,
|
|
|
|
|
+ default: []
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
|
|
@@ -174,11 +187,19 @@ const options = ref({
|
|
|
series: []
|
|
series: []
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+const appId = ref('')
|
|
|
|
|
+const getChangeAppId = (appId) => {
|
|
|
|
|
+ emit('update',appId)
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+watch(() => props.appList, (newVal) => {
|
|
|
|
|
+ // 默认显示第一个应用
|
|
|
|
|
+ appId.value = props.appList[0].appId
|
|
|
|
|
+})
|
|
|
|
|
|
|
|
// 监听 props.lineListData 变化,动态更新 series
|
|
// 监听 props.lineListData 变化,动态更新 series
|
|
|
watch(() => props.lineListData, (newVal) => {
|
|
watch(() => props.lineListData, (newVal) => {
|
|
|
if (Object.keys(newVal).length === 0) return; // 空数据不更新
|
|
if (Object.keys(newVal).length === 0) return; // 空数据不更新
|
|
|
-
|
|
|
|
|
// 更新 ECharts 配置
|
|
// 更新 ECharts 配置
|
|
|
options.value.legend = {
|
|
options.value.legend = {
|
|
|
data: props.legendData,
|
|
data: props.legendData,
|
|
@@ -216,7 +237,11 @@ watch(() => props.lineListData, (newVal) => {
|
|
|
.layout-container-main-top {
|
|
.layout-container-main-top {
|
|
|
height: 6vh;
|
|
height: 6vh;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- // justify-content: space-between;
|
|
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+
|
|
|
|
|
+ .left_title {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
.top-left {
|
|
.top-left {
|
|
|
display: flex;
|
|
display: flex;
|