|
@@ -16,7 +16,7 @@
|
|
|
<div class="flex-margin flex w100" :class="` home-one-animation${k}`">
|
|
|
<div class="flex-auto">
|
|
|
<span class="font30">{{ v.num1 }}</span>
|
|
|
- <span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}%</span>
|
|
|
+ <!-- <span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}%</span -->
|
|
|
<div class="mt10">{{ v.num3 }}</div>
|
|
|
</div>
|
|
|
<div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
|
|
@@ -38,7 +38,7 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <el-row :gutter="15" class="home-card-three">
|
|
|
+ <!-- <el-row :gutter="15" class="home-card-three">
|
|
|
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
|
|
|
<div class="home-card-item">
|
|
|
<div class="home-card-item-title">快捷导航工具</div>
|
|
@@ -62,7 +62,7 @@
|
|
|
<div style="height: 100%" ref="homeBarRef"></div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- </el-row>
|
|
|
+ </el-row> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -72,7 +72,7 @@ import * as echarts from 'echarts';
|
|
|
import { storeToRefs } from 'pinia';
|
|
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
|
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
|
|
-
|
|
|
+import { GetList } from './api';
|
|
|
let global: any = {
|
|
|
homeChartOne: null,
|
|
|
homeChartTwo: null,
|
|
@@ -93,38 +93,38 @@ export default defineComponent({
|
|
|
const state = reactive({
|
|
|
homeOne: [
|
|
|
{
|
|
|
- num1: '125,12',
|
|
|
- num2: '-12.32',
|
|
|
- num3: '用户注册信息',
|
|
|
+ num1: '0',
|
|
|
+ num2: '0',
|
|
|
+ num3: '申请总数',
|
|
|
num4: 'fa fa-meetup',
|
|
|
- color1: '#FF6462',
|
|
|
+ color1: '#6690F9',
|
|
|
color2: '--next-color-primary-lighter',
|
|
|
color3: '--el-color-primary',
|
|
|
},
|
|
|
{
|
|
|
- num1: '653,33',
|
|
|
- num2: '+42.32',
|
|
|
- num3: '用户广告收益',
|
|
|
+ num1: '0',
|
|
|
+ num2: '0',
|
|
|
+ num3: '职位总数',
|
|
|
num4: 'iconfont icon-ditu',
|
|
|
color1: '#6690F9',
|
|
|
color2: '--next-color-success-lighter',
|
|
|
color3: '--el-color-success',
|
|
|
},
|
|
|
{
|
|
|
- num1: '125,65',
|
|
|
- num2: '+17.32',
|
|
|
- num3: '系统广告收益',
|
|
|
+ num1: '0',
|
|
|
+ num2: '0',
|
|
|
+ num3: '问题总数',
|
|
|
num4: 'iconfont icon-zaosheng',
|
|
|
color1: '#6690F9',
|
|
|
color2: '--next-color-warning-lighter',
|
|
|
color3: '--el-color-warning',
|
|
|
},
|
|
|
{
|
|
|
- num1: '520,43',
|
|
|
- num2: '-10.01',
|
|
|
- num3: '访问统计信息',
|
|
|
+ num1: '0',
|
|
|
+ num2: '0',
|
|
|
+ num3: '报告总数',
|
|
|
num4: 'fa fa-github-alt',
|
|
|
- color1: '#FF6462',
|
|
|
+ color1: '#6690F9',
|
|
|
color2: '--next-color-danger-lighter',
|
|
|
color3: '--el-color-danger',
|
|
|
},
|
|
@@ -191,6 +191,7 @@ export default defineComponent({
|
|
|
bgColor: '',
|
|
|
color: '#303133',
|
|
|
},
|
|
|
+ apiData: null,
|
|
|
});
|
|
|
// 折线图
|
|
|
const initLineChart = () => {
|
|
@@ -199,31 +200,33 @@ export default defineComponent({
|
|
|
const option = {
|
|
|
backgroundColor: state.charts.bgColor,
|
|
|
title: {
|
|
|
- text: '政策补贴额度',
|
|
|
+ text: '申请趋势',
|
|
|
x: 'left',
|
|
|
textStyle: { fontSize: '15', color: state.charts.color },
|
|
|
},
|
|
|
grid: { top: 70, right: 20, bottom: 30, left: 30 },
|
|
|
tooltip: { trigger: 'axis' },
|
|
|
- legend: { data: ['预购队列', '最新成交价'], right: 0 },
|
|
|
+ legend: { data: ['申请数量'], right: 0 },
|
|
|
xAxis: {
|
|
|
- data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
|
+ data: state.apiData?.application_trend?.map(item => item.date.substring(5)) ||
|
|
|
+ ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
- name: '价格',
|
|
|
+ name: '数量',
|
|
|
splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
- name: '预购队列',
|
|
|
+ name: '申请数量',
|
|
|
type: 'line',
|
|
|
symbolSize: 6,
|
|
|
symbol: 'circle',
|
|
|
smooth: true,
|
|
|
- data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
|
|
|
+ data: state.apiData?.application_trend?.map(item => item.count) ||
|
|
|
+ [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
|
|
|
lineStyle: { color: '#fe9a8b' },
|
|
|
itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
|
|
|
areaStyle: {
|
|
@@ -232,43 +235,7 @@ export default defineComponent({
|
|
|
{ offset: 1, color: '#fe9a8b03' },
|
|
|
]),
|
|
|
},
|
|
|
- },
|
|
|
- {
|
|
|
- name: '最新成交价',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
|
|
|
- lineStyle: { color: '#9E87FF' },
|
|
|
- itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#9E87FFb3' },
|
|
|
- { offset: 1, color: '#9E87FF03' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- color: {
|
|
|
- type: 'radial',
|
|
|
- x: 0.5,
|
|
|
- y: 0.5,
|
|
|
- r: 0.5,
|
|
|
- colorStops: [
|
|
|
- { offset: 0, color: '#9E87FF' },
|
|
|
- { offset: 0.4, color: '#9E87FF' },
|
|
|
- { offset: 0.5, color: '#fff' },
|
|
|
- { offset: 0.7, color: '#fff' },
|
|
|
- { offset: 0.8, color: '#fff' },
|
|
|
- { offset: 1, color: '#fff' },
|
|
|
- ],
|
|
|
- },
|
|
|
- borderColor: '#9E87FF',
|
|
|
- borderWidth: 2,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
+ }
|
|
|
],
|
|
|
};
|
|
|
(<any>global.homeChartOne).setOption(option);
|
|
@@ -278,8 +245,20 @@ export default defineComponent({
|
|
|
const initPieChart = () => {
|
|
|
if (!global.dispose.some((b: any) => b === global.homeChartTwo)) global.homeChartTwo.dispose();
|
|
|
global.homeChartTwo = <any>echarts.init(homePieRef.value, state.charts.theme);
|
|
|
- var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
|
|
|
- var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
|
|
|
+ var getname = ['申请总数', '职位总数', '问题总数', '报告总数'];
|
|
|
+ var getvalue = [];
|
|
|
+
|
|
|
+ if (state.apiData) {
|
|
|
+ getvalue = [
|
|
|
+ state.apiData.total_applications,
|
|
|
+ state.apiData.total_positions,
|
|
|
+ state.apiData.total_questions,
|
|
|
+ state.apiData.total_reports
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ getvalue = [34.2, 38.87, 17.88, 9.05];
|
|
|
+ }
|
|
|
+
|
|
|
var data = [];
|
|
|
for (var i = 0; i < getname.length; i++) {
|
|
|
data.push({ name: getname[i], value: getvalue[i] });
|
|
@@ -288,7 +267,7 @@ export default defineComponent({
|
|
|
const option = {
|
|
|
backgroundColor: state.charts.bgColor,
|
|
|
title: {
|
|
|
- text: '房屋建筑工程',
|
|
|
+ text: '数据统计',
|
|
|
x: 'left',
|
|
|
textStyle: { fontSize: '15', color: state.charts.color },
|
|
|
},
|
|
@@ -506,6 +485,7 @@ export default defineComponent({
|
|
|
};
|
|
|
// 页面加载时
|
|
|
onMounted(() => {
|
|
|
+ fetchApiData();
|
|
|
initEchartsResize();
|
|
|
});
|
|
|
// 由于页面缓存原因,keep-alive
|
|
@@ -543,6 +523,47 @@ export default defineComponent({
|
|
|
immediate: true,
|
|
|
}
|
|
|
);
|
|
|
+ // 获取API数据
|
|
|
+ const fetchApiData = async () => {
|
|
|
+ try {
|
|
|
+ const res = await GetList();
|
|
|
+ if (res.code === 2000) {
|
|
|
+ state.apiData = res.data;
|
|
|
+ updateHomeData(res.data);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取统计数据失败:', error);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ // 更新首页数据
|
|
|
+ const updateHomeData = (data) => {
|
|
|
+ // 更新顶部卡片数据
|
|
|
+ state.homeOne[0].num1 = data.total_applications.toString();
|
|
|
+ state.homeOne[1].num1 = data.total_positions.toString();
|
|
|
+ state.homeOne[2].num1 = data.total_questions.toString();
|
|
|
+ state.homeOne[3].num1 = data.total_reports.toString();
|
|
|
+
|
|
|
+ // 更新折线图数据
|
|
|
+ updateLineChart(data.application_trend);
|
|
|
+ };
|
|
|
+ // 更新折线图数据
|
|
|
+ const updateLineChart = (trendData) => {
|
|
|
+ if (!global.homeChartOne) return;
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ xAxis: {
|
|
|
+ data: trendData.map(item => item.date.substring(5)), // 只显示月-日
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '申请数量',
|
|
|
+ data: trendData.map(item => item.count),
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ (<any>global.homeChartOne).setOption(option);
|
|
|
+ };
|
|
|
return {
|
|
|
homeLineRef,
|
|
|
homePieRef,
|
|
@@ -556,6 +577,7 @@ export default defineComponent({
|
|
|
<style scoped lang="scss">
|
|
|
$homeNavLengh: 8;
|
|
|
.home-container {
|
|
|
+ padding-top: 10px;
|
|
|
overflow: hidden;
|
|
|
.home-card-one,
|
|
|
.home-card-two,
|