dev-report
qsh
1 month ago
parent
41c20623d4
commit
2406bcb8e4
@ -0,0 +1,8 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
export const getInfo = async (data) => { |
||||||
|
return await request.post({ url: '/admin-api/crm/sch-clue/signData/report/one', data }) |
||||||
|
} |
||||||
|
|
||||||
|
export const getList = async (data) => { |
||||||
|
return await request.post({ url: '/admin-api/crm/sch-clue/signData/report/two', data }) |
||||||
|
} |
||||||
@ -0,0 +1,147 @@ |
|||||||
|
<template> |
||||||
|
<ContentWrap> |
||||||
|
<el-form :model="searchForm" label-width="0" inline> |
||||||
|
<el-form-item> |
||||||
|
<el-date-picker |
||||||
|
v-model="searchForm.period" |
||||||
|
type="month" |
||||||
|
format="YYYY-MM" |
||||||
|
value-format="YYYY-MM" |
||||||
|
placeholder="选择年月" |
||||||
|
:clearable="false" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-tree-select |
||||||
|
v-model="searchForm.sourceId" |
||||||
|
:data="props.sourceOptions" |
||||||
|
:props="defaultProps" |
||||||
|
check-strictly |
||||||
|
node-key="sourceId" |
||||||
|
placeholder="请选择渠道" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button @click="handleSearch">查询</el-button> |
||||||
|
<el-button @click="handleReset">重置</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
<el-table |
||||||
|
v-loading="loading" |
||||||
|
:data="tableList" |
||||||
|
border |
||||||
|
stripe |
||||||
|
:summary-method="getSummaries" |
||||||
|
show-summary |
||||||
|
> |
||||||
|
<el-table-column prop="sourceName" label="渠道名称" /> |
||||||
|
<el-table-column prop="newClueSignNum" label="新线索当月成交数" sortable> |
||||||
|
<template #header> |
||||||
|
<Tooltip message="当月咨询且当月成交的线索数" /> <span>新线索当月成交数</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="newClueNum" label="新线索总数" sortable> |
||||||
|
<template #header> |
||||||
|
<Tooltip message="当月咨询的线索数" /> <span>新线索总数</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="rate" label="新线索当月成交率" sortable :formatter="parseRate" /> |
||||||
|
<el-table-column prop="reallyClueSignNum" sortable> |
||||||
|
<template #header> |
||||||
|
<Tooltip message="成交日期在本月的线索数" /> <span>当月总成交数</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</ContentWrap> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup name="ChannelMonthly"> |
||||||
|
import * as reportApi from '@/api/home/reportChannel' |
||||||
|
import { removeNullField } from '@/utils' |
||||||
|
import { formatDate } from '@/utils/formatTime' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
sourceOptions: { |
||||||
|
type: Array, |
||||||
|
default: () => [] |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const defaultProps = { |
||||||
|
children: 'children', |
||||||
|
label: 'sourceName', |
||||||
|
value: 'sourceId', |
||||||
|
isLeaf: 'leaf' |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
getOptions() |
||||||
|
handleReset() |
||||||
|
handleSearch() |
||||||
|
}) |
||||||
|
|
||||||
|
const searchForm = ref({}) |
||||||
|
|
||||||
|
function handleReset() { |
||||||
|
searchForm.value = { |
||||||
|
sourceId: undefined, |
||||||
|
period: formatDate(new Date(), 'YYYY-MM') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function getOptions() {} |
||||||
|
|
||||||
|
const loading = ref(false) |
||||||
|
const tableList = ref([]) |
||||||
|
async function handleSearch() { |
||||||
|
loading.value = true |
||||||
|
try { |
||||||
|
const data = await reportApi.getList(removeNullField(searchForm.value)) |
||||||
|
tableList.value = data |
||||||
|
} finally { |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function parseRate(row) { |
||||||
|
return Number(row.rate * 100).toFixed(2) + '%' |
||||||
|
} |
||||||
|
|
||||||
|
function getSummaries({ columns, data }) { |
||||||
|
let sums = [] |
||||||
|
columns.forEach((column, index) => { |
||||||
|
if (index == 0) { |
||||||
|
sums[index] = '合计' |
||||||
|
return |
||||||
|
} |
||||||
|
const values = data.map((item) => Number(item[column.property])) |
||||||
|
if (!values.every((value) => Number.isNaN(value))) { |
||||||
|
if (column.property == 'rate') { |
||||||
|
const sum = data.reduce( |
||||||
|
(pre, cur) => ({ |
||||||
|
clueNum: pre.clueNum + cur.newClueNum, |
||||||
|
signNum: pre.signNum + cur.newClueSignNum |
||||||
|
}), |
||||||
|
{ clueNum: 0, signNum: 0 } |
||||||
|
) |
||||||
|
sums[index] = sum.clueNum > 0 ? ((sum.signNum * 100) / sum.clueNum).toFixed(2) + '%' : 0 |
||||||
|
} else { |
||||||
|
sums[index] = values.reduce((prev, curr) => { |
||||||
|
const value = Number(curr) |
||||||
|
if (!Number.isNaN(value)) { |
||||||
|
return prev + curr |
||||||
|
} else { |
||||||
|
return prev |
||||||
|
} |
||||||
|
}, 0) |
||||||
|
} |
||||||
|
} else { |
||||||
|
sums[index] = '' |
||||||
|
} |
||||||
|
}) |
||||||
|
return sums |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped></style> |
||||||
@ -0,0 +1,160 @@ |
|||||||
|
<template> |
||||||
|
<ContentWrap> |
||||||
|
<el-form ref="searchRef" :model="searchForm" :rules="searchRules" label-width="100px" inline> |
||||||
|
<el-form-item label="咨询日期" prop="consultDate"> |
||||||
|
<el-date-picker |
||||||
|
v-model="searchForm.consultDate" |
||||||
|
type="daterange" |
||||||
|
format="YYYY-MM-DD" |
||||||
|
value-format="YYYY-MM-DD" |
||||||
|
start-placeholder="选择日期" |
||||||
|
end-placeholder="选择日期" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="成交周期" prop="period"> |
||||||
|
<el-input-number |
||||||
|
v-model="searchForm.period" |
||||||
|
:min="1" |
||||||
|
:controls="false" |
||||||
|
style="width: 100%" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="渠道来源" prop="sourceId"> |
||||||
|
<el-tree-select |
||||||
|
v-model="searchForm.sourceId" |
||||||
|
:data="props.sourceOptions" |
||||||
|
:props="defaultProps" |
||||||
|
check-strictly |
||||||
|
node-key="sourceId" |
||||||
|
placeholder="请选择渠道" |
||||||
|
style="width: 100%" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button @click="handleSearch">查询</el-button> |
||||||
|
<el-button @click="handleReset">重置</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
<el-table |
||||||
|
v-loading="loading" |
||||||
|
:data="tableList" |
||||||
|
border |
||||||
|
stripe |
||||||
|
:summary-method="getSummaries" |
||||||
|
show-summary |
||||||
|
> |
||||||
|
<el-table-column prop="sourceName" label="渠道名称" /> |
||||||
|
<el-table-column prop="newClueSignNum" label="新线索成交数" sortable> |
||||||
|
<template #header> |
||||||
|
<Tooltip message="咨询日期在查询范围内，且在所查成交周期内成交的线索数" /> |
||||||
|
<span>新线索成交数</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="newClueNum" label="新线索总数" sortable> |
||||||
|
<template #header> |
||||||
|
<Tooltip message="咨询日期在查询范围内，咨询的线索数" /> <span>新线索总数</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="rate" label="新线索成交率" sortable :formatter="parseRate" /> |
||||||
|
</el-table> |
||||||
|
</ContentWrap> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup name="ChannelPeriod"> |
||||||
|
import * as reportApi from '@/api/home/reportChannel' |
||||||
|
import { removeNullField } from '@/utils' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
sourceOptions: { |
||||||
|
type: Array, |
||||||
|
default: () => [] |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const defaultProps = { |
||||||
|
children: 'children', |
||||||
|
label: 'sourceName', |
||||||
|
value: 'sourceId', |
||||||
|
isLeaf: 'leaf' |
||||||
|
} |
||||||
|
|
||||||
|
const searchRef = ref() |
||||||
|
|
||||||
|
const searchRules = { |
||||||
|
consultDate: { required: true, type: 'array', message: '请选择咨询日期', trigger: 'change,blur' }, |
||||||
|
period: { required: true, message: '请输入成交周期', trigger: 'blur' } |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
getOptions() |
||||||
|
handleReset() |
||||||
|
}) |
||||||
|
|
||||||
|
const searchForm = ref({}) |
||||||
|
|
||||||
|
function handleReset() { |
||||||
|
searchForm.value = { |
||||||
|
sourceId: undefined, |
||||||
|
period: 30, |
||||||
|
consultDate: [] |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function getOptions() {} |
||||||
|
|
||||||
|
const loading = ref(false) |
||||||
|
const tableList = ref([]) |
||||||
|
async function handleSearch() { |
||||||
|
try { |
||||||
|
const valid = await searchRef.value.validate() |
||||||
|
if (!valid) return |
||||||
|
loading.value = true |
||||||
|
const data = await reportApi.getList(removeNullField(searchForm.value)) |
||||||
|
tableList.value = data |
||||||
|
} finally { |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function parseRate(row) { |
||||||
|
return Number(row.rate * 100).toFixed(2) + '%' |
||||||
|
} |
||||||
|
|
||||||
|
function getSummaries({ columns, data }) { |
||||||
|
let sums = [] |
||||||
|
columns.forEach((column, index) => { |
||||||
|
if (index == 0) { |
||||||
|
sums[index] = '合计' |
||||||
|
return |
||||||
|
} |
||||||
|
const values = data.map((item) => Number(item[column.property])) |
||||||
|
if (!values.every((value) => Number.isNaN(value))) { |
||||||
|
if (column.property == 'rate') { |
||||||
|
const sum = data.reduce( |
||||||
|
(pre, cur) => ({ |
||||||
|
clueNum: pre.clueNum + cur.newClueNum, |
||||||
|
signNum: pre.signNum + cur.newClueSignNum |
||||||
|
}), |
||||||
|
{ clueNum: 0, signNum: 0 } |
||||||
|
) |
||||||
|
sums[index] = sum.clueNum > 0 ? ((sum.signNum * 100) / sum.clueNum).toFixed(2) + '%' : 0 |
||||||
|
} else { |
||||||
|
sums[index] = values.reduce((prev, curr) => { |
||||||
|
const value = Number(curr) |
||||||
|
if (!Number.isNaN(value)) { |
||||||
|
return prev + curr |
||||||
|
} else { |
||||||
|
return prev |
||||||
|
} |
||||||
|
}, 0) |
||||||
|
} |
||||||
|
} else { |
||||||
|
sums[index] = '' |
||||||
|
} |
||||||
|
}) |
||||||
|
return sums |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped></style> |
||||||
@ -0,0 +1,105 @@ |
|||||||
|
<template> |
||||||
|
<ContentWrap> |
||||||
|
<el-form :model="searchForm" label-width="0" inline> |
||||||
|
<el-form-item> |
||||||
|
<el-select v-model="searchForm.detailType" :clearable="false" filterable> |
||||||
|
<el-option |
||||||
|
v-for="item in detailTypeOptions" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item v-if="searchForm.detailType == 1"> |
||||||
|
<el-date-picker |
||||||
|
v-model="searchForm.month" |
||||||
|
type="month" |
||||||
|
format="YYYY-MM" |
||||||
|
value-format="YYYY-MM" |
||||||
|
placeholder="选择年月" |
||||||
|
:clearable="false" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item v-if="[2, 3].includes(searchForm.detailType)"> |
||||||
|
<el-date-picker |
||||||
|
v-model="searchForm.year" |
||||||
|
type="year" |
||||||
|
format="YYYY" |
||||||
|
value-format="YYYY" |
||||||
|
placeholder="选择年" |
||||||
|
:clearable="false" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button @click="handleSearch">查询</el-button> |
||||||
|
<el-button @click="handleReset">重置</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<el-table :data="tableList" border stripe> |
||||||
|
<el-table-column label="周期" prop="period" width="110px" /> |
||||||
|
<el-table-column prop="signNumber" label="成交数" /> |
||||||
|
<el-table-column prop="signPrice" label="成交额" /> |
||||||
|
<el-table-column prop="signPriceSequentialGrowth" label="成交额环比增长" /> |
||||||
|
<el-table-column prop="signPriceSamePeriodCompareGrowth" label="成交额同比增长" /> |
||||||
|
<el-table-column prop="profit" label="利润" /> |
||||||
|
<el-table-column prop="profitSequentialGrowth" label="利润环比增长" /> |
||||||
|
<el-table-column prop="profitSamePeriodCompareGrowth" label="利润同比增长" /> |
||||||
|
<el-table-column prop="notReceivedMoney" label="未到账金额" /> |
||||||
|
<el-table-column prop="receivedMoney" label="已到账金额" /> |
||||||
|
<el-table-column prop="waitSettleMoney" label="待结算金额" /> |
||||||
|
<el-table-column prop="settledMoney" label="已结算金额" /> |
||||||
|
<el-table-column prop="refundAmount" label="已退款金额" /> |
||||||
|
<el-table-column prop="remainMoney" label="结余" /> |
||||||
|
</el-table> |
||||||
|
</ContentWrap> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup name="SignListCard"> |
||||||
|
import { getList } from '@/api/home/reportSignDetail' |
||||||
|
import { formatDate } from '@/utils/formatTime' |
||||||
|
import { removeNullField } from '@/utils' |
||||||
|
|
||||||
|
const detailTypeOptions = [ |
||||||
|
{ label: '日明细', value: 1 }, |
||||||
|
{ label: '月明细', value: 2 }, |
||||||
|
{ label: '季明细', value: 3 }, |
||||||
|
{ label: '年明细', value: 4 } |
||||||
|
] |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
handleReset() |
||||||
|
handleSearch() |
||||||
|
}) |
||||||
|
|
||||||
|
const searchForm = ref({}) |
||||||
|
|
||||||
|
function handleReset() { |
||||||
|
searchForm.value = { |
||||||
|
detailType: 2, |
||||||
|
month: formatDate(new Date(), 'YYYY-MM'), |
||||||
|
year: new Date().getFullYear() + '' |
||||||
|
} |
||||||
|
} |
||||||
|
const loading = ref(false) |
||||||
|
const tableList = ref([]) |
||||||
|
async function handleSearch() { |
||||||
|
loading.value = true |
||||||
|
try { |
||||||
|
let params = { detailType: searchForm.value.detailType } |
||||||
|
if (params.detailType == 1) { |
||||||
|
const d = new Date(searchForm.value.month) |
||||||
|
params.month = d.getMonth() + 1 |
||||||
|
params.year = d.getFullYear() |
||||||
|
} else if ([2, 3].includes(params.detailType)) { |
||||||
|
params.year = searchForm.value.year |
||||||
|
} |
||||||
|
const data = await getList(removeNullField(params)) |
||||||
|
tableList.value = data |
||||||
|
} finally { |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped></style> |
||||||
@ -0,0 +1,195 @@ |
|||||||
|
<template> |
||||||
|
<ContentWrap> |
||||||
|
<div class="flex items-center"> |
||||||
|
<span class="mr-20px">成交概况</span> |
||||||
|
<el-dropdown> |
||||||
|
<el-button size="small" |
||||||
|
>{{ periodTypeOptions[periodType] }} <Icon icon="ep:arrow-down" |
||||||
|
/></el-button> |
||||||
|
<template #dropdown> |
||||||
|
<el-dropdown-menu> |
||||||
|
<el-dropdown-item |
||||||
|
v-for="(item, index) in periodTypeOptions" |
||||||
|
:key="index" |
||||||
|
@click="handleSearchTotalInfo(index)" |
||||||
|
> |
||||||
|
{{ item }} |
||||||
|
</el-dropdown-item> |
||||||
|
</el-dropdown-menu> |
||||||
|
</template> |
||||||
|
</el-dropdown> |
||||||
|
</div> |
||||||
|
<el-row :gutter="20" v-loading="infoLoading"> |
||||||
|
<el-col :span="8" :offset="0"> |
||||||
|
<div class="statistic-card"> |
||||||
|
<el-statistic :value="totalData.signNumber" title="成交数" /> |
||||||
|
<div |
||||||
|
class="statistic-footer" |
||||||
|
:class="periodType != 4 ? 'justify-between' : 'justify-center'" |
||||||
|
> |
||||||
|
<div class="footer-item"> |
||||||
|
<span>环比</span> |
||||||
|
<span :class="getColor(totalData.signNumberSequentialGrowth)"> |
||||||
|
{{ totalData.signNumberSequentialGrowth }}% |
||||||
|
<Icon class="ml-2px" :icon="getIcon(totalData.signNumberSequentialGrowth)" /> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="footer-item" v-if="periodType != 4"> |
||||||
|
<span>同比</span> |
||||||
|
<span :class="getColor(totalData.signNumberPeriodCompareGrowth)"> |
||||||
|
{{ totalData.signNumberPeriodCompareGrowth }}% |
||||||
|
<Icon class="ml-2px" :icon="getIcon(totalData.signNumberPeriodCompareGrowth)" /> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8" :offset="0"> |
||||||
|
<div class="statistic-card"> |
||||||
|
<el-statistic :value="totalData.signPrice" title="成交额" :precision="2" /> |
||||||
|
<div |
||||||
|
class="statistic-footer" |
||||||
|
:class="periodType != 4 ? 'justify-between' : 'justify-center'" |
||||||
|
> |
||||||
|
<div class="footer-item"> |
||||||
|
<span>环比</span> |
||||||
|
<span :class="getColor(totalData.signPriceSequentialGrowth)"> |
||||||
|
{{ totalData.signPriceSequentialGrowth }}% |
||||||
|
<Icon class="ml-2px" :icon="getIcon(totalData.signPriceSequentialGrowth)" /> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="footer-item" v-if="periodType != 4"> |
||||||
|
<span>同比</span> |
||||||
|
<span :class="getColor(totalData.signPriceSamePeriodCompareGrowth)"> |
||||||
|
{{ totalData.signPriceSamePeriodCompareGrowth }}% |
||||||
|
<Icon class="ml-2px" :icon="getIcon(totalData.signPriceSamePeriodCompareGrowth)" /> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8" :offset="0"> |
||||||
|
<div class="statistic-card"> |
||||||
|
<el-statistic :value="totalData.profit" title="利润" :precision="2" /> |
||||||
|
<div |
||||||
|
class="statistic-footer" |
||||||
|
:class="periodType != 4 ? 'justify-between' : 'justify-center'" |
||||||
|
> |
||||||
|
<div class="footer-item"> |
||||||
|
<span>环比</span> |
||||||
|
<span :class="getColor(totalData.profitSequentialGrowth)"> |
||||||
|
{{ totalData.profitSequentialGrowth }}% |
||||||
|
<Icon class="ml-2px" :icon="getIcon(totalData.profitSequentialGrowth)" /> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="footer-item" v-if="periodType != 4"> |
||||||
|
<span>同比</span> |
||||||
|
<span :class="getColor(totalData.profitSamePeriodCompareGrowth)"> |
||||||
|
{{ totalData.profitSamePeriodCompareGrowth }}% |
||||||
|
<Icon class="ml-2px" :icon="getIcon(totalData.profitSamePeriodCompareGrowth)" /> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</ContentWrap> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup name="SignTotalCard"> |
||||||
|
import { getInfo } from '@/api/home/reportSignDetail' |
||||||
|
|
||||||
|
const periodTypeOptions = ['本日', '本周', '本月', '本季', '本年'] |
||||||
|
|
||||||
|
const periodType = ref(2) |
||||||
|
const totalData = ref({}) |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
handleSearchTotalInfo(2) |
||||||
|
}) |
||||||
|
|
||||||
|
const infoLoading = ref(false) |
||||||
|
async function handleSearchTotalInfo(index) { |
||||||
|
periodType.value = index |
||||||
|
infoLoading.value = true |
||||||
|
try { |
||||||
|
const data = await getInfo({ periodType: periodType.value + 1 }) |
||||||
|
totalData.value = data |
||||||
|
} finally { |
||||||
|
infoLoading.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function getIcon(val) { |
||||||
|
if (val > 0) { |
||||||
|
return 'ep:caret-top' |
||||||
|
} else if (val < 0) { |
||||||
|
return 'ep:caret-bottom' |
||||||
|
} else { |
||||||
|
return 'ep:minus' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function getColor(val) { |
||||||
|
if (val > 0) { |
||||||
|
return 'green' |
||||||
|
} else if (val < 0) { |
||||||
|
return 'red' |
||||||
|
} else { |
||||||
|
return 'gley' |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.el-col { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
:global(h2#card-usage ~ .example .example-showcase) { |
||||||
|
background-color: var(--el-fill-color) !important; |
||||||
|
} |
||||||
|
|
||||||
|
.el-statistic { |
||||||
|
--el-statistic-content-font-size: 28px; |
||||||
|
} |
||||||
|
|
||||||
|
.statistic-card { |
||||||
|
height: 100%; |
||||||
|
// padding: 20px; |
||||||
|
border-radius: 4px; |
||||||
|
background-color: var(--el-bg-color-overlay); |
||||||
|
} |
||||||
|
|
||||||
|
.statistic-footer { |
||||||
|
margin: 16px auto 0; |
||||||
|
display: flex; |
||||||
|
// justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
font-size: 12px; |
||||||
|
color: var(--el-text-color-regular); |
||||||
|
width: 300px; |
||||||
|
} |
||||||
|
|
||||||
|
.statistic-footer .footer-item { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.statistic-footer .footer-item span:last-child { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
margin-left: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.green { |
||||||
|
color: var(--el-color-success); |
||||||
|
} |
||||||
|
.gley { |
||||||
|
color: var(--el-color-info); |
||||||
|
} |
||||||
|
.red { |
||||||
|
color: var(--el-color-error); |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,7 +1,13 @@ |
|||||||
<template> |
<template> |
||||||
<div>成交报表</div> |
<div> |
||||||
|
<SignTotalCard /> |
||||||
|
<SignListCard /> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script setup></script> |
<script setup name="SignReport"> |
||||||
|
import SignTotalCard from './Comp/SignTotalCard.vue' |
||||||
|
import SignListCard from './Comp/SignListCard.vue' |
||||||
|
</script> |
||||||
|
|
||||||
<style lang="scss" scoped></style> |
<style lang="scss" scoped></style> |
||||||
|
|||||||
Loading…
Reference in new issue