init
This commit is contained in:
913
src/views/Home/Index6.vue
Normal file
913
src/views/Home/Index6.vue
Normal file
@@ -0,0 +1,913 @@
|
||||
<template>
|
||||
<div class="w-100%">
|
||||
<div class="w-100% top-box">
|
||||
<div
|
||||
class="top-card bg-#fff .dark:bg-#1D1E1F! b-1px b-transparent .dark:b-#2A2B2C b-solid"
|
||||
v-for="(item, index) in topCardList"
|
||||
:class="item.border"
|
||||
:key="index"
|
||||
>
|
||||
<div class="card-box">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<Icon
|
||||
icon="akar-icons:info-fill"
|
||||
width="48"
|
||||
height="48"
|
||||
class="cursor-pointer"
|
||||
style="color: #bdbdbd"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-value .dark:c-#fff!">
|
||||
<span v-if="item.unit == '￥'">{{ item.unit }}</span>
|
||||
|
||||
<avue-count-up :end="item.num"></avue-count-up>
|
||||
<span v-if="item.unit == '家'" class="text-dw">{{ item.unit }}</span>
|
||||
</span>
|
||||
<div class="card-box mt-10px">
|
||||
<div class="" style="display: flex; align-items: center; height: 12px">
|
||||
<span v-if="item.type == 'pos'" class="icon">
|
||||
<Icon icon="ep:top" width="12" height="12" style="color: #f56c6c" />
|
||||
</span>
|
||||
<span v-else-if="item.type == 'neg'" class="icons">
|
||||
<Icon icon="ep:bottom" width="12" height="12" style="color: #19be6b" />
|
||||
</span>
|
||||
<span
|
||||
class="text-ts"
|
||||
:class="item.type == 'pos' ? 'text-zeng' : item.type == 'neg' ? 'text-jian' : ''"
|
||||
>{{ item.percentage }}</span
|
||||
>
|
||||
<span class="mr-5px text"> {{ item.tendency }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content .dark:b-#2A2B2C b-solid .dark:bg-#1D1E1F! b-1px b-transparent">
|
||||
<div class="content-left">
|
||||
<p class="content-title .dark:c-#fff!">商户外拓</p>
|
||||
<div class="jdt" v-for="(item, index) in jdtData" :key="index">
|
||||
<div class="jdt-top">
|
||||
<div style="display: flex; align-items: center" class="jdt-top-text">
|
||||
<span class="acitive" :class="'bj' + (index >= 3 ? 0 : index)"></span>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class=".dark:c-#fff!">
|
||||
<span class="num .dark:c-#fff!">{{ item.leftNum }}</span>
|
||||
<span class="num" style="font-size: 14px; font-weight: 400"
|
||||
>/{{ item.rightNum }}</span
|
||||
>
|
||||
<span class="jdt-top-text .dark:c-#fff!">{{ item.dw }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jdt-bottom demo-progress">
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="12"
|
||||
:percentage="item.jd"
|
||||
:status="item.type"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-center">
|
||||
<p class="content-title .dark:c-#fff!">商户分布</p>
|
||||
<div id="main" style="width: 380px; height: 300px"></div>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<p class="content-title .dark:c-#fff!">交易漏斗</p>
|
||||
<div id="ldMain" style="width: 380px; height: 280px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eCharts">
|
||||
<div
|
||||
class="eCharts-left .dark:b-#2A2B2C b-solid .dark:bg-#1D1E1F! b-1px b-transparent .dark:c-#fff!"
|
||||
>
|
||||
<div class="eCharts-title .dark:c-#fff!">
|
||||
<p>日交易额</p>
|
||||
<p style="font-size: 14px" class="font">￥6,000,000</p>
|
||||
</div>
|
||||
<div id="zxtMain" style="width: 380px; height: 300px"></div>
|
||||
</div>
|
||||
<div class="eCharts-center .dark:b-#2A2B2C b-solid .dark:bg-#1D1E1F! b-1px b-transparent">
|
||||
<div class="eCharts-title .dark:c-#fff!">
|
||||
<p>周订单量</p>
|
||||
<p style="font-size: 16px" class="font">10,000<span class="fontFamily">单</span></p>
|
||||
</div>
|
||||
<div id="zddlMain" style="width: 380px; height: 300px"></div>
|
||||
</div>
|
||||
<div
|
||||
class="eCharts-right .dark:b-#2A2B2C b-solid .dark:bg-#1D1E1F! b-1px b-transparent"
|
||||
style="position: relative"
|
||||
>
|
||||
<div style="position: absolute">
|
||||
<div class="eCharts-title .dark:c-#fff! w-100%">
|
||||
<p>开拓商家</p>
|
||||
<p style="margin-left: 235px; font-size: 14px">1,000家</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ktsjMain" style="width: 360px; height: 335px" class=".dark:c-#fff!"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eCharts-cjje .dark:b-#2A2B2C b-solid .dark:bg-#1D1E1F! b-1px b-transparent">
|
||||
<div class="cjje-top">
|
||||
<div class="cjje-top-left .dark:c-#fff!">成交金额趋势</div>
|
||||
<div class="cjje-top-right">
|
||||
<el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
|
||||
<el-radio-button
|
||||
v-for="(item, index) in cjjeTabList"
|
||||
:key="index"
|
||||
:value="item.label"
|
||||
@change="clickCjje(item.type)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cjjeMain" style="width: 1400px; height: 300px"></div>
|
||||
</div>
|
||||
<div
|
||||
class="eCharts-cjje .dark:b-#2A2B2C b-solid .dark:bg-#1D1E1F! b-1px b-transparent"
|
||||
style="padding-top: 0"
|
||||
>
|
||||
<div class="cjje-top">
|
||||
<div class="cjje-top-left .dark:c-#fff!" style="height: 60px; line-height: 60px">
|
||||
成交金额趋势
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Table></Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from 'echarts'
|
||||
import Table from './components/table.vue'
|
||||
import { getTableList, batchGetTableList } from '@/api/design/report'
|
||||
|
||||
defineOptions({ name: 'Home6' })
|
||||
|
||||
interface TopCardList {
|
||||
dictionary: string
|
||||
border: string
|
||||
tendency: string
|
||||
title: string
|
||||
unit: string
|
||||
type?: string
|
||||
num?: string
|
||||
percentage?: string
|
||||
}
|
||||
|
||||
interface JdtData {
|
||||
dictionary: string
|
||||
title: string
|
||||
dw: string
|
||||
jd?: number
|
||||
type: any
|
||||
leftNum?: number
|
||||
rightNum?: number
|
||||
}
|
||||
|
||||
interface OptionSeriesData {
|
||||
name: string
|
||||
value: number
|
||||
}
|
||||
|
||||
type Ktsj = [string, string | number, string | number]
|
||||
|
||||
let topCardList = ref<TopCardList[]>([
|
||||
{ title: '商户总数', dictionary: 'shzs', tendency: '环比上周', border: '', unit: '家' },
|
||||
{ title: '开拓中商户', dictionary: 'ktzsh', tendency: '环比上周', border: '', unit: '家' },
|
||||
{ title: '总访问量', dictionary: 'zfwl', tendency: '环比上周', border: '', unit: '' },
|
||||
{ title: '总交易额', dictionary: 'zjye', tendency: '环比上周', border: '', unit: '￥' },
|
||||
{ title: '总订单量', dictionary: 'zddl', tendency: '环比上周', border: '', unit: '' },
|
||||
{ title: '客单价', dictionary: 'kdj', tendency: '环比上周', border: '', unit: '￥' }
|
||||
])
|
||||
|
||||
const jdtData = ref<JdtData[]>([
|
||||
{ title: '已计划', dictionary: 'yjh', dw: '家', type: '' },
|
||||
{ title: '已完成', dictionary: 'ywc', dw: '家', type: 'exception' },
|
||||
{ title: '开拓中', dictionary: 'ktz', dw: '家', type: 'warning' },
|
||||
{ title: '洽谈中', dictionary: 'qtz', dw: '家', type: '' }
|
||||
])
|
||||
|
||||
//环形图
|
||||
let currentIndex = ref(0) // 当前高亮图形在饼图数据中的下标
|
||||
const highlightPie = (option, myChart) => {
|
||||
// 遍历饼图数据，取消所有图形的高亮效果
|
||||
for (var idx in option) {
|
||||
myChart.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 0,
|
||||
dataIndex: idx
|
||||
})
|
||||
}
|
||||
// 高亮当前图形
|
||||
myChart.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex.value
|
||||
})
|
||||
|
||||
}
|
||||
// 饼图自动轮播
|
||||
const handleChartLoop = (option, myChart) => {
|
||||
if (!myChart) {
|
||||
return
|
||||
}
|
||||
highlightPie(option, myChart)
|
||||
// 用户鼠标悬浮到某一图形时，高亮鼠标悬浮的图形
|
||||
myChart.on('mouseover', (params) => {
|
||||
currentIndex.value = params.dataIndex
|
||||
highlightPie(option, myChart)
|
||||
})
|
||||
}
|
||||
let optionSeriesData = ref<OptionSeriesData[]>([])
|
||||
const option = reactive({
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
left: 'right',
|
||||
orient: 'vertical',
|
||||
align: 'left',
|
||||
top: 'center',
|
||||
icon: 'circle',
|
||||
itemGap: 25,
|
||||
// 图例文本格式化
|
||||
formatter: function (name) {
|
||||
// 在这里可以获取到对应数据项的值
|
||||
var data = optionSeriesData.value
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i].name === name) {
|
||||
return name + ' ' + data[i].value
|
||||
}
|
||||
}
|
||||
return name
|
||||
}
|
||||
},
|
||||
color: ['#50b5ff', '#ffc542', '#ff7474', '#50b5ff', '#8167f5'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
formatter: '{d}%\n\n{b}',
|
||||
fontSize: 20
|
||||
},
|
||||
legendHoverLink: false,
|
||||
center: ['30%', '45%'],
|
||||
data: [],
|
||||
labelLine: {
|
||||
show: false // 关闭指示线
|
||||
},
|
||||
radius: ['48%', '70%'],
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
//漏斗
|
||||
const ldOption = reactive({
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
top: 20,
|
||||
bottom: 60,
|
||||
width: '75%',
|
||||
min: 0,
|
||||
max: 50000,
|
||||
minSize: '30%',
|
||||
maxSize: '70%',
|
||||
sort: 'descending',
|
||||
gap: 0,
|
||||
color: ['#5b8ff9', '#5ad8a6', '#5d7092', '#f6bd16'],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{b} : {c}'
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 0
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
//日交易额
|
||||
let dailyTurnoverXAxis = ref<string[]>([])
|
||||
let dailyTurnoverSeries = ref<number[]>([])
|
||||
const zxtOption = reactive({
|
||||
grid: {
|
||||
top: '10%', // 调整顶部的空白间距，也可以使用像素值，例如 '50px'
|
||||
bottom: '20%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dailyTurnoverXAxis.value,
|
||||
axisTick: {
|
||||
show: false // 设置X轴不显示刻度
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
offset: -7,
|
||||
max: '50000',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 12 // 增大字体大小
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: dailyTurnoverSeries.value,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: false, // 是否平滑曲线显示
|
||||
lineStyle: {
|
||||
color: '#51d351', // 折线颜色
|
||||
width: 2 // 折线宽度
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 周订单量
|
||||
let weeklyOrdersXAxis = ref<string[]>([])
|
||||
let weeklyOrdersSeries = ref<number[]>([])
|
||||
const zddlOption = reactive({
|
||||
grid: {
|
||||
top: '10%', // 调整顶部的空白间距，也可以使用像素值，例如 '50px'
|
||||
bottom: '20%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: weeklyOrdersXAxis.value,
|
||||
axisTick: {
|
||||
show: false // 设置X轴不显示刻度
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: weeklyOrdersSeries.value,
|
||||
type: 'bar',
|
||||
barWidth: '35%',
|
||||
itemStyle: {
|
||||
// 设置柱形图的颜色
|
||||
color: '#409eff',
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
//开拓商家
|
||||
let expansionNumberDataset = ref<Ktsj[]>([['product', '目标开拓数', '实际开拓数']])
|
||||
const ktsjOption = reactive({
|
||||
theme: 'dark',
|
||||
grid: {
|
||||
top: '15%', // 调整顶部的空白间距，也可以使用像素值，例如 '50px'
|
||||
bottom: '20%'
|
||||
},
|
||||
legend: {
|
||||
icon: 'circle' // 设置图例标记为圆形
|
||||
},
|
||||
tooltip: {},
|
||||
dataset: {
|
||||
source: expansionNumberDataset.value
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false // 设置X轴不显示刻度
|
||||
}
|
||||
},
|
||||
yAxis: {},
|
||||
// Declare several bar series, each will be mapped
|
||||
// to a column of dataset.source by default.
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: '20%',
|
||||
itemStyle: {
|
||||
// 设置柱形图的颜色
|
||||
color: '#52c1f5',
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: '20%',
|
||||
itemStyle: {
|
||||
// 设置柱形图的颜色
|
||||
color: '#ff7a8c',
|
||||
borderRadius: [5, 5, 0, 0]
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
//成交金额趋势
|
||||
const tabPosition = ref('最近1周')
|
||||
const cjjeTabList = ref([
|
||||
{
|
||||
label: '最近1周',
|
||||
type: 1
|
||||
},
|
||||
{
|
||||
label: '最近30天',
|
||||
type: 2
|
||||
},
|
||||
{
|
||||
label: '最近半年',
|
||||
type: 3
|
||||
},
|
||||
{
|
||||
label: '最近1年',
|
||||
type: 4
|
||||
}
|
||||
])
|
||||
let transactionAmountXAxis = ref<string[]>([])
|
||||
let transactionAmountSeries1 = ref<string[]>([])
|
||||
let transactionAmountSeries2 = ref<string[]>([])
|
||||
const cjjeOption = ref({
|
||||
grid: {
|
||||
left: '4%',
|
||||
top: '5%', // 调整顶部的空白间距，也可以使用像素值，例如 '50px'
|
||||
bottom: '20%'
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
data: ['线上成交', '线下成交'],
|
||||
icon: 'rectangle'
|
||||
},
|
||||
xAxis: {
|
||||
data: transactionAmountXAxis.value
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
name: '线上成交',
|
||||
data: transactionAmountSeries1.value,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: false,
|
||||
areaStyle: {
|
||||
color: '#b2e0ff',
|
||||
opacity: 0.8
|
||||
}
|
||||
// symbol: 'circle',
|
||||
},
|
||||
{
|
||||
name: '线下成交',
|
||||
data: transactionAmountSeries2.value,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: false,
|
||||
areaStyle: {
|
||||
color: '#ffd7dc',
|
||||
opacity: 0.8
|
||||
}
|
||||
// symbol: 'circle',
|
||||
}
|
||||
]
|
||||
})
|
||||
const clickCjje = async (type) => {
|
||||
let res = await getTableList('example_trader_transaction_amount', { type: type })
|
||||
transactionAmountXAxis.value = []
|
||||
transactionAmountSeries1.value = []
|
||||
transactionAmountSeries2.value = []
|
||||
res.records.forEach((ele) => {
|
||||
transactionAmountXAxis.value.push(ele.sj)
|
||||
transactionAmountSeries1.value.push(ele.xscj)
|
||||
transactionAmountSeries2.value.push(ele.xxcj)
|
||||
})
|
||||
cjjeOption.value.xAxis.data = transactionAmountXAxis.value
|
||||
cjjeOption.value.series[0].data = transactionAmountSeries1.value
|
||||
cjjeOption.value.series[1].data = transactionAmountSeries2.value
|
||||
nextTick(() => {
|
||||
const cjjeChart = echarts.init(document.getElementById('cjjeMain'))
|
||||
cjjeChart.setOption(cjjeOption.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 通用函数，用于初始化 ECharts 图表
|
||||
const initEcharts = (domElementId, option) => {
|
||||
const domElement = document.getElementById(domElementId)
|
||||
if (domElement) {
|
||||
const chart = echarts.init(domElement)
|
||||
domElement.removeAttribute('_echarts_instance_')
|
||||
chart.setOption(option)
|
||||
if (domElementId == 'main') {
|
||||
handleChartLoop(option.series[0].data, chart)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const echartFun = () => {
|
||||
initEcharts('ldMain', ldOption)
|
||||
initEcharts('zxtMain', zxtOption)
|
||||
initEcharts('zddlMain', zddlOption)
|
||||
initEcharts('ktsjMain', ktsjOption)
|
||||
initEcharts('main', option)
|
||||
initEcharts('cjjeMain', cjjeOption.value)
|
||||
}
|
||||
|
||||
const init = async () => {
|
||||
let oneres = await batchGetTableList(
|
||||
'example_trader_count_data,example_trader_expansion,example_trader_merchant_distribution,example_trader_transaction_funneldiagram'
|
||||
)
|
||||
|
||||
topCardList.value = topCardList.value.map((item, index) => {
|
||||
const cardData = oneres.example_trader_count_data.records[0][item.dictionary]
|
||||
item = { ...item, ...cardData, border: 'border' + index }
|
||||
return item
|
||||
})
|
||||
jdtData.value = jdtData.value.map((item) => {
|
||||
const cardData = oneres.example_trader_expansion.records[0][item.dictionary]
|
||||
item = { ...item, ...cardData, jd: (cardData.leftNum / cardData.rightNum) * 100 }
|
||||
return item
|
||||
})
|
||||
option.series[0].data = oneres.example_trader_merchant_distribution.records
|
||||
optionSeriesData.value = oneres.example_trader_merchant_distribution.records
|
||||
ldOption.series[0].data = oneres.example_trader_transaction_funneldiagram?.records
|
||||
|
||||
let endres = await batchGetTableList(
|
||||
'example_trader_daily_turnover,example_trader_weekly_orders,example_trader_expansion_number,example_trader_transaction_amount'
|
||||
)
|
||||
|
||||
endres.example_trader_daily_turnover?.records.forEach((ele) => {
|
||||
dailyTurnoverXAxis.value.push(ele.sj)
|
||||
dailyTurnoverSeries.value.push(ele.data)
|
||||
})
|
||||
zxtOption.xAxis.data = dailyTurnoverXAxis.value
|
||||
zxtOption.series[0].data = dailyTurnoverSeries.value
|
||||
endres.example_trader_weekly_orders.records.forEach((ele) => {
|
||||
weeklyOrdersXAxis.value.push(ele.sj)
|
||||
weeklyOrdersSeries.value.push(ele.data)
|
||||
})
|
||||
zddlOption.xAxis.data = weeklyOrdersXAxis.value
|
||||
zddlOption.series[0].data = weeklyOrdersSeries.value
|
||||
expansionNumberDataset.value.push(
|
||||
...endres.example_trader_expansion_number.records.map((item) => [
|
||||
item.sj,
|
||||
item.mbkts,
|
||||
item.sjkts
|
||||
])
|
||||
)
|
||||
endres.example_trader_transaction_amount.records.forEach((ele) => {
|
||||
transactionAmountXAxis.value.push(ele.sj)
|
||||
transactionAmountSeries1.value.push(ele.xscj)
|
||||
transactionAmountSeries2.value.push(ele.xxcj)
|
||||
})
|
||||
cjjeOption.value.xAxis.data = transactionAmountXAxis.value
|
||||
cjjeOption.value.series[0].data = transactionAmountSeries1.value
|
||||
cjjeOption.value.series[1].data = transactionAmountSeries2.value
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await init()
|
||||
echartFun()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.real-time-data {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
align-items: flex-end;
|
||||
|
||||
.title {
|
||||
// color: #666666;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.top-box {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-card {
|
||||
flex-basis: calc(16.6% - 12px);
|
||||
flex-shrink: 1;
|
||||
min-width: 168px;
|
||||
padding: 15px;
|
||||
// border-radius: 10px;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
box-sizing: border-box;
|
||||
|
||||
.card-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tendency {
|
||||
width: 24px;
|
||||
height: 17px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.text-ts {
|
||||
margin: 0 3px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 1px;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.text-value {
|
||||
font-family: 'Montserrat Bold', Montserrat, sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
line-height: 32px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card-box.top {
|
||||
.text {
|
||||
color: rgb(7 183 138);
|
||||
}
|
||||
|
||||
.ascent {
|
||||
background-image: url('@/assets/svgs/top.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.card-box.bottom {
|
||||
.text {
|
||||
color: rgb(250 80 135);
|
||||
}
|
||||
|
||||
.descent {
|
||||
background-image: url('@/assets/svgs/bottom.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.text-dw {
|
||||
margin-left: 8px;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
padding: 10px 30px 0;
|
||||
margin-top: 20px;
|
||||
background: #fff;
|
||||
justify-content: space-between;
|
||||
|
||||
p {
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.content-title {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.content-left {
|
||||
width: 30%;
|
||||
|
||||
.jdt {
|
||||
margin-top: 20px;
|
||||
|
||||
.jdt-top {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
.jdt-top-text {
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-family: 'Montserrat Bold', Montserrat, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.acitive {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 5px;
|
||||
// background: red;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.jdt-bottom {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-center {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.content-right {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.eCharts {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
justify-content: space-between;
|
||||
|
||||
.eCharts-title {
|
||||
display: flex;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
justify-content: space-between;
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.eCharts-left {
|
||||
width: 27.5%;
|
||||
padding: 10px 30px 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.eCharts-center {
|
||||
width: 27.5%;
|
||||
padding: 10px 30px 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.eCharts-right {
|
||||
width: 27.5%;
|
||||
padding: 10px 30px 0;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.eCharts-cjje {
|
||||
padding: 10px 30px 30px;
|
||||
margin-top: 20px;
|
||||
background: #fff;
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cjje-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.cjje-top-left {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
color: #686a6d;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border0 {
|
||||
border-left: 5px solid #fb6260;
|
||||
}
|
||||
|
||||
.border1 {
|
||||
border-left: 5px solid #09f;
|
||||
}
|
||||
|
||||
.border2 {
|
||||
border-left: 5px solid #8167f5;
|
||||
}
|
||||
|
||||
.border3 {
|
||||
border-left: 5px solid #51d351;
|
||||
}
|
||||
|
||||
.border4 {
|
||||
border-left: 5px solid #ff7a8c;
|
||||
}
|
||||
|
||||
.border5 {
|
||||
border-left: 5px solid #ffa94c;
|
||||
}
|
||||
|
||||
.text-zeng {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.text-jian {
|
||||
color: #19be6b;
|
||||
}
|
||||
|
||||
.demo-progress .el-progress--line {
|
||||
max-width: 600px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.bj0 {
|
||||
background: #409eff;
|
||||
}
|
||||
|
||||
.bj1 {
|
||||
background: #f56c6c;
|
||||
}
|
||||
|
||||
.bj2 {
|
||||
background: #e6a23c;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.font {
|
||||
font-family: 'Montserrat Bold', Montserrat, sans-serif !important;
|
||||
}
|
||||
|
||||
.fontFamily {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif !important;
|
||||
}
|
||||
|
||||
::v-deep .el-progress-bar__innerText {
|
||||
margin-top: -8px !important;
|
||||
line-height: 12px !important;
|
||||
}
|
||||
|
||||
::v-deep .style {
|
||||
top: -50px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user