修改接口

master
夜笙歌 9 months ago
parent 2279f6014a
commit e63956dfd8

@ -11,7 +11,7 @@ export function mixData(params) {
method: params?.i || ''
}).then(val2 => {
(params?.f || (() => {
}))(val2)
}))(val2?.data || [])
})
}
})

@ -0,0 +1,10 @@
import request from '@/utils/request'
// 登录方法
export function getData(data) {
return request({
url: '/boardReport/homePageInterface',
method: 'post',
data: data
})
}

@ -279,6 +279,7 @@ export default {
e: 'nd-07',
i: "SCADA_INV_STATS_01('')",
f: (e) => {
console.log(e)
this.$refs.chart2.setData({
tooltip: {
trigger: "axis",
@ -295,7 +296,7 @@ export default {
containLabel: true,
},
legend: {
data: e.y.map(val => val.name),
data:['内胆','箱壳'],
right: 'center',
top: 0,
textStyle: {
@ -307,7 +308,7 @@ export default {
},
xAxis: {
type: "category",
data: e.x,
data: e.map(val=>val.X_VALUE),
axisLine: {
lineStyle: {
color: "white",
@ -337,7 +338,7 @@ export default {
},
series: [
{
name: e.y[0].name,
name: '内胆',
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
@ -367,10 +368,10 @@ export default {
]),
},
},
data: e.y[0].data,
data: e.map(val=>val.Y_VALUE_ONE),
},
{
name: e.y[1].name,
name: '箱壳',
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
@ -400,7 +401,7 @@ export default {
]),
},
},
data: e.y[1].data,
data: e.map(val=>val.Y_VALUE_TWO),
},
],
})

@ -32,6 +32,7 @@ export default {
type: Object,
required: true
}
},
data() {
return {
@ -61,139 +62,9 @@ export default {
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
},
setOptions({expectedData, actualData,expedData} = {}) {
const week = () =>{
let today = new Date();
let firstDayOfYear = new Date(today.getFullYear(), 0, 1);
let dayOfWeek = firstDayOfYear.getDay();
let spendDay = 1;
if (dayOfWeek != 0) {
spendDay = 7 - dayOfWeek + 1;
}
firstDayOfYear = new Date(today.getFullYear(), 0, spendDay);
let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000);
return Math.ceil((d / 7) + 1)
}
this.chart.setOption({
title: {
text: `${week()}周产量`,
textStyle: {
align: 'center',
color: '#000',
fontSize: 20,
},
top: '0%',
left: '0%',
},
xAxis: {
data: ['2023-12-11', '2023-12-12', '2023-12-13', '2023-12-14', '2023-12-15', '2023-12-16', '2023-12-17'],
// boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 10,
right: 10,
bottom: 20,
top: 50,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: [
{
axisTick: {
show: false
}
},
{
axisTick: {
show: false
},
axisLabel:{
formatter:'{value}%'
}
}
],
legend: {
data: ['expected', 'actual']
},
series: [
{
name: '订单履约率',
type: 'line',
yAxisIndex:1,
itemStyle: {
normal: {
color: '#3888fa',
lineStyle: {
color: '#3888fa',
width: 2
},
// areaStyle: {
// color: '#f3f8ff'
// }
}
},
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
data: expectedData,
animationDuration: 1000,
animationEasing: 'quadraticOut'
},
{
name: '产量',
smooth: false,
type: 'bar',
barMaxWidth:60,
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
normal: {
color: '#9fe080',
lineStyle: {
color: '#9fe080',
width: 2
},
areaStyle: {
color: '#f3f8ff'
}
}
},
data: expedData,
animationDuration: 1000,
animationEasing: 'quadraticOut'
}
]
})
setOptions(val) {
this.chart.setOption(val)
}
}
}

@ -59,87 +59,9 @@ export default {
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
},
setOptions({ expectedData, actualData } = {}) {
const week = () =>{
let today = new Date();
let firstDayOfYear = new Date(today.getFullYear(), 0, 1);
let dayOfWeek = firstDayOfYear.getDay();
let spendDay = 1;
if (dayOfWeek != 0) {
spendDay = 7 - dayOfWeek + 1;
}
firstDayOfYear = new Date(today.getFullYear(), 0, spendDay);
let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000);
return Math.ceil((d / 7) + 1)
}
this.chart.setOption({
title: {
text: `${week()}周清单率`,
textStyle: {
align: 'center',
color: '#000',
fontSize: 20,
},
top: '0%',
left: '0%',
},
xAxis: {
data: ['2023-12-11', '2023-12-12', '2023-12-13', '2023-12-14', '2023-12-15', '2023-12-16', '2023-12-17'],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 10,
right: 10,
bottom: 20,
top: 50,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
},
axisLabel:{
formatter:'{value}%'
}
},
legend: {
data: ['expected', 'actual']
},
series: [
{
name: '清单率',
smooth: false,
type: 'line',
itemStyle: {
normal: {
color: '#3888fa',
lineStyle: {
color: '#3888fa',
width: 2
},
areaStyle: {
color: '#f3f8ff'
}
}
},
data: actualData,
animationDuration: 2800,
animationEasing: 'quadraticOut'
}]
})
setOptions(val) {
this.chart.setOption(val)
}
}
}

