feat:政务首页
This commit is contained in:
parent
c3e044f6e9
commit
1f726c42f0
92
main/src/components/custom-echart-radar/index.vue
Normal file
92
main/src/components/custom-echart-radar/index.vue
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="chartRef" :style="{ height, width }"></div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { ref, reactive, watchEffect } from 'vue';
|
||||||
|
import { cloneDeep } from 'lodash';
|
||||||
|
import { useEcharts } from '../../hooks/useEcharts';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CustomEchartRadar',
|
||||||
|
props: {
|
||||||
|
chartData: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
option: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'radar',
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%',
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: 'calc(100vh - 78px)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ['click'],
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const chartRef = ref(null);
|
||||||
|
const { setOptions, getInstance } = useEcharts(chartRef);
|
||||||
|
const option = reactive({
|
||||||
|
title: {
|
||||||
|
text: '',
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
radar: {},
|
||||||
|
tooltip: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'radar',
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
props.chartData && initCharts();
|
||||||
|
});
|
||||||
|
|
||||||
|
function initCharts() {
|
||||||
|
if (props.option) {
|
||||||
|
Object.assign(option, cloneDeep(props.option));
|
||||||
|
}
|
||||||
|
let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
|
||||||
|
let indicator = Array.from(
|
||||||
|
new Set(
|
||||||
|
props.chartData.map((item) => {
|
||||||
|
let { name, max } = item;
|
||||||
|
return { name, max };
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
let data = [];
|
||||||
|
typeArr.forEach((type) => {
|
||||||
|
const radarStyle = props.option?.radarStyle ?? {};
|
||||||
|
let obj = { name: type, ...radarStyle };
|
||||||
|
let chartArr = props.chartData.filter((item) => type === item.type);
|
||||||
|
obj['value'] = chartArr.map((item) => item.value);
|
||||||
|
data.push(obj);
|
||||||
|
});
|
||||||
|
option.radar.indicator = indicator;
|
||||||
|
option.series[0]['data'] = data;
|
||||||
|
setOptions(option);
|
||||||
|
getInstance()?.off('click', onClick);
|
||||||
|
getInstance()?.on('click', onClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClick(params) {
|
||||||
|
emit('click', params);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { chartRef };
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -1,25 +1,34 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="`custom-table-tree ${shadow ? 'custom-table-tree__shadow' : ''}`">
|
<div :class="`custom-table-tree ${shadow ? 'custom-table-tree__shadow' : ''}`">
|
||||||
<div v-if="title" class="title">{{ title }}</div>
|
<div v-if="title" class="title">{{ title }}</div>
|
||||||
<el-tree
|
<div class="panel">
|
||||||
:data="data"
|
<el-input v-if="filter" v-model="state.keyword" clearable placeholder="请输入关键字筛选" class="panel-filter" />
|
||||||
:node-key="option.nodeKey"
|
<el-tree
|
||||||
:show-checkbox="option.showCheckbox"
|
ref="treeRef"
|
||||||
:default-expanded-keys="option.defaultExpandedKeys"
|
:data="state.list"
|
||||||
:default-checked-keys="option.defaultCheckedKeys"
|
:node-key="option.nodeKey"
|
||||||
:props="option.props ?? option.defaultProps"
|
:show-checkbox="option.showCheckbox"
|
||||||
@node-click="handleNodeClick"
|
:default-expanded-keys="option.defaultExpandedKeys"
|
||||||
>
|
:default-checked-keys="option.defaultCheckedKeys"
|
||||||
<template #default="{ data: rows }">
|
:default-expand-all="option.defaultExpandAll"
|
||||||
<slot :data="rows"></slot>
|
:props="option.props ?? option.defaultProps"
|
||||||
</template>
|
:filter-node-method="filterNodeMethod"
|
||||||
</el-tree>
|
@node-click="handleNodeClick"
|
||||||
|
>
|
||||||
|
<template #default="{ data: rows }">
|
||||||
|
<slot :data="rows"></slot>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup name="custom-table-tree">
|
<script setup name="custom-table-tree">
|
||||||
|
import { reactive, ref, watch } from 'vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
title: { type: String, default: '' },
|
title: { type: String, default: '' },
|
||||||
shadow: { type: Boolean, default: true },
|
shadow: { type: Boolean, default: true },
|
||||||
|
filter: { type: Boolean, default: false },
|
||||||
data: { type: Array, default: () => [] },
|
data: { type: Array, default: () => [] },
|
||||||
option: {
|
option: {
|
||||||
type: Object,
|
type: Object,
|
||||||
@ -34,12 +43,42 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
defaultExpandedKeys: [],
|
defaultExpandedKeys: [],
|
||||||
defaultCheckedKeys: [],
|
defaultCheckedKeys: [],
|
||||||
|
defaultExpandAll: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const emit = defineEmits(['node-click']);
|
const emit = defineEmits(['node-click']);
|
||||||
|
|
||||||
|
const treeRef = ref(null);
|
||||||
|
const state = reactive({
|
||||||
|
keyword: '',
|
||||||
|
list: [],
|
||||||
|
});
|
||||||
|
const label = props.option.props?.label ?? 'label';
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
(val) => {
|
||||||
|
state.list = val;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => state.keyword,
|
||||||
|
(val) => {
|
||||||
|
treeRef.value.filter(val);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const filterNodeMethod = (value, data) => {
|
||||||
|
if (!value) return true;
|
||||||
|
return data[label].includes(value);
|
||||||
|
};
|
||||||
|
|
||||||
const handleNodeClick = (data, node) => {
|
const handleNodeClick = (data, node) => {
|
||||||
emit('node-click', data, node);
|
emit('node-click', data, node);
|
||||||
};
|
};
|
||||||
@ -48,6 +87,7 @@ const handleNodeClick = (data, node) => {
|
|||||||
.custom-table-tree {
|
.custom-table-tree {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
min-height: 400px;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
@include flex-column();
|
@include flex-column();
|
||||||
|
|
||||||
@ -65,8 +105,15 @@ const handleNodeClick = (data, node) => {
|
|||||||
background: var(--el-color-primary);
|
background: var(--el-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-tree {
|
.panel {
|
||||||
padding: 16px 10px 10px;
|
padding: 16px 10px 10px;
|
||||||
|
|
||||||
|
&-filter {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,6 +8,7 @@ import CustomRichEditor from './custom-rich-editor';
|
|||||||
import CustomEchartBar from './custom-echart-bar';
|
import CustomEchartBar from './custom-echart-bar';
|
||||||
import CustomEchartPie from './custom-echart-pie';
|
import CustomEchartPie from './custom-echart-pie';
|
||||||
import CustomEchartLine from './custom-echart-line';
|
import CustomEchartLine from './custom-echart-line';
|
||||||
|
import CustomEchartRadar from './custom-echart-radar';
|
||||||
import CustomEchartMixin from './custom-echart-mixin';
|
import CustomEchartMixin from './custom-echart-mixin';
|
||||||
import customEchartPictorialBar from './custom-echart-pictorial-bar';
|
import customEchartPictorialBar from './custom-echart-pictorial-bar';
|
||||||
import CustomEchartLineLine from './custom-echart-line-line';
|
import CustomEchartLineLine from './custom-echart-line-line';
|
||||||
@ -26,6 +27,7 @@ export {
|
|||||||
CustomEchartBar,
|
CustomEchartBar,
|
||||||
CustomEchartPie,
|
CustomEchartPie,
|
||||||
CustomEchartLine,
|
CustomEchartLine,
|
||||||
|
CustomEchartRadar,
|
||||||
CustomEchartMixin,
|
CustomEchartMixin,
|
||||||
customEchartPictorialBar,
|
customEchartPictorialBar,
|
||||||
CustomEchartLineLine,
|
CustomEchartLineLine,
|
||||||
|
|||||||
@ -1,6 +1,453 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="width: 100%; height: 100%">
|
<div v-loading="state.loading" class="statistic">
|
||||||
<div></div>
|
<el-row :gutter="16" style="margin-bottom: 20px">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card shadow="hover" class="statistic-data">
|
||||||
|
<b class="statistic-title">综合数据统计</b>
|
||||||
|
<el-row :gutter="16" style="margin-top: 40px">
|
||||||
|
<el-col :span="8" class="text-center">
|
||||||
|
<p>农村人口（万人）</p>
|
||||||
|
<avue-count-up end="27.88" :decimals="2" class="text-primary" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8" class="text-center">
|
||||||
|
<p>耕地面积（万亩）</p>
|
||||||
|
<avue-count-up end="103.88" :decimals="2" class="text-warning" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8" class="text-center">
|
||||||
|
<p>农业总产值（亿元）</p>
|
||||||
|
<avue-count-up end="92.88" :decimals="2" class="text-danger" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24" class="text-center" style="margin-top: 90px">
|
||||||
|
<p>品牌农产品销售情况</p>
|
||||||
|
<avue-count-up end="17.88" :decimals="2" class="text-success" />
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<custom-echart-bar :chart-data="state.areaData" height="400px" :option="state.areaOption" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row :gutter="16" style="margin-bottom: 20px">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<custom-echart-bar :chart-data="state.breedingData" height="400px" :option="state.breedingOption" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<custom-echart-radar :chart-data="state.inputsData" height="400px" :option="state.inputsOption" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row :gutter="16" style="margin-bottom: 20px">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<custom-echart-pie :chart-data="state.businessData" height="400px" :option="state.businessOption" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<custom-echart-mixin :chart-data="state.codingData" :option="state.codingOption" height="400px" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup name="home"></script>
|
<script setup>
|
||||||
|
import { reactive } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
import { sleep } from '@/utils';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const app = useApp();
|
||||||
|
const state = reactive({
|
||||||
|
areaOption: {
|
||||||
|
// color: ['#fed500'],
|
||||||
|
title: {
|
||||||
|
text: '土地分别数据统计',
|
||||||
|
textStyle: {
|
||||||
|
color: '#333',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
name: '区域',
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '亩',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: function (params) {
|
||||||
|
return `${params.name}：${params.value}亩`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
barStyle: {
|
||||||
|
barWidth: 50,
|
||||||
|
showBackground: true,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaData: [
|
||||||
|
{ value: 230, name: '耿马镇' },
|
||||||
|
{ value: 165, name: '勐永镇' },
|
||||||
|
{ value: 217, name: '勐撒镇' },
|
||||||
|
{ value: 200, name: '孟定镇' },
|
||||||
|
{ value: 305, name: '大兴乡' },
|
||||||
|
],
|
||||||
|
breedingOption: {
|
||||||
|
color: ['#41b879', '#fed500'],
|
||||||
|
title: {
|
||||||
|
text: '种养殖综合数据统计',
|
||||||
|
textStyle: {
|
||||||
|
color: '#333',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: (params) => {
|
||||||
|
const find = state.breedingData.find((item) => item.name === params.name);
|
||||||
|
return `${params.name}：${params.value}${find.unit}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
barStyle: {
|
||||||
|
barWidth: 50,
|
||||||
|
showBackground: true,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
breedingData: [
|
||||||
|
{ value: 230, name: '种植面积', unit: '亩' },
|
||||||
|
{ value: 165, name: '养殖面积', unit: '亩' },
|
||||||
|
{ value: 217, name: '种植基地', unit: '个' },
|
||||||
|
{ value: 200, name: '养殖基地', unit: '个' },
|
||||||
|
],
|
||||||
|
inputsOption: {
|
||||||
|
color: ['#ffd500'],
|
||||||
|
title: {
|
||||||
|
text: '投入品数据统计',
|
||||||
|
textStyle: {
|
||||||
|
color: '#333',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: { show: false },
|
||||||
|
radar: {
|
||||||
|
indicator: [],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius: 140,
|
||||||
|
startAngle: 90,
|
||||||
|
splitNumber: 4,
|
||||||
|
shape: 'circle',
|
||||||
|
axisName: {
|
||||||
|
formatter: '{value}',
|
||||||
|
// formatter: (params) => {
|
||||||
|
// const find = state.inputsData.find((item) => item.name === params);
|
||||||
|
// return `${params}：${find.value}${find.unit}`;
|
||||||
|
// },
|
||||||
|
color: '#333',
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
areaStyle: {
|
||||||
|
color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||||
|
shadowBlur: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(211, 253, 250, 0.8)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(211, 253, 250, 0.8)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
radarStyle: {
|
||||||
|
areaStyle: {},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: (params) => {
|
||||||
|
let str = params.marker + params.name + '<br/>';
|
||||||
|
state.inputsData.forEach((item) => {
|
||||||
|
str += item.name + '：' + item.value + item.unit + '<br/>';
|
||||||
|
});
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
inputsData: [
|
||||||
|
{ value: 75, name: '农药使用', type: '投入品', max: 100, unit: '吨' },
|
||||||
|
{ value: 38, name: '农机使用', type: '投入品', max: 100, unit: '台' },
|
||||||
|
{ value: 74, name: '种源使用', type: '投入品', max: 100, unit: '万吨' },
|
||||||
|
{ value: 55, name: '兽药使用', type: '投入品', max: 100, unit: '千克' },
|
||||||
|
{ value: 65, name: '肥料使用', type: '投入品', max: 100, unit: '吨' },
|
||||||
|
],
|
||||||
|
businessOption: {
|
||||||
|
title: {
|
||||||
|
text: '经营主体分类统计',
|
||||||
|
textStyle: {
|
||||||
|
color: '#333',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
right: '0',
|
||||||
|
top: 'middle',
|
||||||
|
orient: 'vertical',
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
color: '#333',
|
||||||
|
// formatter: ({ data }) => {
|
||||||
|
// return data.name + '：' + data.value;
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: (params) => {
|
||||||
|
return `${params.name}：${params.value}家`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: [80, 140],
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
businessData: [
|
||||||
|
{ value: 28, name: '个体户' },
|
||||||
|
{ value: 358, name: '村集体' },
|
||||||
|
{ value: 217, name: '合作社' },
|
||||||
|
{ value: 128, name: '农资企业' },
|
||||||
|
{ value: 22, name: '种源企业' },
|
||||||
|
{ value: 41, name: '生产加工企业' },
|
||||||
|
],
|
||||||
|
codingOption: {
|
||||||
|
color: ['#41b879', '#ffd500'],
|
||||||
|
title: {
|
||||||
|
text: '溯源赋码扫码统计',
|
||||||
|
textStyle: {
|
||||||
|
color: '#333',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '次',
|
||||||
|
},
|
||||||
|
barStyle: {
|
||||||
|
barWidth: 50,
|
||||||
|
},
|
||||||
|
// tooltip: {
|
||||||
|
// formatter: (params) => {
|
||||||
|
// const arr = state.codingData.filter((item) => item.name === params.name);
|
||||||
|
// return `${params.name}<br/>
|
||||||
|
// ${arr[0].type}：${arr[0].value}次<br/>
|
||||||
|
// ${arr[1].type}：${arr[1].value}次`;
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
codingData: [
|
||||||
|
{
|
||||||
|
name: '一月',
|
||||||
|
value: 40,
|
||||||
|
type: '赋码',
|
||||||
|
seriesType: 'bar',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '一月',
|
||||||
|
value: 60,
|
||||||
|
type: '扫码',
|
||||||
|
seriesType: 'line',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '二月',
|
||||||
|
value: 100,
|
||||||
|
type: '赋码',
|
||||||
|
seriesType: 'bar',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '二月',
|
||||||
|
value: 120,
|
||||||
|
type: '扫码',
|
||||||
|
seriesType: 'line',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '三月',
|
||||||
|
value: 80,
|
||||||
|
type: '赋码',
|
||||||
|
seriesType: 'bar',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '三月',
|
||||||
|
value: 124,
|
||||||
|
type: '扫码',
|
||||||
|
seriesType: 'line',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '四月',
|
||||||
|
value: 200,
|
||||||
|
type: '赋码',
|
||||||
|
seriesType: 'bar',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '四月',
|
||||||
|
value: 220,
|
||||||
|
type: '扫码',
|
||||||
|
seriesType: 'line',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
loading: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载
|
||||||
|
const loadData = async () => {
|
||||||
|
state.loading = true;
|
||||||
|
await sleep(500);
|
||||||
|
state.loading = false;
|
||||||
|
// GetEntityList(state.query)
|
||||||
|
// .then((res) => {
|
||||||
|
// if (res.code === 200) {
|
||||||
|
// const { current, size, total, records } = res.data;
|
||||||
|
// state.data = records;
|
||||||
|
// state.pageData = {
|
||||||
|
// currentPage: current || 1,
|
||||||
|
// pageSize: size || 10,
|
||||||
|
// total: total,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .catch((err) => {
|
||||||
|
// app.$message.error(err.msg);
|
||||||
|
// state.data = [];
|
||||||
|
// })
|
||||||
|
// .finally(() => {
|
||||||
|
// state.loading = false;
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
loadData();
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.statistic {
|
||||||
|
.el-card {
|
||||||
|
border: 0 !important;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: '黑体';
|
||||||
|
color: #333;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-data {
|
||||||
|
height: 440px;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-display {
|
||||||
|
@include flex-column();
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right bottom;
|
||||||
|
|
||||||
|
dt {
|
||||||
|
@include flex-row();
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
display: inline-block;
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
span {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.d1 {
|
||||||
|
dt span {
|
||||||
|
color: #ff4975;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.d2 {
|
||||||
|
dt span {
|
||||||
|
color: #41b879;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.d3 {
|
||||||
|
dt span {
|
||||||
|
color: #3685fe;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.d4 {
|
||||||
|
dt span {
|
||||||
|
color: #6b66ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-table {
|
||||||
|
@include flex-row();
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-rank {
|
||||||
|
li {
|
||||||
|
@include flex-row();
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
@include flex-column();
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
em {
|
||||||
|
font-style: normal;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user