360 lines
17 KiB
Vue
360 lines
17 KiB
Vue
<template>
|
|
<div style="height: calc(100vh - 30px - 97px); padding: 10px 16px;">
|
|
<div class="grid">
|
|
<!-- 效率 -->
|
|
<div class="outter-wrapper efficiency" @click="handleClick('efficiency')">
|
|
<div class="inner-content">
|
|
<div class="inner-content__head">
|
|
<div>
|
|
<span class="icon">
|
|
<svg
|
|
width="24px"
|
|
height="24px"
|
|
viewBox="0 0 24 24"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<title>效率</title>
|
|
<defs>
|
|
<linearGradient id="linearGradient-1" x1="50%" y1="0%" x2="50%" y2="100%">
|
|
<stop stop-color="#76E1FF" offset="0%" />
|
|
<stop stop-color="#1FACFD" offset="100%" />
|
|
</linearGradient>
|
|
</defs>
|
|
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="2-8数据分析" transform="translate(-460.000000, -277.000000)" fill-rule="nonzero">
|
|
<g id="编组-9" transform="translate(460.000000, 276.000000)">
|
|
<g id="生产和加工情况" transform="translate(0.000000, 1.000000)">
|
|
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24" />
|
|
<path
|
|
id="形状"
|
|
d="M8.14453125,15.590625 C8.14453125,14.5851563 8.34140625,13.6101563 8.73046875,12.6914063 C9.10546875,11.803125 9.6421875,11.0085938 10.3265625,10.3242188 C11.0109375,9.63984375 11.8054687,9.103125 12.69375,8.728125 C13.6125,8.3390625 14.5875,8.1421875 15.5929688,8.1421875 C16.5984375,8.1421875 17.5734375,8.3390625 18.4921875,8.728125 C18.7757813,8.84765625 19.0476562,8.98359375 19.3125,9.1359375 L19.3125,2.9484375 C19.3125,2.62734375 19.0523437,2.3671875 18.73125,2.3671875 L13.1625,2.3671875 C13.1742187,2.42109375 13.1789063,2.475 13.1789063,2.53125 L13.1789063,5.653125 C13.1789063,6.103125 12.8132813,6.46875 12.3632813,6.46875 L9.3140625,6.46875 C8.8640625,6.46875 8.4984375,6.103125 8.4984375,5.653125 L8.4984375,2.53359375 C8.4984375,2.47734375 8.503125,2.4234375 8.51484375,2.36953125 L2.94609375,2.36953125 C2.625,2.36953125 2.36484375,2.6296875 2.36484375,2.95078125 L2.36484375,18.8085938 C2.36484375,19.1296875 2.625,19.3898438 2.94609375,19.3898438 L9.18515625,19.3898438 C9.0140625,19.1015625 8.86171875,18.8015625 8.73046875,18.4921875 C8.34140625,17.5710938 8.14453125,16.5960938 8.14453125,15.590625 Z M15.5929687,9.5484375 C12.2554687,9.5484375 9.55078125,12.253125 9.55078125,15.590625 C9.55078125,18.928125 12.2554687,21.6328125 15.5929687,21.6328125 C18.9304687,21.6328125 21.6351562,18.928125 21.6351562,15.590625 C21.6351562,12.253125 18.9304687,9.5484375 15.5929687,9.5484375 Z M18.2226562,16.425 C17.5429687,17.1046875 16.5609375,17.3015625 15.7078125,17.015625 L14.1023438,18.6210938 C13.678125,19.0453125 12.9867187,19.0453125 12.5625,18.6210938 C12.1382813,18.196875 12.1382813,17.5054688 12.5625,17.08125 L14.1679688,15.4757813 C13.8820312,14.6226563 14.0765625,13.640625 14.7585937,12.9609375 C15.4921875,12.2273438 16.5726562,12.05625 17.4679687,12.4453125 L15.8953125,14.0179688 L16.1507812,15.0234375 L17.165625,15.2882813 L18.7382812,13.715625 C19.1273437,14.6132812 18.9539062,15.69375 18.2226562,16.425 L18.2226562,16.425 Z M13.0640625,17.6296875 C13.0640625,17.8046918 13.1574262,17.9664025 13.3089844,18.0539047 C13.4605426,18.1414068 13.6472699,18.1414068 13.7988281,18.0539047 C13.9503863,17.9664025 14.04375,17.8046918 14.04375,17.6296875 C14.04375,17.4546832 13.9503863,17.2929725 13.7988281,17.2054703 C13.6472699,17.1179682 13.4605426,17.1179682 13.3089844,17.2054703 C13.1574262,17.2929725 13.0640625,17.4546832 13.0640625,17.6296875 Z"
|
|
fill="url(#linearGradient-1)"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
<span class="letter-space-2">效率</span>
|
|
</div>
|
|
<h1>Efficiency</h1>
|
|
</div>
|
|
|
|
<ul class="inner-content__features">
|
|
<li>
|
|
<span class="dot" />
|
|
<span>设备效率汇总分析</span>
|
|
</li>
|
|
<li>
|
|
<span class="dot" />
|
|
<span>订单加工效率分析</span>
|
|
</li>
|
|
<li>
|
|
<span class="dot" />
|
|
<span>订单/产能分析</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 设备异常 -->
|
|
<div class="outter-wrapper exception" @click="handleClick('exception')">
|
|
<div class="inner-content">
|
|
<div class="inner-content__head">
|
|
<div>
|
|
<span class="icon">
|
|
<svg
|
|
width="24px"
|
|
height="24px"
|
|
viewBox="0 0 24 24"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<title>设备异常</title>
|
|
<defs>
|
|
<linearGradient id="linearGradient-2" x1="50%" y1="0%" x2="50%" y2="100%">
|
|
<stop stop-color="#FFBEBE" offset="0%" />
|
|
<stop stop-color="#FF4545" offset="100%" />
|
|
</linearGradient>
|
|
</defs>
|
|
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="2-8数据分析" transform="translate(-1236.000000, -277.000000)" fill-rule="nonzero">
|
|
<g id="编组-19" transform="translate(1236.000036, 276.000000)">
|
|
<g id="异常" transform="translate(0.000000, 1.000142)">
|
|
<rect
|
|
id="矩形"
|
|
fill="#000000"
|
|
opacity="0"
|
|
x="0"
|
|
y="0"
|
|
width="23.9998583"
|
|
height="23.9998583"
|
|
/>
|
|
<path
|
|
id="形状"
|
|
d="M11.9999201,1.99997632 C10.0657204,1.98903257 8.20490927,2.739826 6.8199711,4.09008421 C5.4676747,5.42710649 4.70462356,7.2483539 4.7000035,9.15001444 L4.7000035,18.9098966 L19.2198373,18.9098966 L19.2198373,9.14999491 C19.2181621,7.24575011 18.4505466,5.42222692 17.0898502,4.09006468 C15.7289706,2.75887754 13.9035726,2.00936373 11.9999006,1.99997632 L11.9999201,1.99997632 Z M11.3999238,16.5699304 L11.1899251,11.8399591 L7.6099663,11.8399591 L12.3098792,5.91005364 L12.7098768,9.73001092 L16.1098561,9.85001019 L11.359885,16.5699304 L11.3999238,16.5699304 Z M1.99999348,20.9098649 C1.99737133,20.6190554 2.11102797,20.3392384 2.31572705,20.1326576 C2.52042613,19.9260769 2.79919147,19.8098716 3.09001328,19.8098716 L20.909827,19.8098716 C21.1981147,19.8134614 21.4739139,19.9280863 21.6798223,20.1298892 C21.8822311,20.3394413 21.9967278,20.618537 21.9998009,20.9098649 C21.9998009,21.511844 21.5118061,21.9998583 20.909827,21.9998583 L3.09001328,21.9998583 C2.48803418,21.9998583 1.99999348,21.511844 1.99999348,20.9098649 L1.99999348,20.9098649 Z"
|
|
fill="url(#linearGradient-2)"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
<span class="letter-space-2">设备异常</span>
|
|
</div>
|
|
<h1>Unit Exception</h1>
|
|
</div>
|
|
|
|
<ul class="inner-content__features">
|
|
<li>
|
|
<span class="dot" />
|
|
<span>设备异常分析</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 质量异常 -->
|
|
<div class="outter-wrapper quality" @click="handleClick('quality')">
|
|
<div class="inner-content">
|
|
<div class="inner-content__head">
|
|
<div>
|
|
<span class="icon">
|
|
<svg
|
|
width="24px"
|
|
height="24px"
|
|
viewBox="0 0 24 24"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<title>质量异常</title>
|
|
<defs>
|
|
<linearGradient id="linearGradient-3" x1="50%" y1="-35.9917859%" x2="50%" y2="100%">
|
|
<stop stop-color="#F933FE" offset="0%" />
|
|
<stop stop-color="#735EEE" offset="100%" />
|
|
</linearGradient>
|
|
</defs>
|
|
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="2-8数据分析" transform="translate(-460.000000, -741.000000)" fill-rule="nonzero">
|
|
<g id="编组-18" transform="translate(460.000000, 740.000000)">
|
|
<g id="出库on" transform="translate(0.000000, 1.000000)">
|
|
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24" />
|
|
<path
|
|
id="形状结合"
|
|
d="M18.3505903,6.65853839 L18.3505903,20.5806612 C18.3505903,20.7702295 18.1969321,20.9238877 18.0073638,20.9238877 L3.41933878,20.9238877 C3.22977052,20.9238877 3.07611233,20.7702295 3.07611233,20.5806612 L3.07611233,6.65853839 L18.3505903,6.65853839 Z M20.9238877,3.07611233 L20.9238877,20.9151997 L19.7907041,20.9151997 L19.7907041,3.07611233 L20.9238877,3.07611233 Z M11.2356824,8.75416325 L6.53576955,14.6840687 L10.1157283,14.6840687 L10.3231123,19.3601123 L15.0356594,12.6941198 L11.63568,12.5741205 L11.2356824,8.75416325 Z M16.3135198,3.08480025 C16.4315455,3.08480025 16.5412922,3.14544223 16.6041039,3.24536587 L18.1023088,5.62885904 L3.32441522,5.62885904 L4.82259866,3.24536587 C4.88541044,3.14544223 4.9951571,3.08480025 5.11318276,3.08480025 L16.3135198,3.08480025 Z"
|
|
fill="url(#linearGradient-3)"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
<span class="letter-space-2">质量异常</span>
|
|
</div>
|
|
<h1>Abnormal Quality</h1>
|
|
</div>
|
|
|
|
<ul class="inner-content__features">
|
|
<li>
|
|
<span class="dot" />
|
|
<span>设备效率汇总分析</span>
|
|
</li>
|
|
<li>
|
|
<span class="dot" />
|
|
<span>订单加工效率分析</span>
|
|
</li>
|
|
<li>
|
|
<span class="dot" />
|
|
<span>订单/产能分析</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 自定义 -->
|
|
<div class="outter-wrapper customize" @click="handleClick('customize')">
|
|
<div class="inner-content">
|
|
<div class="inner-content__head">
|
|
<div>
|
|
<span class="icon">
|
|
<svg
|
|
width="24px"
|
|
height="24px"
|
|
viewBox="0 0 24 24"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<title>编组 15</title>
|
|
<defs>
|
|
<linearGradient id="linearGradient-4" x1="50%" y1="0.100295608%" x2="50%" y2="100%">
|
|
<stop stop-color="#FFD730" offset="0%" />
|
|
<stop stop-color="#FF9D4F" offset="100%" />
|
|
</linearGradient>
|
|
</defs>
|
|
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="2-8数据分析" transform="translate(-1231.000000, -747.000000)" fill-rule="nonzero">
|
|
<g id="编组-8" transform="translate(1231.000000, 746.000000)">
|
|
<g id="编组-15" transform="translate(0.000000, 1.000000)">
|
|
<g id="追加" fill="#000000" opacity="0">
|
|
<rect id="矩形" x="0" y="0" width="24" height="24" />
|
|
</g>
|
|
<path
|
|
id="形状结合"
|
|
d="M16.4322694,5.34917373 C17.6095644,5.34917373 18.5728058,6.31241512 18.5728058,7.48971015 L18.5728058,7.48971015 L18.5728058,20.3329286 C18.5728058,21.5102237 17.6095644,22.4734651 16.4322694,22.4734651 L16.4322694,22.4734651 L3.58905088,22.4734651 C2.41175585,22.4734651 1.44851447,21.5102237 1.44851447,20.3329286 L1.44851447,20.3329286 L1.44851447,7.48971015 C1.44851447,6.31241512 2.41175585,5.34917373 3.58905088,5.34917373 L3.58905088,5.34917373 Z M10.0106601,9.63024656 C9.47552602,9.63024656 8.94039192,10.1653807 8.94039192,10.7005148 L8.94039192,12.8410512 L6.7998555,12.8410512 C6.2647214,12.8410512 5.7295873,13.3761853 5.7295873,13.9113194 C5.7295873,14.4464535 6.2647214,14.9815876 6.7998555,14.9815876 L8.94039192,14.9815876 L8.94039192,17.122124 C8.94039192,17.6572581 9.47552602,18.1923922 10.0106601,18.1923922 C10.5457942,18.1923922 11.0809283,17.6572581 11.0809283,17.122124 L11.0809283,14.9815876 L13.2214648,14.9815876 C13.7565989,14.9815876 14.291733,14.4464535 14.291733,13.9113194 C14.291733,13.3761853 13.7565989,12.8410512 13.2214648,12.8410512 L11.0809283,12.8410512 L11.0809283,10.7005148 C11.0809283,10.1653807 10.5457942,9.63024656 10.0106601,9.63024656 Z M20.4109491,1 C21.5882441,1 22.5514855,1.96324139 22.5514855,3.14053642 L22.5514855,15.9837549 C22.5514855,17.1610499 21.5882441,18.1242913 20.4109491,18.1242913 L19.7890134,18.1242913 L19.7890134,5.93020465 C19.7890134,4.82563515 18.8935829,3.93020465 17.7890134,3.93020465 L5.42719421,3.93020465 L5.42719421,3.14053642 C5.42719421,1.96324139 6.3904356,1 7.56773062,1 L20.4109491,1 Z"
|
|
fill="url(#linearGradient-4)"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
<span class="letter-space-2">自定义</span>
|
|
</div>
|
|
<h1>Customize</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- done grid -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DataAnalysisHome',
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
handleClick(entry) {
|
|
switch (entry) {
|
|
case 'efficiency':
|
|
this.$router.push({ name: 'EquipmentEfficiency' })
|
|
break
|
|
case 'exception':
|
|
this.$router.push({ name: 'EquipmentException' })
|
|
break
|
|
case 'quality':
|
|
// this.$router.push({ name: 'ProductQuality' })
|
|
this.$router.push({ name: 'EquipmentStatus' }) // 设备状态时序图 是目前开放的路由
|
|
break
|
|
case 'customize':
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.grid {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.grid > div {
|
|
border-radius: 16px;
|
|
background-repeat: no-repeat;
|
|
background-size: auto 102%;
|
|
background-position: right;
|
|
cursor: pointer;
|
|
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
|
}
|
|
|
|
.grid > div:hover {
|
|
transform: scale(1.0125);
|
|
box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.efficiency {
|
|
background: url(./svgs/b1.svg), white;
|
|
}
|
|
|
|
.exception {
|
|
background: url(./svgs/b2.svg), white;
|
|
}
|
|
|
|
.quality {
|
|
background: url(./svgs/b3.svg), white;
|
|
}
|
|
|
|
.customize {
|
|
background: url(./svgs/b4.svg), white;
|
|
}
|
|
|
|
.outter-wrapper {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
.inner-content {
|
|
color: #161616;
|
|
transform: translateX(100px);
|
|
}
|
|
|
|
.inner-content__head > div {
|
|
/* height: 24px; */
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
line-height: 25px;
|
|
letter-spacing: 6px;
|
|
transform: translateX(-2px);
|
|
}
|
|
|
|
.icon {
|
|
margin-right: 14px;
|
|
}
|
|
|
|
.inner-content__head > h1 {
|
|
font-size: 30px;
|
|
line-height: 42px;
|
|
font-weight: 400;
|
|
margin: 6px 0;
|
|
}
|
|
|
|
ul.inner-content__features {
|
|
margin: 24px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.dot {
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 1px;
|
|
margin-right: 8px;
|
|
background-color: #0b58ff;
|
|
}
|
|
|
|
.dot + span {
|
|
letter-spacing: 2px;
|
|
font-size: 18px;
|
|
line-height: 25px;
|
|
color: rgba(22, 22, 22, 0.7);
|
|
}
|
|
|
|
ul.inner-content__features > li {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
ul.inner-content__features > li:not(:last-child) {
|
|
margin-bottom: 8px;
|
|
}
|
|
</style>
|