zhangzl
/
rongxin.dashboard
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Quellcode durchsuchen

增加字段

master
张泽亮 vor 1 Woche
Ursprung
8f41c9b78a
Commit
97e1a0d194
3 geänderte Dateien mit 330 neuen und 18 gelöschten Zeilen
Geteilte Ansicht
Diff-Optionen
Statistiken anzeigen Patch-Datei herunterladen Vergleichs-Datei herunterladen
  1. +5
    -18
      src/views/index.vue
  2. +312
    -0
      src/views/index_v2.vue
  3. +13
    -0
      src/views/resource/land/index.vue

+ 5
- 18
src/views/index.vue Datei anzeigen

@@ -2,7 +2,7 @@
<div class="dashboard-container">
<div class="chart-row">
<div class="chart-container">
<h2>用户增长趋势</h2>
<h2>资源调查进度</h2>
<div ref="lineChart" class="chart"></div>
</div>

@@ -57,7 +57,7 @@
trigger: 'axis'
},
legend: {
data: ['新增用户', '活跃用户', '付费用户']
data: ['已调查', '待调查']
},
grid: {
left: '3%',
@@ -68,27 +68,14 @@
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
data: ['A市', 'B市', 'C市', 'D市', 'E市', 'F市', 'G市']
},
yAxis: {
type: 'value'
},
series: [
{
name: '新增用户',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210],
smooth: true,
lineStyle: {
width: 3,
color: '#5470C6'
},
itemStyle: {
color: '#5470C6'
}
},
{
name: '活跃用户',
name: '已调查',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310],
smooth: true,
@@ -101,7 +88,7 @@
}
},
{
name: '付费用户',
name: '待调查',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410],
smooth: true,


+ 312
- 0
src/views/index_v2.vue Datei anzeigen

@@ -0,0 +1,312 @@
<template>
<div class="dashboard-container">
<div class="chart-row">
<div class="chart-container">
<h2>用户增长趋势</h2>
<div ref="lineChart" class="chart"></div>
</div>

<div class="chart-container">
<h2>产品销售统计</h2>
<div ref="barChart" class="chart"></div>
</div>
</div>

<div class="chart-row">
<div class="chart-container">
<h2>用户分布比例</h2>
<div ref="pieChart" class="chart"></div>
</div>

<div class="info-cards">
<div class="info-card">
<h3>总用户数</h3>
<p class="number">12,345</p>
<p class="trend up">↑ 12% 同比</p>
</div>
<div class="info-card">
<h3>本月销售额</h3>
<p class="number">¥ 456,789</p>
<p class="trend up">↑ 8% 环比</p>
</div>
<div class="info-card">
<h3>活跃用户</h3>
<p class="number">8,642</p>
<p class="trend down">↓ 3% 环比</p>
</div>
</div>
</div>
</div>
</template>

<script>
import * as echarts from 'echarts';

export default {
name: 'Dashboard',
mounted() {
this.initLineChart();
this.initBarChart();
this.initPieChart();
},
methods: {
initLineChart() {
const chart = echarts.init(this.$refs.lineChart);
const option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['新增用户', '活跃用户', '付费用户']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '新增用户',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210],
smooth: true,
lineStyle: {
width: 3,
color: '#5470C6'
},
itemStyle: {
color: '#5470C6'
}
},
{
name: '活跃用户',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310],
smooth: true,
lineStyle: {
width: 3,
color: '#91CC75'
},
itemStyle: {
color: '#91CC75'
}
},
{
name: '付费用户',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410],
smooth: true,
lineStyle: {
width: 3,
color: '#EE6666'
},
itemStyle: {
color: '#EE6666'
}
}
]
};
chart.setOption(option);
window.addEventListener('resize', function() {
chart.resize();
});
},
initBarChart() {
const chart = echarts.init(this.$refs.barChart);
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2022', '2023']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['产品A', '产品B', '产品C', '产品D', '产品E']
},
series: [
{
name: '2022',
type: 'bar',
data: [320, 302, 341, 374, 390],
itemStyle: {
color: '#91CC75'
}
},
{
name: '2023',
type: 'bar',
data: [420, 432, 401, 454, 590],
itemStyle: {
color: '#5470C6'
}
}
]
};
chart.setOption(option);
window.addEventListener('resize', function() {
chart.resize();
});
},
initPieChart() {
const chart = echarts.init(this.$refs.pieChart);
const option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
right: 10,
top: 'center'
},
series: [
{
name: '用户分布',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '18',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: '华北地区' },
{ value: 735, name: '华东地区' },
{ value: 580, name: '华南地区' },
{ value: 484, name: '西部地区' },
{ value: 300, name: '东北地区' }
],
color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE']
}
]
};
chart.setOption(option);
window.addEventListener('resize', function() {
chart.resize();
});
}
}
};
</script>

<style scoped>
.dashboard-container {
padding: 20px;
background-color: #f5f7fa;
min-height: 100vh;
}

h1 {
color: #333;
margin-bottom: 30px;
}

.chart-row {
display: flex;
margin-bottom: 20px;
gap: 20px;
}

.chart-container {
flex: 1;
background-color: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart {
height: 350px;
}

.info-cards {
flex: 0 0 300px;
display: flex;
flex-direction: column;
gap: 20px;
}

.info-card {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.info-card h3 {
color: #666;
margin-bottom: 10px;
font-size: 16px;
}

.info-card .number {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
color: #333;
}

.info-card .trend {
font-size: 14px;
}

.trend.up {
color: #67C23A;
}

.trend.down {
color: #F56C6C;
}

@media (max-width: 1200px) {
.chart-row {
flex-direction: column;
}

.info-cards {
flex-direction: row;
flex-wrap: wrap;
}

.info-card {
flex: 1;
min-width: 200px;
}
}
</style>

+ 13
- 0
src/views/resource/land/index.vue Datei anzeigen

@@ -54,6 +54,11 @@
<el-option v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>-->
<el-form-item label="是账外地" prop="sfzwd">
<el-select v-model="queryParams.sfzwd" placeholder="请选择是否账外地" clearable>
<el-option v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="调查状态" prop="surveyStatus">
<el-select v-model="queryParams.surveyStatus" placeholder="请选择调查状态" clearable>
<el-option v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
@@ -207,6 +212,7 @@
<el-descriptions-item label="指界人姓名">{{ form.zjrxm }}</el-descriptions-item>
<el-descriptions-item label="实测面积(㎡)">{{ form.scmj }}</el-descriptions-item>
<el-descriptions-item label="实测面积(亩)">{{ form.scmjm }}</el-descriptions-item>
<el-descriptions-item label="是否账外地">{{ form.sfzwd }}</el-descriptions-item>
</el-descriptions>

<el-descriptions title="经营数据" border :column="2" class="margin-top">
@@ -301,6 +307,11 @@
<el-form-item label="实测面积" prop="scmjm">
<el-input-number v-model="form.scmjm" placeholder="请输入实测面积" controls-position="right" :precision="3"/>
</el-form-item>
<el-form-item label="是否账外地" prop="sfzwd">
<el-radio-group v-model="form.sfzwd">
<el-radio v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="调查状态" prop="surveyStatus">
<el-radio-group v-model="form.surveyStatus">
<el-radio v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
@@ -390,6 +401,7 @@ export default {
sfjbnt: null,
surveyStatus: null,
importCode: null,
sfzwd: null,
},
// 表单参数
form: {},
@@ -474,6 +486,7 @@ export default {
surveyStatus: '1',
importCode: null,
deptName: null,
sfzwd: '2'
}
this.resetForm("form")
},


Verfassen Vorschau
Laden…
Abbrechen
Speichern