zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

统计分析的四个统计模块

This commit is contained in:
shijing 2023-11-23 11:20:23 +08:00
parent 07bb1011da
commit ed835482a0
4 changed files with 775 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
src/views/statistics/material_statistics.vue Normal file
View File

@ -0,0 +1,193 @@
<template>
<el-main>
<el-row :gutter="15">
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option2"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option3"></scEcharts>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never">
<scEcharts height="300px" :option="option4"></scEcharts>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never">
<scEcharts height="300px" :option="option5"></scEcharts>
</el-card>
</el-col>
</el-row>
</el-main>
</template>
<script>
import scEcharts from '@/components/scEcharts';
/**
* 引入组件 @/components/scEcharts
* 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
* 支持props包括 height，width，option
* 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
*/
export default {
name: 'chart',
components: {
scEcharts
},
data() {
return {
option: {
title: {
text: '主要原材料消耗',
// subtext: '',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '15px',
},
{
data: [110, 180, 120, 120, 60, 90, 110],
type: 'bar',
barWidth: '15px',
}]
},
option2: {
title: {
text: '办公用品统计',
// subtext: '',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
},
{
data: [110, 180, 120, 120, 60, 90, 110],
type: 'line',
}]
},
option3: {
title: {
text: '成品统计',
// subtext: '',
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '60%'],
label: false,
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
}
]
},
option4: {
title: {
text: '入库统计',
// subtext: '',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '15px',
},
{
data: [110, 180, 120, 120, 60, 90, 110],
type: 'bar',
barWidth: '15px',
}]
},
option5: {
title: {
text: '辅助材料统计',
// subtext: '',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
},
{
data: [110, 180, 120, 120, 60, 90, 110],
type: 'line',
}]
}
}
}
}
</script>
<style>
</style>

232
src/views/statistics/product_statistics.vue Normal file
View File

@ -0,0 +1,232 @@
<template>
<el-main>
<!-- <el-alert title="生产统计" type="success" style="margin-bottom:20px;"></el-alert> -->
<el-row :gutter="10">
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option2"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option3"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option2"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option3"></scEcharts>
</el-card>
</el-col>
</el-row>
</el-main>
</template>
<script>
import scEcharts from '@/components/scEcharts';
/**
* 引入组件 @/components/scEcharts
* 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
* 支持props包括 height，width，option
* 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
*/
export default {
name: 'chart',
components: {
scEcharts
},
data() {
return {
option: {
title: {
text: '本周生产数量',
// subtext: '生产数量',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '15px',
},
{
data: [110, 180, 120, 120, 60, 90, 110],
type: 'bar',
barWidth: '15px',
}]
},
option2: {
title: {
text: '本月生产数量',
// subtext: '',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
},
{
data: [110, 180, 120, 120, 60, 90, 110],
type: 'line',
}]
},
option3: {
title: {
text: '车间生产统计',
// subtext: '',
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '60%'],
label: false,
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
}
]
},
option4: {
title: {
text: 'Radar Demo',
subtext: '基础雷达(属性)图',
},
tooltip: {
trigger: 'item'
},
radar: {
radius: 100,
center: ['50%', '55%'],
indicator: [
{ name: '销售', max: 100},
{ name: '管理', max: 100},
{ name: '信息技术', max: 100},
{ name: '客服', max: 100},
{ name: '研发', max: 100},
{ name: '市场', max: 100}
]
},
series: [{
name: "SCUI",
type: 'radar',
areaStyle: {},
data: [
{
value: [74, 90, 95, 65, 80, 31],
}
]
}]
},
option5: {
title: {
text: 'Kline Demo',
subtext: '基础K线图',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
data: ['2017-10-23', '2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27', '2017-10-28', '2017-10-29', '2017-10-30'],
},
yAxis: {
scale: true,
},
series: [{
type: 'k',
data: [
[2213.19,2199.31,2191.85,2224.63],
[2203.89,2177.91,2173.86,2210.58],
[2170.78,2174.12,2161.14,2179.65],
[2179.05,2205.5,2179.05,2222.81],
[2212.5,2231.17,2212.5,2236.07],
[2227.86,2235.57,2219.44,2240.26],
[2242.39,2246.3,2235.42,2255.21],
[2246.96,2232.97,2221.38,2247.86]
]
}]
},
option6: {
title: {
text: 'Gauge Demo',
subtext: '基础仪表盘',
},
series: [{
center: ['50%', '60%'],
type: 'gauge',
anchor: {
show: true,
showAbove: true,
size: 20,
itemStyle: {
borderWidth: 5
}
},
progress: {
show: true
},
data: [{
value: 70
}]
}]
}
}
}
}
</script>
<style>
</style>

223
src/views/statistics/quality_statistics.vue Normal file
View File

@ -0,0 +1,223 @@
<template>
<el-main>
<el-row :gutter="15">
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option2"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option3"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option4"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option5"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option6"></scEcharts>
</el-card>
</el-col>
</el-row>
</el-main>
</template>
<script>
import scEcharts from '@/components/scEcharts';
/**
* 引入组件 @/components/scEcharts
* 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
* 支持props包括 height，width，option
* 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
*/
export default {
name: 'chart',
components: {
scEcharts
},
data() {
return {
option: {
title: {
text: '管棒日合格率',
// subtext: '',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '15px',
},
{
data: [110, 180, 120, 120, 60, 90, 110],
type: 'bar',
barWidth: '15px',
}]
},
option2: {
title: {
text: 'AVG日合格率',
// subtext: '',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
},
{
data: [110, 180, 120, 120, 60, 90, 110],
type: 'line',
}]
},
option3: {
title: {
text: '棒不合格统计',
// subtext: '',
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '60%'],
label: false,
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
}
]
},
option4: {
title: {
text: '管棒月合格率',
// subtext: '',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '15px',
},
{
data: [110, 180, 120, 120, 60, 90, 110],
type: 'bar',
barWidth: '15px',
}]
},
option5: {
title: {
text: 'AVG月合格率',
// subtext: '',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
},
{
data: [110, 180, 120, 120, 60, 90, 110],
type: 'line',
}]
},
option6: {
title: {
text: '管不合格统计',
// subtext: '',
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '60%'],
label: false,
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
}
]
}
}
}
}
</script>
<style>
</style>

127
src/views/statistics/sale_statistics.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<el-main>
<el-row :gutter="15">
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option2"></scEcharts>
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<scEcharts height="300px" :option="option3"></scEcharts>
</el-card>
</el-col>
</el-row>
</el-main>
</template>
<script>
import scEcharts from '@/components/scEcharts';
/**
* 引入组件 @/components/scEcharts
* 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
* 支持props包括 height，width，option
* 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
*/
export default {
name: 'chart',
components: {
scEcharts
},
data() {
return {
option: {
title: {
text: '管棒日合格率',
// subtext: '',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '15px',
},
{
data: [110, 180, 120, 120, 60, 90, 110],
type: 'bar',
barWidth: '15px',
}]
},
option2: {
title: {
text: 'AVG日合格率',
// subtext: '',
},
grid: {
top: '80px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
},
{
data: [110, 180, 120, 120, 60, 90, 110],
type: 'line',
}]
},
option3: {
title: {
text: '棒不合格统计',
// subtext: '',
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '60%'],
label: false,
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
}
]
}
}
}
}
</script>
<style>
</style>