@ -1,54 +1,54 @@
<template>
<el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="list" class-name="card-panel-icon" />
<svg-icon icon-class="list" class-name="card-panel-icon"/>
</div>
<div class="card-panel-description">
<div class="card-panel-text">
计划工单数量
</div>
<count-to :start-val="0" :end-val="25" :duration="10" class="card-panel-num" />
<count-to :start-val="0" :end-val="topData.value1" :duration="3000" class="card-panel-num"/>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="time" class-name="card-panel-icon" />
<svg-icon icon-class="time" class-name="card-panel-icon"/>
</div>
<div class="card-panel-description">
<div class="card-panel-text">
在制工单数量
</div>
<count-to :start-val="0" :end-val="12" :duration="2" class="card-panel-num" />
<count-to :start-val="0" :end-val="topData.value2" :duration="3000" class="card-panel-num"/>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('purchases')">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="chart" class-name="card-panel-icon" />
<svg-icon icon-class="chart" class-name="card-panel-icon"/>
</div>
<div class="card-panel-description">
<div class="card-panel-text">
今日计划产量
</div>
<count-to :start-val="0" :end-val="3500" :duration="3500" class="card-panel-num" />
<count-to :start-val="0" :end-val="topData.value3" :duration="3000" class="card-panel-num"/>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="checkbox" class-name="card-panel-icon" />
<svg-icon icon-class="checkbox" class-name="card-panel-icon"/>
</div>
<div class="card-panel-description">
<div class="card-panel-text">
今日完成产量
</div>
<count-to :start-val="0" :end-val="1500" :duration="1500" class="card-panel-num" />
<count-to :start-val="0" :end-val="topData.value4" :duration="3000" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -57,16 +57,33 @@
<script>
import CountTo from 'vue-count-to'
import {getData} from "@/api";
export default {
components: {
CountTo
},
methods: {
handleSetLineChartData(type) {
// this.$emit('handleSetLineChartData', type)
props: {
topData: {
type: Object,
default: {}
}
}
},
data() {
return {
topData: this.topData
// {
// value1: 0,
// value2: 0,
// value3: 0,
// value4: 0,
// }
}
},
mounted() {
console.log(this.topData)
},
}
</script>
@ -160,7 +177,7 @@ export default {
}
}
@media (max-width:550px) {
@media (max-width: 550px) {
.card-panel-description {
display: none;
}

@ -21,6 +21,14 @@ export default {
height: {
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
},
data() {
@ -28,6 +36,14 @@ export default {
chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
@ -43,58 +59,10 @@ export default {
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
const week = () =>{
let today = new Date();
let firstDayOfYear = new Date(today.getFullYear(), 0, 1);
let dayOfWeek = firstDayOfYear.getDay();
let spendDay = 1;
if (dayOfWeek != 0) {
spendDay = 7 - dayOfWeek + 1;
}
firstDayOfYear = new Date(today.getFullYear(), 0, spendDay);
let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000);
return Math.ceil((d / 7) + 1)
}
this.chart.setOption({
title: {
text: `${week()}周质量缺陷分布`,
textStyle: {
align: 'center',
color: '#000',
fontSize: 20,
},
top: '0%',
left: '0%',
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
bottom: '10',
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
},
series: [
{
name: 'WEEKLY WRITE ARTICLES',
type: 'pie',
roseType: 'radius',
radius: [15, 95],
center: ['50%', '46%'],
data: [
{ value: 320, name: 'Industries' },
{ value: 240, name: 'Technology' },
{ value: 149, name: 'Forex' },
{ value: 100, name: 'Gold' },
{ value: 59, name: 'Forecasts' }
],
animationEasing: 'cubicInOut',
animationDuration: 2600
}
]
})
},
setOptions(val) {
console.log(val)
this.chart.setOption(val)
}
}
}

@ -1,7 +1,7 @@
<template>
<div class="dashboard-editor-container">
<panel-group @handleSetLineChartData="handleSetLineChartData"/>
<panel-group :topData="topData"/>
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<el-table
@ -10,46 +10,42 @@
cell-style="text-align:center"
style="width: 100%">
<el-table-column
prop="no"
prop="ROWSEQ"
label="序号"
width="50">
width="80">
</el-table-column>
<el-table-column
prop="plant"
prop="FACTORY_CODE"
label="工厂"
width="80">
</el-table-column>
<el-table-column
prop="productionLine"
label="产线">
</el-table-column>
<el-table-column
prop="workOrderNumber"
label="SAP计划编号">
prop="ORDER_CODE"
label="订单编号">
</el-table-column>
<el-table-column
prop="SalesOrderNumber"
label="销售单号">
prop="MATERIAL_NAME"
label="物料名称">
</el-table-column>
<el-table-column
prop="productCode"
label="产品编码">
prop="MATERIAL_CODE"
label="物料编号">
</el-table-column>
<el-table-column
prop="productName"
label="产品名称">
prop="ORDER_AMOUNT"
label="计划数">
</el-table-column>
<el-table-column
prop="scheduledProduction"
label="计划产量">
prop="COMPLETE_AMOUNT"
label="完成数">
</el-table-column>
<el-table-column
prop="FinishedOutput"
label="完成产量">
prop="RATE"
label="完成">
</el-table-column>
<el-table-column
prop="percentageComplete"
label="完成率">
prop="PLAN_DATE"
label="计划日期">
</el-table-column>
</el-table>
</el-row>
@ -61,12 +57,12 @@
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="16">
<div class="chart-wrapper">
<LineChart1 :chart-data="lineChartData"/>
<LineChart1 :chart-data="lineChartData1"/>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart/>
<pie-chart :chart-data="pieChartData"/>
</div>
</el-col>
</el-row>
@ -82,28 +78,21 @@ import LineChart1 from './dashboard/LineChart1'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import {getData} from '@/api/index'
const lineChartData = {
newVisitis: {
expectedData: [99, 98, 95, 93, 96, 93, 97],
actualData: [99, 98, 95, 93, 96, 93, 97],
expedData: [200, 192, 120, 144, 160, 130, 140]
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130],
expedData: [200, 192, 120, 144, 160, 130, 140]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130],
expedData: [200, 192, 120, 144, 160, 130, 140]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130],
expedData: [200, 192, 120, 144, 160, 130, 140]
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
const week = () => {
let today = new Date();
let firstDayOfYear = new Date(today.getFullYear(), 0, 1);
let dayOfWeek = firstDayOfYear.getDay();
let spendDay = 1;
if (dayOfWeek != 0) {
spendDay = 7 - dayOfWeek + 1;
}
firstDayOfYear = new Date(today.getFullYear(), 0, spendDay);
let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000);
return Math.ceil((d / 7) + 1)
}
export default {
@ -118,52 +107,242 @@ export default {
},
data() {
return {
lineChartData: lineChartData.newVisitis,
tableData: [
{
no: '1',
plant: '1301',
productionLine: '新产线',
workOrderNumber: '11236564',
productName: 'SC-187,C,特需',
productCode: '9002005735',
SalesOrderNumber: '0000055258',
scheduledProduction: '100',
FinishedOutput: '0',
percentageComplete: '0%'
topData: {},
lineChartData: {},
lineChartData1: {},
pieChartData: {},
tableData: []
}
},
mounted() {
getData({}).then(e => {
let data = e.data
this.topData = {
value1: data.planOrderSum,
value2: data.prodOrderSum,
value3: data.planProductSum,
value4: data.compProductSum,
}
this.tableData = data.todayOrderList
this.lineChartData = {
legend: {},
title: {
text: `${week()}周产量`,
textStyle: {
align: 'center',
color: '#000',
fontSize: 20,
},
top: '0%',
left: '0%',
},
{
no: '2',
plant: '1301',
productionLine: '新产线',
workOrderNumber: '11236570',
productName: 'SC-281C,C,特需',
productCode: '9002007012',
SalesOrderNumber: '0000055621',
scheduledProduction: '150',
FinishedOutput: '149',
percentageComplete: '99.33%'
xAxis: {
data: data.columnarList.map(val => val.BEGIN_DATE),
// boundaryGap: false,
axisTick: {
show: false
}
},
{
no: '3',
plant: '1301',
productionLine: '新产线',
workOrderNumber: '11234730',
productName: 'SC-500Y,YZ怡宝24YP,C',
productCode: '9002006928',
SalesOrderNumber: '0000055537',
scheduledProduction: '400',
FinishedOutput: '399',
percentageComplete: '99.75%'
grid: {
left: 10,
right: 10,
bottom: 20,
top: 50,
containLabel: true
},
]
}
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: [
{
axisTick: {
show: false
}
},
{
axisTick: {
show: false
},
axisLabel: {
formatter: '{value}%'
}
}
],
series: [
{
name: '订单履约率',
type: 'line',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#3888fa',
lineStyle: {
color: '#3888fa',
width: 2
},
// areaStyle: {
// color: '#f3f8ff'
// }
}
},
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
data: data.columnarList.map(val => val.RATE),
animationDuration: 1000,
animationEasing: 'quadraticOut'
},
{
name: '产量',
smooth: false,
type: 'bar',
barMaxWidth: 60,
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
normal: {
color: '#9fe080',
lineStyle: {
color: '#9fe080',
width: 2
},
areaStyle: {
color: '#f3f8ff'
}
}
},
data: data.columnarList.map(val => val.COMPLETE_AMOUNT),
animationDuration: 1000,
animationEasing: 'quadraticOut'
}
]
}
this.lineChartData1 = {
title: {
text: `${week()}周清单率`,
textStyle: {
align: 'center',
color: '#000',
fontSize: 20,
},
top: '0%',
left: '0%',
},
xAxis: {
data: data.lineList.map(val => val.BEGIN_DATE),
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 10,
right: 10,
bottom: 20,
top: 50,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
},
axisLabel: {
formatter: '{value}%'
}
},
legend: {},
series: [
{
name: '清单率',
smooth: false,
type: 'line',
itemStyle: {
normal: {
color: '#3888fa',
lineStyle: {
color: '#3888fa',
width: 2
},
areaStyle: {
color: '#f3f8ff'
}
}
},
data: data.lineList.map(val => val.COMPLETE_AMOUNT),
animationDuration: 2800,
animationEasing: 'quadraticOut'
}]
}
this.pieChartData = {
title: {
text: `${week()}周质量缺陷分布`,
textStyle: {
align: 'center',
color: '#000',
fontSize: 20,
},
top: '0%',
left: '0%',
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
bottom: '10',
},
series: [
{
type: 'pie',
roseType: 'radius',
radius: [15, 95],
center: ['50%', '46%'],
data: data.pieList.map(val => {
return {
value: val.SUM,
name: val.QUALITY_DEFECT_NAME
}
}),
animationEasing: 'cubicInOut',
animationDuration: 2600
}
]
}
})
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
}
}
methods: {}
}
</script>

@ -85,6 +85,7 @@ export default {
color: #0d2765;
font-size: 1.8vw;
font-weight: bold;
line-height: 3vw;
p{
text-indent: 2em;

@ -88,7 +88,7 @@ export default {
value: Math.random() * 200
}],
title: [
'三日订单执行情况',
'三日清单',
'产品发布',
'场景升级',
'重点工序监控',

@ -43,6 +43,13 @@ module.exports = {
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
'/3DBoard': {
target: `http://192.168.153.1:9999`,
changeOrigin: true,
pathRewrite: {
['^' + '/3DBoard']: ''
}
}
},
disableHostCheck: true

Loading…
Cancel
Save