数据统计

This commit is contained in:
zmj 2024-01-20 17:45:34 +08:00
parent 3527fe9f60
commit 5c7cb58538
2 changed files with 737 additions and 14 deletions

View File

@ -0,0 +1,718 @@
<template>
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
<el-card style="width: 49.9%;">
<template #header>
<div class="card-header">
<span>我的客户</span>
</div>
</template>
<div style="display: flex;justify-content: space-around;">
<div v-for=" item in customList" :key="item" style="text-align: center;">
<div>{{ item.value }}</div>
<div>{{ item.name }}</div>
</div>
</div>
<div id="customNum" class="chart"></div>
</el-card>
<el-card style="width: 49.9%;">
<template #header>
<div class="card-header">
<span>我的立项</span>
</div>
</template>
<div style="display: flex;justify-content: space-around;">
<div v-for=" item in customList" :key="item" style="text-align: center;">
<div>{{ item.value }}</div>
<div>{{ item.name }}</div>
</div>
</div>
<div id="projectApproved" class="chart"></div>
</el-card>
<el-card style="width: 49.9%;">
<template #header>
<div class="card-header">
<span>我的投标</span>
</div>
</template>
<div style="display: flex;justify-content: space-around;">
<div v-for=" item in customList" :key="item" style="text-align: center;">
<div>{{ item.value }}</div>
<div>{{ item.name }}</div>
</div>
</div>
<div id="main"></div>
</el-card>
<el-card style="width: 49.9%;">
<template #header>
<div class="card-header">
<span>项目合同</span>
</div>
</template>
<div style="display: flex;justify-content: space-around;">
<div v-for=" item in customList" :key="item" style="text-align: center;">
<div>{{ item.value }}</div>
<div>{{ item.name }}</div>
</div>
</div>
<div id="main2"></div>
</el-card>
<el-card style="width: 49.9%;">
<template #header>
<div class="card-header">
<span>项目回款</span>
</div>
</template>
<div style="display: flex;justify-content: space-around;">
<div v-for=" item in customList" :key="item" style="text-align: center;">
<div>{{ item.value }}</div>
<div>{{ item.name }}</div>
</div>
</div>
<div id="main3"></div>
</el-card>
<el-card style="width: 49.9%;">
<template #header>
<div class="card-header">
<span>采购合同</span>
</div>
</template>
<div style="display: flex;justify-content: space-around;">
<div v-for=" item in customList" :key="item" style="text-align: center;">
<div>{{ item.value }}</div>
<div>{{ item.name }}</div>
</div>
</div>
<div id="main4" class="chart"></div>
</el-card>
<el-card style="width: 49.9%;">
<template #header>
<div class="card-header">
<span>分包合同</span>
</div>
</template>
<div style="display: flex;justify-content: space-around;">
<div v-for=" item in customList" :key="item" style="text-align: center;">
<div>{{ item.value }}</div>
<div>{{ item.name }}</div>
</div>
</div>
<div id="main5" class="chart"></div>
</el-card>
<el-card style="width: 49.9%;">
<template #header>
<div class="card-header">
<span>项目付款</span>
</div>
</template>
<div style="display: flex;justify-content: space-around;">
<div v-for=" item in customList" :key="item" style="text-align: center;">
<div>{{ item.value }}</div>
<div>{{ item.name }}</div>
</div>
</div>
<div id="main6" class="chart"></div>
</el-card>
<el-card style="width: 49.9%;">
<template #header>
<div class="card-header">
<span>我的报销</span>
</div>
</template>
<div style="display: flex;justify-content: space-around;">
<div v-for=" item in customList" :key="item" style="text-align: center;">
<div>{{ item.value }}</div>
<div>{{ item.name }}</div>
</div>
</div>
<div id="main7" class="chart"></div>
</el-card>
<el-card style="width: 49.9%;">
<template #header>
<div class="card-header">
<span>应收统计</span>
</div>
</template>
<div style="display: flex;justify-content: space-around;">
<div v-for=" item in customList" :key="item" style="text-align: center;">
<div>{{ item.value }}</div>
<div>{{ item.name }}</div>
</div>
</div>
<el-table :data="pager.lists" @selection-change="handleSelectionChange" style="margin-top: 20px;">
<el-table-column type="selection" width="55" />
<el-table-column label="序号" type="index" width="55" />
<el-table-column label="项目名称" prop="project_name" show-overflow-tooltip />
<el-table-column label="技术人员" prop="technician" show-overflow-tooltip />
<el-table-column label="商务人员" prop="business_people" show-overflow-tooltip />
<el-table-column label="跨部门人员" prop="cross_departmental_personnel" show-overflow-tooltip />
<el-table-column label="添加人" prop="add_user" show-overflow-tooltip />
</el-table>
<div class="flex justify-end mt-4">
<pagination v-model="pager" @change="getLists" />
</div>
</el-card>
<el-card style="width: 49.9%;">
<template #header>
<div class="card-header">
<span>应付统计</span>
</div>
</template>
<div style="display: flex;justify-content: space-around;">
<div v-for=" item in customList" :key="item" style="text-align: center;">
<div>{{ item.value }}</div>
<div>{{ item.name }}</div>
</div>
</div>
<el-table :data="pager.lists" @selection-change="handleSelectionChange" style="margin-top: 20px;">
<el-table-column type="selection" width="55" />
<el-table-column label="序号" type="index" width="55" />
<el-table-column label="项目名称" prop="project_name" show-overflow-tooltip />
<el-table-column label="技术人员" prop="technician" show-overflow-tooltip />
<el-table-column label="商务人员" prop="business_people" show-overflow-tooltip />
<el-table-column label="跨部门人员" prop="cross_departmental_personnel" show-overflow-tooltip />
<el-table-column label="添加人" prop="add_user" show-overflow-tooltip />
</el-table>
<div class="flex justify-end mt-4">
<pagination v-model="pager" @change="getLists" />
</div>
</el-card>
</div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted } from "vue"
import { reactive, ref } from "vue"
import { usePaging } from '@/hooks/usePaging'
import { apiProjectPreSalesMembersLists, } from '@/api/project_pre_sales_members'
//
const { pager, getLists, resetParams, resetPage } = usePaging({
fetchFun: apiProjectPreSalesMembersLists,
// params: queryParams
})
getLists()
const customList = reactive([
{
name: "客户总数",
value: 3
},
{
name: "客户总数",
value: 3
}, {
name: "客户总数",
value: 3
}, {
name: "客户总数",
value: 3
}, {
name: "客户总数",
value: 3
},
])
const customLists = reactive([
{
name: "客户总数",
value: 3
},
{
name: "客户总数",
value: 3
}, {
name: "客户总数",
value: 3
}, {
name: "客户总数",
value: 3
}, {
name: "客户总数",
value: 3
},
])
var app = {};
const posList = [
'left',
'right',
'top',
'bottom',
'inside',
'insideTop',
'insideLeft',
'insideRight',
'insideBottom',
'insideTopLeft',
'insideTopRight',
'insideBottomLeft',
'insideBottomRight'
];
app.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: posList.reduce(function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
const labelOption = {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
};
myChart.setOption({
series: [
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
}
]
});
}
};
const labelOption = {
show: true,
rich: {
name: {}
}
};
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['2012', '2013', '2014', '2015', '2016', '2012', '2013', '2014', '2015', '2016']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '名称',
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390]
},
// {
// name: 'Steppe',
// type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
// data: [220, 182, 191, 234, 290]
// },
// {
// name: 'Desert',
// type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
// data: [150, 232, 201, 154, 190]
// },
// {
// name: 'Wetland',
// type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
// data: [98, 77, 101, 99, 40]
// }
]
};
let customoption = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['2012', '2013', '2014', '2015', '2016', '2012', '2013', '2014', '2015', '2016']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '名称',
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390]
},
// {
// name: 'Steppe',
// type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
// data: [220, 182, 191, 234, 290]
// },
// {
// name: 'Desert',
// type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
// data: [150, 232, 201, 154, 190]
// },
// {
// name: 'Wetland',
// type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
// data: [98, 77, 101, 99, 40]
// }
]
};
var option4 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['2012', '2013', '2014', '2015', '2016', '2012', '2013', '2014', '2015', '2016']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '名称',
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390]
},
{
name: 'Steppe',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290]
},
{
name: 'Desert',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190]
},
// {
// name: 'Wetland',
// type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
// data: [98, 77, 101, 99, 40]
// }
]
};
let option2 = {
title: {
text: '',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
let value = 58; //
let option3 = {
title: {
text: '{a|' + value + '}{c|%}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 20,
color: 'black',
fontWeight: 'bold'
},
c: {
fontSize: 20,
color: 'black',
fontWeight: 'normal'
}
}
}
},
series: [
//
{
name: "外环",
type: 'pie',
silent: true,
clockwise: true,
radius: ['70%', '75%'],
label: {
show: false,
},
labelLine: {
show: false
},
itemStyle: {
color: 'white',
},
data: [0]
},
//
{
name: "内环",
type: 'pie',
silent: true,
clockwise: true,
radius: ['45%', '46%'],
label: {
show: false,
},
labelLine: {
show: false
},
itemStyle: {
color: '#414f63',
},
data: [0]
},
//
{
name: '',
type: 'pie',
radius: ['55%', '65%'],
silent: true,
clockwise: true,
startAngle: 90,
label: {
show: false,
},
data: [
{
value: value,
itemStyle: {
normal: {
//
borderWidth: 0.5,
shadowBlur: 20,
borderColor: '#4bf3f9',
shadowColor: '#9bfeff',
color: { //
colorStops: [{
offset: 0,
color: '#15caff', // 0%
}, {
offset: 1,
color: '#159bfe', // 100%
}]
},
}
}
},
{
value: 100 - value,
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: "#364662"
}
}
}
]
},
]
};
const initChart = (id, opt) => {
var chartDom = document.getElementById(id);
var myChart = echarts.init(chartDom);
myChart.setOption(opt);
}
onMounted(() => {
initChart("customNum", customoption)
initChart("projectApproved", option2)
initChart("main", option3)
initChart("main2", option2)
initChart("main3", option)
initChart("main4", option)
initChart("main5", option)
initChart("main6", option4)
initChart("main7", option2)
})
</script>
<style lang="scss" scoped>
#main,
#main2,
#main3 {
width: 100%;
height: 300px;
}
.chart {
width: 100%;
height: 300px;
}
</style>

View File

@ -1,20 +1,24 @@
<template>
<el-card style="display: flex;">
<el-card>
我的客户
<div id="main"></div>
</el-card>
<el-card>
<div id="main2"></div>
</el-card>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted } from "vue"
var app = {};
var option;
const posList = [
'left',
'right',
@ -98,7 +102,7 @@ const labelOption = {
name: {}
}
};
option = {
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
@ -201,13 +205,14 @@ let option2 = {
]
};
onMounted(() => {
var chartDom = document.getElementById('main');
const initChart = (id, opt) => {
var chartDom = document.getElementById(id);
var myChart = echarts.init(chartDom);
option && myChart.setOption(option);
var chartDom2 = document.getElementById('main2');
var myChart2 = echarts.init(chartDom2);
option2 && myChart2.setOption(option2);
myChart.setOption(opt);
}
onMounted(() => {
initChart("main", option)
initChart("main2", option2)
})
</script>
<style lang="scss" scoped>