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.
1792 lines
41 KiB
Vue
1792 lines
41 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="exit" @click="exitFun"></div>
|
|
|
|
<div class="chart1">
|
|
<div class="title">订单执行分析</div>
|
|
<div class="border"></div>
|
|
<div class="chart11">
|
|
<Chart ref="chart11"></Chart>
|
|
</div>
|
|
<div class="chart12">
|
|
<Chart ref="chart12"></Chart>
|
|
</div>
|
|
</div>
|
|
<div class="chart2">
|
|
<div class="title">订单履约率</div>
|
|
<div class="border"></div>
|
|
<Chart ref="chart2"></Chart>
|
|
</div>
|
|
<div class="chart3">
|
|
<div class="title">准时交付率</div>
|
|
<div class="border"></div>
|
|
<Chart ref="chart3"></Chart>
|
|
</div>
|
|
<div class="chart4">
|
|
<div class="title"></div>
|
|
<div class="border"></div>
|
|
<div class="chart41">
|
|
<Chart ref="chart41"></Chart>
|
|
</div>
|
|
<div class="chart42">
|
|
<Chart ref="chart42"></Chart>
|
|
</div>
|
|
<div class="chart43">
|
|
<Chart ref="chart43"></Chart>
|
|
</div>
|
|
</div>
|
|
<div class="chart5">
|
|
<div class="title">质量分析</div>
|
|
<div class="border"></div>
|
|
<Chart ref="chart5"></Chart>
|
|
</div>
|
|
<div class="chart6">
|
|
<div class="title">当年市场不良率</div>
|
|
<div class="border"></div>
|
|
<Chart ref="chart6"></Chart>
|
|
</div>
|
|
<div class="chart7">
|
|
<div class="title">重点工序监控</div>
|
|
<div class="border"></div>
|
|
<Chart ref="chart7"></Chart>
|
|
</div>
|
|
<div class="bottom">
|
|
<div style="left: 20%">单台能耗</div>
|
|
<div style="left: 50%">设备状态</div>
|
|
<div style="left: 80%">产线OEE趋势</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Chart from "@/components/board/Chart";
|
|
|
|
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.chart11.setData({
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
title: {
|
|
text: "3日完成订单",
|
|
left: "20%",
|
|
top: "10%",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 0.7 * vw,
|
|
align: "center",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "人员类型",
|
|
type: "pie",
|
|
center: ['42%', '60%'],
|
|
radius: ["23%", "35%"],
|
|
color: [
|
|
"#16ff39",
|
|
"#ffe716",
|
|
],
|
|
labelLine: {
|
|
normal: {
|
|
show: true,
|
|
length: 0.3 * vw,
|
|
length2: 0.3 * vw,
|
|
lineStyle: {
|
|
width: 2,
|
|
},
|
|
},
|
|
},
|
|
labelLayout: {
|
|
moveOverlap: 'shiftX'
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: "{b}\n{c}",
|
|
fontSize: 0.7 * vw,
|
|
color: '#fff'
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: 30,
|
|
name: "已完成",
|
|
},
|
|
{
|
|
value: 70,
|
|
name: "未完成",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart12.setData({
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
title: {
|
|
text: "本月完成订单",
|
|
right: "20%",
|
|
top: "10%",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 0.7 * vw,
|
|
align: "center",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "人员类型",
|
|
type: "pie",
|
|
center: ['58%', '60%'],
|
|
radius: ["23%", "35%"],
|
|
color: [
|
|
"#16ff39",
|
|
"#ffe716",
|
|
],
|
|
labelLine: {
|
|
normal: {
|
|
show: true,
|
|
length: 0.3 * vw,
|
|
length2: 0.3 * vw,
|
|
lineStyle: {
|
|
width: 2,
|
|
},
|
|
},
|
|
},
|
|
labelLayout: {
|
|
moveOverlap: 'shiftX'
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: "{b}\n{c}",
|
|
fontSize: 0.7 * vw,
|
|
color: '#fff'
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: 30,
|
|
name: "已完成",
|
|
},
|
|
{
|
|
value: 70,
|
|
name: "未完成",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart2.setData({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: 1.5 * vw,
|
|
bottom: 1.5 * vw,
|
|
left: 2.5 * vw,
|
|
right: 2.5 * vw,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
legend: {
|
|
x: "center",
|
|
top: "0",
|
|
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.chart3.setData({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: 1.5 * vw,
|
|
bottom: 1.5 * vw,
|
|
left: 2.5 * vw,
|
|
right: 2.5 * vw,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
legend: {
|
|
x: "center",
|
|
top: "0",
|
|
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",
|
|
barWidth: '30%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#5ecee0",
|
|
barBorderRadius: '50%',
|
|
},
|
|
},
|
|
data: [
|
|
709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
|
|
],
|
|
},
|
|
|
|
{
|
|
name: "实际完成订单",
|
|
type: "bar",
|
|
barWidth: '30%',
|
|
barGap: "-100%",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#78b4fe",
|
|
barBorderRadius: '50%',
|
|
},
|
|
},
|
|
data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001],
|
|
},
|
|
{
|
|
name: "准时交付率",
|
|
type: "line",
|
|
symbolSize: 10,
|
|
symbol: "circle",
|
|
yAxisIndex: 1,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#ebf2ff",
|
|
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.chart41.setData({
|
|
tooltip: {},
|
|
grid: {
|
|
top: "25%",
|
|
left: "5%",
|
|
right: "1%",
|
|
bottom: "8%",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
itemGap: 50,
|
|
top: "3%",
|
|
textStyle: {
|
|
fontSize: 0.6 * vw,
|
|
color: "#f9f9f9",
|
|
borderColor: "#fff",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#f9f9f9",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
fontSize: 0.4 * vw,
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: '能耗/kw·h',
|
|
type: "value",
|
|
min: 0,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#0a3256",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
margin: 5,
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
},
|
|
fontSize: 0.4 * vw,
|
|
formatter: '{value}%'
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "能耗",
|
|
type: "line",
|
|
// smooth: true, //是否平滑曲线显示
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
showAllSymbol: true,
|
|
symbol: "emptyCircle",
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#4268aa", // 线条颜色
|
|
},
|
|
borderColor: "#ecf3ff",
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
fontSize: 0.4 * vw,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
formatter: '{c}kw·h'
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#28ffb3",
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart42.setData({
|
|
series: [
|
|
{
|
|
name: "第一个圆环",
|
|
type: "pie",
|
|
clockWise: false,
|
|
radius: ['35%', '40%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
shadowBlur: 0,
|
|
shadowColor: "#203665",
|
|
},
|
|
},
|
|
hoverAnimation: false,
|
|
center: ["20%", "50%"],
|
|
data: [
|
|
{
|
|
value: 25,
|
|
label: {
|
|
normal: {
|
|
rich: {
|
|
a: {
|
|
color: "#3a7ad5",
|
|
align: "center",
|
|
fontSize: 1.1 * vw,
|
|
fontWeight: "bold",
|
|
},
|
|
b: {
|
|
color: "#fff",
|
|
align: "center",
|
|
fontSize: 0.6 * vw,
|
|
},
|
|
},
|
|
formatter: function (params) {
|
|
return (
|
|
"{a|" +
|
|
params.value +
|
|
"}" +
|
|
"\n{b|设备总数}"
|
|
);
|
|
},
|
|
position: "center",
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: "14",
|
|
fontWeight: "normal",
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#2c6cc4",
|
|
shadowColor: "#2c6cc4",
|
|
shadowBlur: 0,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: 75,
|
|
name: "invisible",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#24375c",
|
|
},
|
|
emphasis: {
|
|
color: "#24375c",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "第二个圆环",
|
|
type: "pie",
|
|
clockWise: false,
|
|
radius: ['35%', '40%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
shadowBlur: 0,
|
|
shadowColor: "#203665",
|
|
},
|
|
},
|
|
hoverAnimation: false,
|
|
center: ["50%", "50%"],
|
|
data: [
|
|
{
|
|
value: 50,
|
|
label: {
|
|
normal: {
|
|
rich: {
|
|
a: {
|
|
color: "#d03e93",
|
|
align: "center",
|
|
fontSize: 1.1 * vw,
|
|
fontWeight: "bold",
|
|
},
|
|
b: {
|
|
color: "#fff",
|
|
align: "center",
|
|
fontSize: 0.5 * vw,
|
|
},
|
|
},
|
|
formatter: function (params) {
|
|
return (
|
|
"{a|" +
|
|
params.value +
|
|
"}" +
|
|
"\n{b|在网设备数}"
|
|
);
|
|
},
|
|
position: "center",
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: "14",
|
|
fontWeight: "normal",
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#ef45ac",
|
|
shadowColor: "#ef45ac",
|
|
shadowBlur: 0,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: 50,
|
|
name: "invisible",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#412a4e",
|
|
},
|
|
emphasis: {
|
|
color: "#412a4e",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "第三个圆环",
|
|
type: "pie",
|
|
clockWise: false,
|
|
radius: ['35%', '40%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
shadowBlur: 0,
|
|
shadowColor: "#203665",
|
|
},
|
|
},
|
|
hoverAnimation: false,
|
|
center: ["80%", "50%"],
|
|
data: [
|
|
{
|
|
value: 75,
|
|
label: {
|
|
normal: {
|
|
rich: {
|
|
a: {
|
|
color: "#603dd0",
|
|
align: "center",
|
|
fontSize: 1.1 * vw,
|
|
fontWeight: "bold",
|
|
},
|
|
b: {
|
|
color: "#fff",
|
|
align: "center",
|
|
fontSize: 0.5 * vw,
|
|
},
|
|
},
|
|
formatter: function (params) {
|
|
return (
|
|
"{a|" +
|
|
params.value +
|
|
"}" +
|
|
"\n{b|离线设备数}"
|
|
);
|
|
},
|
|
position: "center",
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: "14",
|
|
fontWeight: "normal",
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#613fd1",
|
|
shadowColor: "#613fd1",
|
|
shadowBlur: 0,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: 25,
|
|
name: "invisible",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#453284",
|
|
},
|
|
emphasis: {
|
|
color: "#453284",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart43.setData({
|
|
tooltip: {},
|
|
grid: {
|
|
top: "25%",
|
|
left: "5%",
|
|
right: "1%",
|
|
bottom: "8%",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
itemGap: 0,
|
|
top: "3%",
|
|
textStyle: {
|
|
fontSize: 0.6 * vw,
|
|
color: "#f9f9f9",
|
|
borderColor: "#fff",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#f9f9f9",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
fontSize: 0.4 * vw,
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: 'OEE',
|
|
type: "value",
|
|
min: 0,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#0a3256",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
margin: 5,
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
},
|
|
fontSize: 0.4 * vw,
|
|
formatter: '{value}%'
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "一期",
|
|
type: "line",
|
|
// smooth: true, //是否平滑曲线显示
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
showAllSymbol: true,
|
|
symbol: "emptyCircle",
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#e8f1ff", // 线条颜色
|
|
},
|
|
borderColor: "#28ffb3",
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#28ffb3",
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2],
|
|
},
|
|
{
|
|
name: "二期",
|
|
type: "line",
|
|
// smooth: true, //是否平滑曲线显示
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
showAllSymbol: true,
|
|
symbol: "emptyCircle",
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#4268aa", // 线条颜色
|
|
},
|
|
borderColor: "#ecf3ff",
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#28ffb3",
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart5.setData({
|
|
series: [
|
|
{
|
|
name: "第一个圆环",
|
|
type: "pie",
|
|
clockWise: false,
|
|
radius: ['40%', '45%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
shadowBlur: 0,
|
|
shadowColor: "#203665",
|
|
},
|
|
},
|
|
hoverAnimation: false,
|
|
center: ["20%", "50%"],
|
|
data: [
|
|
{
|
|
value: 25,
|
|
label: {
|
|
normal: {
|
|
rich: {
|
|
a: {
|
|
color: "#3a7ad5",
|
|
align: "center",
|
|
fontSize: 1.1 * vw,
|
|
fontWeight: "bold",
|
|
},
|
|
b: {
|
|
color: "#fff",
|
|
align: "center",
|
|
fontSize: 0.6 * vw,
|
|
},
|
|
},
|
|
formatter: function (params) {
|
|
return (
|
|
"{a|" +
|
|
params.value +
|
|
"}" +
|
|
"\n{b|合格率}"
|
|
);
|
|
},
|
|
position: "center",
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: "14",
|
|
fontWeight: "normal",
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#2c6cc4",
|
|
shadowColor: "#2c6cc4",
|
|
shadowBlur: 0,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: 75,
|
|
name: "invisible",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#24375c",
|
|
},
|
|
emphasis: {
|
|
color: "#24375c",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "第二个圆环",
|
|
type: "pie",
|
|
clockWise: false,
|
|
radius: ['40%', '45%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
shadowBlur: 0,
|
|
shadowColor: "#203665",
|
|
},
|
|
},
|
|
hoverAnimation: false,
|
|
center: ["50%", "50%"],
|
|
data: [
|
|
{
|
|
value: 50,
|
|
label: {
|
|
normal: {
|
|
rich: {
|
|
a: {
|
|
color: "#d03e93",
|
|
align: "center",
|
|
fontSize: 1.1 * vw,
|
|
fontWeight: "bold",
|
|
},
|
|
b: {
|
|
color: "#fff",
|
|
align: "center",
|
|
fontSize: 0.5 * vw,
|
|
},
|
|
},
|
|
formatter: function (params) {
|
|
return (
|
|
"{a|" +
|
|
params.value +
|
|
"}" +
|
|
"\n{b|OQC抽检分数}"
|
|
);
|
|
},
|
|
position: "center",
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: "14",
|
|
fontWeight: "normal",
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#ef45ac",
|
|
shadowColor: "#ef45ac",
|
|
shadowBlur: 0,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: 50,
|
|
name: "invisible",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#412a4e",
|
|
},
|
|
emphasis: {
|
|
color: "#412a4e",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "第三个圆环",
|
|
type: "pie",
|
|
clockWise: false,
|
|
radius: ['40%', '45%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
shadowBlur: 0,
|
|
shadowColor: "#203665",
|
|
},
|
|
},
|
|
hoverAnimation: false,
|
|
center: ["80%", "50%"],
|
|
data: [
|
|
{
|
|
value: 75,
|
|
label: {
|
|
normal: {
|
|
rich: {
|
|
a: {
|
|
color: "#603dd0",
|
|
align: "center",
|
|
fontSize: 1.1 * vw,
|
|
fontWeight: "bold",
|
|
},
|
|
b: {
|
|
color: "#fff",
|
|
align: "center",
|
|
fontSize: 0.5 * vw,
|
|
},
|
|
},
|
|
formatter: function (params) {
|
|
return (
|
|
"{a|" +
|
|
params.value +
|
|
"}" +
|
|
"\n{b|质量控制达标率}"
|
|
);
|
|
},
|
|
position: "center",
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: "14",
|
|
fontWeight: "normal",
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#613fd1",
|
|
shadowColor: "#613fd1",
|
|
shadowBlur: 0,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: 25,
|
|
name: "invisible",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#453284",
|
|
},
|
|
emphasis: {
|
|
color: "#453284",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart6.setData({
|
|
tooltip: {},
|
|
grid: {
|
|
top: "25%",
|
|
left: "5%",
|
|
right: "1%",
|
|
bottom: "8%",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
itemGap: 50,
|
|
top: "3%",
|
|
textStyle: {
|
|
fontSize: 0.6 * vw,
|
|
color: "#f9f9f9",
|
|
borderColor: "#fff",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#f9f9f9",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
fontSize: 0.4 * vw,
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: '不良率',
|
|
type: "value",
|
|
min: 0,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#0a3256",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
margin: 5,
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
},
|
|
fontSize: 0.4 * vw,
|
|
formatter: '{value}%'
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "当年市场不良率",
|
|
type: "line",
|
|
// smooth: true, //是否平滑曲线显示
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
showAllSymbol: true,
|
|
symbol: "emptyCircle",
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#e8f1ff", // 线条颜色
|
|
},
|
|
borderColor: "#28ffb3",
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "bottom",
|
|
fontSize: 0.4 * vw,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
formatter: '{c}%'
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#28ffb3",
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2],
|
|
},
|
|
{
|
|
name: "目标市场不良率",
|
|
type: "line",
|
|
// smooth: true, //是否平滑曲线显示
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
showAllSymbol: true,
|
|
symbol: "emptyCircle",
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#4268aa", // 线条颜色
|
|
},
|
|
borderColor: "#ecf3ff",
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
fontSize: 0.4 * vw,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
formatter: '{c}%'
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#28ffb3",
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
|
|
},
|
|
],
|
|
})
|
|
this.$refs.chart7.setData({
|
|
tooltip: {},
|
|
grid: {
|
|
top: "25%",
|
|
left: "5%",
|
|
right: "5%",
|
|
bottom: "8%",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
itemGap: 50,
|
|
top: "2%",
|
|
textStyle: {
|
|
color: "#f9f9f9",
|
|
borderColor: "#fff",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#f9f9f9",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
min: 0,
|
|
// max: 140,
|
|
splitNumber: 7,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#0a3256",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
margin: 5,
|
|
textStyle: {
|
|
fontSize: 0.5 * vw,
|
|
color: "#d1e6eb",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: "value",
|
|
min: 0,
|
|
// max: 140,
|
|
splitNumber: 7,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#0a3256",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
margin: 5,
|
|
textStyle: {
|
|
fontSize: 0.5 * vw,
|
|
color: "#d1e6eb",
|
|
},
|
|
formatter: '{value}%'
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "质检次数",
|
|
type: "bar",
|
|
barWidth: 20,
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
fontSize: 0.5 * vw,
|
|
color: "#fff",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#72b3fe'
|
|
},
|
|
},
|
|
data: [200, 382, 102, 267, 186, 315, 316],
|
|
},
|
|
{
|
|
name: "合格率",
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
// smooth: true, //是否平滑曲线显示
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
showAllSymbol: true,
|
|
symbol: "emptyCircle",
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#ecf3ff", // 线条颜色
|
|
},
|
|
borderColor: "#6d88bf",
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
fontSize: 0.5 * vw,
|
|
color: "#fff",
|
|
},
|
|
formatter: '{c}%'
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#28ffb3",
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
data: [96.74, 96.68, 98.76, 99.75, 98.58, 98.57, 98.43],
|
|
},
|
|
],
|
|
})
|
|
},
|
|
methods: {
|
|
exitFun() {
|
|
this.exit()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.app-container {
|
|
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;
|
|
}
|
|
|
|
.chart1 {
|
|
content: "";
|
|
background-image: url("~@/assets/model/dataCentre/bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 5%;
|
|
width: 18%;
|
|
height: 11.1vw;
|
|
|
|
.border {
|
|
content: "";
|
|
background-image: url("~@/assets/model/dataCentre/border.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: -2vw;
|
|
color: #fff;
|
|
font-size: 1vw;
|
|
border-left: 3px solid #0251d1;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.chart11 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 70%;
|
|
height: 100%;
|
|
}
|
|
|
|
.chart12 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 30%;
|
|
width: 70%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.chart2 {
|
|
background-image: url("~@/assets/model/dataCentre/bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 40%;
|
|
left: 5%;
|
|
width: 18%;
|
|
height: 11.1vw;
|
|
|
|
.border {
|
|
content: "";
|
|
background-image: url("~@/assets/model/dataCentre/border.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: -2vw;
|
|
color: #fff;
|
|
font-size: 1vw;
|
|
border-left: 3px solid #0251d1;
|
|
padding-left: 12px;
|
|
}
|
|
}
|
|
|
|
.chart3 {
|
|
background-image: url("~@/assets/model/dataCentre/bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 70%;
|
|
left: 5%;
|
|
width: 18%;
|
|
height: 11.1vw;
|
|
|
|
.border {
|
|
content: "";
|
|
background-image: url("~@/assets/model/dataCentre/border.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: -2vw;
|
|
color: #fff;
|
|
font-size: 1vw;
|
|
border-left: 3px solid #0251d1;
|
|
padding-left: 12px;
|
|
}
|
|
}
|
|
|
|
.chart4 {
|
|
background-image: url("~@/assets/model/dataCentre/bg2.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
top: 70%;
|
|
left: 50%;
|
|
width: 45%;
|
|
height: 11.1vw;
|
|
|
|
.border {
|
|
content: "";
|
|
background-image: url("~@/assets/model/dataCentre/border2.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.chart41 {
|
|
position: absolute;
|
|
top: 14%;
|
|
left: 3%;
|
|
width: 28%;
|
|
height: 80%;
|
|
border: 1px solid #fff9;
|
|
}
|
|
|
|
.chart42 {
|
|
position: absolute;
|
|
top: 14%;
|
|
left: 50%;
|
|
width: 28%;
|
|
height: 80%;
|
|
border: 1px solid #fff9;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.chart43 {
|
|
position: absolute;
|
|
top: 14%;
|
|
right: 3%;
|
|
width: 28%;
|
|
height: 80%;
|
|
border: 1px solid #fff9;
|
|
}
|
|
}
|
|
|
|
.chart5 {
|
|
background-image: url("~@/assets/model/dataCentre/bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 10%;
|
|
right: 5%;
|
|
width: 18%;
|
|
height: 11.1vw;
|
|
|
|
.border {
|
|
content: "";
|
|
background-image: url("~@/assets/model/dataCentre/border.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: -2vw;
|
|
color: #fff;
|
|
font-size: 1vw;
|
|
border-left: 3px solid #0251d1;
|
|
padding-left: 12px;
|
|
}
|
|
}
|
|
|
|
.chart6 {
|
|
background-image: url("~@/assets/model/dataCentre/bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 40%;
|
|
right: 5%;
|
|
width: 18%;
|
|
height: 11.1vw;
|
|
|
|
.border {
|
|
content: "";
|
|
background-image: url("~@/assets/model/dataCentre/border.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: -2vw;
|
|
color: #fff;
|
|
font-size: 1vw;
|
|
border-left: 3px solid #0251d1;
|
|
padding-left: 12px;
|
|
}
|
|
}
|
|
|
|
.chart7 {
|
|
background-image: url("~@/assets/model/dataCentre/bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 70%;
|
|
right: 5%;
|
|
width: 18%;
|
|
height: 11.1vw;
|
|
|
|
.border {
|
|
content: "";
|
|
background-image: url("~@/assets/model/dataCentre/border.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: -2vw;
|
|
color: #fff;
|
|
font-size: 1vw;
|
|
border-left: 3px solid #0251d1;
|
|
padding-left: 12px;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
background-image: url("~@/assets/model/dataCentre/bottom.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 67%;
|
|
left: 50%;
|
|
width: 27%;
|
|
height: 1.4vw;
|
|
transform: translateX(-50%);
|
|
|
|
div {
|
|
position: absolute;
|
|
font-size: 0.6vw;
|
|
line-height: 1.4vw;
|
|
color: #fff;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
</style>
|