添加新的看板
suixy
24 hours ago
parent
d7ef2f65a5
commit
eacea59ef1
Binary file not shown.
|
After Width: | Height: | Size: 865 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
@ -0,0 +1,643 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="headTitle">数字化注塑车间管控中心</div>
|
||||
<div class="text1" style="top: 11.8%;left: 4.5%;letter-spacing: 0.3vw">
|
||||
<span>工单总数:</span>
|
||||
<span style="color: #fff;letter-spacing: 0.2vw"> 08</span>
|
||||
<span style="color: #fff;letter-spacing: 0.2vw">个</span>
|
||||
</div>
|
||||
<div class="text1" style="top: 11.8%;left: 19%;letter-spacing: 0.5vw">
|
||||
<span>已完成:</span>
|
||||
<span style="color: #43FC36;letter-spacing: 0.2vw"> 07</span>
|
||||
<span style="color: #fff;letter-spacing: 0.2vw">个</span>
|
||||
</div>
|
||||
<div class="text1" style="top: 11.8%;left: 33.8%;letter-spacing: 0.5vw">
|
||||
<span>完成率:</span>
|
||||
<span style="color: #43FC35;letter-spacing: 0.2vw"> 90</span>
|
||||
<span style="color: #fff;letter-spacing: 0.2vw">%</span>
|
||||
</div>
|
||||
<div class="text1" style="top: 11.8%;left: 48.2%;letter-spacing: 0.3vw">
|
||||
<span>停机工单:</span>
|
||||
<span style="color: #EF0506;letter-spacing: 0.2vw"> 00</span>
|
||||
<span style="color: #fff;letter-spacing: 0.2vw">个</span>
|
||||
</div>
|
||||
<div class="text1" style="top: 11.8%;left: 62.9%;letter-spacing: 0.1vw">
|
||||
<span>平均响应时间:</span>
|
||||
<span style="color: #ECB808;letter-spacing: 0.2vw"> 123.45</span>
|
||||
<span style="color: #fff;letter-spacing: 0.2vw">min</span>
|
||||
</div>
|
||||
<div class="text1" style="top: 11.8%;left: 84%;letter-spacing: 0.1vw">
|
||||
<span>平均维修时间:</span>
|
||||
<span style="color: #E10806;letter-spacing: 0.2vw"> 0.25</span>
|
||||
<span style="color: #fff;letter-spacing: 0.2vw">H</span>
|
||||
</div>
|
||||
<div class="text2" style="top: 19.7%;left: 11%;">设备保养执行情况</div>
|
||||
<div class="text2" style="top: 19.7%;left: 42.5%;">设备巡检执行情况</div>
|
||||
<div class="text2" style="top: 19.7%;left: 74.5%;">故障原因统计TOP5</div>
|
||||
<div class="text2" style="top: 59.7%;left: 9.7%;">故障数量曲线</div>
|
||||
<div class="text2" style="top: 59.7%;left: 74.5%;">备件消耗费用TOP5</div>
|
||||
<div class="text3" style="top: 31%;left: 20.9%;">计划保养</div>
|
||||
<div class="text3" style="top: 31%;left: 27.5%">已保养</div>
|
||||
<div class="text3" style="top: 42.5%;left: 18.8%;">待保养</div>
|
||||
<div class="text3" style="top: 42.5%;left: 24.6%;">保养中</div>
|
||||
<div class="text3" style="top: 42.5%;left: 30.3%;">待验证</div>
|
||||
<div class="text4" style="top: 34.3%;left: 20.9%;font-size: 1vw">3单</div>
|
||||
<div class="text4" style="top: 34.3%;left: 27.5%;font-size: 1vw">2单</div>
|
||||
<div class="text4" style="top: 45.6%;left: 18.8%;">0% / <span style="font-size: 0.6vw">0单</span></div>
|
||||
<div class="text4" style="top: 45.6%;left: 24.6%;">0% / <span style="font-size: 0.6vw">0单</span></div>
|
||||
<div class="text4" style="top: 45.6%;left: 30.3%;">33.3% / <span style="font-size: 0.6vw">1单</span></div>
|
||||
<div class="chart1">
|
||||
<div class="title"><span style="font-size: 1.5vw;font-weight: 800">66.6</span>%</div>
|
||||
<div class="subTitle">完成率</div>
|
||||
<Chart ref="chart1"></Chart>
|
||||
</div>
|
||||
<div class="chart2">
|
||||
<div class="deviceNum">应检设备<span style="color: #56BDFF;font-weight: 800;margin-left: 1vw">20台</span></div>
|
||||
<div class="title"><span style="font-size: 1.5vw;font-weight: 800">68</span>%</div>
|
||||
<div class="subTitle">完成率</div>
|
||||
<Chart ref="chart2"></Chart>
|
||||
</div>
|
||||
<div class="chart3">
|
||||
<Chart ref="chart3"></Chart>
|
||||
</div>
|
||||
<div class="chart4">
|
||||
<Chart ref="chart4"></Chart>
|
||||
</div>
|
||||
<div class="repairTimes">
|
||||
<div class="expendImg" v-if="true"></div>
|
||||
<div class="item" v-for="i in 5" v-else>
|
||||
<div class="num">{{ i }}</div>
|
||||
<div class="deviceName">SC-228NE</div>
|
||||
<div class="schedule">
|
||||
<div class="progressBar" :style="{width: 100 - ((i-1) * 10) + '%'}"></div>
|
||||
</div>
|
||||
<div class="times">{{ 10 - i + 1 }}次</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import Chart from "@/components/board/Chart.vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
||||
export default {
|
||||
components: {
|
||||
Chart
|
||||
},
|
||||
name: "Liner",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
let data = [
|
||||
{
|
||||
value: 37,
|
||||
name: '实验设备',
|
||||
index: 0,
|
||||
itemStyle: {
|
||||
color: '#24ACFF',
|
||||
borderColor: '#000',
|
||||
borderWidth: 2
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 24,
|
||||
name: '未检设备',
|
||||
index: 1,
|
||||
itemStyle: {
|
||||
color: '#3CFD96',
|
||||
borderColor: '#000',
|
||||
borderWidth: 2
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 22,
|
||||
name: '正常设备',
|
||||
index: 2,
|
||||
itemStyle: {
|
||||
color: '#FEE924',
|
||||
borderColor: '#000',
|
||||
borderWidth: 2
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
index: 3,
|
||||
name: '异常设备',
|
||||
itemStyle: {
|
||||
color: '#FE6624',
|
||||
borderColor: '#000',
|
||||
borderWidth: 2
|
||||
},
|
||||
},
|
||||
]
|
||||
let chartData = [
|
||||
{
|
||||
value: 36,
|
||||
name: '维护故障',
|
||||
index: 0,
|
||||
itemStyle: {
|
||||
color: '#35DF7C',
|
||||
borderColor: '#000',
|
||||
borderWidth: 2
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: '运行故障',
|
||||
index: 1,
|
||||
itemStyle: {
|
||||
color: '#24ACFF',
|
||||
borderColor: '#000',
|
||||
borderWidth: 2
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 34,
|
||||
name: '自然故障',
|
||||
index: 2,
|
||||
itemStyle: {
|
||||
color: '#EDE943',
|
||||
borderColor: '#000',
|
||||
borderWidth: 2
|
||||
},
|
||||
},
|
||||
]
|
||||
this.$refs.chart1.setData({
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
center: ["50%", "50%"],
|
||||
radius: ['75%', '81%'],
|
||||
clockwise: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 66,
|
||||
name: '不合格数',
|
||||
itemStyle: {
|
||||
color: '#00AFFF'
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 34,
|
||||
name: '合格数',
|
||||
itemStyle: {
|
||||
color: '#0000'
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
})
|
||||
const rich1 = {};
|
||||
data.forEach(item => {
|
||||
rich1[`val_${item.index}`] = {color: item.itemStyle.color, fontWeight: 'bold', fontSize: 1.2 * vw};
|
||||
});
|
||||
this.$refs.chart2.setData({
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
y: 'center',
|
||||
x: '55%',
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 0.9 * vw,
|
||||
lineHeight: 1.5 * vw,
|
||||
rich: {
|
||||
...rich1
|
||||
}
|
||||
},
|
||||
data: data.map((item) => item.name),
|
||||
formatter: (params) => {
|
||||
let itemData = data.find(item => item.name === params)
|
||||
return `${params} {val_${itemData.index}|${itemData.value}%}`
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
center: ["23%", "50%"],
|
||||
radius: ['75%', '85%'],
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: data
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
center: ["23%", "50%"],
|
||||
radius: ['55%', '75%'],
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: data.map(item => {
|
||||
return {
|
||||
...item,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
...item.itemStyle,
|
||||
color: item.itemStyle.color + '44',
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
]
|
||||
})
|
||||
this.$refs.chart2.on(['legendselectchanged', (params) => {
|
||||
this.$refs.chart2.chart.dispatchAction({
|
||||
type: 'legendSelect',
|
||||
name: params.name
|
||||
})
|
||||
}])
|
||||
this.$refs.chart2.on(['mousemove', (params) => {
|
||||
if (params.seriesType !== 'pie') return
|
||||
this.$refs.chart2.chart.dispatchAction({
|
||||
type: 'downplay'
|
||||
})
|
||||
this.$refs.chart2.chart.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: params.dataIndex
|
||||
})
|
||||
}])
|
||||
this.$refs.chart2.on(['mouseout', (params) => {
|
||||
if (params.seriesType !== 'pie') return
|
||||
|
||||
this.$refs.chart2.chart.dispatchAction({
|
||||
type: 'downplay',
|
||||
})
|
||||
}])
|
||||
const rich = {};
|
||||
chartData.forEach(item => {
|
||||
rich[`val_${item.index}`] = {color: item.itemStyle.color, fontWeight: 'bold', fontSize: 1.2 * vw};
|
||||
});
|
||||
this.$refs.chart3.setData({
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
y: 'center',
|
||||
x: '60%',
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 0.9 * vw,
|
||||
lineHeight: 1.8 * vw,
|
||||
rich: {
|
||||
...rich,
|
||||
}
|
||||
},
|
||||
data: chartData.map((item) => item.name),
|
||||
formatter: (params) => {
|
||||
let itemData = chartData.find(item => item.name === params)
|
||||
let str = `${params} {val_${itemData.index}|${itemData.value}%}`
|
||||
return str
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
roseType: 'radius',
|
||||
center: ["27%", "50%"],
|
||||
radius: ['60%', '85%'],
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: chartData
|
||||
},
|
||||
]
|
||||
})
|
||||
this.$refs.chart4.setData({
|
||||
xAxis: {
|
||||
data: Array(30).fill(0).map((item, index) => index + 1),
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#377097',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
color: '#4C95C1',
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
color: '#37709799',
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
color: '#37709799',
|
||||
type: 'dashed',
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#377097',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
color: '#4C95C1',
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
color: '#37709799',
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
color: '#37709799',
|
||||
type: 'dashed',
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 20,
|
||||
right: 20,
|
||||
bottom: 40,
|
||||
left: 50
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
symbolSize: 6,
|
||||
symbol: 'circle',
|
||||
itemStyle: {
|
||||
color: '#68CCFE', // 点填充颜色
|
||||
borderColor: '#FBFFFA', // 点边框颜色
|
||||
borderWidth: 2 // 边框宽度
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#66C0F2', // 折线颜色
|
||||
width: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: Array(30).fill(0).map((item, index) => {
|
||||
let num = Math.floor(Math.random() * 15) - 9
|
||||
return Math.max(num, 0)
|
||||
})
|
||||
},
|
||||
]
|
||||
})
|
||||
},
|
||||
methods: {},
|
||||
computed: {
|
||||
scrollTableData() {
|
||||
return Array(222).fill(0).map(i => {
|
||||
return {
|
||||
value1: Math.ceil(Math.floor(Math.random() * 100)) + 'WD',
|
||||
value2: Math.ceil(Math.floor(Math.random() * 100)),
|
||||
value3: Math.ceil(Math.floor(Math.random() * 100)),
|
||||
value4: Math.ceil(Math.floor(Math.random() * 100)),
|
||||
value5: Math.ceil(Math.floor(Math.random() * 100)) + '%',
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.headTitle {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
font-size: 1.5vw;
|
||||
color: #d6eaed;
|
||||
letter-spacing: 0.3vw;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-image: url("../../../assets/board/boardBg4.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text1 {
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
letter-spacing: 0.2vw;
|
||||
font-size: 1.25vw;
|
||||
color: #69CBFF;
|
||||
}
|
||||
|
||||
.text2 {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
letter-spacing: 0.2vw;
|
||||
font-size: 1.2vw;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.text3 {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
letter-spacing: 0.1vw;
|
||||
font-size: 0.8vw;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.text4 {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 0.9vw;
|
||||
color: #FEFEFD;
|
||||
}
|
||||
|
||||
.chart1 {
|
||||
position: absolute;
|
||||
top: 28.4%;
|
||||
left: 4.85%;
|
||||
width: 10.4%;
|
||||
height: 18.5%;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
bottom: 51%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: #55BCFE;
|
||||
font-size: 1.1vw;
|
||||
letter-spacing: 0.2vw;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
position: absolute;
|
||||
top: 51%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: #55BCFE;
|
||||
font-size: 0.8vw;
|
||||
}
|
||||
}
|
||||
|
||||
.chart2 {
|
||||
position: absolute;
|
||||
top: 27.6%;
|
||||
left: 37.75%;
|
||||
width: 27%;
|
||||
height: 22.1%;
|
||||
|
||||
.deviceNum {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 55%;
|
||||
color: #fff;
|
||||
font-size: 1vw;
|
||||
letter-spacing: 0.1vw;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
bottom: 51%;
|
||||
left: 23%;
|
||||
transform: translateX(-50%);
|
||||
color: #55BCFE;
|
||||
font-size: 1.1vw;
|
||||
letter-spacing: 0.2vw;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
position: absolute;
|
||||
top: 51%;
|
||||
left: 23%;
|
||||
transform: translateX(-50%);
|
||||
color: #55BCFE;
|
||||
font-size: 0.8vw;
|
||||
}
|
||||
}
|
||||
|
||||
.chart3 {
|
||||
position: absolute;
|
||||
top: 27.6%;
|
||||
left: 68.05%;
|
||||
width: 27%;
|
||||
height: 22.1%;
|
||||
|
||||
}
|
||||
|
||||
.chart4 {
|
||||
position: absolute;
|
||||
top: 62.5%;
|
||||
left: 3.35%;
|
||||
width: 62%;
|
||||
height: 32.6%;
|
||||
}
|
||||
|
||||
.repairTimes {
|
||||
position: absolute;
|
||||
top: 62.7%;
|
||||
left: 66.3%;
|
||||
width: 30.4%;
|
||||
height: 32.5%;
|
||||
|
||||
.expendImg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 15.2vw;
|
||||
height: 9.55vw;
|
||||
transform: translate(-50%, -50%);
|
||||
background-image: url("../../../assets/board/expendImg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
position: relative;
|
||||
|
||||
.num {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 8%;
|
||||
width: 1vw;
|
||||
height: 1vw;
|
||||
font-size: 0.8vw;
|
||||
text-align: center;
|
||||
transform: translate(-50%, -50%);
|
||||
line-height: calc(1vw - 2px);
|
||||
color: #1B61D8;
|
||||
background-color: #092C52;
|
||||
border: 1px solid #0D598F;
|
||||
}
|
||||
|
||||
.deviceName {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 15%;
|
||||
font-size: 0.8vw;
|
||||
transform: translateY(-50%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.schedule {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 35%;
|
||||
transform: translateY(-50%);
|
||||
width: 50%;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #172B47;
|
||||
overflow: hidden;
|
||||
|
||||
.progressBar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #1068E4, #4E99FF);
|
||||
}
|
||||
}
|
||||
|
||||
.times {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 87%;
|
||||
font-size: 0.8vw;
|
||||
transform: translateY(-50%);
|
||||
color: #60BAEA;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue