You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
871 lines
19 KiB
Vue
871 lines
19 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="headTitle">生产制造运营中心</div>
|
|
<div class="exit" @click="exitFun"></div>
|
|
|
|
<div class="chart1">
|
|
<Chart ref="chart1"></Chart>
|
|
</div>
|
|
<div class="chart2">
|
|
<div class="title">3日内需要交付订单</div>
|
|
<div class="item" style="left: 2%">
|
|
<div class="itemTitle">完成数/订单数</div>
|
|
<div class="ratio">5/14</div>
|
|
</div>
|
|
<div class="item" style="left: 52%">>
|
|
<div class="itemTitle">完成量/产品量</div>
|
|
<div class="ratio">1004/1701</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart3">
|
|
<div class="title">本月需完成订单</div>
|
|
<div class="item" style="left: 2%">
|
|
<div class="itemTitle">完成数/订单数</div>
|
|
<div class="ratio">12/52</div>
|
|
</div>
|
|
<div class="item" style="left: 52%">>
|
|
<div class="itemTitle">完成量/产品量</div>
|
|
<div class="ratio">2333/6591</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart4">
|
|
<Chart ref="chart4"></Chart>
|
|
</div>
|
|
<div class="chart5">
|
|
<Chart ref="chart5"></Chart>
|
|
</div>
|
|
<div class="chart6">
|
|
<Chart ref="chart6"></Chart>
|
|
</div>
|
|
<div class="chart7">
|
|
<Chart ref="chart7"></Chart>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Chart from "@/components/board/Chart";
|
|
import {getData} from "@/api/board/getData";
|
|
import * as echarts from 'echarts'
|
|
|
|
export default {
|
|
name: "Liner",
|
|
components: {
|
|
Chart
|
|
},
|
|
props: {
|
|
exit: {
|
|
type: Function,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
mounted() {
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
this.$refs.chart1.setData({
|
|
title: {
|
|
text: "3日完成订单",
|
|
left: "center",
|
|
top: "5%",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 0.7 * vw,
|
|
align: "center",
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: '20%',
|
|
bottom: 1.5 * vw,
|
|
left: 2.5 * vw,
|
|
right: 2.5 * vw,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
fontSize: 0.5 * vw,
|
|
},
|
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: '数量',
|
|
type: "value",
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#90979c33",
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
fontSize: 0.5 * vw
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "应完成订单",
|
|
type: "bar",
|
|
barWidth: '30%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#5ecee0",
|
|
barBorderRadius: '50%',
|
|
},
|
|
},
|
|
data: [
|
|
709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
|
|
],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart4.setData({
|
|
title: {
|
|
text: "7日内合格率",
|
|
left: "center",
|
|
top: "5%",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 0.7 * vw,
|
|
align: "center",
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: '20%',
|
|
bottom: 1.5 * vw,
|
|
left: 2.5 * vw,
|
|
right: 2.5 * vw,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
fontSize: 0.5 * vw,
|
|
},
|
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: '合格率',
|
|
type: "value",
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#90979c44",
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
fontSize: 0.5 * vw,
|
|
formatter: '{value}%'
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "总数",
|
|
type: "line",
|
|
symbolSize: 10,
|
|
symbol: "circle",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(252,230,48,1)",
|
|
barBorderRadius: 0,
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
color: "#fff",
|
|
fontSize: 0.6 * vw,
|
|
formatter: function (p) {
|
|
return (p.value > 0 ? p.value : "") + '%';
|
|
},
|
|
},
|
|
},
|
|
},
|
|
data: [
|
|
106, 111, 96, 65, 86, 126, 101, 94, 100
|
|
],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart5.setData({
|
|
title: {
|
|
text: "订单履约率",
|
|
left: "center",
|
|
top: "5%",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 0.7 * vw,
|
|
align: "center",
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: '20%',
|
|
bottom: 1.5 * vw,
|
|
left: 2.5 * vw,
|
|
right: 2.5 * vw,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
legend: {
|
|
x: "center",
|
|
top: "12%",
|
|
textStyle: {
|
|
fontSize: 0.6 * vw,
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
fontSize: 0.5 * vw,
|
|
},
|
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
fontSize: 0.5 * vw
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: "value",
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#90979c",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
fontSize: 0.5 * vw
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "日计划数",
|
|
type: "bar",
|
|
borderWidth: '15%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#5ecee0",
|
|
},
|
|
},
|
|
data: [
|
|
709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
|
|
],
|
|
},
|
|
|
|
{
|
|
name: "日产量",
|
|
type: "bar",
|
|
borderWidth: '15%',
|
|
barGap: "-100%",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#78b4fe",
|
|
barBorderRadius: 0,
|
|
},
|
|
},
|
|
data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001],
|
|
},
|
|
{
|
|
name: "达成率",
|
|
type: "line",
|
|
symbolSize: 10,
|
|
symbol: "circle",
|
|
yAxisIndex: 1,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(252,230,48,1)",
|
|
barBorderRadius: 0,
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
color: "#fff",
|
|
fontSize: 0.6 * vw,
|
|
formatter: function (p) {
|
|
return (p.value > 0 ? p.value : "") + '%';
|
|
},
|
|
},
|
|
},
|
|
},
|
|
data: [
|
|
106, 111, 96, 65, 86, 126, 101, 94, 100
|
|
],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart7.setData({
|
|
title: {
|
|
text: "本月异常分布类型",
|
|
left: "center",
|
|
top: "5%",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 0.7 * vw,
|
|
align: "center",
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
|
},
|
|
series: [
|
|
{
|
|
name: "故障大类",
|
|
type: "pie",
|
|
selectedMode: "single",
|
|
radius: [0, "50%"],
|
|
|
|
label: {
|
|
normal: {
|
|
position: "inner",
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
data: [
|
|
{value: 335, name: "辅件缺陷"},
|
|
{value: 679, name: "箱体缺陷"},
|
|
{value: 1548, name: "性能缺陷"},
|
|
],
|
|
},
|
|
{
|
|
name: "故障小类",
|
|
type: "pie",
|
|
radius: ["50%", "65%"],
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
position: "outside",
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
},
|
|
},
|
|
|
|
data: [
|
|
{value: 335, name: "印刷品"},
|
|
{value: 310, name: "测温问题"},
|
|
{value: 234, name: "捡漏问题"},
|
|
{value: 135, name: "电检问题"},
|
|
{value: 1048, name: "内胆件"},
|
|
{value: 251, name: "压机室件"},
|
|
{value: 147, name: "后板"},
|
|
{value: 102, name: "塑料件"},
|
|
],
|
|
},
|
|
],
|
|
})
|
|
|
|
getData().then(e => {
|
|
this.$refs.chart6.setData({
|
|
title: {
|
|
text: "准时交付率（清单率）",
|
|
left: "center",
|
|
top: "5%",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 0.7 * vw,
|
|
align: "center",
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
},
|
|
grid: {
|
|
left: "0",
|
|
right: "4%",
|
|
bottom: "0",
|
|
top: '25%',
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
data: ['应完成订单', '实际完成订单', '准时交付率'],
|
|
right: 'center',
|
|
top: '10%',
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
itemWidth: 12,
|
|
itemHeight: 10,
|
|
// itemGap: 35
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: e.liner.inventoryStatus.x,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "white",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
// interval: 0,
|
|
// rotate: 40,
|
|
textStyle: {
|
|
fontFamily: "Microsoft YaHei",
|
|
},
|
|
},
|
|
},
|
|
|
|
yAxis: [
|
|
{
|
|
name: '数量 ',
|
|
type: "value",
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "white",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {},
|
|
},
|
|
{
|
|
name: '百分比',
|
|
type: "value",
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "white",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {},
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '应完成订单',
|
|
type: "bar",
|
|
barWidth: "30%",
|
|
barMaxWidth: 50,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#a8aab0",
|
|
fontStyle: "normal",
|
|
fontFamily: "微软雅黑",
|
|
fontSize: 0.75 * vw,
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "#39ffff",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#5affa6",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: e.liner.inventoryStatus.y[0].data,
|
|
},
|
|
{
|
|
name: '实际完成订单',
|
|
type: "bar",
|
|
barWidth: "30%",
|
|
barMaxWidth: 50,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#a8aab0",
|
|
fontStyle: "normal",
|
|
fontFamily: "微软雅黑",
|
|
fontSize: 0.75 * vw,
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "#4adfff",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#3d7aff",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
data: e.liner.inventoryStatus.y[1].data,
|
|
},
|
|
{
|
|
name: '准时交付率',
|
|
type: "line",
|
|
// smooth: true, //是否平滑曲线显示
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
showAllSymbol: true,
|
|
symbol: "emptyCircle",
|
|
symbolSize: 6,
|
|
yAxisIndex: 1,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 3,
|
|
color: '#fff',
|
|
},
|
|
borderColor: "#f0f",
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 16
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: '#F2D770',
|
|
border: 0,
|
|
},
|
|
// tooltip: {
|
|
// show: false
|
|
// },
|
|
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
|
|
},
|
|
],
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
exitFun() {
|
|
this.exit()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.app-container {
|
|
background-image: url("~@/assets/model/production/bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-color: #021e31;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.exit {
|
|
background-image: url("~@/assets/model/factoryIntroduction/exit.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 1%;
|
|
right: 1%;
|
|
font-weight: bold;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
color: #e7b219;
|
|
}
|
|
|
|
|
|
.headTitle {
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
font-size: 1.5vw;
|
|
color: #d6eaed;
|
|
letter-spacing: 10px;
|
|
}
|
|
|
|
.chart1 {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 1.3%;
|
|
width: 25%;
|
|
height: 43%;
|
|
background-color: #0b184f;
|
|
}
|
|
|
|
.chart2 {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 27.6%;
|
|
width: 45%;
|
|
height: 21%;
|
|
background-color: #0b184f;
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 1vw;
|
|
color: #d6eaed;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.item {
|
|
position: absolute;
|
|
top: 25%;
|
|
width: 45%;
|
|
height: 70%;
|
|
border: 1px solid #fff6;
|
|
|
|
.itemTitle {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #6fc3dd;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.ratio {
|
|
position: absolute;
|
|
bottom: 5%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #62aafe;
|
|
font-size: 3vw;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart3 {
|
|
position: absolute;
|
|
top: 32%;
|
|
left: 27.6%;
|
|
width: 45%;
|
|
height: 21%;
|
|
background-color: #0b184f;
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 1vw;
|
|
color: #d6eaed;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.item {
|
|
position: absolute;
|
|
top: 25%;
|
|
width: 45%;
|
|
height: 70%;
|
|
border: 1px solid #fff6;
|
|
|
|
.itemTitle {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #6fc3dd;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.ratio {
|
|
position: absolute;
|
|
bottom: 5%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #62aafe;
|
|
font-size: 3vw;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart4 {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 73.9%;
|
|
width: 25%;
|
|
height: 43%;
|
|
background-color: #0b184f;
|
|
}
|
|
|
|
.chart5 {
|
|
position: absolute;
|
|
top: 54.5%;
|
|
left: 1.3%;
|
|
width: 25%;
|
|
height: 43%;
|
|
background-color: #0b184f;
|
|
}
|
|
|
|
.chart6 {
|
|
position: absolute;
|
|
top: 54.5%;
|
|
left: 27.6%;
|
|
width: 45%;
|
|
height: 43%;
|
|
background-color: #0b184f;
|
|
}
|
|
|
|
.chart7 {
|
|
position: absolute;
|
|
top: 54.5%;
|
|
left: 73.9%;
|
|
width: 25%;
|
|
height: 43%;
|
|
background-color: #0b184f;
|
|
}
|
|
</style>
|