'init'
This commit is contained in:
358
src/views/DataAnalysis/HomePage.vue
Normal file
358
src/views/DataAnalysis/HomePage.vue
Normal file
@@ -0,0 +1,358 @@
|
||||
<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;
|
||||
}
|
||||
|
||||
.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>
|
||||
55
src/views/DataAnalysis/components/ExceptionEqBtn.vue
Normal file
55
src/views/DataAnalysis/components/ExceptionEqBtn.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2022-06-06 15:34:34
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-06-09 17:46:08
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-bus-fe\src\views\DataAnalysis\components\ExceptionEqBtn.vue
|
||||
-->
|
||||
<template>
|
||||
<span>
|
||||
<el-button ref="hoverButton" class="hover-button" type="text" size="small" @mouseenter.native="enterButton" @mouseleave.native="leaveButton">
|
||||
{{ injectData.equipmentName }}
|
||||
<hover-box ref="hoverBox" :inject-data="injectData" :button-width="buttonWidth" />
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import hoverBox from './hoverBox'
|
||||
export default {
|
||||
components: { hoverBox },
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
buttonWidth: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
Vue.set(this.injectData, 'title', this.$t('module.dataAnalysis.equipmentException.eqTitle'))
|
||||
},
|
||||
mounted() {
|
||||
this.buttonWidth = this.$refs.hoverButton.$el.offsetWidth
|
||||
},
|
||||
methods: {
|
||||
enterButton() {
|
||||
this.$refs.hoverBox.init()
|
||||
},
|
||||
leaveButton() {
|
||||
this.$refs.hoverBox.remove()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hover-button {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
219
src/views/DataAnalysis/components/LineChartBalance.vue
Normal file
219
src/views/DataAnalysis/components/LineChartBalance.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
|
||||
const colorList = ['#FFB61F', '#283D68', '#5AD8A6', '#E97466']
|
||||
const shadowList = ['rgba(255, 179, 24, 0.5)', 'rgba(53, 66, 93, 0.5)', 'rgba(90, 216, 166, 0.6)', 'rgba(233, 116, 102, 0.5)']
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
handler: function(val) {
|
||||
this.initChart()
|
||||
}
|
||||
// deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
|
||||
this.chart.setOption({
|
||||
// backgroundColor: '#394056',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
padding: 0,
|
||||
backgroundColor: 'transparent',
|
||||
renderMode: 'html',
|
||||
textStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.85)',
|
||||
fontSize: 12,
|
||||
lineHeight: 14
|
||||
},
|
||||
formatter: function(param) {
|
||||
var text = ''
|
||||
const paramItem = param.map(item => {
|
||||
return `<div style="display: flex; min-width: 150px">
|
||||
<span>
|
||||
<span style="display: inline-block; width: 4px; height: 4px; border-radius: 4px; background-color: ${item.color}; position: relative; top: -3px"></span>
|
||||
<span>${item.seriesName}</span>
|
||||
</span>
|
||||
<span style="flex: 1;text-align: right">${item.value}</span>
|
||||
</div>`
|
||||
})
|
||||
text = `<div class="line-tooltip">
|
||||
<p style="margin: 0">${param[0].name}</p>
|
||||
${paramItem.join('')}
|
||||
</div>`
|
||||
return text
|
||||
}
|
||||
},
|
||||
color: colorList,
|
||||
legend: {
|
||||
top: 0,
|
||||
data: ['设备CT', '设备TT', '产线CT', '产线TT'],
|
||||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#8C8C8C'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 50,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
data: this.chartData.timeArr
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, .15)'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '设备CT',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
shadowBlur: 4,
|
||||
shadowColor: shadowList[0],
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
},
|
||||
data: this.chartData.eqCT
|
||||
}, {
|
||||
name: '设备TT',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
shadowBlur: 4,
|
||||
shadowColor: shadowList[1],
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
},
|
||||
data: this.chartData.eqTT
|
||||
}, {
|
||||
name: '产线CT',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
shadowBlur: 4,
|
||||
shadowColor: shadowList[2],
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
},
|
||||
data: this.chartData.lineCT
|
||||
}, {
|
||||
name: '产线TT',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
shadowBlur: 4,
|
||||
shadowColor: shadowList[3],
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
},
|
||||
data: this.chartData.lineTT
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.line-tooltip{
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 2px 6px 0px rgba(154, 170, 164, 0.5);
|
||||
border-radius: 4px;
|
||||
opacity: 0.85;
|
||||
backdrop-filter: blur(23px);
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
178
src/views/DataAnalysis/components/LineChartYield.vue
Normal file
178
src/views/DataAnalysis/components/LineChartYield.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
|
||||
const colorList = ['#FFB61F', '#283D68', '#5AD8A6', '#E97466']
|
||||
const shadowList = ['rgba(255, 179, 24, 0.5)', 'rgba(53, 66, 93, 0.5)', 'rgba(90, 216, 166, 0.6)', 'rgba(233, 116, 102, 0.5)']
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
handler: function(val) {
|
||||
this.initChart()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
|
||||
this.chart.setOption({
|
||||
// backgroundColor: '#394056',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
padding: 0,
|
||||
backgroundColor: 'transparent',
|
||||
renderMode: 'html',
|
||||
textStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.85)',
|
||||
fontSize: 12,
|
||||
lineHeight: 14
|
||||
},
|
||||
formatter: function(param) {
|
||||
var text = ''
|
||||
const paramItem = param.map(item => {
|
||||
return `<div style="display: flex; min-width: 150px">
|
||||
<span>
|
||||
<span style="display: inline-block; width: 4px; height: 4px; border-radius: 4px; background-color: ${item.color}; position: relative; top: -3px"></span>
|
||||
<span>${item.seriesName}</span>
|
||||
</span>
|
||||
<span style="flex: 1;text-align: right">${item.value}</span>
|
||||
</div>`
|
||||
})
|
||||
text = `<div class="line-tooltip">
|
||||
<p style="margin: 0">${param[0].name}</p>
|
||||
${paramItem.join('')}
|
||||
</div>`
|
||||
return text
|
||||
}
|
||||
},
|
||||
color: colorList,
|
||||
legend: {
|
||||
top: 0,
|
||||
data: this.chartData.map(item => {
|
||||
return item.name
|
||||
}),
|
||||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#8C8C8C'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 50,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
data: this.chartData[0].timeArr
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, .15)'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: this.chartData.map((item, index) => {
|
||||
return {
|
||||
name: item.name,
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
shadowBlur: 4,
|
||||
shadowColor: shadowList[index % 4],
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
},
|
||||
data: item.data
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.line-tooltip{
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 2px 6px 0px rgba(154, 170, 164, 0.5);
|
||||
border-radius: 4px;
|
||||
opacity: 0.85;
|
||||
backdrop-filter: blur(23px);
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
324
src/views/DataAnalysis/components/equipmentEfficiencyGraph.vue
Normal file
324
src/views/DataAnalysis/components/equipmentEfficiencyGraph.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: lb
|
||||
* @Date: 2022-07-24 13:30:00
|
||||
* @LastEditTime: 2022-07-28 09:30:00
|
||||
* @LastEditors: lb
|
||||
* @Description: 设备效率分析-echarts图
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div class="graph-area">
|
||||
<span class="close-btn" @click="close">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style="height: 100%; width: 100%;"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<div class="close-row" style="padding-left: 8px;">
|
||||
<el-radio-group v-model="dataType" class="head-radio-group" size="small" @change="setLegend">
|
||||
<el-radio-button label="百分比" />
|
||||
<el-radio-button label="时间" />
|
||||
</el-radio-group>
|
||||
|
||||
<el-radio-group
|
||||
v-if="1"
|
||||
v-model="searchType"
|
||||
class="head-radio-group"
|
||||
style="margin-left: 8px;"
|
||||
size="small"
|
||||
@change="handleRadioGroupChanged"
|
||||
>
|
||||
<el-radio-button v-for="(opt, index) in searchRadioOptions" :key="index" :label="opt" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<div id="trend-graph" class="real-graph" style="width: 100%; height: 500px;" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { getOEE } from '@/api/DataAnalysis/equipmentEfficiency'
|
||||
import { refineData } from '@/utils/helpers'
|
||||
import moment from 'moment'
|
||||
|
||||
class EchartConfigs {
|
||||
constructor() {
|
||||
this.color = ['#e91e63', '#4caf50', '#3f51b5', '#ffc107', '#607d8b']
|
||||
this.title = {
|
||||
text: '时间区间走势',
|
||||
top: 0,
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontWeight: 'bold',
|
||||
fontSize: 18,
|
||||
lineHeight: 18
|
||||
}
|
||||
}
|
||||
this.tooltip = {
|
||||
trigger: 'axis',
|
||||
// 将axisPointer设置得更显眼一点
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
// legend
|
||||
this.legend = {
|
||||
icon: 'circle',
|
||||
top: 24,
|
||||
left: 'center',
|
||||
padding: 8,
|
||||
itemGap: 8,
|
||||
data: [] // 动态设置
|
||||
}
|
||||
this.xAxis = {
|
||||
type: 'category',
|
||||
data: [] // 动态设置
|
||||
// https://tushuo.baidu.com/wave/index#/manufacture/dta9pydmexfdhc0sg/999
|
||||
}
|
||||
this.yAxis = {
|
||||
type: 'value'
|
||||
}
|
||||
this.series = [] // 动态设置
|
||||
}
|
||||
|
||||
setTitle(val) {
|
||||
this.title.text = val
|
||||
}
|
||||
|
||||
setLegend(val) {
|
||||
this.legend.data.splice(0)
|
||||
if (Array.isArray(val)) {
|
||||
this.legend.data = val
|
||||
} else {
|
||||
console.error('setLegend() 只接受数组参数')
|
||||
}
|
||||
}
|
||||
|
||||
setXAxis(val) {
|
||||
// console.log('in setXAxis(): ', val)
|
||||
this.xAxis.data.splice(0)
|
||||
if (Array.isArray(val)) {
|
||||
this.xAxis.data = val
|
||||
} else {
|
||||
console.error('setXAxis() 只接受数组参数')
|
||||
}
|
||||
}
|
||||
|
||||
setSeries(val) {
|
||||
this.series.splice(0)
|
||||
if (Array.isArray(val)) {
|
||||
this.series = val
|
||||
} else {
|
||||
console.error('setSeries() 只接受数组参数')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'EquipmentEfficiencyGraph',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
searchType: '无间隔',
|
||||
searchRadioOptions: ['无间隔', '按月', '按周', '按天'],
|
||||
dataType: '时间',
|
||||
dataRadioOptions: ['时间', '百分比'],
|
||||
config: new EchartConfigs(),
|
||||
chart: null,
|
||||
rateList: [], // 对请求来的数据分流
|
||||
timeList: [],
|
||||
xAxis: [], // 动态设置
|
||||
injectData: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async initChart() {
|
||||
this.config.setTitle(this.injectData.equipmentName + ' 时间区间走势')
|
||||
await this.getList()
|
||||
this.setLegend()
|
||||
},
|
||||
|
||||
init(data) {
|
||||
this.injectData = data
|
||||
if (!this.chart) {
|
||||
this.chart = echarts.init(document.getElementById('trend-graph'))
|
||||
// this.chart.setOption(this.config)
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.$emit('close-graph')
|
||||
},
|
||||
|
||||
makeQuerys() {
|
||||
const searchTypeMap = {
|
||||
无间隔: 1,
|
||||
按月: 2,
|
||||
按周: 3,
|
||||
按天: 4
|
||||
}
|
||||
|
||||
return {
|
||||
// current: 1,
|
||||
// size: 999,
|
||||
// ftId: this.injectData.factoryId , // 工厂id
|
||||
// wsId: this.injectData.workSequenceId , // 工段id
|
||||
// productlines: ['1409788336610934786'], // 产线ids， 这几项都暂时不需要
|
||||
type: searchTypeMap[this.searchType],
|
||||
eqId: this.injectData.equipmentId,
|
||||
startTime: this.injectData.startTime, // '2022-06-14T00:00:00'
|
||||
endTime: this.injectData.endTime
|
||||
}
|
||||
},
|
||||
|
||||
getList() {
|
||||
const params = this.makeQuerys()
|
||||
// 发起请求
|
||||
return getOEE(params).then(res => {
|
||||
this.timeList.splice(0)
|
||||
this.rateList.splice(0)
|
||||
this.xAxis.splice(0)
|
||||
if (res.data) {
|
||||
// 分流
|
||||
res.data.map(item => {
|
||||
const time = moment(item.time)
|
||||
if (this.searchType === '按月') {
|
||||
this.xAxis.push(`${time.year()}年${time.month() + 1}月`)
|
||||
} else if (this.searchType === '按周') {
|
||||
this.xAxis.push(`${time.format('YYYY-MM-DD')}`)
|
||||
} else if (this.searchType === '按天') {
|
||||
this.xAxis.push(`${time.format('YY-M-D')}`)
|
||||
} else {
|
||||
this.xAxis.push(`${time.format('YYYY-MM-DD')}`)
|
||||
}
|
||||
this.timeList.push(refineData(item, ['workTime', 'stopTime', 'downTime']))
|
||||
this.rateList.push(
|
||||
refineData(item, ['workRate', 'stopRate', 'downRate', 'peEfficiency', 'timeEfficiency', 'oee', 'teep'])
|
||||
)
|
||||
})
|
||||
|
||||
// 设置横轴
|
||||
this.config.setXAxis(JSON.parse(JSON.stringify(this.xAxis)))
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
async handleRadioGroupChanged() {
|
||||
// 获取数据且设置横轴
|
||||
await this.getList()
|
||||
// 设置legend和数据
|
||||
this.setLegend()
|
||||
},
|
||||
|
||||
setLegend() {
|
||||
// 设置legend
|
||||
const legendMap = {
|
||||
百分比: ['工作时长比率', '停机时长比率', '故障时长比率', '速度开动率', '时间开动率', 'OEE', 'TEEP'],
|
||||
时间: ['工作时长', '停机时长', '故障时长']
|
||||
}
|
||||
this.config.setLegend(legendMap[this.dataType])
|
||||
this.setData()
|
||||
// 重新绘制
|
||||
this.renderGraph()
|
||||
},
|
||||
|
||||
setData() {
|
||||
if (this.dataType === '时间') {
|
||||
const workTimeList = []
|
||||
const stopTimeList = []
|
||||
const downTimeList = []
|
||||
this.timeList.map(item => {
|
||||
workTimeList.push(item.workTime)
|
||||
stopTimeList.push(item.stopTime)
|
||||
downTimeList.push(item.downTime)
|
||||
})
|
||||
this.config.setSeries([
|
||||
{ name: '工作时长', type: 'bar', data: workTimeList },
|
||||
{ name: '停机时长', type: 'bar', data: stopTimeList },
|
||||
{ name: '故障时长', type: 'bar', data: downTimeList }
|
||||
])
|
||||
} else {
|
||||
// 百分比
|
||||
const workRateList = []
|
||||
const stopRateList = []
|
||||
const downRateList = []
|
||||
const peEfficiencyList = []
|
||||
const timeEfficiencyList = []
|
||||
const oeeList = []
|
||||
const teepList = []
|
||||
this.rateList.map(item => {
|
||||
workRateList.push(item.workRate)
|
||||
stopRateList.push(item.stopRate)
|
||||
downRateList.push(item.downRate)
|
||||
peEfficiencyList.push(item.peEfficiency)
|
||||
timeEfficiencyList.push(item.timeEfficiency)
|
||||
oeeList.push(item.oee)
|
||||
teepList.push(item.teep)
|
||||
})
|
||||
this.config.setSeries([
|
||||
{ name: '工作时长比率', type: 'bar', data: workRateList },
|
||||
{ name: '停机时长比率', type: 'bar', data: stopRateList },
|
||||
{ name: '故障时长比率', type: 'bar', data: downRateList },
|
||||
{ name: '速度开动率', type: 'bar', data: peEfficiencyList },
|
||||
{ name: '时间开动率', type: 'bar', data: timeEfficiencyList },
|
||||
{ name: 'OEE', type: 'bar', data: oeeList },
|
||||
{ name: 'TEEP', type: 'bar', data: teepList }
|
||||
])
|
||||
}
|
||||
},
|
||||
|
||||
// 重新绘制图形
|
||||
renderGraph() {
|
||||
// console.log('latest config: ', this.config)
|
||||
this.chart.setOption(this.config, {
|
||||
notMerge: true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.graph-area {
|
||||
margin-top: 18px;
|
||||
/* background: #f0f0f0; */
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.close-row {
|
||||
position: relative;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s linear;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #0b58ff;
|
||||
}
|
||||
|
||||
.head-radio-group >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
background-color: #0b58ff;
|
||||
border-color: #0b58ff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-07-22 13:30:00
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-07-22 13:30:00
|
||||
* @Description: 设备状态时序图 - 弹窗
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :visible.sync="visible" title="选择一个设备" width="40%" @close="visible = false">
|
||||
<el-select v-model="eqId">
|
||||
<el-option v-for="eq in eqList" :key="eq.id" :label="eq.name" :value="eq.id" />
|
||||
</el-select>
|
||||
<div slot="footer">
|
||||
<el-button @click="visible = false">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="onConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getEquipmentList, getStatus } from '@/api/DataAnalysis/equipmentStatus'
|
||||
|
||||
export default {
|
||||
name: 'EquipmentStatusDialog',
|
||||
props: ['wsId'],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
eqId: null,
|
||||
eqList: [],
|
||||
equipment: null,
|
||||
// queryCondition: {
|
||||
// productlines: [],
|
||||
// wsId: null,
|
||||
// startTime: null,
|
||||
// endTime: null
|
||||
// }
|
||||
queryCondition: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchList('equipment')
|
||||
},
|
||||
methods: {
|
||||
init(data) {
|
||||
this.visible = true
|
||||
this.queryCondition = data
|
||||
},
|
||||
fetchList(type) {
|
||||
switch (type) {
|
||||
case 'equipment': {
|
||||
const query = this.wsId ? { workshopSectionId: this.wsId } : {}
|
||||
return getEquipmentList(query).then(res => {
|
||||
if (res.data) {
|
||||
this.eqList = res.data.map(item => ({ id: item.id, name: item.name }))
|
||||
} else {
|
||||
this.eqList.splice(0)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
onConfirm() {
|
||||
if (this.eqId) {
|
||||
// 获取 equipment 数据
|
||||
getStatus({ ...this.queryCondition, eqId: this.eqId }).then(res => {
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.equipment = res.data
|
||||
// console.log('eq: ', this.equipment)
|
||||
// 返回
|
||||
this.onClose()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.hints.selectEqFirst'),
|
||||
type: 'error',
|
||||
duration: 1500
|
||||
})
|
||||
}
|
||||
},
|
||||
onClose() {
|
||||
this.visible = false
|
||||
this.$emit('add-equipment', this.equipment)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
73
src/views/DataAnalysis/components/hoverBox.vue
Normal file
73
src/views/DataAnalysis/components/hoverBox.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2022-06-06 15:34:34
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-06-09 17:45:35
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-bus-fe\src\views\DataAnalysis\components\hoverBox.vue
|
||||
-->
|
||||
<template>
|
||||
<div v-if="visible" class="hover-box" :style="{ left: buttonWidth + 'px' }">
|
||||
<el-row class="hover-box-title">
|
||||
{{ injectData.title }} <span style="margin: 0 16px">|</span> {{ injectData.line }} {{ injectData.process }} {{ injectData.equipmentName }} {{ moment(new Date()).format('YYYY-MM-DD') }}
|
||||
</el-row>
|
||||
<el-row class="hover-box-main" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
buttonWidth: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
moment
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.visible = true
|
||||
},
|
||||
remove() {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hover-box{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-width: 600px;
|
||||
background: #020F1B;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
opacity: 0.85;
|
||||
backdrop-filter: blur(6px);
|
||||
background: #000;
|
||||
z-index: 1;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
.hover-box-title {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .45);
|
||||
}
|
||||
.hover-box-main{
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
56
src/views/DataAnalysis/components/mixins/resize.js
Normal file
56
src/views/DataAnalysis/components/mixins/resize.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initListener()
|
||||
},
|
||||
activated() {
|
||||
if (!this.$_resizeHandler) {
|
||||
// avoid duplication init
|
||||
this.initListener()
|
||||
}
|
||||
|
||||
// when keep-alive chart activated, auto resize
|
||||
this.resize()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroyListener()
|
||||
},
|
||||
deactivated() {
|
||||
this.destroyListener()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
initListener() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
this.resize()
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
destroyListener() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
this.$_resizeHandler = null
|
||||
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
resize() {
|
||||
const { chart } = this
|
||||
chart && chart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
439
src/views/DataAnalysis/equipmentEfficiency.vue
Normal file
439
src/views/DataAnalysis/equipmentEfficiency.vue
Normal file
@@ -0,0 +1,439 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: lb
|
||||
* @Date: 2022-03-24 13:30:00
|
||||
* @LastEditTime: 2022-05-10 18:38:24
|
||||
* @LastEditors: gtz
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
|
||||
<transition mode="out-in" name="slide-to-left">
|
||||
<equipment-efficiency-graph v-if="showGraph" key="graph" ref="eegraph" @close-graph="showGraph = false" />
|
||||
<base-table
|
||||
v-else
|
||||
key="table"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="dataList"
|
||||
:is-loading="listLoading"
|
||||
:index-config="{ align: 'left', fixed: 'left' }"
|
||||
@emitFun="handleTableEvents"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
<!-- <div class="app-container">
|
||||
<el-radio-group v-model="chartType" class="data-analysis-radio" size="mini" @change="changeChartType">
|
||||
<el-radio-button v-for="(item, index) in chartDataArr" :key="index" :label="index">
|
||||
{{ item.equipmentName }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<Line-chart :chart-data="chartDataItem" width="100%" height="400px" />
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable/index-compound'
|
||||
// import LineChart from '@/components/Charts/LineChart'
|
||||
import { getLineList, getFactoryList, getOEE } from '@/api/DataAnalysis/equipmentEfficiency'
|
||||
import moment from 'moment'
|
||||
import commonBtn from '@/components/BaseTable/subcomponents/CommonBtn.vue'
|
||||
|
||||
import EquipmentEfficiencyGraph from './components/equipmentEfficiencyGraph.vue'
|
||||
// import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
// label: '工厂',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.factory'),
|
||||
prop: 'factoryName'
|
||||
},
|
||||
{
|
||||
// label: '产线',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.line'),
|
||||
prop: 'pdName'
|
||||
},
|
||||
{
|
||||
// label: '工序',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.process'),
|
||||
prop: 'wsName'
|
||||
},
|
||||
{
|
||||
// label: '设备',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.eq'),
|
||||
prop: 'eqName'
|
||||
},
|
||||
{
|
||||
// label: '有效时间(h)',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.time.efficient'),
|
||||
children: [
|
||||
{
|
||||
prop: 'workTime',
|
||||
// label: '工作时长(小时)',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.time.work'),
|
||||
width: 120,
|
||||
filter: val => `${val} ${i18n.t('module.dataAnalysis.equipmentEfficiency.hour')}`
|
||||
},
|
||||
{
|
||||
prop: 'workRate',
|
||||
// label: '工作时长比率',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.rate.work'),
|
||||
width: 120,
|
||||
filter: val => (val * 100).toFixed(2) + '%'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
// label: '关机时间(h)',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.time.off'),
|
||||
children: [
|
||||
{
|
||||
prop: 'stopTime',
|
||||
// label: '停机时长(小时)',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.time.stop'),
|
||||
width: 120,
|
||||
filter: val => `${val} ${i18n.t('module.dataAnalysis.equipmentEfficiency.hour')}`
|
||||
},
|
||||
{
|
||||
prop: 'stopRate',
|
||||
// label: '停机比率',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.rate.stop'),
|
||||
filter: val => (val * 100).toFixed(2) + '%'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
// label: '中断损失',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.lost'),
|
||||
children: [
|
||||
{
|
||||
prop: 'downTime',
|
||||
// label: '故障时长(小时)',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.time.down'),
|
||||
width: 120,
|
||||
filter: val => `${val} ${i18n.t('module.dataAnalysis.equipmentEfficiency.hour')}`
|
||||
},
|
||||
{
|
||||
prop: 'downRate',
|
||||
// label: '故障比率',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.rate.down'),
|
||||
filter: val => (val * 100).toFixed(2) + '%'
|
||||
},
|
||||
{
|
||||
prop: 'timeEfficiency',
|
||||
// label: '时间开动率',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.timeRun'),
|
||||
filter: val => (val * 100).toFixed(2) + '%'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
// label: '速度损失',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.speedLost'),
|
||||
children: [
|
||||
{
|
||||
prop: 'realYield',
|
||||
// label: '实际加工速度',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.speed.real'),
|
||||
width: 120,
|
||||
filter: val => `${val} / ${i18n.t('module.dataAnalysis.equipmentEfficiency.hour')}`
|
||||
}, // 片/小时
|
||||
{
|
||||
prop: 'designYield',
|
||||
// label: '理论加工速度',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.speed.thero'),
|
||||
width: 120,
|
||||
filter: val => `${val} / ${i18n.t('module.dataAnalysis.equipmentEfficiency.hour')}`
|
||||
},
|
||||
{
|
||||
prop: 'peEfficiency',
|
||||
// label: '速度开动率',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.speed.rate'),
|
||||
width: 120,
|
||||
filter: val => (val * 100).toFixed(2) + '%'
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// prop: 'goodRate',
|
||||
// label: '良品率' // 暂时先隐藏
|
||||
// },
|
||||
{
|
||||
label: 'OEE',
|
||||
prop: 'oee',
|
||||
filter: val => (val * 100).toFixed(2) + '%'
|
||||
},
|
||||
{
|
||||
label: 'TEEP',
|
||||
prop: 'teep',
|
||||
filter: val => (val * 100).toFixed(2) + '%'
|
||||
},
|
||||
{
|
||||
// label: '操作',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.operate'),
|
||||
subcomponent: commonBtn,
|
||||
emitFullData: true,
|
||||
buttonContent: i18n.t('module.dataAnalysis.equipmentEfficiency.viewTrend'),
|
||||
// buttonContent: '查看趋势',
|
||||
actionName: 'view-trend'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'EquipmentEfficiency',
|
||||
components: { BaseTable, HeadForm, EquipmentEfficiencyGraph /** LineChart */ },
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
tableProps,
|
||||
dataList: [],
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
lineList: [],
|
||||
headFormConfig: [
|
||||
// label: i18n.t('module.dataAnalysis.productionLineBalance.line'),
|
||||
// placeholder: this.$t('module.dataAnalysis.productionLineBalance.line'),
|
||||
// width: 300,
|
||||
{
|
||||
type: 'select',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.factory'),
|
||||
placeholder: i18n.t('module.dataAnalysis.equipmentEfficiency.factory'),
|
||||
// label: '工厂',
|
||||
param: 'factoryId',
|
||||
selectOptions: []
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.line'),
|
||||
placeholder: i18n.t('module.dataAnalysis.equipmentEfficiency.line'),
|
||||
// label: '产线',
|
||||
param: 'productLineIds',
|
||||
multiple: true,
|
||||
selectOptions: []
|
||||
},
|
||||
{
|
||||
// 对于日期：2022-7-1 ~ 2022-7-1 要转换为 2022/7/1T00:02:00 - 2022/7/2T00:02:00
|
||||
type: 'select',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.timeType'),
|
||||
param: 'dateFilterType',
|
||||
defaultSelect: 0,
|
||||
selectOptions: [{ id: 0, name: i18n.t('module.dataAnalysis.equipmentEfficiency.rangeType') }, { id: 1, name: i18n.t('module.dataAnalysis.equipmentEfficiency.dateType') }],
|
||||
index: 2, // 记录下当前配置项的index，省的遍历的开销; index 和 extraOptions 要配合
|
||||
extraOptions: [
|
||||
{
|
||||
elDatePickerKey: '8dkfl', // 防止el-date-picker飞到左上角
|
||||
parent: 'dateFilterType',
|
||||
// 时间段选择
|
||||
type: 'datePicker',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.range'),
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
// valueFormat: 'yyyy-MM-dd',
|
||||
defaultTime: ['00:00:00', '00:00:00'],
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.startTime'),
|
||||
endPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.endTime'),
|
||||
param: 'timeValue'
|
||||
},
|
||||
{
|
||||
elDatePickerKey: '0lkfl',
|
||||
parent: 'dateFilterType',
|
||||
// 日期选择
|
||||
type: 'datePicker',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.date'),
|
||||
dateType: 'date',
|
||||
placeholder: i18n.t('module.dataAnalysis.equipmentEfficiency.hint.chooseTime'),
|
||||
format: 'yyyy-MM-dd',
|
||||
// valueFormat: 'yyyy-MM-dd', // 需要返回Date()
|
||||
param: 'timeValue'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {},
|
||||
showGraph: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchList('factory')
|
||||
this.fetchList('product-line')
|
||||
// this.getList() // 时间间隔必填
|
||||
},
|
||||
methods: {
|
||||
// 获取各种列表
|
||||
fetchList(type) {
|
||||
switch (type) {
|
||||
case 'factory':
|
||||
return getFactoryList().then(res => {
|
||||
if (res.data) {
|
||||
this.headFormConfig[0].selectOptions = res.data.map(factory => ({ id: factory.id, name: factory.name }))
|
||||
// 设置defaultSelect
|
||||
this.headFormConfig[0].defaultSelect = this.headFormConfig[0].selectOptions[0].id
|
||||
}
|
||||
})
|
||||
case 'product-line':
|
||||
return getLineList().then(res => {
|
||||
if (res.data) {
|
||||
this.headFormConfig[1].selectOptions = res.data.map(line => ({ id: line.id, name: line.name }))
|
||||
// 设置defaultSelect
|
||||
this.headFormConfig[1].defaultSelect = [this.headFormConfig[1].selectOptions[0].id]
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 获取首页列表
|
||||
getList() {
|
||||
// this.listLoading = true
|
||||
|
||||
const ftId = this.headFormValue.factoryId ? this.headFormValue.factoryId : ''
|
||||
const productlines = this.headFormValue.productLineIds.length ? this.headFormValue.productLineIds : []
|
||||
const { startTime, endTime } = this.getTimeRange()
|
||||
|
||||
getOEE({ ...this.listQuery, type: 1, ftId, productlines, startTime, endTime })
|
||||
.then(res => {
|
||||
this.dataList = res.data
|
||||
// this.listLoading = false
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.message === '该时间段内设备未连接到数据库') {
|
||||
this.dataList.splice(0)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 顶部查询按钮
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
this.showGraph = false
|
||||
},
|
||||
// handlers
|
||||
handleTableEvents({ action, data }) {
|
||||
// 有查看趋势，和保留待用的OEE对比图(此者暂时不做)
|
||||
switch (action) {
|
||||
case 'view-trend':
|
||||
this.viewTrends(data)
|
||||
break
|
||||
case 'view-oee-compare':
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
getTimeRange() {
|
||||
let startTime
|
||||
let endTime
|
||||
|
||||
if (this.headFormValue.timeValue instanceof Array) {
|
||||
startTime = this.headFormValue.timeValue[0]
|
||||
? moment(this.headFormValue.timeValue[0]).format('YYYY-MM-DDTHH:mm:ss')
|
||||
: '' // 强制axios使用北京时间
|
||||
endTime = this.headFormValue.timeValue[1]
|
||||
? moment(this.headFormValue.timeValue[1]).format('YYYY-MM-DDTHH:mm:ss')
|
||||
: ''
|
||||
} else {
|
||||
if (this.headFormValue.timeValue) {
|
||||
startTime = moment(this.headFormValue.timeValue).format('YYYY-MM-DDTHH:mm:ss')
|
||||
endTime = moment(startTime)
|
||||
.add(1, 'd')
|
||||
.format('YYYY-MM-DDTHH:mm:ss')
|
||||
} else {
|
||||
startTime = ''
|
||||
endTime = ''
|
||||
}
|
||||
}
|
||||
|
||||
return { startTime, endTime }
|
||||
},
|
||||
|
||||
viewTrends(data) {
|
||||
const { startTime, endTime } = this.getTimeRange()
|
||||
const injectData = {
|
||||
// 时间段
|
||||
startTime,
|
||||
endTime,
|
||||
// 设备id
|
||||
equipmentId: data.eqId,
|
||||
equipmentName: data.eqName,
|
||||
// 时间类型, type 按年，按月，按日等
|
||||
type: 1, // 默认 type 1, 1无间隔；2按月分隔；3按周分隔；4按天分隔
|
||||
// 时长数据: 工作时长， 停机时长，故障时长
|
||||
workTime: data.workTime,
|
||||
stopTime: data.stopTime,
|
||||
downTime: data.downTime,
|
||||
// 比例数据: 工作时长比率，停机时长比率，故障时长比率，速度开动率，OEE，TEEP
|
||||
workRate: data.workRate,
|
||||
stopRate: data.stopRate,
|
||||
downRate: data.downRate,
|
||||
peEfficiency: data.peEfficiency,
|
||||
timeEfficiency: data.timeEfficiency
|
||||
}
|
||||
// console.log('trends data: ', data)
|
||||
|
||||
this.showGraph = true
|
||||
|
||||
setTimeout(() => {
|
||||
// console.log('befoer graph: ', this.$refs.eegraph)
|
||||
this.$refs.eegraph.init(injectData) // 注入初始数据，这些数据在组件内部用作条件，有可能会被更改
|
||||
}, 600) // 动画是500ms
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slide-to-left-enter-active,
|
||||
.slide-to-left-leave-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.slide-to-left-enter {
|
||||
transform: translateX(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-to-left-leave-to {
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-to-left-leave,
|
||||
.slide-to-left-enter-to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
</style>
|
||||
240
src/views/DataAnalysis/equipmentException.vue
Normal file
240
src/views/DataAnalysis/equipmentException.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2022-03-24 13:30:00
|
||||
* @LastEditTime: 2022-07-25 09:58:51
|
||||
* @LastEditors: lb
|
||||
* @Description: 设备异常分析
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="dataList"
|
||||
:is-loading="listLoading"
|
||||
@emitFun="handleTableEvents"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable/index'
|
||||
// import ExceptionEqBtn from './components/ExceptionEqBtn'
|
||||
import { getLineList, getEquipmentExceptionAnalysis } from '@/api/DataAnalysis/equipmentException'
|
||||
import moment from 'moment'
|
||||
import commonBtn from '@/components/BaseTable/subcomponents/CommonBtn.vue'
|
||||
// import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'pdName',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.lineName')
|
||||
// label: '产线名称'
|
||||
},
|
||||
{
|
||||
prop: 'wsName',
|
||||
label: i18n.t('module.dataAnalysis.equipmentException.process')
|
||||
// label: '工序'
|
||||
},
|
||||
{
|
||||
prop: 'eqName',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.eq')
|
||||
// label: '设备'
|
||||
// subcomponent: ExceptionEqBtn
|
||||
},
|
||||
{
|
||||
prop: 'mtbf',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.mtbf'),
|
||||
// label: '平均故障间隔时间[MTBF] (h)',
|
||||
width: 230
|
||||
},
|
||||
{
|
||||
prop: 'mttr',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.mttr'),
|
||||
// label: '平均维修时间[MTTR] (h)',
|
||||
width: 230
|
||||
},
|
||||
{
|
||||
prop: 'workTime',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.time.work')
|
||||
// label: '工作时长 (h)'
|
||||
},
|
||||
{
|
||||
prop: 'downTime',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.time.down')
|
||||
// label: '故障时长 (h)'
|
||||
},
|
||||
{
|
||||
prop: 'downCount',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.downCount')
|
||||
// label: '故障次数'
|
||||
},
|
||||
{
|
||||
prop: '故障详情',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.downDetail'),
|
||||
// label: '故障详情',
|
||||
subcomponent: commonBtn,
|
||||
buttonContent: i18n.t('module.dataAnalysis.equipmentEfficiency.viewDetail'),
|
||||
// buttonContent: '查看详情',
|
||||
actionName: 'view-detail',
|
||||
emitFullData: true
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'EquipmentExceptionAnalysis',
|
||||
components: { BaseTable, HeadForm },
|
||||
data() {
|
||||
return {
|
||||
tableProps,
|
||||
dataList: [],
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: i18n.t('module.basicData.visual.valueRequired.month') + '(' + i18n.t('module.dataAnalysis.equipmentEfficiency.required') + ')',
|
||||
dateType: 'month',
|
||||
format: 'yyyy-MM',
|
||||
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
||||
placeholder: i18n.t('module.dataAnalysis.equipmentException.time'),
|
||||
param: 'searchTime',
|
||||
defaultSelect: new Date()
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: i18n.t('module.dataAnalysis.equipmentException.line'),
|
||||
placeholder: i18n.t('module.dataAnalysis.equipmentException.line'),
|
||||
param: 'productLineId',
|
||||
width: 300,
|
||||
selectOptions: [],
|
||||
defaultSelect: ''
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {},
|
||||
startTime: null,
|
||||
endTime: null
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.fetchList('line')
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleTableEvents({ action, data }) {
|
||||
if (action === 'view-detail') {
|
||||
// 获取数据并跳转到 厂务-报警管理
|
||||
this.$router.push({
|
||||
name: 'EquipmentAlarm',
|
||||
params: {
|
||||
eqName: data.eqName,
|
||||
startTimeProp: this.startTime,
|
||||
endTimeProp: this.endTime
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
fetchList(type) {
|
||||
switch (type) {
|
||||
case 'line':
|
||||
return getLineList().then(res => {
|
||||
if (res.data) {
|
||||
this.headFormConfig[1].selectOptions = res.data.map(line => ({ id: line.id, name: line.name }))
|
||||
// 设置defaultSelect
|
||||
this.headFormConfig[1].defaultSelect = this.headFormConfig[1].selectOptions[0].id
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
getList() {
|
||||
const DEFAULT_TYPE = 1
|
||||
const productlines = this.headFormValue.productLineId ? [this.headFormValue.productLineId] : []
|
||||
this.startTime = this.headFormValue.searchTime
|
||||
? moment(this.headFormValue.searchTime)
|
||||
.set({ date: 1, hour: 0, minute: 0, second: 0, millisecond: 0 })
|
||||
.format('YYYY-MM-DDTHH:mm:ss')
|
||||
: 0
|
||||
this.endTime = this.startTime
|
||||
? moment(this.startTime)
|
||||
.add(1, 'M')
|
||||
.format('YYYY-MM-DDTHH:mm:ss')
|
||||
: 0
|
||||
|
||||
const type = DEFAULT_TYPE
|
||||
|
||||
if (this.startTime === 0 && this.endTime === 0) {
|
||||
this.$message({
|
||||
message: i18n.t('module.dataAnalysis.equipmentEfficiency.hint.chooseTime'),
|
||||
type: 'error',
|
||||
duration: 1500
|
||||
})
|
||||
} else {
|
||||
getEquipmentExceptionAnalysis({ productlines, startTime: this.startTime, endTime: this.endTime, type }).then(
|
||||
res => {
|
||||
if (res.data) {
|
||||
this.dataList = res.data
|
||||
} else {
|
||||
this.dataList.splice(0)
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.exception-container {
|
||||
.el-table {
|
||||
overflow: visible;
|
||||
.el-table__body-wrapper {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
.el-table .cell {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
367
src/views/DataAnalysis/equipmentProduction.vue
Normal file
367
src/views/DataAnalysis/equipmentProduction.vue
Normal file
@@ -0,0 +1,367 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: lb
|
||||
* @Date: 2022-07-21 13:30:00
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-07-21 13:30:00
|
||||
* @Description: 设备产量时序图
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
|
||||
<transition mode="out-in" name="slide-to-left">
|
||||
<equipment-efficiency-graph v-if="showGraph" key="graph" ref="eegraph" @close-graph="showGraph = false" />
|
||||
<base-table
|
||||
v-else
|
||||
key="table"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="dataList"
|
||||
:is-loading="listLoading"
|
||||
:index-config="{ align: 'left', fixed: 'left' }"
|
||||
@emitFun="handleTableEvents"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
<!-- <div class="app-container">
|
||||
<el-radio-group v-model="chartType" class="data-analysis-radio" size="mini" @change="changeChartType">
|
||||
<el-radio-button v-for="(item, index) in chartDataArr" :key="index" :label="index">
|
||||
{{ item.equipmentName }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<Line-chart :chart-data="chartDataItem" width="100%" height="400px" />
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import i18n from '@/lang'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable/index-compound'
|
||||
// import LineChart from '@/components/Charts/LineChart'
|
||||
import { getLineList, getFactoryList, getOEE } from '@/api/DataAnalysis/equipmentEfficiency'
|
||||
import moment from 'moment'
|
||||
import commonBtn from '@/components/BaseTable/subcomponents/CommonBtn.vue'
|
||||
|
||||
import EquipmentEfficiencyGraph from './components/equipmentEfficiencyGraph.vue'
|
||||
// import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
label: '工厂',
|
||||
prop: 'factoryName'
|
||||
},
|
||||
{
|
||||
label: '产线',
|
||||
prop: 'pdName'
|
||||
},
|
||||
{
|
||||
label: '工序',
|
||||
prop: 'wsName'
|
||||
},
|
||||
{
|
||||
label: '设备',
|
||||
prop: 'eqName'
|
||||
},
|
||||
{
|
||||
label: '有效时间(h)',
|
||||
children: [
|
||||
{ prop: 'workTime', label: '工作时长(小时)', width: 120, filter: val => `${val} 小时` },
|
||||
{ prop: 'workRate', label: '工作时长比率', width: 120, filter: val => (val * 100).toFixed(2) + '%' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '关机时间(h)',
|
||||
children: [
|
||||
{ prop: 'stopTime', label: '停机时长(小时)', width: 120, filter: val => `${val} 小时` },
|
||||
{ prop: 'stopRate', label: '停机比率', filter: val => (val * 100).toFixed(2) + '%' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '中断损失',
|
||||
children: [
|
||||
{ prop: 'downTime', label: '故障时长(小时)', width: 120, filter: val => `${val} 小时` },
|
||||
{ prop: 'downRate', label: '故障比率', filter: val => (val * 100).toFixed(2) + '%' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '速度损失',
|
||||
children: [
|
||||
{ prop: 'realYield', label: '实际加工速度', width: 120, filter: val => `${val} 片/小时` }, // 片/小时
|
||||
{ prop: 'designYield', label: '理论加工速度', width: 120, filter: val => `${val} 片/小时` },
|
||||
{ prop: 'peEfficiency', label: '速度开动率', width: 120, filter: val => (val * 100).toFixed(2) + '%' }
|
||||
]
|
||||
},
|
||||
// {
|
||||
// prop: 'goodRate',
|
||||
// label: '良品率' // 暂时先隐藏
|
||||
// },
|
||||
{
|
||||
label: 'OEE',
|
||||
prop: 'oee',
|
||||
filter: val => (val * 100).toFixed(2) + '%'
|
||||
},
|
||||
{
|
||||
label: 'TEEP',
|
||||
prop: 'teep',
|
||||
filter: val => (val * 100).toFixed(2) + '%'
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
subcomponent: commonBtn,
|
||||
emitFullData: true,
|
||||
buttonContent: '查看趋势',
|
||||
actionName: 'view-trend'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'EquipmentEfficiency',
|
||||
components: { BaseTable, HeadForm, EquipmentEfficiencyGraph /** LineChart */ },
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
tableProps,
|
||||
dataList: [],
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
lineList: [],
|
||||
headFormConfig: [
|
||||
// label: i18n.t('module.dataAnalysis.productionLineBalance.line'),
|
||||
// placeholder: this.$t('module.dataAnalysis.productionLineBalance.line'),
|
||||
// width: 300,
|
||||
{
|
||||
type: 'select',
|
||||
label: '工厂',
|
||||
param: 'factoryId',
|
||||
selectOptions: []
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '产线',
|
||||
param: 'productLineIds',
|
||||
multiple: true,
|
||||
selectOptions: []
|
||||
},
|
||||
{
|
||||
// 对于日期：2022-7-1 ~ 2022-7-1 要转换为 2022/7/1T00:02:00 - 2022/7/2T00:02:00
|
||||
type: 'select',
|
||||
label: '时间类型',
|
||||
param: 'dateFilterType',
|
||||
defaultSelect: 0,
|
||||
selectOptions: [{ id: 0, name: '按时间段' }, { id: 1, name: '按日期' }],
|
||||
index: 2, // 记录下当前配置项的index，省的遍历的开销; index 和 extraOptions 要配合
|
||||
extraOptions: [
|
||||
{
|
||||
elDatePickerKey: '8dkfl', // 防止el-date-picker飞到左上角
|
||||
parent: 'dateFilterType',
|
||||
// 时间段选择
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
// valueFormat: 'yyyy-MM-dd',
|
||||
defaultTime: ['00:00:00', '00:00:00'],
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.startTime'),
|
||||
endPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.endTime'),
|
||||
param: 'timeValue'
|
||||
},
|
||||
{
|
||||
elDatePickerKey: '0lkfl',
|
||||
parent: 'dateFilterType',
|
||||
// 日期选择
|
||||
type: 'datePicker',
|
||||
label: '日期',
|
||||
dateType: 'date',
|
||||
placeholder: '选择日期',
|
||||
format: 'yyyy-MM-dd',
|
||||
// valueFormat: 'yyyy-MM-dd', // 需要返回Date()
|
||||
param: 'timeValue'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {},
|
||||
showGraph: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchList('factory')
|
||||
this.fetchList('product-line')
|
||||
// this.getList() // 时间间隔必填
|
||||
},
|
||||
methods: {
|
||||
// 获取各种列表
|
||||
fetchList(type) {
|
||||
switch (type) {
|
||||
case 'factory':
|
||||
return getFactoryList().then(res => {
|
||||
if (res.data) {
|
||||
this.headFormConfig[0].selectOptions = res.data.map(factory => ({ id: factory.id, name: factory.name }))
|
||||
// 设置defaultSelect
|
||||
this.headFormConfig[0].defaultSelect = this.headFormConfig[0].selectOptions[0].id
|
||||
}
|
||||
})
|
||||
case 'product-line':
|
||||
return getLineList().then(res => {
|
||||
if (res.data) {
|
||||
this.headFormConfig[1].selectOptions = res.data.map(line => ({ id: line.id, name: line.name }))
|
||||
// 设置defaultSelect
|
||||
this.headFormConfig[1].defaultSelect = [this.headFormConfig[1].selectOptions[0].id]
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 获取首页列表
|
||||
getList() {
|
||||
// this.listLoading = true
|
||||
|
||||
const ftId = this.headFormValue.factoryId ? this.headFormValue.factoryId : ''
|
||||
const productlines = this.headFormValue.productLineIds.length ? this.headFormValue.productLineIds : []
|
||||
let startTime
|
||||
let endTime
|
||||
|
||||
if (this.headFormValue.timeValue instanceof Array) {
|
||||
startTime = this.headFormValue.timeValue[0]
|
||||
? moment(this.headFormValue.timeValue[0]).format('YYYY-MM-DDTHH:mm:ss')
|
||||
: '' // 强制axios使用北京时间
|
||||
endTime = this.headFormValue.timeValue[1]
|
||||
? moment(this.headFormValue.timeValue[1]).format('YYYY-MM-DDTHH:mm:ss')
|
||||
: ''
|
||||
} else {
|
||||
if (this.headFormValue.timeValue) {
|
||||
startTime = moment(this.headFormValue.timeValue)
|
||||
.add(2, 'm')
|
||||
.format('YYYY-MM-DDTHH:mm:ss')
|
||||
endTime = moment(startTime)
|
||||
.add(1, 'd')
|
||||
.format('YYYY-MM-DDTHH:mm:ss')
|
||||
} else {
|
||||
startTime = ''
|
||||
endTime = ''
|
||||
}
|
||||
}
|
||||
|
||||
getOEE({ ...this.listQuery, type: 1, ftId, productlines, startTime, endTime })
|
||||
.then(res => {
|
||||
this.dataList = res.data
|
||||
// this.listLoading = false
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.message === '该时间段内设备未连接到数据库') {
|
||||
this.dataList.splice(0)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 顶部查询按钮
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
this.showGraph = false
|
||||
},
|
||||
// handlers
|
||||
handleTableEvents({ action, data }) {
|
||||
// 有查看趋势，和保留待用的OEE对比图(此者暂时不做)
|
||||
switch (action) {
|
||||
case 'view-trend':
|
||||
this.viewTrends(data)
|
||||
break
|
||||
case 'view-oee-compare':
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
viewTrends(data) {
|
||||
const startTime = this.headFormValue.timeValue[0]
|
||||
? moment(this.headFormValue.timeValue[0]).format('YYYY-MM-DDTHH:mm:ss')
|
||||
: '' // 强制axios使用北京时间
|
||||
const endTime = this.headFormValue.timeValue[1]
|
||||
? moment(this.headFormValue.timeValue[1]).format('YYYY-MM-DDTHH:mm:ss')
|
||||
: ''
|
||||
const injectData = {
|
||||
// 时间段
|
||||
startTime,
|
||||
endTime,
|
||||
// 设备id
|
||||
equipmentId: data.eqId,
|
||||
equipmentName: data.eqName,
|
||||
// 时间类型, type 按年，按月，按日等
|
||||
type: 1, // 默认 type 1, 1无间隔；2按月分隔；3按周分隔；4按天分隔
|
||||
// 时长数据: 工作时长， 停机时长，故障时长
|
||||
workTime: data.workTime,
|
||||
stopTime: data.stopTime,
|
||||
downTime: data.downTime,
|
||||
// 比例数据: 工作时长比率，停机时长比率，故障时长比率，速度开动率，OEE，TEEP
|
||||
workRate: data.workRate,
|
||||
stopRate: data.stopRate,
|
||||
downRate: data.downRate,
|
||||
peEfficiency: data.peEfficiency
|
||||
}
|
||||
console.log('trends data: ', data)
|
||||
|
||||
this.showGraph = true
|
||||
|
||||
setTimeout(() => {
|
||||
console.log('befoer graph: ', this.$refs.eegraph)
|
||||
this.$refs.eegraph.init(injectData) // 注入初始数据，这些数据在组件内部用作条件，有可能会被更改
|
||||
}, 600) // 动画是500ms
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slide-to-left-enter-active,
|
||||
.slide-to-left-leave-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.slide-to-left-enter {
|
||||
transform: translateX(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-to-left-leave-to {
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-to-left-leave,
|
||||
.slide-to-left-enter-to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
</style>
|
||||
656
src/views/DataAnalysis/equipmentStatus.vue
Normal file
656
src/views/DataAnalysis/equipmentStatus.vue
Normal file
@@ -0,0 +1,656 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: lb
|
||||
* @Date: 2022-07-21 13:30:00
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-07-21 13:30:00
|
||||
* @Description: 设备状态时序图
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form
|
||||
class="head-form"
|
||||
style="padding-top: 8px;"
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
@select-changed="handleHeadSelectChanged"
|
||||
/>
|
||||
|
||||
<div class="time-chart" style="margin-top: 10px;">
|
||||
<div
|
||||
v-show="equipmentCount > 0"
|
||||
id="time-chart__inner"
|
||||
ref="time-chart__inner"
|
||||
class="time-chart__inner"
|
||||
style="width: 100%; min-height: 50vh;"
|
||||
:style="{ height: autoHeight + 'px' }"
|
||||
/>
|
||||
<div v-show="equipmentCount === 0">{{ $t('module.basicData.visual.hints.searchFirst') }}</div>
|
||||
</div>
|
||||
|
||||
<eq-dialog v-if="addOrUpdateVisible" ref="addOrUpdate" :ws-id="wsId" @add-equipment="addEquipmentToSeriesData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
// import { timeFormatter } from '@/filters'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import { getLineList, getWorkSequenceList, getStatus } from '@/api/DataAnalysis/equipmentStatus'
|
||||
import moment from 'moment'
|
||||
import echarts from 'echarts'
|
||||
import EqDialog from './components/equipmentStatus--dialog.vue'
|
||||
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
function renderItem(params, api) {
|
||||
var categoryIndex = api.value(0)
|
||||
var start = api.coord([api.value(1), categoryIndex])
|
||||
var end = api.coord([api.value(2), categoryIndex])
|
||||
var height = 32
|
||||
|
||||
return {
|
||||
type: 'rect',
|
||||
shape: echarts.graphic.clipRectByRect(
|
||||
{
|
||||
x: start[0],
|
||||
y: start[1] - height / 2,
|
||||
width: end[0] - start[0],
|
||||
height: height
|
||||
},
|
||||
{
|
||||
x: params.coordSys.x,
|
||||
y: params.coordSys.y,
|
||||
width: params.coordSys.width,
|
||||
height: params.coordSys.height
|
||||
}
|
||||
),
|
||||
style: api.style()
|
||||
}
|
||||
}
|
||||
|
||||
class ChartOption {
|
||||
constructor() {
|
||||
this.color = ['#4caf50', '#ffb300', '#e53935']
|
||||
this.legend = {
|
||||
data: [
|
||||
i18n.t('module.basicData.visual.echartLegends.working'),
|
||||
i18n.t('module.basicData.visual.echartLegends.stop'),
|
||||
i18n.t('module.basicData.visual.echartLegends.breakdown')
|
||||
],
|
||||
bottom: '0%',
|
||||
selectedMode: false,
|
||||
textStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
this.tooltip = {
|
||||
formatter: function(params) {
|
||||
return (
|
||||
moment(params.value[1]).format('YYYY-MM-DD HH:mm:ss') +
|
||||
' - ' +
|
||||
moment(params.value[2]).format('YYYY-MM-DD HH:mm:ss') +
|
||||
' : ' +
|
||||
params.name
|
||||
)
|
||||
}
|
||||
}
|
||||
this.title = {
|
||||
text: i18n.t('module.basicData.visual.echartTitles.eqStatus'),
|
||||
left: 'center'
|
||||
}
|
||||
this.xAxis = {
|
||||
type: 'time',
|
||||
// min: +new Date().setHours(0, 0, 0, 0),
|
||||
splitNumber: 24,
|
||||
interval: 3600 * 1000,
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: function(val) {
|
||||
const time = new Date(val)
|
||||
const hour = time.getHours()
|
||||
const minute = time.getMinutes()
|
||||
const hours = hour >= 10 ? hour + '' : '0' + hour
|
||||
const minutes = minute >= 10 ? minute + '' : '0' + minute
|
||||
return hours + ':' + minutes
|
||||
}
|
||||
}
|
||||
}
|
||||
this.yAxis = {
|
||||
// data: Object.keys(eqData).map(item => eqData[item].name)
|
||||
data: []
|
||||
}
|
||||
this.series = [
|
||||
{ name: i18n.t('module.basicData.visual.echartLegends.working'), type: 'bar', data: [] },
|
||||
{ name: i18n.t('module.basicData.visual.echartLegends.stop'), type: 'bar', data: [] },
|
||||
{ name: i18n.t('module.basicData.visual.echartLegends.breakdown'), type: 'bar', data: [] },
|
||||
{
|
||||
type: 'custom',
|
||||
renderItem: renderItem,
|
||||
itemStyle: {
|
||||
opacity: 0.8
|
||||
},
|
||||
encode: {
|
||||
x: [1, 2],
|
||||
y: 0
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
setTitle(title) {
|
||||
this.title.text = title
|
||||
}
|
||||
|
||||
// date: 服务器返回来的日期时间数据
|
||||
setXAxis(date) {
|
||||
// this.xAxis.min = +new Date(date).setHours(0)
|
||||
this.xAxis.min = +new Date(date).setHours(0, 0, 0, 0)
|
||||
this.xAxis.max = this.xAxis.min + 3600 * 1000 * 24
|
||||
}
|
||||
|
||||
setYAxis(data) {
|
||||
this.yAxis.data = data
|
||||
}
|
||||
|
||||
setData(data) {
|
||||
this.series[3].data = data
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'SxtEquipmentStatus',
|
||||
components: { HeadForm, EqDialog },
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
dataList: [],
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
// label: '产线',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.line'),
|
||||
param: 'productLineId',
|
||||
// multiple: true,
|
||||
selectOptions: [],
|
||||
defaultSelect: '',
|
||||
onchange: true
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
// label: '工序',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.process'),
|
||||
param: 'workSequenceId',
|
||||
// multiple: true,
|
||||
selectOptions: [],
|
||||
defaultSelect: ''
|
||||
},
|
||||
{
|
||||
// 对于日期：2022-7-1 ~ 2022-7-1 要转换为 2022/7/1T00:02:00 - 2022/7/2T00:02:00
|
||||
type: 'datePicker',
|
||||
// label: '日期',
|
||||
label: i18n.t('module.dataAnalysis.equipmentEfficiency.date'),
|
||||
dateType: 'date',
|
||||
placeholder: this.$t('module.basicData.visual.hints.selectDate'),
|
||||
param: 'date',
|
||||
defaultSelect: new Date()
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: `+ ${i18n.t('module.dataAnalysis.equipmentEfficiency.addEq')}`,
|
||||
name: 'add-eq',
|
||||
color: 'success'
|
||||
}
|
||||
],
|
||||
headFormValue: {},
|
||||
chart: null,
|
||||
chartOption: new ChartOption(),
|
||||
equipments: {},
|
||||
startTime: null,
|
||||
state: ['正常', '停机', '故障'],
|
||||
colors: ['#4caf50', '#ffb300', '#e53935'],
|
||||
queryBuffer: {},
|
||||
wsId: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
autoHeight: function() {
|
||||
return Object.keys(this.equipments).length * 100 || 500
|
||||
},
|
||||
equipmentCount: function() {
|
||||
return Object.keys(this.equipments).length
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
if (this.chart) this.chart.resize()
|
||||
},
|
||||
mounted() {
|
||||
this.fetchList('product-line').then(() => {
|
||||
this.fetchList('work-section')
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
if (!this.chart) {
|
||||
this.chart = echarts.init(this.$refs['time-chart__inner'])
|
||||
// 获取数据
|
||||
// const today = new Date(new Date().setHours(0,0,0,0))
|
||||
// getStatus({
|
||||
// productlines: this.headFormConfig[0].defaultSelect,
|
||||
// wsId: this.headFormConfig[1].defaultSelect,
|
||||
// startTime: today,
|
||||
// endTime: new Date(today.getTime() + 3600 * 1000 * 24)
|
||||
// }).then(res => {})
|
||||
}
|
||||
},
|
||||
// handlers
|
||||
async handleHeadSelectChanged(data) {
|
||||
if (data.param === 'productLineId') {
|
||||
this.headFormConfig[0].defaultSelect = data.value
|
||||
await this.fetchList('work-section')
|
||||
}
|
||||
},
|
||||
// 获取各种列表
|
||||
fetchList(type) {
|
||||
switch (type) {
|
||||
case 'work-section': {
|
||||
return getWorkSequenceList({ productionLineId: this.headFormConfig[0].defaultSelect }).then(res => {
|
||||
if (res.data && res.data.length) {
|
||||
this.headFormConfig[1].selectOptions = res.data.map(ws => ({ id: ws.id, name: ws.name }))
|
||||
// 设置defaultSelect
|
||||
this.wsId = this.headFormConfig[1].selectOptions[0].id
|
||||
this.headFormConfig[1].defaultSelect = this.headFormConfig[1].selectOptions[0].id
|
||||
} else {
|
||||
this.headFormConfig[1].selectOptions.splice(0)
|
||||
this.headFormConfig[1].defaultSelect = null
|
||||
}
|
||||
})
|
||||
}
|
||||
case 'product-line':
|
||||
return getLineList().then(res => {
|
||||
if (res.data) {
|
||||
this.headFormConfig[0].selectOptions = res.data.map(line => ({ id: line.id, name: line.name }))
|
||||
// 设置defaultSelect
|
||||
this.headFormConfig[0].defaultSelect = this.headFormConfig[0].selectOptions[0].id
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 把服务器数据按照设备分组
|
||||
transformDataToEquipments(dataList) {
|
||||
const equipments = {}
|
||||
dataList.map(item => {
|
||||
if (equipments[item.eqId]) {
|
||||
// 如果设备已存在
|
||||
equipments[item.eqId].name = item.eqName
|
||||
equipments[item.eqId].status.push({
|
||||
startTime: +new Date(item.startTime),
|
||||
endTime: +new Date(item.endTime),
|
||||
status: this.state[item.status] // 0 正常、1 停机、2 故障
|
||||
})
|
||||
} else {
|
||||
equipments[item.eqId] = {
|
||||
name: item.eqName,
|
||||
status: [
|
||||
{
|
||||
startTime: +new Date(item.startTime),
|
||||
endTime: +new Date(item.endTime),
|
||||
status: this.state[item.status] // 0 正常、1 停机、2 故障
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
// console.log('items --- ', equipments)
|
||||
return equipments
|
||||
},
|
||||
|
||||
// 把分组好的设备数据转换为echarts需要的series数据
|
||||
transformEquipmentsToSeries(equipments) {
|
||||
const seriesData = []
|
||||
Object.entries(equipments).map(([key, item], index) => {
|
||||
item.status.forEach(status => {
|
||||
seriesData.push({
|
||||
name: status.status,
|
||||
value: [index, status.startTime, status.endTime],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color:
|
||||
status.status === '正常'
|
||||
? '#4caf50'
|
||||
: status.status === '停机'
|
||||
? '#ffb300'
|
||||
: status.status === '故障'
|
||||
? '#e53935'
|
||||
: null
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
return seriesData
|
||||
},
|
||||
|
||||
// 顶部查询按钮
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
const productlines = this.headFormValue.productLineId ? [this.headFormValue.productLineId] : []
|
||||
const wsId = this.headFormValue.workSequenceId || ''
|
||||
const date = this.headFormValue.date || new Date()
|
||||
const startTime = moment(new Date(date.setHours(0, 0, 0, 0))).format('YYYY-MM-DDTHH:mm:ss')
|
||||
const endTime = moment(new Date(date.setHours(0, 0, 0, 0)))
|
||||
.add(1, 'd')
|
||||
.format('YYYY-MM-DDTHH:mm:ss')
|
||||
|
||||
this.$set(this.queryBuffer, 'productlines', productlines)
|
||||
this.$set(this.queryBuffer, 'wsId', wsId)
|
||||
this.$set(this.queryBuffer, 'startTime', startTime)
|
||||
this.$set(this.queryBuffer, 'endTime', endTime)
|
||||
|
||||
getStatus({
|
||||
productlines,
|
||||
wsId,
|
||||
startTime,
|
||||
endTime
|
||||
}).then(res => {
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.dataList = res.data
|
||||
// this.dataList = [
|
||||
// {
|
||||
// eqId: 'eq-001',
|
||||
// eqName: 'A1预热机',
|
||||
// startTime: '2022-05-04T00:30:34',
|
||||
// endTime: '2022-05-04T08:30:34',
|
||||
// status: 0
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-001',
|
||||
// eqName: 'A1预热机',
|
||||
// startTime: '2022-05-04T08:30:34',
|
||||
// endTime: '2022-05-04T09:30:34',
|
||||
// status: 1
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-001',
|
||||
// eqName: 'A1预热机',
|
||||
// startTime: '2022-05-04T09:30:34',
|
||||
// endTime: '2022-05-04T11:30:34',
|
||||
// status: 2
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-001',
|
||||
// eqName: 'A1预热机',
|
||||
// startTime: '2022-05-04T11:30:34',
|
||||
// endTime: '2022-05-04T13:30:34',
|
||||
// status: 1
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-001',
|
||||
// eqName: 'A1预热机',
|
||||
// startTime: '2022-05-04T13:30:34',
|
||||
// endTime: '2022-05-04T18:30:34',
|
||||
// status: 0
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-001',
|
||||
// eqName: 'A1预热机',
|
||||
// startTime: '2022-05-04T18:30:34',
|
||||
// endTime: '2022-05-05T00:00:00',
|
||||
// status: 1
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-002',
|
||||
// eqName: 'A2预热机',
|
||||
// startTime: '2022-05-04T01:30:34',
|
||||
// endTime: '2022-05-04T08:30:34',
|
||||
// status: 2
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-002',
|
||||
// eqName: 'A2预热机',
|
||||
// startTime: '2022-05-04T08:30:34',
|
||||
// endTime: '2022-05-04T18:30:34',
|
||||
// status: 2
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-002',
|
||||
// eqName: 'A2预热机',
|
||||
// startTime: '2022-05-04T18:30:34',
|
||||
// endTime: '2022-05-04T22:30:34',
|
||||
// status: 0
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-002',
|
||||
// eqName: 'A2预热机',
|
||||
// startTime: '2022-05-04T22:30:34',
|
||||
// endTime: '2022-05-04T23:30:34',
|
||||
// status: 1
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-002',
|
||||
// eqName: 'A2预热机',
|
||||
// startTime: '2022-05-04T23:30:34',
|
||||
// endTime: '2022-05-05T00:00:00',
|
||||
// status: 2
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-0003',
|
||||
// eqName: 'A3预热机',
|
||||
// startTime: '2022-05-04T00:00:00',
|
||||
// endTime: '2022-05-04T08:30:34',
|
||||
// status: 0
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-0003',
|
||||
// eqName: 'A3预热机',
|
||||
// startTime: '2022-05-04T08:30:34',
|
||||
// endTime: '2022-05-04T18:30:34',
|
||||
// status: 2
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-0003',
|
||||
// eqName: 'A3预热机',
|
||||
// startTime: '2022-05-04T18:30:34',
|
||||
// endTime: '2022-05-04T22:30:34',
|
||||
// status: 1
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-0003',
|
||||
// eqName: 'A3预热机',
|
||||
// startTime: '2022-05-04T22:30:34',
|
||||
// endTime: '2022-05-04T23:30:34',
|
||||
// status: 1
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-004',
|
||||
// eqName: 'A4预热机',
|
||||
// startTime: '2022-05-04T01:30:34',
|
||||
// endTime: '2022-05-04T04:30:34',
|
||||
// status: 2
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-004',
|
||||
// eqName: 'A4预热机',
|
||||
// startTime: '2022-05-04T04:30:34',
|
||||
// endTime: '2022-05-04T08:30:34',
|
||||
// status: 0
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-004',
|
||||
// eqName: 'A4预热机',
|
||||
// startTime: '2022-05-04T08:30:34',
|
||||
// endTime: '2022-05-04T11:30:34',
|
||||
// status: 1
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-004',
|
||||
// eqName: 'A4预热机',
|
||||
// startTime: '2022-05-04T11:30:34',
|
||||
// endTime: '2022-05-04T13:30:34',
|
||||
// status: 2
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-004',
|
||||
// eqName: 'A4预热机',
|
||||
// startTime: '2022-05-04T13:30:34',
|
||||
// endTime: '2022-05-04T18:30:34',
|
||||
// status: 1
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-005',
|
||||
// eqName: 'A4预热机',
|
||||
// startTime: '2022-05-04T18:30:34',
|
||||
// endTime: '2022-05-04T20:30:34',
|
||||
// status: 1
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-005',
|
||||
// eqName: 'A5预热机',
|
||||
// startTime: '2022-05-04T08:30:34',
|
||||
// endTime: '2022-05-04T18:30:34',
|
||||
// status: 0
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-005',
|
||||
// eqName: 'A5预热机',
|
||||
// startTime: '2022-05-04T18:30:34',
|
||||
// endTime: '2022-05-04T20:30:34',
|
||||
// status: 2
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-005',
|
||||
// eqName: 'A5预热机',
|
||||
// startTime: '2022-05-04T20:30:34',
|
||||
// endTime: '2022-05-04T22:30:34',
|
||||
// status: 1
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-005',
|
||||
// eqName: 'A5预热机',
|
||||
// startTime: '2022-05-04T22:30:34',
|
||||
// endTime: '2022-05-04T23:30:34',
|
||||
// status: 0
|
||||
// },
|
||||
// {
|
||||
// eqId: 'eq-005',
|
||||
// eqName: 'A5预热机',
|
||||
// startTime: '2022-05-04T23:30:34',
|
||||
// endTime: '2022-05-05T00:30:34',
|
||||
// status: 1
|
||||
// }
|
||||
// ]
|
||||
this.equipments = this.transformDataToEquipments(this.dataList)
|
||||
this.chartOption.setYAxis(Object.keys(this.equipments).map(item => this.equipments[item].name))
|
||||
this.chartOption.setXAxis(this.dataList[0].startTime)
|
||||
this.chartOption.setData(this.transformEquipmentsToSeries(this.equipments))
|
||||
this.renderChart()
|
||||
} else {
|
||||
this.dataList.splice(0)
|
||||
}
|
||||
})
|
||||
} else if (this.headFormValue.btnName === 'add-eq') {
|
||||
if (this.equipmentCount === 0) {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.hints.searchFirst'),
|
||||
type: 'warning',
|
||||
duration: 1500
|
||||
})
|
||||
} else {
|
||||
// 添加设备
|
||||
// console.log('添加设备')
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
// console.log('ref', this.$refs.addOrUpdate)
|
||||
this.$refs.addOrUpdate.init(this.queryBuffer)
|
||||
})
|
||||
}
|
||||
// 1.get eq
|
||||
// const testEq = {
|
||||
// code: 0,
|
||||
// data: [
|
||||
// { eqId: 'eq-006', eqName: 'A6预热机', startTime: '2022-05-04T00:00:00', endTime: '2022-05-04T01:30:34', status: 1 },
|
||||
// { eqId: 'eq-006', eqName: 'A6预热机', startTime: '2022-05-04T01:30:34', endTime: '2022-05-04T03:00:34', status: 0 },
|
||||
// { eqId: 'eq-006', eqName: 'A6预热机', startTime: '2022-05-04T03:00:34', endTime: '2022-05-04T06:30:00', status: 2 },
|
||||
// { eqId: 'eq-006', eqName: 'A6预热机', startTime: '2022-05-04T06:30:00', endTime: '2022-05-04T12:30:00', status: 0 },
|
||||
// { eqId: 'eq-006', eqName: 'A6预热机', startTime: '2022-05-04T12:30:00', endTime: '2022-05-04T13:30:00', status: 1 },
|
||||
// { eqId: 'eq-006', eqName: 'A6预热机', startTime: '2022-05-04T13:30:00', endTime: '2022-05-04T18:30:34', status: 0 },
|
||||
// { eqId: 'eq-006', eqName: 'A6预热机', startTime: '2022-05-04T18:30:34', endTime: '2022-05-04T19:30:34', status: 2 },
|
||||
// { eqId: 'eq-006', eqName: 'A6预热机', startTime: '2022-05-04T19:30:34', endTime: '2022-05-04T22:00:00', status: 0 },
|
||||
// { eqId: 'eq-006', eqName: 'A6预热机', startTime: '2022-05-04T22:00:00', endTime: '2022-05-04T23:00:00', status: 1 },
|
||||
// { eqId: 'eq-006', eqName: 'A6预热机', startTime: '2022-05-04T23:00:00', endTime: '2022-05-05T00:00:00', status: 2 },
|
||||
// ]
|
||||
// }
|
||||
|
||||
// this.addEquipmentToSeriesData(testEq.data)
|
||||
}
|
||||
},
|
||||
|
||||
addEquipmentToSeriesData(dataList) {
|
||||
const newEq = this.transformDataToEquipments(dataList)
|
||||
this.$set(this.equipments, Object.keys(newEq)[0], newEq[Object.keys(newEq)[0]])
|
||||
this.chartOption.setYAxis(Object.keys(this.equipments).map(item => this.equipments[item].name))
|
||||
this.chartOption.setData(this.transformEquipmentsToSeries(this.equipments))
|
||||
this.renderChart()
|
||||
},
|
||||
|
||||
renderChart() {
|
||||
// console.log('rendering chart: ', this.chartOption)
|
||||
this.chart.setOption(this.chartOption)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.head-form >>> .el-date-editor .el-input__prefix {
|
||||
left: unset;
|
||||
right: 5px;
|
||||
color: #0b58ff;
|
||||
}
|
||||
|
||||
.head-form >>> .el-date-editor .el-input__suffix {
|
||||
left: 5px;
|
||||
right: unset;
|
||||
color: #0b58ff;
|
||||
}
|
||||
</style>
|
||||
366
src/views/DataAnalysis/productQuality.vue
Normal file
366
src/views/DataAnalysis/productQuality.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: lb
|
||||
* @Date: 2022-03-24 13:30:00
|
||||
* @LastEditTime: 2022-05-10 18:38:27
|
||||
* @LastEditors: gtz
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="app-container">
|
||||
<top-title />
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
/>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="trueTableProps.length ? trueTableProps: tableProps"
|
||||
:table-data="tableData.length ? tableData : []"
|
||||
:span-method="spanMethod"
|
||||
:is-loading="listLoading"
|
||||
:index-config="{ align: 'left', fixed: 'left' }"
|
||||
/>
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<el-radio-group v-model="chartType" class="data-analysis-radio" size="mini" @change="changeChartType">
|
||||
<el-radio-button v-for="(item, index) in chartDataArr" :key="index" :label="index">{{ item.equipmentName }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<Line-chart :chart-data="chartDataItem" width="100%" height="400px" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import i18n from '@/lang'
|
||||
import TopTitle from '@/components/TopTitle'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable/index-compound'
|
||||
import LineChart from '@/components/Charts/LineChart'
|
||||
import { lineList } from '@/api/DataAnalysis/productionLineBalance'
|
||||
// import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'process',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.process'),
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'equipmentName',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.equipmentName'),
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
}
|
||||
]
|
||||
|
||||
const testData = [
|
||||
{
|
||||
process: '清洗',
|
||||
data: [
|
||||
{
|
||||
equipmentName: '上料清洗1',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.46,
|
||||
eqTT: 0.12,
|
||||
lineCT: 0.68,
|
||||
lineTT: 0.25
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.34,
|
||||
eqTT: 0.25,
|
||||
lineCT: 0.42,
|
||||
lineTT: 0.4733
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.01,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.73,
|
||||
lineTT: 0.45
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
equipmentName: '上料清洗2',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.46,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.24,
|
||||
lineTT: 0.70
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.32,
|
||||
eqTT: 0.58,
|
||||
lineCT: 0.46,
|
||||
lineTT: 0.80
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.35,
|
||||
eqTT: 0.83,
|
||||
lineCT: 0.29,
|
||||
lineTT: 0.90
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
process: '磨边',
|
||||
data: [
|
||||
{
|
||||
equipmentName: '磨边1',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.16,
|
||||
eqTT: 0.42,
|
||||
lineCT: 0.85,
|
||||
lineTT: 0.26
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.31,
|
||||
eqTT: 0.21,
|
||||
lineCT: 0.11,
|
||||
lineTT: 0.46
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.82,
|
||||
eqTT: 0.25,
|
||||
lineCT: 0.09,
|
||||
lineTT: 0.23
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
equipmentName: '磨边2',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.33,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.37,
|
||||
lineTT: 0.22
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.32,
|
||||
eqTT: 0.24,
|
||||
lineCT: 0.21,
|
||||
lineTT: 0.25
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.11,
|
||||
eqTT: 0.23,
|
||||
lineCT: 0.45,
|
||||
lineTT: 0.21
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'ProductPool',
|
||||
components: { TopTitle, BaseTable, HeadForm, LineChart },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
testData,
|
||||
tableData: [],
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
lineList: [],
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.line'),
|
||||
placeholder: this.$t('module.dataAnalysis.productionLineBalance.line'),
|
||||
param: 'line',
|
||||
width: 300,
|
||||
selectOptions: []
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: this.$t('module.dataAnalysis.productionLineBalance.time'),
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.startTime'),
|
||||
endPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.endTime'),
|
||||
param: 'searchTime'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
trueTableProps: [],
|
||||
headFormValue: {},
|
||||
numArr: [],
|
||||
chartDataArr: [],
|
||||
chartType: 0,
|
||||
chartDataItem: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getLineList()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 获取产线列表
|
||||
getLineList() {
|
||||
lineList({ current: 1, size: 999 }).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.lineList = res.data.records
|
||||
Vue.set(this.headFormConfig[0], 'selectOptions', this.lineList)
|
||||
}
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.numArr = []
|
||||
let num = 0
|
||||
const tableConfig = []
|
||||
this.chartDataArr = []
|
||||
const dataArr = this.testData.map((item, index) => {
|
||||
let dataArr = []
|
||||
if (item.data) {
|
||||
this.chartDataArr = this.chartDataArr.concat(item.data)
|
||||
num += item.data.length
|
||||
this.numArr.push(num)
|
||||
dataArr = item.data.map((z, idx) => {
|
||||
const dataArr = {}
|
||||
z.data.forEach(i => {
|
||||
// 动态生成tableConfig
|
||||
if (index === 0 && idx === 0) {
|
||||
tableConfig.push({
|
||||
label: i.time,
|
||||
children: [
|
||||
{ prop: i.time + 'eqCT', label: '设备CT' },
|
||||
{ prop: i.time + 'eqTT', label: '设备TT' },
|
||||
{ prop: i.time + 'lineCT', label: '产线CT' },
|
||||
{ prop: i.time + 'lineTT', label: '产线TT' }
|
||||
]
|
||||
})
|
||||
}
|
||||
// 合并数据集
|
||||
dataArr[i.time + 'eqCT'] = i.eqCT
|
||||
dataArr[i.time + 'eqTT'] = i.eqTT
|
||||
dataArr[i.time + 'lineCT'] = i.lineCT
|
||||
dataArr[i.time + 'lineTT'] = i.lineTT
|
||||
dataArr.process = item.process
|
||||
dataArr.equipmentName = z.equipmentName
|
||||
})
|
||||
return dataArr
|
||||
})
|
||||
}
|
||||
return dataArr
|
||||
})
|
||||
this.trueTableProps = this.tableProps.concat(tableConfig)
|
||||
this.tableData = this.flatten(dataArr)
|
||||
this.$nextTick(() => {
|
||||
this.changeChartType(this.chartType)
|
||||
})
|
||||
},
|
||||
changeChartType(idx) {
|
||||
const chartDataItem = {
|
||||
timeArr: [],
|
||||
eqCT: [],
|
||||
eqTT: [],
|
||||
lineCT: [],
|
||||
lineTT: []
|
||||
}
|
||||
this.chartDataArr[idx].data.forEach(item => {
|
||||
chartDataItem.timeArr.push(item.time)
|
||||
chartDataItem.eqCT.push(item.eqCT)
|
||||
chartDataItem.eqTT.push(item.eqTT)
|
||||
chartDataItem.lineCT.push(item.lineCT)
|
||||
chartDataItem.lineTT.push(item.lineTT)
|
||||
})
|
||||
this.chartDataItem = chartDataItem
|
||||
},
|
||||
spanMethod({ rowIndex, columnIndex }) {
|
||||
if (columnIndex === 1) {
|
||||
if (rowIndex === 0) {
|
||||
return [this.numArr[0], 1]
|
||||
} else if (this.numArr.indexOf(rowIndex) >= 0) {
|
||||
const rowNum = this.numArr[this.numArr.indexOf(rowIndex) + 1] - this.numArr[this.numArr.indexOf(rowIndex)]
|
||||
return [rowNum, 1]
|
||||
} else {
|
||||
return [0, 0]
|
||||
}
|
||||
}
|
||||
},
|
||||
// 数组扁平
|
||||
flatten(arr) {
|
||||
var res = []
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (Array.isArray(arr[i])) {
|
||||
res = res.concat(this.flatten(arr[i]))
|
||||
} else {
|
||||
res.push(arr[i])
|
||||
}
|
||||
}
|
||||
return res
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
366
src/views/DataAnalysis/productionBeat.vue
Normal file
366
src/views/DataAnalysis/productionBeat.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: lb
|
||||
* @Date: 2022-03-24 13:30:00
|
||||
* @LastEditTime: 2022-05-10 18:38:25
|
||||
* @LastEditors: gtz
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="app-container">
|
||||
<top-title />
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
/>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="trueTableProps.length ? trueTableProps: tableProps"
|
||||
:table-data="tableData.length ? tableData : []"
|
||||
:span-method="spanMethod"
|
||||
:is-loading="listLoading"
|
||||
:index-config="{ align: 'left', fixed: 'left' }"
|
||||
/>
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<el-radio-group v-model="chartType" class="data-analysis-radio" size="mini" @change="changeChartType">
|
||||
<el-radio-button v-for="(item, index) in chartDataArr" :key="index" :label="index">{{ item.equipmentName }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<Line-chart :chart-data="chartDataItem" width="100%" height="400px" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import i18n from '@/lang'
|
||||
import TopTitle from '@/components/TopTitle'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable/index-compound'
|
||||
import LineChart from '@/components/Charts/LineChart'
|
||||
import { lineList } from '@/api/DataAnalysis/productionLineBalance'
|
||||
// import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'process',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.process'),
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'equipmentName',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.equipmentName'),
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
}
|
||||
]
|
||||
|
||||
const testData = [
|
||||
{
|
||||
process: '清洗',
|
||||
data: [
|
||||
{
|
||||
equipmentName: '上料清洗1',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.46,
|
||||
eqTT: 0.12,
|
||||
lineCT: 0.68,
|
||||
lineTT: 0.25
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.34,
|
||||
eqTT: 0.25,
|
||||
lineCT: 0.42,
|
||||
lineTT: 0.4733
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.01,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.73,
|
||||
lineTT: 0.45
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
equipmentName: '上料清洗2',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.46,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.24,
|
||||
lineTT: 0.70
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.32,
|
||||
eqTT: 0.58,
|
||||
lineCT: 0.46,
|
||||
lineTT: 0.80
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.35,
|
||||
eqTT: 0.83,
|
||||
lineCT: 0.29,
|
||||
lineTT: 0.90
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
process: '磨边',
|
||||
data: [
|
||||
{
|
||||
equipmentName: '磨边1',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.16,
|
||||
eqTT: 0.42,
|
||||
lineCT: 0.85,
|
||||
lineTT: 0.26
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.31,
|
||||
eqTT: 0.21,
|
||||
lineCT: 0.11,
|
||||
lineTT: 0.46
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.82,
|
||||
eqTT: 0.25,
|
||||
lineCT: 0.09,
|
||||
lineTT: 0.23
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
equipmentName: '磨边2',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.33,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.37,
|
||||
lineTT: 0.22
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.32,
|
||||
eqTT: 0.24,
|
||||
lineCT: 0.21,
|
||||
lineTT: 0.25
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.11,
|
||||
eqTT: 0.23,
|
||||
lineCT: 0.45,
|
||||
lineTT: 0.21
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'ProductPool',
|
||||
components: { TopTitle, BaseTable, HeadForm, LineChart },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
testData,
|
||||
tableData: [],
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
lineList: [],
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.line'),
|
||||
placeholder: this.$t('module.dataAnalysis.productionLineBalance.line'),
|
||||
param: 'line',
|
||||
width: 300,
|
||||
selectOptions: []
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: this.$t('module.dataAnalysis.productionLineBalance.time'),
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.startTime'),
|
||||
endPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.endTime'),
|
||||
param: 'searchTime'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
trueTableProps: [],
|
||||
headFormValue: {},
|
||||
numArr: [],
|
||||
chartDataArr: [],
|
||||
chartType: 0,
|
||||
chartDataItem: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getLineList()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 获取产线列表
|
||||
getLineList() {
|
||||
lineList({ current: 1, size: 999 }).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.lineList = res.data.records
|
||||
Vue.set(this.headFormConfig[0], 'selectOptions', this.lineList)
|
||||
}
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.numArr = []
|
||||
let num = 0
|
||||
const tableConfig = []
|
||||
this.chartDataArr = []
|
||||
const dataArr = this.testData.map((item, index) => {
|
||||
let dataArr = []
|
||||
if (item.data) {
|
||||
this.chartDataArr = this.chartDataArr.concat(item.data)
|
||||
num += item.data.length
|
||||
this.numArr.push(num)
|
||||
dataArr = item.data.map((z, idx) => {
|
||||
const dataArr = {}
|
||||
z.data.forEach(i => {
|
||||
// 动态生成tableConfig
|
||||
if (index === 0 && idx === 0) {
|
||||
tableConfig.push({
|
||||
label: i.time,
|
||||
children: [
|
||||
{ prop: i.time + 'eqCT', label: '设备CT' },
|
||||
{ prop: i.time + 'eqTT', label: '设备TT' },
|
||||
{ prop: i.time + 'lineCT', label: '产线CT' },
|
||||
{ prop: i.time + 'lineTT', label: '产线TT' }
|
||||
]
|
||||
})
|
||||
}
|
||||
// 合并数据集
|
||||
dataArr[i.time + 'eqCT'] = i.eqCT
|
||||
dataArr[i.time + 'eqTT'] = i.eqTT
|
||||
dataArr[i.time + 'lineCT'] = i.lineCT
|
||||
dataArr[i.time + 'lineTT'] = i.lineTT
|
||||
dataArr.process = item.process
|
||||
dataArr.equipmentName = z.equipmentName
|
||||
})
|
||||
return dataArr
|
||||
})
|
||||
}
|
||||
return dataArr
|
||||
})
|
||||
this.trueTableProps = this.tableProps.concat(tableConfig)
|
||||
this.tableData = this.flatten(dataArr)
|
||||
this.$nextTick(() => {
|
||||
this.changeChartType(this.chartType)
|
||||
})
|
||||
},
|
||||
changeChartType(idx) {
|
||||
const chartDataItem = {
|
||||
timeArr: [],
|
||||
eqCT: [],
|
||||
eqTT: [],
|
||||
lineCT: [],
|
||||
lineTT: []
|
||||
}
|
||||
this.chartDataArr[idx].data.forEach(item => {
|
||||
chartDataItem.timeArr.push(item.time)
|
||||
chartDataItem.eqCT.push(item.eqCT)
|
||||
chartDataItem.eqTT.push(item.eqTT)
|
||||
chartDataItem.lineCT.push(item.lineCT)
|
||||
chartDataItem.lineTT.push(item.lineTT)
|
||||
})
|
||||
this.chartDataItem = chartDataItem
|
||||
},
|
||||
spanMethod({ rowIndex, columnIndex }) {
|
||||
if (columnIndex === 1) {
|
||||
if (rowIndex === 0) {
|
||||
return [this.numArr[0], 1]
|
||||
} else if (this.numArr.indexOf(rowIndex) >= 0) {
|
||||
const rowNum = this.numArr[this.numArr.indexOf(rowIndex) + 1] - this.numArr[this.numArr.indexOf(rowIndex)]
|
||||
return [rowNum, 1]
|
||||
} else {
|
||||
return [0, 0]
|
||||
}
|
||||
}
|
||||
},
|
||||
// 数组扁平
|
||||
flatten(arr) {
|
||||
var res = []
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (Array.isArray(arr[i])) {
|
||||
res = res.concat(this.flatten(arr[i]))
|
||||
} else {
|
||||
res.push(arr[i])
|
||||
}
|
||||
}
|
||||
return res
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
366
src/views/DataAnalysis/productionIndicators.vue
Normal file
366
src/views/DataAnalysis/productionIndicators.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: lb
|
||||
* @Date: 2022-03-24 13:30:00
|
||||
* @LastEditTime: 2022-05-10 18:38:26
|
||||
* @LastEditors: gtz
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="app-container">
|
||||
<top-title />
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
/>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="trueTableProps.length ? trueTableProps: tableProps"
|
||||
:table-data="tableData.length ? tableData : []"
|
||||
:span-method="spanMethod"
|
||||
:is-loading="listLoading"
|
||||
:index-config="{ align: 'left', fixed: 'left' }"
|
||||
/>
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<el-radio-group v-model="chartType" class="data-analysis-radio" size="mini" @change="changeChartType">
|
||||
<el-radio-button v-for="(item, index) in chartDataArr" :key="index" :label="index">{{ item.equipmentName }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<Line-chart :chart-data="chartDataItem" width="100%" height="400px" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import i18n from '@/lang'
|
||||
import TopTitle from '@/components/TopTitle'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable/index-compound'
|
||||
import LineChart from '@/components/Charts/LineChart'
|
||||
import { lineList } from '@/api/DataAnalysis/productionLineBalance'
|
||||
// import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'process',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.process'),
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'equipmentName',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.equipmentName'),
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
}
|
||||
]
|
||||
|
||||
const testData = [
|
||||
{
|
||||
process: '清洗',
|
||||
data: [
|
||||
{
|
||||
equipmentName: '上料清洗1',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.46,
|
||||
eqTT: 0.12,
|
||||
lineCT: 0.68,
|
||||
lineTT: 0.25
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.34,
|
||||
eqTT: 0.25,
|
||||
lineCT: 0.42,
|
||||
lineTT: 0.4733
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.01,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.73,
|
||||
lineTT: 0.45
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
equipmentName: '上料清洗2',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.46,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.24,
|
||||
lineTT: 0.70
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.32,
|
||||
eqTT: 0.58,
|
||||
lineCT: 0.46,
|
||||
lineTT: 0.80
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.35,
|
||||
eqTT: 0.83,
|
||||
lineCT: 0.29,
|
||||
lineTT: 0.90
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
process: '磨边',
|
||||
data: [
|
||||
{
|
||||
equipmentName: '磨边1',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.16,
|
||||
eqTT: 0.42,
|
||||
lineCT: 0.85,
|
||||
lineTT: 0.26
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.31,
|
||||
eqTT: 0.21,
|
||||
lineCT: 0.11,
|
||||
lineTT: 0.46
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.82,
|
||||
eqTT: 0.25,
|
||||
lineCT: 0.09,
|
||||
lineTT: 0.23
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
equipmentName: '磨边2',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.33,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.37,
|
||||
lineTT: 0.22
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.32,
|
||||
eqTT: 0.24,
|
||||
lineCT: 0.21,
|
||||
lineTT: 0.25
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.11,
|
||||
eqTT: 0.23,
|
||||
lineCT: 0.45,
|
||||
lineTT: 0.21
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'ProductPool',
|
||||
components: { TopTitle, BaseTable, HeadForm, LineChart },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
testData,
|
||||
tableData: [],
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
lineList: [],
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.line'),
|
||||
placeholder: this.$t('module.dataAnalysis.productionLineBalance.line'),
|
||||
param: 'line',
|
||||
width: 300,
|
||||
selectOptions: []
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: this.$t('module.dataAnalysis.productionLineBalance.time'),
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.startTime'),
|
||||
endPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.endTime'),
|
||||
param: 'searchTime'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
trueTableProps: [],
|
||||
headFormValue: {},
|
||||
numArr: [],
|
||||
chartDataArr: [],
|
||||
chartType: 0,
|
||||
chartDataItem: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getLineList()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 获取产线列表
|
||||
getLineList() {
|
||||
lineList({ current: 1, size: 999 }).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.lineList = res.data.records
|
||||
Vue.set(this.headFormConfig[0], 'selectOptions', this.lineList)
|
||||
}
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.numArr = []
|
||||
let num = 0
|
||||
const tableConfig = []
|
||||
this.chartDataArr = []
|
||||
const dataArr = this.testData.map((item, index) => {
|
||||
let dataArr = []
|
||||
if (item.data) {
|
||||
this.chartDataArr = this.chartDataArr.concat(item.data)
|
||||
num += item.data.length
|
||||
this.numArr.push(num)
|
||||
dataArr = item.data.map((z, idx) => {
|
||||
const dataArr = {}
|
||||
z.data.forEach(i => {
|
||||
// 动态生成tableConfig
|
||||
if (index === 0 && idx === 0) {
|
||||
tableConfig.push({
|
||||
label: i.time,
|
||||
children: [
|
||||
{ prop: i.time + 'eqCT', label: '设备CT' },
|
||||
{ prop: i.time + 'eqTT', label: '设备TT' },
|
||||
{ prop: i.time + 'lineCT', label: '产线CT' },
|
||||
{ prop: i.time + 'lineTT', label: '产线TT' }
|
||||
]
|
||||
})
|
||||
}
|
||||
// 合并数据集
|
||||
dataArr[i.time + 'eqCT'] = i.eqCT
|
||||
dataArr[i.time + 'eqTT'] = i.eqTT
|
||||
dataArr[i.time + 'lineCT'] = i.lineCT
|
||||
dataArr[i.time + 'lineTT'] = i.lineTT
|
||||
dataArr.process = item.process
|
||||
dataArr.equipmentName = z.equipmentName
|
||||
})
|
||||
return dataArr
|
||||
})
|
||||
}
|
||||
return dataArr
|
||||
})
|
||||
this.trueTableProps = this.tableProps.concat(tableConfig)
|
||||
this.tableData = this.flatten(dataArr)
|
||||
this.$nextTick(() => {
|
||||
this.changeChartType(this.chartType)
|
||||
})
|
||||
},
|
||||
changeChartType(idx) {
|
||||
const chartDataItem = {
|
||||
timeArr: [],
|
||||
eqCT: [],
|
||||
eqTT: [],
|
||||
lineCT: [],
|
||||
lineTT: []
|
||||
}
|
||||
this.chartDataArr[idx].data.forEach(item => {
|
||||
chartDataItem.timeArr.push(item.time)
|
||||
chartDataItem.eqCT.push(item.eqCT)
|
||||
chartDataItem.eqTT.push(item.eqTT)
|
||||
chartDataItem.lineCT.push(item.lineCT)
|
||||
chartDataItem.lineTT.push(item.lineTT)
|
||||
})
|
||||
this.chartDataItem = chartDataItem
|
||||
},
|
||||
spanMethod({ rowIndex, columnIndex }) {
|
||||
if (columnIndex === 1) {
|
||||
if (rowIndex === 0) {
|
||||
return [this.numArr[0], 1]
|
||||
} else if (this.numArr.indexOf(rowIndex) >= 0) {
|
||||
const rowNum = this.numArr[this.numArr.indexOf(rowIndex) + 1] - this.numArr[this.numArr.indexOf(rowIndex)]
|
||||
return [rowNum, 1]
|
||||
} else {
|
||||
return [0, 0]
|
||||
}
|
||||
}
|
||||
},
|
||||
// 数组扁平
|
||||
flatten(arr) {
|
||||
var res = []
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (Array.isArray(arr[i])) {
|
||||
res = res.concat(this.flatten(arr[i]))
|
||||
} else {
|
||||
res.push(arr[i])
|
||||
}
|
||||
}
|
||||
return res
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
366
src/views/DataAnalysis/productionLineBalance.vue
Normal file
366
src/views/DataAnalysis/productionLineBalance.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: lb
|
||||
* @Date: 2022-03-24 13:30:00
|
||||
* @LastEditTime: 2022-06-02 11:25:37
|
||||
* @LastEditors: gtz
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="app-container">
|
||||
<top-title />
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
/>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="trueTableProps.length ? trueTableProps: tableProps"
|
||||
:table-data="tableData.length ? tableData : []"
|
||||
:span-method="spanMethod"
|
||||
:is-loading="listLoading"
|
||||
:index-config="{ align: 'left', fixed: 'left' }"
|
||||
/>
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<el-radio-group v-model="chartType" class="data-analysis-radio" size="mini" @change="changeChartType">
|
||||
<el-radio-button v-for="(item, index) in chartDataArr" :key="index" :label="index">{{ item.equipmentName }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<Line-chart :chart-data="chartDataItem" width="100%" height="400px" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import i18n from '@/lang'
|
||||
import TopTitle from '@/components/TopTitle'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable/index-compound'
|
||||
import LineChart from './components/LineChartBalance'
|
||||
import { lineList } from '@/api/DataAnalysis/productionLineBalance'
|
||||
// import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'process',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.process'),
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'equipmentName',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.equipmentName'),
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
}
|
||||
]
|
||||
|
||||
const testData = [
|
||||
{
|
||||
process: '清洗',
|
||||
data: [
|
||||
{
|
||||
equipmentName: '上料清洗1',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.46,
|
||||
eqTT: 0.12,
|
||||
lineCT: 0.68,
|
||||
lineTT: 0.25
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.34,
|
||||
eqTT: 0.25,
|
||||
lineCT: 0.42,
|
||||
lineTT: 0.4733
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.01,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.73,
|
||||
lineTT: 0.45
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
equipmentName: '上料清洗2',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.46,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.24,
|
||||
lineTT: 0.70
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.32,
|
||||
eqTT: 0.58,
|
||||
lineCT: 0.46,
|
||||
lineTT: 0.80
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.35,
|
||||
eqTT: 0.83,
|
||||
lineCT: 0.29,
|
||||
lineTT: 0.90
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
process: '磨边',
|
||||
data: [
|
||||
{
|
||||
equipmentName: '磨边1',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.16,
|
||||
eqTT: 0.42,
|
||||
lineCT: 0.85,
|
||||
lineTT: 0.26
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.31,
|
||||
eqTT: 0.21,
|
||||
lineCT: 0.11,
|
||||
lineTT: 0.46
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.82,
|
||||
eqTT: 0.25,
|
||||
lineCT: 0.09,
|
||||
lineTT: 0.23
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
equipmentName: '磨边2',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.33,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.37,
|
||||
lineTT: 0.22
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.32,
|
||||
eqTT: 0.24,
|
||||
lineCT: 0.21,
|
||||
lineTT: 0.25
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.11,
|
||||
eqTT: 0.23,
|
||||
lineCT: 0.45,
|
||||
lineTT: 0.21
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'ProductPool',
|
||||
components: { TopTitle, BaseTable, HeadForm, LineChart },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
testData,
|
||||
tableData: [],
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
lineList: [],
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.line'),
|
||||
placeholder: this.$t('module.dataAnalysis.productionLineBalance.line'),
|
||||
param: 'line',
|
||||
width: 300,
|
||||
selectOptions: []
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: this.$t('module.dataAnalysis.productionLineBalance.time'),
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.startTime'),
|
||||
endPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.endTime'),
|
||||
param: 'searchTime'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
trueTableProps: [],
|
||||
headFormValue: {},
|
||||
numArr: [],
|
||||
chartDataArr: [],
|
||||
chartType: 0,
|
||||
chartDataItem: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getLineList()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 获取产线列表
|
||||
getLineList() {
|
||||
lineList({ current: 1, size: 999 }).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.lineList = res.data.records
|
||||
Vue.set(this.headFormConfig[0], 'selectOptions', this.lineList)
|
||||
}
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.numArr = []
|
||||
let num = 0
|
||||
const tableConfig = []
|
||||
this.chartDataArr = []
|
||||
const dataArr = this.testData.map((item, index) => {
|
||||
let dataArr = []
|
||||
if (item.data) {
|
||||
this.chartDataArr = this.chartDataArr.concat(item.data)
|
||||
num += item.data.length
|
||||
this.numArr.push(num)
|
||||
dataArr = item.data.map((z, idx) => {
|
||||
const dataArr = {}
|
||||
z.data.forEach(i => {
|
||||
// 动态生成tableConfig
|
||||
if (index === 0 && idx === 0) {
|
||||
tableConfig.push({
|
||||
label: i.time,
|
||||
children: [
|
||||
{ prop: i.time + 'eqCT', label: '设备CT' },
|
||||
{ prop: i.time + 'eqTT', label: '设备TT' },
|
||||
{ prop: i.time + 'lineCT', label: '产线CT' },
|
||||
{ prop: i.time + 'lineTT', label: '产线TT' }
|
||||
]
|
||||
})
|
||||
}
|
||||
// 合并数据集
|
||||
dataArr[i.time + 'eqCT'] = i.eqCT
|
||||
dataArr[i.time + 'eqTT'] = i.eqTT
|
||||
dataArr[i.time + 'lineCT'] = i.lineCT
|
||||
dataArr[i.time + 'lineTT'] = i.lineTT
|
||||
dataArr.process = item.process
|
||||
dataArr.equipmentName = z.equipmentName
|
||||
})
|
||||
return dataArr
|
||||
})
|
||||
}
|
||||
return dataArr
|
||||
})
|
||||
this.trueTableProps = this.tableProps.concat(tableConfig)
|
||||
this.tableData = this.flatten(dataArr)
|
||||
this.$nextTick(() => {
|
||||
this.changeChartType(this.chartType)
|
||||
})
|
||||
},
|
||||
changeChartType(idx) {
|
||||
const chartDataItem = {
|
||||
timeArr: [],
|
||||
eqCT: [],
|
||||
eqTT: [],
|
||||
lineCT: [],
|
||||
lineTT: []
|
||||
}
|
||||
this.chartDataArr[idx].data.forEach(item => {
|
||||
chartDataItem.timeArr.push(item.time)
|
||||
chartDataItem.eqCT.push(item.eqCT)
|
||||
chartDataItem.eqTT.push(item.eqTT)
|
||||
chartDataItem.lineCT.push(item.lineCT)
|
||||
chartDataItem.lineTT.push(item.lineTT)
|
||||
})
|
||||
this.chartDataItem = chartDataItem
|
||||
},
|
||||
spanMethod({ rowIndex, columnIndex }) {
|
||||
if (columnIndex === 1) {
|
||||
if (rowIndex === 0) {
|
||||
return [this.numArr[0], 1]
|
||||
} else if (this.numArr.indexOf(rowIndex) >= 0) {
|
||||
const rowNum = this.numArr[this.numArr.indexOf(rowIndex) + 1] - this.numArr[this.numArr.indexOf(rowIndex)]
|
||||
return [rowNum, 1]
|
||||
} else {
|
||||
return [0, 0]
|
||||
}
|
||||
}
|
||||
},
|
||||
// 数组扁平
|
||||
flatten(arr) {
|
||||
var res = []
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (Array.isArray(arr[i])) {
|
||||
res = res.concat(this.flatten(arr[i]))
|
||||
} else {
|
||||
res.push(arr[i])
|
||||
}
|
||||
}
|
||||
return res
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
366
src/views/DataAnalysis/rapidResponse.vue
Normal file
366
src/views/DataAnalysis/rapidResponse.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: lb
|
||||
* @Date: 2022-03-24 13:30:00
|
||||
* @LastEditTime: 2022-05-10 18:38:28
|
||||
* @LastEditors: gtz
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="app-container">
|
||||
<top-title />
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
/>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="trueTableProps.length ? trueTableProps: tableProps"
|
||||
:table-data="tableData.length ? tableData : []"
|
||||
:span-method="spanMethod"
|
||||
:is-loading="listLoading"
|
||||
:index-config="{ align: 'left', fixed: 'left' }"
|
||||
/>
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<el-radio-group v-model="chartType" class="data-analysis-radio" size="mini" @change="changeChartType">
|
||||
<el-radio-button v-for="(item, index) in chartDataArr" :key="index" :label="index">{{ item.equipmentName }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<Line-chart :chart-data="chartDataItem" width="100%" height="400px" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import i18n from '@/lang'
|
||||
import TopTitle from '@/components/TopTitle'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable/index-compound'
|
||||
import LineChart from '@/components/Charts/LineChart'
|
||||
import { lineList } from '@/api/DataAnalysis/productionLineBalance'
|
||||
// import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'process',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.process'),
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'equipmentName',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.equipmentName'),
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
}
|
||||
]
|
||||
|
||||
const testData = [
|
||||
{
|
||||
process: '清洗',
|
||||
data: [
|
||||
{
|
||||
equipmentName: '上料清洗1',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.46,
|
||||
eqTT: 0.12,
|
||||
lineCT: 0.68,
|
||||
lineTT: 0.25
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.34,
|
||||
eqTT: 0.25,
|
||||
lineCT: 0.42,
|
||||
lineTT: 0.4733
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.01,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.73,
|
||||
lineTT: 0.45
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
equipmentName: '上料清洗2',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.46,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.24,
|
||||
lineTT: 0.70
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.32,
|
||||
eqTT: 0.58,
|
||||
lineCT: 0.46,
|
||||
lineTT: 0.80
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.35,
|
||||
eqTT: 0.83,
|
||||
lineCT: 0.29,
|
||||
lineTT: 0.90
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
process: '磨边',
|
||||
data: [
|
||||
{
|
||||
equipmentName: '磨边1',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.16,
|
||||
eqTT: 0.42,
|
||||
lineCT: 0.85,
|
||||
lineTT: 0.26
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.31,
|
||||
eqTT: 0.21,
|
||||
lineCT: 0.11,
|
||||
lineTT: 0.46
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.82,
|
||||
eqTT: 0.25,
|
||||
lineCT: 0.09,
|
||||
lineTT: 0.23
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
equipmentName: '磨边2',
|
||||
data: [
|
||||
{
|
||||
time: '2022-5-6',
|
||||
eqCT: 0.33,
|
||||
eqTT: 0.62,
|
||||
lineCT: 0.37,
|
||||
lineTT: 0.22
|
||||
},
|
||||
{
|
||||
time: '2022-5-7',
|
||||
eqCT: 0.32,
|
||||
eqTT: 0.24,
|
||||
lineCT: 0.21,
|
||||
lineTT: 0.25
|
||||
},
|
||||
{
|
||||
time: '2022-5-8',
|
||||
eqCT: 0.11,
|
||||
eqTT: 0.23,
|
||||
lineCT: 0.45,
|
||||
lineTT: 0.21
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'ProductPool',
|
||||
components: { TopTitle, BaseTable, HeadForm, LineChart },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
testData,
|
||||
tableData: [],
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
lineList: [],
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: i18n.t('module.dataAnalysis.productionLineBalance.line'),
|
||||
placeholder: this.$t('module.dataAnalysis.productionLineBalance.line'),
|
||||
param: 'line',
|
||||
width: 300,
|
||||
selectOptions: []
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: this.$t('module.dataAnalysis.productionLineBalance.time'),
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.startTime'),
|
||||
endPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.endTime'),
|
||||
param: 'searchTime'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
trueTableProps: [],
|
||||
headFormValue: {},
|
||||
numArr: [],
|
||||
chartDataArr: [],
|
||||
chartType: 0,
|
||||
chartDataItem: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getLineList()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 获取产线列表
|
||||
getLineList() {
|
||||
lineList({ current: 1, size: 999 }).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.lineList = res.data.records
|
||||
Vue.set(this.headFormConfig[0], 'selectOptions', this.lineList)
|
||||
}
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.numArr = []
|
||||
let num = 0
|
||||
const tableConfig = []
|
||||
this.chartDataArr = []
|
||||
const dataArr = this.testData.map((item, index) => {
|
||||
let dataArr = []
|
||||
if (item.data) {
|
||||
this.chartDataArr = this.chartDataArr.concat(item.data)
|
||||
num += item.data.length
|
||||
this.numArr.push(num)
|
||||
dataArr = item.data.map((z, idx) => {
|
||||
const dataArr = {}
|
||||
z.data.forEach(i => {
|
||||
// 动态生成tableConfig
|
||||
if (index === 0 && idx === 0) {
|
||||
tableConfig.push({
|
||||
label: i.time,
|
||||
children: [
|
||||
{ prop: i.time + 'eqCT', label: '设备CT' },
|
||||
{ prop: i.time + 'eqTT', label: '设备TT' },
|
||||
{ prop: i.time + 'lineCT', label: '产线CT' },
|
||||
{ prop: i.time + 'lineTT', label: '产线TT' }
|
||||
]
|
||||
})
|
||||
}
|
||||
// 合并数据集
|
||||
dataArr[i.time + 'eqCT'] = i.eqCT
|
||||
dataArr[i.time + 'eqTT'] = i.eqTT
|
||||
dataArr[i.time + 'lineCT'] = i.lineCT
|
||||
dataArr[i.time + 'lineTT'] = i.lineTT
|
||||
dataArr.process = item.process
|
||||
dataArr.equipmentName = z.equipmentName
|
||||
})
|
||||
return dataArr
|
||||
})
|
||||
}
|
||||
return dataArr
|
||||
})
|
||||
this.trueTableProps = this.tableProps.concat(tableConfig)
|
||||
this.tableData = this.flatten(dataArr)
|
||||
this.$nextTick(() => {
|
||||
this.changeChartType(this.chartType)
|
||||
})
|
||||
},
|
||||
changeChartType(idx) {
|
||||
const chartDataItem = {
|
||||
timeArr: [],
|
||||
eqCT: [],
|
||||
eqTT: [],
|
||||
lineCT: [],
|
||||
lineTT: []
|
||||
}
|
||||
this.chartDataArr[idx].data.forEach(item => {
|
||||
chartDataItem.timeArr.push(item.time)
|
||||
chartDataItem.eqCT.push(item.eqCT)
|
||||
chartDataItem.eqTT.push(item.eqTT)
|
||||
chartDataItem.lineCT.push(item.lineCT)
|
||||
chartDataItem.lineTT.push(item.lineTT)
|
||||
})
|
||||
this.chartDataItem = chartDataItem
|
||||
},
|
||||
spanMethod({ rowIndex, columnIndex }) {
|
||||
if (columnIndex === 1) {
|
||||
if (rowIndex === 0) {
|
||||
return [this.numArr[0], 1]
|
||||
} else if (this.numArr.indexOf(rowIndex) >= 0) {
|
||||
const rowNum = this.numArr[this.numArr.indexOf(rowIndex) + 1] - this.numArr[this.numArr.indexOf(rowIndex)]
|
||||
return [rowNum, 1]
|
||||
} else {
|
||||
return [0, 0]
|
||||
}
|
||||
}
|
||||
},
|
||||
// 数组扁平
|
||||
flatten(arr) {
|
||||
var res = []
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (Array.isArray(arr[i])) {
|
||||
res = res.concat(this.flatten(arr[i]))
|
||||
} else {
|
||||
res.push(arr[i])
|
||||
}
|
||||
}
|
||||
return res
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
85
src/views/DataAnalysis/svgs/b1.svg
Normal file
85
src/views/DataAnalysis/svgs/b1.svg
Normal file
@@ -0,0 +1,85 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="760px" height="448px" viewBox="0 0 760 448" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 2</title>
|
||||
<defs>
|
||||
<polygon id="path-1" points="0 -4.27662013e-14 214.404053 -4.27662013e-14 214.404053 48.1504621 0 48.1504621"></polygon>
|
||||
<path d="M5.57956265,12.1973234 C8.60838355,20.9628083 13.7399658,25.3455507 20.9743095,25.3455507 C28.443568,25.3455507 33.5047058,20.6735527 36.1577231,11.3295567 C36.2182356,9.32201038 35.2169365,8.27845018 33.153826,8.19887614 C31.4022231,8.19887614 30.4009241,9.24243634 30.1499289,11.3295567 C28.1501922,17.3091917 25.0083979,20.2990091 20.724546,20.2990091 C16.440694,20.2990091 13.2602339,17.3091917 11.1831657,11.3295567 C11.0144939,10.9094545 10.8237671,10.3893545 10.6109852,9.76925682 C10.2918123,8.83911031 9.40335273,8.18294318 8.36627677,8.19887614 C6.90412214,8.19887614 5.84652771,8.82131661 5.5309207,10.0967548 C5.34596416,10.8442054 5.4812103,11.9126892 5.57956265,12.1973234 Z" id="path-3"></path>
|
||||
<filter x="-39.1%" y="-70.0%" width="178.1%" height="240.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.673666159 0 0 0 0 1 0 0 0 0 0.984382187 0 0 0 0.91873361 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<polygon id="path-5" points="0 -4.27662013e-14 214.404053 -4.27662013e-14 214.404053 48.1504621 0 48.1504621"></polygon>
|
||||
<path d="M5.57956265,12.1973234 C8.60838355,20.9628083 13.7399658,25.3455507 20.9743095,25.3455507 C28.443568,25.3455507 33.5047058,20.6735527 36.1577231,11.3295567 C36.2182356,9.32201038 35.2169365,8.27845018 33.153826,8.19887614 C31.4022231,8.19887614 30.4009241,9.24243634 30.1499289,11.3295567 C28.1501922,17.3091917 25.0083979,20.2990091 20.724546,20.2990091 C16.440694,20.2990091 13.2602339,17.3091917 11.1831657,11.3295567 C11.0144939,10.9094545 10.8237671,10.3893545 10.6109852,9.76925682 C10.2918123,8.83911031 9.40335273,8.18294318 8.36627677,8.19887614 C6.90412214,8.19887614 5.84652771,8.82131661 5.5309207,10.0967548 C5.34596416,10.8442054 5.4812103,11.9126892 5.57956265,12.1973234 Z" id="path-7"></path>
|
||||
<filter x="-39.1%" y="-70.0%" width="178.1%" height="240.0%" filterUnits="objectBoundingBox" id="filter-8">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.673666159 0 0 0 0 1 0 0 0 0 0.984382187 0 0 0 0.91873361 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-8数据分析" transform="translate(-360.000000, -136.000000)">
|
||||
<g id="编组-2" transform="translate(360.000000, 136.000000)">
|
||||
<rect id="矩形" fill="#FFFFFF" x="0" y="0" width="760" height="448" rx="16"></rect>
|
||||
<g id="编组" transform="translate(201.000000, 97.000000)">
|
||||
<g id="编组-20备份" transform="translate(47.000000, 0.000000)">
|
||||
<path d="M0,351 C53.8507958,350.926647 89.0431188,346.198793 105.576969,336.816439 C156.368998,307.993824 200.936366,260.178098 241.85251,260.178098 C333.19458,260.178098 289.51308,202.776137 359.015543,206.778947 C428.518007,210.781758 441.673051,219.253462 470.376726,215.91769 C489.512509,213.693843 503.386934,204.72128 512,189 L512,335 C512,343.836556 504.836556,351 496,351 L0,351 L0,351 Z" id="路径-2" fill="#3E8EF7" opacity="0.065419"></path>
|
||||
<path d="M458,0 C480.643675,0 499,18.3563253 499,41 C499,63.6436747 480.643675,82 458,82 C435.356325,82 417,63.6436747 417,41 C417,18.3563253 435.356325,0 458,0 Z M458.5,19 C445.521308,19 435,28.8497355 435,41 C435,53.1502645 445.521308,63 458.5,63 C471.478692,63 482,53.1502645 482,41 C482,28.8497355 471.478692,19 458.5,19 Z" id="形状结合备份-4" fill="#3E8EF7" opacity="0.045419"></path>
|
||||
<path d="M346.5,12 C358.926407,12 369,22.0735931 369,34.5 C369,46.9264069 358.926407,57 346.5,57 C334.073593,57 324,46.9264069 324,34.5 C324,22.0735931 334.073593,12 346.5,12 Z M346.5,22 C339.596441,22 334,27.5964406 334,34.5 C334,41.4035594 339.596441,47 346.5,47 C353.403559,47 359,41.4035594 359,34.5 C359,27.5964406 353.403559,22 346.5,22 Z" id="形状结合备份-5" fill="#3E8EF7" opacity="0.065419"></path>
|
||||
<path d="M80,196 C89.3888407,196 97,203.611159 97,213 C97,222.388841 89.3888407,230 80,230 C70.6111593,230 63,222.388841 63,213 C63,203.611159 70.6111593,196 80,196 Z M80.5,204 C75.2532949,204 71,208.253295 71,213.5 C71,218.746705 75.2532949,223 80.5,223 C85.7467051,223 90,218.746705 90,213.5 C90,208.253295 85.7467051,204 80.5,204 Z" id="形状结合备份-6" fill="#3E8EF7" opacity="0.065419"></path>
|
||||
<g id="编组-10" transform="translate(149.807335, 86.694209)">
|
||||
<g id="编组-5">
|
||||
<path d="M206.834478,-4.97379915e-14 C210.148186,-4.97379915e-14 212.834478,2.6862915 212.834478,6 L212.834478,8.45712477 C212.834478,11.7708333 210.148186,14.4571248 206.834478,14.4571248 L189.874367,14.4579525 L189.874,23.901 L207.506978,23.9015679 C228.493798,23.9015679 245.506978,40.9147474 245.506978,61.9015679 L245.506,73.445 L252.734713,73.4458001 L252.73554,60.9298001 C252.73554,57.6160916 255.421832,54.9298001 258.73554,54.9298001 L261.192665,54.9298001 C264.506374,54.9298001 267.192665,57.6160916 267.192665,60.9298001 L267.192665,100.463808 C267.192665,103.777517 264.506374,106.463808 261.192665,106.463808 L258.73554,106.463808 C255.421832,106.463808 252.73554,103.777517 252.73554,100.463808 L252.734713,87.9468001 L245.506,87.946 L245.506978,104.325677 C245.506978,125.312498 228.493798,142.325677 207.506978,142.325677 L203.25,142.325 L214.853517,163.320944 C215.794899,165.024386 215.820634,166.987051 215.093414,168.641558 L223.845093,168.641358 C227.158801,168.641358 229.845093,171.327649 229.845093,174.641358 L229.845093,177.142269 C229.845093,180.455978 227.158801,183.142269 223.845093,183.142269 L52.7215124,183.142269 C49.4078039,183.142269 46.7215124,180.455978 46.7215124,177.142269 L46.7215124,174.641358 C46.7215124,171.327649 49.4078039,168.641358 52.7215124,168.641358 L64.1098327,168.64121 C64.0682145,167.739882 64.2300318,166.81545 64.6209497,165.934775 L75.1,142.325 L69.0596272,142.325677 C48.0728067,142.325677 31.0596272,125.312498 31.0596272,104.325677 L31.059,102.595 L13.7079359,102.596256 C11.1497208,103.127674 8.47545775,101.929543 7.20422433,99.554504 L7.08920299,99.328413 L0.598378697,85.8858686 L0.530618722,85.7406136 C-0.830028497,82.7191399 0.516337362,79.166729 3.53781104,77.8060818 L3.53781104,77.8060818 L5.69478619,76.8347405 C8.6593408,75.4997254 12.147832,76.7688411 13.561558,79.6966778 L13.561558,79.6966778 L17.832,88.5417994 L31.059,88.54 L31.0596272,61.9015679 C31.0596272,40.9147474 48.0728067,23.9015679 69.0596272,23.9015679 L175.373,23.901 L175.373367,14.4579525 L94.6843675,14.4571248 C91.370659,14.4571248 88.6843675,11.7708333 88.6843675,8.45712477 L88.6843675,6 C88.6843675,2.6862915 91.370659,-7.81597009e-14 94.6843675,-7.81597009e-14 L206.834478,-4.97379915e-14 Z M201.264,168.641 L186.721,142.325 L90.926,142.325 L79.245,168.641 L201.264,168.641 Z" id="形状结合" fill="#FFFFFF"></path>
|
||||
<g id="矩形" transform="translate(30.649063, 94.175215)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<g id="蒙版" transform="translate(107.202027, 24.075231) scale(1, -1) translate(-107.202027, -24.075231) "></g>
|
||||
<path d="M38.410564,-70.2736474 L176.857915,-70.2736474 C197.844735,-70.2736474 214.857915,-53.2604679 214.857915,-32.2736474 L214.857915,10.1504621 C214.857915,31.1372826 197.844735,48.1504621 176.857915,48.1504621 L38.410564,48.1504621 C17.4237435,48.1504621 0.410564037,31.1372826 0.410564037,10.1504621 L0.410564037,-32.2736474 C0.410564037,-53.2604679 17.4237435,-70.2736474 38.410564,-70.2736474 Z" fill="#B6D5FF" mask="url(#mask-2)"></path>
|
||||
</g>
|
||||
<g id="编组-7" transform="translate(42.752700, 40.298752)">
|
||||
<path d="M20.9743095,0 C32.5581008,-2.12790794e-15 41.9486191,9.39051824 41.9486191,20.9743095 L41.9486191,65.6965222 C41.9486191,77.2803135 32.5581008,86.6708318 20.9743095,86.6708318 C9.39051824,86.6708318 2.46555849e-13,77.2803135 2.27373675e-13,65.6965222 L2.27373675e-13,20.9743095 C2.2595507e-13,9.39051824 9.39051824,2.12790794e-15 20.9743095,0 Z" id="矩形备份-11" fill="#0B3872"></path>
|
||||
<path d="M0.375965575,53.6310115 L42.3245846,53.6310115 L42.1872738,65.69788 C42.0550314,77.3193244 32.5965063,86.6708318 20.9743095,86.6708318 C9.52158217,86.6708318 0.237312245,77.3865618 0.237312245,65.9338345 C0.237312245,65.8551811 0.237759732,65.7765283 0.238654684,65.69788 L0.375965575,53.6310115 L0.375965575,53.6310115 Z" id="矩形备份-11" fill="#082D5D"></path>
|
||||
<g id="路径-3" transform="translate(20.799655, 16.772071) rotate(-180.000000) translate(-20.799655, -16.772071) ">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
|
||||
<use fill="#76E1FF" fill-rule="evenodd" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
<ellipse id="椭圆形" fill="#0B3872" cx="108.498643" cy="10.5846541" rx="6.4088168" ry="6.44175101"></ellipse>
|
||||
<rect id="矩形" fill="#0B3872" x="51.9845315" y="4.1429031" width="41.9486191" height="12.883502" rx="5"></rect>
|
||||
</g>
|
||||
</g>
|
||||
<g id="编组-5" transform="translate(0.000000, 0.310304)">
|
||||
<path d="M206.834478,-4.97379915e-14 C210.148186,-4.97379915e-14 212.834478,2.6862915 212.834478,6 L212.834478,8.45712477 C212.834478,11.7708333 210.148186,14.4571248 206.834478,14.4571248 L189.874367,14.4579525 L189.874,23.901 L207.506978,23.9015679 C228.493798,23.9015679 245.506978,40.9147474 245.506978,61.9015679 L245.506,73.445 L252.734713,73.4458001 L252.73554,60.9298001 C252.73554,57.6160916 255.421832,54.9298001 258.73554,54.9298001 L261.192665,54.9298001 C264.506374,54.9298001 267.192665,57.6160916 267.192665,60.9298001 L267.192665,100.463808 C267.192665,103.777517 264.506374,106.463808 261.192665,106.463808 L258.73554,106.463808 C255.421832,106.463808 252.73554,103.777517 252.73554,100.463808 L252.734713,87.9468001 L245.506,87.946 L245.506978,104.325677 C245.506978,125.312498 228.493798,142.325677 207.506978,142.325677 L69.0596272,142.325677 C48.0728067,142.325677 31.0596272,125.312498 31.0596272,104.325677 L31.059,102.595 L13.7079359,102.596256 C11.1497208,103.127674 8.47545775,101.929543 7.20422433,99.554504 L7.08920299,99.328413 L0.598378697,85.8858686 L0.530618722,85.7406136 C-0.830028497,82.7191399 0.516337362,79.166729 3.53781104,77.8060818 L3.53781104,77.8060818 L5.69478619,76.8347405 C8.6593408,75.4997254 12.147832,76.7688411 13.561558,79.6966778 L13.561558,79.6966778 L17.832,88.5417994 L31.059,88.54 L31.0596272,61.9015679 C31.0596272,40.9147474 48.0728067,23.9015679 69.0596272,23.9015679 L175.373,23.901 L175.373367,14.4579525 L94.6843675,14.4571248 C91.370659,14.4571248 88.6843675,11.7708333 88.6843675,8.45712477 L88.6843675,6 C88.6843675,2.6862915 91.370659,-7.81597009e-14 94.6843675,-7.81597009e-14 L206.834478,-4.97379915e-14 Z" id="形状结合" fill="#CDE3FF"></path>
|
||||
<g id="矩形" transform="translate(30.649063, 105.810435)">
|
||||
<mask id="mask-6" fill="white">
|
||||
<use xlink:href="#path-5"></use>
|
||||
</mask>
|
||||
<g id="蒙版" transform="translate(107.202027, 24.075231) scale(1, -1) translate(-107.202027, -24.075231) "></g>
|
||||
<path d="M38.410564,-70.2736474 L176.857915,-70.2736474 C197.844735,-70.2736474 214.857915,-53.2604679 214.857915,-32.2736474 L214.857915,10.1504621 C214.857915,31.1372826 197.844735,48.1504621 176.857915,48.1504621 L38.410564,48.1504621 C17.4237435,48.1504621 0.410564037,31.1372826 0.410564037,10.1504621 L0.410564037,-32.2736474 C0.410564037,-53.2604679 17.4237435,-70.2736474 38.410564,-70.2736474 Z" fill="#BBD8FF" mask="url(#mask-6)"></path>
|
||||
</g>
|
||||
<rect id="矩形备份-5" fill="#BBD8FF" x="46.7215124" y="168.338659" width="183.12358" height="14.5009114" rx="6"></rect>
|
||||
<path d="M58.47837,152.011506 L78.314618,151.951194 C79.6936183,151.947002 81.0319739,152.417954 82.104466,153.284798 L89.4150721,159.193616 C91.1696507,160.611759 91.4423856,163.183758 90.0242425,164.938337 C89.2497155,165.89661 88.0840259,166.454082 86.8518823,166.455465 L58.5005631,166.487291 C55.1868567,166.49101 52.4975514,163.807736 52.4938315,160.49403 C52.4938265,160.489535 52.4938265,160.48504 52.4938316,160.480545 L52.4966164,158.004729 C52.5003328,154.700778 55.1744324,152.021551 58.47837,152.011506 Z" id="矩形备份-4" fill="#BBD8FF" transform="translate(75.435374, 159.219377) rotate(-66.000000) translate(-75.435374, -159.219377) "></path>
|
||||
<path d="M187.295644,151.635686 L221.182576,151.679105 C224.490275,151.683343 227.170639,154.363702 227.174884,157.6714 L227.17805,160.138786 C227.182303,163.452492 224.499461,166.142229 221.185755,166.146482 C221.180626,166.146488 221.175497,166.146488 221.170368,166.146482 L187.283435,166.103063 C183.975737,166.098825 181.295372,163.418466 181.291127,160.110768 L181.287961,157.643381 C181.283708,154.329675 183.96655,151.639938 187.280256,151.635686 C187.285385,151.635679 187.290514,151.635679 187.295644,151.635686 Z" id="矩形备份-6" fill="#BBD8FF" transform="translate(204.233006, 158.891084) rotate(61.000000) translate(-204.233006, -158.891084) "></path>
|
||||
<rect id="矩形" fill="#FFFFFF" x="30.6490632" y="102.28536" width="214.857915" height="12.7987421"></rect>
|
||||
<g id="编组-7" transform="translate(42.752700, 51.933972)">
|
||||
<path d="M20.9743095,0 C32.5581008,-2.12790794e-15 41.9486191,9.39051824 41.9486191,20.9743095 L41.9486191,65.6965222 C41.9486191,77.2803135 32.5581008,86.6708318 20.9743095,86.6708318 C9.39051824,86.6708318 1.74111383e-13,77.2803135 1.65587351e-13,65.6965222 L1.65587351e-13,20.9743095 C1.64168745e-13,9.39051824 9.39051824,2.12790794e-15 20.9743095,0 Z" id="矩形备份-11" fill="#0B3872"></path>
|
||||
<path d="M0.372625905,53.6310115 L41.9486191,53.6310115 L41.810427,65.8841571 C41.6805273,77.4020461 32.306618,86.6708318 20.7879966,86.6708318 C9.43585545,86.6708318 0.23312677,77.4681031 0.23312677,66.115962 C0.23312677,66.0386918 0.233562482,65.9614223 0.234433886,65.8841571 L0.372625905,53.6310115 L0.372625905,53.6310115 Z" id="矩形备份-11" fill="#082D5D"></path>
|
||||
<g id="路径-3" transform="translate(20.799655, 16.772071) rotate(-180.000000) translate(-20.799655, -16.772071) ">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
|
||||
<use fill="#76E1FF" fill-rule="evenodd" xlink:href="#path-7"></use>
|
||||
</g>
|
||||
<ellipse id="椭圆形" fill="#0B3872" cx="108.498643" cy="10.5846541" rx="6.4088168" ry="6.44175101"></ellipse>
|
||||
<rect id="矩形" fill="#0B3872" x="51.9845315" y="4.1429031" width="41.9486191" height="12.883502" rx="5"></rect>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M89.1061808,7.50438355 L212.621559,7.50438355 L212.594724,8.43235705 C212.500889,11.6771693 209.8434,14.25892 206.597231,14.25892 L189.729901,14.25892 L189.729901,14.25892 L189.729901,23.9015679 L175.321118,23.9015679 L175.321118,14.25892 L95.0868668,14.25892 C91.7731583,14.25892 89.0868668,11.5726285 89.0868668,8.25891996 C89.0868668,8.20109024 89.0877028,8.14326354 89.0893747,8.08545799 L89.1061808,7.50438355 L89.1061808,7.50438355 Z" id="矩形备份-8" fill="#BBD8FF"></path>
|
||||
<path d="M226.808121,73.8163859 L278.342129,73.8163859 L278.315974,74.7116117 C278.221194,77.9557026 275.564008,80.536389 272.318533,80.536389 L259.587734,80.536389 L259.587734,80.536389 L259.587734,87.7735556 L245.104906,87.7735556 L245.104906,80.536389 L232.789646,80.536389 C229.475937,80.536389 226.789646,77.8500975 226.789646,74.536389 C226.789646,74.477972 226.790499,74.4195582 226.792205,74.3611662 L226.808121,73.8163859 L226.808121,73.8163859 Z" id="矩形备份-13" fill="#BBD8FF" transform="translate(252.476959, 80.794971) rotate(-270.000000) translate(-252.476959, -80.794971) "></path>
|
||||
<path d="M30.6139215,94.6706281 L14.9632783,94.6706281 L6.09671567,77.1022162 C2.2440363,78.515948 0.317696611,80.858403 0.317696611,84.1295809 C0.300117238,84.8172674 1.38558703,87.976049 2.12193513,89.0363479 C2.61283386,89.7432138 4.27470868,93.3170744 7.10755958,99.7579297 C8.5530083,101.649753 10.7592996,102.595665 13.7264334,102.595665 C16.6935673,102.595665 22.32273,102.595665 30.6139215,102.595665 L30.6139215,94.6706281 Z" id="路径-4" fill="#BBD8FF"></path>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M559,216 C542.879783,245.699954 516.824232,260.549932 480.833347,260.549932 C406.30192,260.549932 370.458217,285.556142 317.731335,298.892227 C265.004453,312.228312 219.807926,286.195141 158.61132,296.318152 C127.731549,300.520278 99.2104465,318.913861 47.9008216,330.426433 C22.8938292,336.037364 6.92688865,342.89522 0,351 L543,351 C551.836556,351 559,343.836556 559,335 L559,216 L559,216 Z" id="路径-5" fill="#3E8EF7" opacity="0.065419"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 18 KiB |
77
src/views/DataAnalysis/svgs/b2.svg
Normal file
77
src/views/DataAnalysis/svgs/b2.svg
Normal file
@@ -0,0 +1,77 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="760px" height="448px" viewBox="0 0 760 448" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 2备份</title>
|
||||
<defs>
|
||||
<path d="M52.7664058,139.5 C54.4232601,139.5 55.7664058,140.843146 55.7664058,142.5 L55.7664058,142.5 L55.7664058,158.1 L79.0024081,158.1 L79.0024081,142.5 C79.0024081,140.843146 80.3455538,139.5 82.0024081,139.5 L82.0024081,139.5 L113.180012,139.5 C114.836866,139.5 116.180012,140.843146 116.180012,142.5 L116.180012,142.5 L116.180012,158.1 L137.96,158.1 L137.960265,158.146664 L198.317881,158.146664 L198.317,158.1 L198.476821,158.1 C201.715218,158.1 204.354393,160.665575 204.472683,163.875062 L204.476821,164.1 L204.476821,180 C204.476821,183.313708 201.79053,186 198.476821,186 L198.476821,186 L6,186 C2.6862915,186 4.05812251e-16,183.313708 0,180 L0,180 L0,164.1 C-1.29399067e-15,160.786292 2.6862915,158.1 6,158.1 L6,158.1 L18.5888019,158.1 L18.5888019,142.5 C18.5888019,140.843146 19.9319476,139.5 21.5888019,139.5 L21.5888019,139.5 Z M195.182,123.178 L195.182,144.596 L139.416,144.596 L139.416,123.178 L195.182,123.178 Z M179.18242,0 C188.018976,5.48217835e-15 195.18242,7.163444 195.18242,16 L195.18242,16 L195.182,109.629 L139.416,109.629 L139.416015,53.5 C139.416015,49.7145483 136.411231,46.6309013 132.656664,46.504059 L132.416015,46.5 L67.4136062,46.5 C63.547613,46.5 60.4136062,49.6340068 60.4136062,53.5 L60.4136062,53.5 L60.4136062,93.0027995 C60.4136062,95.5693774 58.3329837,97.6499999 55.7664058,97.6499999 L55.7664058,97.6499999 C55.7664058,105.358132 49.5245382,111.6 41.8248044,111.6 L41.8248044,111.6 L41.8248044,125.5528 C41.8248044,128.119377 39.7441818,130.2 37.1776038,130.2 C34.6110259,130.2 32.5304033,128.119377 32.5304033,125.5528 L32.5304033,125.5528 L32.5304033,111.6 L32.2190624,111.596592 C24.6631102,111.431035 18.5888019,105.254082 18.5888019,97.6583985 L18.5888019,97.6583985 L18.5888019,97.6499999 L18.3760795,97.6452178 C15.9082392,97.5340348 13.9416015,95.4980836 13.9416015,93.0027995 L13.9416015,93.0027995 L13.9416015,16 C13.9416015,7.163444 21.1050455,1.623249e-15 29.9416015,0 L29.9416015,0 Z" id="path-1"></path>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
|
||||
<stop stop-color="#76E1FF" offset="0%"></stop>
|
||||
<stop stop-color="#1FACFD" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<path d="M25.8675497,7.39072848 C25.8675497,12.8331106 20.0769014,17.2450331 12.9337748,17.2450331 C5.79064824,17.2450331 0,12.8331106 0,7.39072848 L0,7.39072848 Z" id="path-4"></path>
|
||||
<filter x="-46.4%" y="-121.8%" width="192.8%" height="343.5%" filterUnits="objectBoundingBox" id="filter-5">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.443137255 0 0 0 0 0.443137255 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<rect id="path-6" x="0" y="0" width="25.8675497" height="3.69536424" rx="1.84768212"></rect>
|
||||
<filter x="-46.4%" y="-324.7%" width="192.8%" height="749.5%" filterUnits="objectBoundingBox" id="filter-7">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.443137255 0 0 0 0 0.443137255 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-8数据分析" transform="translate(-1136.000000, -136.000000)">
|
||||
<g id="编组-2备份" transform="translate(1136.000000, 136.000000)">
|
||||
<rect id="矩形" fill="#FFFFFF" x="0" y="0" width="760" height="448" rx="16"></rect>
|
||||
<g id="编组" transform="translate(201.000000, 97.000000)">
|
||||
<path d="M559,216 C542.879783,245.699954 516.824232,260.549932 480.833347,260.549932 C406.30192,260.549932 370.458217,285.556142 317.731335,298.892227 C265.004453,312.228312 219.807926,286.195141 158.61132,296.318152 C127.731549,300.520278 99.2104465,318.913861 47.9008216,330.426433 C22.8938292,336.037364 6.92688865,342.89522 0,351 L543,351 C551.836556,351 559,343.836556 559,335 L559,216 L559,216 Z" id="路径-5" fill="#FFEFEF" opacity="0.599772135"></path>
|
||||
<g id="编组-20备份" transform="translate(47.000000, 0.000000)">
|
||||
<path d="M0,351 C53.8507958,350.926647 89.0431188,346.198793 105.576969,336.816439 C156.368998,307.993824 200.936366,260.178098 241.85251,260.178098 C333.19458,260.178098 289.51308,202.776137 359.015543,206.778947 C428.518007,210.781758 441.673051,219.253462 470.376726,215.91769 C489.512509,213.693843 503.386934,204.72128 512,189 L512,335 C512,343.836556 504.836556,351 496,351 L0,351 L0,351 Z" id="路径-2" fill="#FF94AE" opacity="0.065419"></path>
|
||||
<g id="编组-31备份" transform="translate(182.454730, 91.979835)">
|
||||
<g id="路径-9">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="蒙版" fill="#FFEFEF" fill-rule="nonzero" xlink:href="#path-1"></use>
|
||||
<g id="编组-19" mask="url(#mask-2)">
|
||||
<g transform="translate(38.185430, -121.947020)">
|
||||
<text id="Processing" font-family="PingFangSC-Light, PingFang SC" font-size="30" font-weight="300">
|
||||
<tspan x="0" y="72.589404" fill="#161616">Processing</tspan>
|
||||
</text>
|
||||
<g id="编组-3" stroke-width="1" fill-rule="evenodd">
|
||||
<text id="进工业炉加工" font-family="PingFangSC-Regular, PingFang SC" font-size="18" font-weight="normal" letter-spacing="2" fill="#161616">
|
||||
<tspan x="39.4172185" y="20.5496689">进工业炉加工</tspan>
|
||||
</text>
|
||||
<g id="生产和加工情况" fill-rule="nonzero">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="29.5629139" height="29.5629139"></rect>
|
||||
<path d="M10.0323365,19.204346 C10.0323365,17.9658216 10.2748448,16.7648282 10.7540873,15.6331229 C11.2160079,14.5389487 11.8771316,13.5602546 12.7201366,12.7172496 C13.5631416,11.8742446 14.5418357,11.2131209 15.6360099,10.7512003 C16.7677152,10.2719578 17.9687086,10.0294495 19.207233,10.0294495 C20.4457575,10.0294495 21.6467508,10.2719578 22.7784561,10.7512003 C23.1277835,10.8984375 23.4626759,11.0658837 23.7889073,11.2535389 L23.7889073,3.63185017 C23.7889073,3.23633071 23.4684499,2.91587334 23.0729305,2.91587334 L16.2134106,2.91587334 C16.2278456,2.98227442 16.2336196,3.0486755 16.2336196,3.11796358 L16.2336196,6.96345199 C16.2336196,7.51775662 15.7832471,7.96812914 15.2289425,7.96812914 L11.4729512,7.96812914 C10.9186465,7.96812914 10.468274,7.51775662 10.468274,6.96345199 L10.468274,3.12085058 C10.468274,3.0515625 10.474048,2.98516142 10.488483,2.91876035 L3.62896316,2.91876035 C3.23344371,2.91876035 2.91298634,3.23921772 2.91298634,3.63473717 L2.91298634,23.1682016 C2.91298634,23.563721 3.23344371,23.8841784 3.62896316,23.8841784 L11.314166,23.8841784 C11.1034147,23.529077 10.9157595,23.1595406 10.7540873,22.7784561 C10.2748448,21.6438638 10.0323365,20.4428704 10.0323365,19.204346 Z M19.207233,11.7616515 C15.0961403,11.7616515 11.7645385,15.0932533 11.7645385,19.204346 C11.7645385,23.3154387 15.0961403,26.6470406 19.207233,26.6470406 C23.3183257,26.6470406 26.6499276,23.3154387 26.6499276,19.204346 C26.6499276,15.0932533 23.3183257,11.7616515 19.207233,11.7616515 Z M22.4464507,20.2321192 C21.6092198,21.0693502 20.3995654,21.3118584 19.3486962,20.959644 L17.3710989,22.9372413 C16.8485513,23.4597889 15.9968853,23.4597889 15.4743377,22.9372413 C14.9517901,22.4146937 14.9517901,21.5630277 15.4743377,21.0404801 L17.451935,19.0628829 C17.0997206,18.0120137 17.3393419,16.8023593 18.1794599,15.9651283 C19.0830919,15.0614963 20.4140004,14.850745 21.5168357,15.3299876 L19.5796565,17.2671668 L19.8943398,18.5056912 L21.1444123,18.8319226 L23.0815915,16.8947434 C23.560834,18.0004656 23.3471958,19.3313742 22.4464507,20.2321192 L22.4464507,20.2321192 Z M16.0921565,21.7160389 C16.0921565,21.9316071 16.2071607,22.1308004 16.3938483,22.2385845 C16.5805359,22.3463687 16.8105444,22.3463687 16.997232,22.2385845 C17.1839196,22.1308004 17.2989238,21.9316071 17.2989238,21.7160389 C17.2989238,21.5004707 17.1839196,21.3012774 16.997232,21.1934933 C16.8105444,21.0857091 16.5805359,21.0857091 16.3938483,21.1934933 C16.2071607,21.3012774 16.0921565,21.5004707 16.0921565,21.7160389 Z" id="形状" fill="url(#linearGradient-3)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M37.5695364,133.604033 L37.5695364,131.771161 L37.5695364,43.4632955 C37.5695364,34.6267395 44.7329804,27.4632955 53.5695364,27.4632955 L152.139073,27.4632955 C160.975629,27.4632955 168.139073,34.6267395 168.139073,43.4632955 L168.139073,151.371829 L168.139073,151.371829 L136.252536,151.371829 L136.252536,54.7942507 L67.094725,54.7942507 L67.094725,133.604033 L37.5695364,133.604033 Z" fill="#FFE0E0" mask="url(#mask-2)"></path>
|
||||
<rect id="矩形" fill="#FFE0E0" mask="url(#mask-2)" x="-2.46357616" y="171.218543" width="206.940397" height="14.781457"></rect>
|
||||
</g>
|
||||
<g id="编组-30" transform="translate(23.403974, 89.920530)">
|
||||
<g id="形状结合">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
|
||||
<use fill="#FF7171" fill-rule="evenodd" xlink:href="#path-4"></use>
|
||||
</g>
|
||||
<rect id="矩形" fill="#5F0612" x="1.23178808" y="55.4304636" width="24.6357616" height="12.3178808" rx="2"></rect>
|
||||
<g id="矩形备份-14">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
|
||||
<use fill="#FF7171" fill-rule="evenodd" xlink:href="#path-6"></use>
|
||||
</g>
|
||||
<rect id="矩形备份-9" fill="#5F0612" x="61.589404" y="55.4304636" width="24.6357616" height="12.3178808" rx="2"></rect>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M458,0 C480.643675,0 499,18.3563253 499,41 C499,63.6436747 480.643675,82 458,82 C435.356325,82 417,63.6436747 417,41 C417,18.3563253 435.356325,0 458,0 Z M458.5,19 C445.521308,19 435,28.8497355 435,41 C435,53.1502645 445.521308,63 458.5,63 C471.478692,63 482,53.1502645 482,41 C482,28.8497355 471.478692,19 458.5,19 Z" id="形状结合备份-4" fill="#FF94AE" opacity="0.065419"></path>
|
||||
<path d="M346.5,12 C358.926407,12 369,22.0735931 369,34.5 C369,46.9264069 358.926407,57 346.5,57 C334.073593,57 324,46.9264069 324,34.5 C324,22.0735931 334.073593,12 346.5,12 Z M346.5,22 C339.596441,22 334,27.5964406 334,34.5 C334,41.4035594 339.596441,47 346.5,47 C353.403559,47 359,41.4035594 359,34.5 C359,27.5964406 353.403559,22 346.5,22 Z" id="形状结合备份-5" fill="#FF94AE" opacity="0.065419"></path>
|
||||
<path d="M70,196 C84.9116882,196 97,208.088312 97,223 C97,237.911688 84.9116882,250 70,250 C55.0883118,250 43,237.911688 43,223 C43,208.088312 55.0883118,196 70,196 Z M70,207.911765 C61.6669977,207.911765 54.9117647,214.666998 54.9117647,223 C54.9117647,231.333002 61.6669977,238.088235 70,238.088235 C78.3330023,238.088235 85.0882353,231.333002 85.0882353,223 C85.0882353,214.666998 78.3330023,207.911765 70,207.911765 Z" id="形状结合备份-6" fill="#FF94AE" opacity="0.065419"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
69
src/views/DataAnalysis/svgs/b3.svg
Normal file
69
src/views/DataAnalysis/svgs/b3.svg
Normal file
@@ -0,0 +1,69 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="760px" height="448px" viewBox="0 0 760 448" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 2备份 2</title>
|
||||
<defs>
|
||||
<linearGradient x1="15.9441543%" y1="46.8290015%" x2="100%" y2="52.3317319%" id="linearGradient-1">
|
||||
<stop stop-color="#EAEAFF" offset="0%"></stop>
|
||||
<stop stop-color="#E4E4FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<path d="M204.456333,0 L198.6215,0 C180.286843,0 165.438854,14.8091575 165.415135,33.0958648 L165.343978,122.873425 C165.343978,133.802867 156.449416,142.650511 145.491316,142.650511 L5.6925197,142.650511 C2.53791503,142.650511 0,145.181789 0,148.328143 L0,171.984944 C0,175.131299 2.53791503,177.662577 5.6925197,177.662577 L19.354567,177.662577 C19.781506,164.722306 30.4549804,154.360628 43.5240569,154.360628 C56.5931333,154.360628 67.2666078,164.722306 67.6935467,177.662577 L126.302781,177.662577 C126.72972,164.722306 137.403194,154.360628 150.472271,154.360628 C163.541347,154.360628 174.214822,164.722306 174.641761,177.662577 C186.121675,177.662577 195.419457,168.389111 195.419457,156.939219 L195.419457,42.8188101 C195.419457,35.7690833 201.159415,30.0441375 208.227627,30.0441375 C211.382231,30.0441375 213.920245,27.5128597 213.920245,24.3665052 L213.920245,9.46272046 C213.943865,4.23456741 209.698194,0 204.456333,0 Z" id="path-2"></path>
|
||||
<path d="M5.70865422,58.0122699 L73.046988,58.0122699 C82.1094766,58.0122699 89.4355828,50.6656341 89.4355828,41.6309363 L89.4355828,5.70612491 C89.4355828,2.54398069 86.8904745,0 83.7269286,0 L5.70865422,0 C2.54510834,0 0,2.54398069 0,5.70612491 L0,52.306145 C0,55.4682892 2.54510834,58.0122699 5.70865422,58.0122699 Z" id="path-4"></path>
|
||||
<path d="M5.63122767,90.6441718 L47.1615317,90.6441718 C50.2821704,90.6441718 52.7927594,88.1249701 52.7927594,84.993626 L52.7927594,29.4299259 C52.7927594,26.3221257 55.3268118,23.7793801 58.4474505,23.7793801 C61.5446257,23.7793801 64.0552147,21.2366345 64.0552147,18.1288344 L64.0552147,5.65054577 C64.0552147,2.51920166 61.5446257,0 58.4239871,0 L5.63122767,0 C2.510589,0 0,2.51920166 0,5.65054577 L0,84.993626 C0,88.1249701 2.510589,90.6441718 5.63122767,90.6441718 Z" id="path-6"></path>
|
||||
<path d="M-6.64723926,74.9325153 L29.6104294,74.9325153 C31.2791426,74.9325153 32.6319018,73.5797561 32.6319018,71.9110429 C32.6319018,70.2423298 31.2791426,68.8895706 29.6104294,68.8895706 L-6.64723926,68.8895706 C-8.31595239,68.8895706 -9.66871166,70.2423298 -9.66871166,71.9110429 C-9.66871166,73.5797561 -8.31595239,74.9325153 -6.64723926,74.9325153 Z" id="path-8"></path>
|
||||
<filter x="-28.4%" y="-198.6%" width="156.7%" height="497.2%" filterUnits="objectBoundingBox" id="filter-9">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.976470588 0 0 0 0 0.2 0 0 0 0 0.996078431 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-8数据分析" transform="translate(-360.000000, -600.000000)">
|
||||
<g id="编组-2备份-2" transform="translate(360.000000, 600.000000)">
|
||||
<rect id="矩形" fill="#FFFFFF" x="0" y="0" width="760" height="448" rx="16"></rect>
|
||||
<path d="M575.951613,79.5 C589.23317,79.5 600,90.2668296 600,103.548387 C600,116.829945 589.23317,127.596774 575.951613,127.596774 C562.670055,127.596774 551.903226,116.829945 551.903226,103.548387 C551.903226,90.2668296 562.670055,79.5 575.951613,79.5 Z M577.096774,90.9516129 C569.507313,90.9516129 563.354839,96.5913808 563.354839,103.548387 C563.354839,110.505393 569.507313,116.145161 577.096774,116.145161 C584.686236,116.145161 590.83871,110.505393 590.83871,103.548387 C590.83871,96.5913808 584.686236,90.9516129 577.096774,90.9516129 Z" id="形状结合备份-2" fill="#E5E5FF" opacity="0.436918713"></path>
|
||||
<path d="M678.822581,158.145161 C688.309407,158.145161 696,165.835754 696,175.322581 C696,184.809407 688.309407,192.5 678.822581,192.5 C669.335754,192.5 661.645161,184.809407 661.645161,175.322581 C661.645161,165.835754 669.335754,158.145161 678.822581,158.145161 Z M678.822581,165.322581 C673.299733,165.322581 668.822581,169.799733 668.822581,175.322581 C668.822581,180.845428 673.299733,185.322581 678.822581,185.322581 C684.345428,185.322581 688.822581,180.845428 688.822581,175.322581 C688.822581,169.799733 684.345428,165.322581 678.822581,165.322581 Z" id="形状结合备份-3" fill="#E5E5FF" opacity="0.33435192"></path>
|
||||
<path d="M51.8225806,379.5 C61.3094074,379.5 69,387.190593 69,396.677419 C69,406.164246 61.3094074,413.854839 51.8225806,413.854839 C42.3357539,413.854839 34.6451613,406.164246 34.6451613,396.677419 C34.6451613,387.190593 42.3357539,379.5 51.8225806,379.5 Z M51.8225806,386.677419 C46.2997331,386.677419 41.8225806,391.154572 41.8225806,396.677419 C41.8225806,402.200267 46.2997331,406.677419 51.8225806,406.677419 C57.3454281,406.677419 61.8225806,402.200267 61.8225806,396.677419 C61.8225806,391.154572 57.3454281,386.677419 51.8225806,386.677419 Z" id="形状结合备份-8" fill="#E5E5FF" opacity="0.33435192"></path>
|
||||
<path d="M183,448 C207.354878,425.471056 229.686941,412.240546 249.996189,408.308471 C355.668539,387.849239 370.402999,416.757902 400.639869,408.308471 C455.598803,392.950673 442.737068,332.559851 499.076713,332.559851 C555.416358,332.559851 539.868526,235.110915 606.011743,257.861336 C672.154961,280.611758 699.323201,299.03438 720.688207,257.861336 C734.931544,230.412641 748.035475,213.208091 760,206.247685 L760,432 C760,440.836556 752.836556,448 744,448 L183,448 L183,448 Z" id="路径-2" fill="#E5E5FF" opacity="0.296545"></path>
|
||||
<path d="M760,318 C732.214554,319.105946 702.781665,322.383441 671.701335,327.832485 C625.080839,336.006051 619.654127,377.013633 549.022246,389.585627 C478.390365,402.157622 419.458588,369.447932 357.032061,398.115916 C315.414376,417.227905 289.070356,433.855933 278,448 L743.95538,448 C752.789791,447.994507 759.952347,440.83441 759.960872,432.000001 L760,318 L760,318 Z" id="路径-8" fill="url(#linearGradient-1)" opacity="0.353427"></path>
|
||||
<g id="编组-14" transform="translate(437.794479, 185.000000)">
|
||||
<g id="编组-11">
|
||||
<g id="路径-7">
|
||||
<mask id="mask-3" fill="white">
|
||||
<use xlink:href="#path-2"></use>
|
||||
</mask>
|
||||
<use id="蒙版" fill="#E9E9FF" fill-rule="nonzero" xlink:href="#path-2"></use>
|
||||
<path d="M213.374672,14.5030675 L193.340971,14.5030675 C186.204928,17.1363377 182.636906,24.0269529 182.636906,35.1749133 C182.636906,46.3228736 182.636906,84.2050211 182.636906,148.821356 C182.425805,156.199679 178.400117,160.66298 170.559842,162.21126 C158.799429,164.533679 193.336744,162.21126 128.931654,162.21126 C85.9949273,162.21126 43.0177094,162.21126 0,162.21126 L0.11822616,178.871166 L199.813315,178.871166 L216.337423,17.5913823 L213.374672,14.5030675 Z" fill="#DDDDFC" mask="url(#mask-3)"></path>
|
||||
</g>
|
||||
<path d="M44.0609224,163.16834 C34.2738911,162.856499 26.2859464,170.844443 26.5977881,180.631475 C26.8856419,189.482981 34.0819885,196.703315 42.9574826,196.991169 C52.7445138,197.303011 60.7324585,189.315066 60.4206168,179.528035 C60.132763,170.676528 52.9124286,163.456194 44.0609224,163.16834 Z" id="路径" fill="#DDDDFC" fill-rule="nonzero"></path>
|
||||
<path d="M150.416751,163.16834 C140.629719,162.856499 132.641775,170.844443 132.953616,180.631475 C133.24147,189.482981 140.437817,196.703315 149.313311,196.991169 C159.100342,197.303011 167.088287,189.315066 166.776445,179.528035 C166.488591,170.676528 159.268257,163.456194 150.416751,163.16834 Z" id="路径" fill="#DDDDFC" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
<g id="编组-13" transform="translate(0.000000, 30.214724)">
|
||||
<g id="编组-12" transform="translate(61.638037, 0.000000)">
|
||||
<g id="矩形" transform="translate(0.000000, 42.300613)">
|
||||
<mask id="mask-5" fill="white">
|
||||
<use xlink:href="#path-4"></use>
|
||||
</mask>
|
||||
<use id="蒙版" fill="#E9E9FF" fill-rule="nonzero" xlink:href="#path-4"></use>
|
||||
<rect fill="#DDDDFC" mask="url(#mask-5)" transform="translate(44.717791, 43.509202) scale(1, -1) translate(-44.717791, -43.509202) " x="0" y="29.006135" width="89.4355828" height="29.006135"></rect>
|
||||
</g>
|
||||
<path d="M17.7378203,32.6319018 L70.4891736,32.6319018 C73.6212852,32.6319018 76.1411043,30.1378922 76.1411043,27.0378615 L76.1411043,5.59404032 C76.1411043,2.49400964 73.6212852,0 70.4891736,0 L17.7378203,0 C14.6057087,0 12.0858896,2.49400964 12.0858896,5.59404032 L12.0858896,27.0378615 C12.0858896,30.1378922 14.6057087,32.6319018 17.7378203,32.6319018 Z" id="路径" fill="#E9E9FF" fill-rule="nonzero"></path>
|
||||
<path d="M10.0597257,67.6809816 L24.989354,67.6809816 C25.8758007,67.6809816 26.5889571,66.3877914 26.5889571,64.7803681 L26.5889571,53.6613497 C26.5889571,52.0539264 25.8758007,50.7607362 24.989354,50.7607362 L10.0597257,50.7607362 C9.17327905,50.7607362 8.4601227,52.0539264 8.4601227,53.6613497 L8.4601227,64.7803681 C8.4601227,66.3877914 9.17327905,67.6809816 10.0597257,67.6809816 Z" id="路径备份-2" fill="#1E1A64" fill-rule="nonzero"></path>
|
||||
<path d="M10.0597257,93.0613497 L24.989354,93.0613497 C25.8758007,93.0613497 26.5889571,91.7681595 26.5889571,90.1607362 L26.5889571,79.0417178 C26.5889571,77.4342945 25.8758007,76.1411043 24.989354,76.1411043 L10.0597257,76.1411043 C9.17327905,76.1411043 8.4601227,77.4342945 8.4601227,79.0417178 L8.4601227,90.1607362 C8.4601227,91.7681595 9.17327905,93.0613497 10.0597257,93.0613497 Z" id="路径备份-3" fill="#1E1A64" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
<g id="路径-6" transform="translate(0.000000, 9.668712)">
|
||||
<mask id="mask-7" fill="white">
|
||||
<use xlink:href="#path-6"></use>
|
||||
</mask>
|
||||
<use id="蒙版" fill="#E9E9FF" fill-rule="nonzero" xlink:href="#path-6"></use>
|
||||
<path d="M64.8927126,12.0858896 L42.2576687,12.0858896 C38.9439602,12.0858896 36.2576687,14.7721811 36.2576687,18.0858896 L36.2576687,94.2699387 L36.2576687,94.2699387 L57.6996966,94.2699387 L57.6996966,30.3548945 L68.8895706,26.575992 L64.8927126,12.0858896 Z" fill="#DDDDFC" mask="url(#mask-7)"></path>
|
||||
</g>
|
||||
<g id="路径备份-4" transform="translate(11.481595, 71.911043) rotate(-90.000000) translate(-11.481595, -71.911043) ">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
|
||||
<use fill="#F933FE" fill-rule="evenodd" xlink:href="#path-8"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
76
src/views/DataAnalysis/svgs/b4.svg
Normal file
76
src/views/DataAnalysis/svgs/b4.svg
Normal file
@@ -0,0 +1,76 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="760px" height="448px" viewBox="0 0 760 448" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 17</title>
|
||||
<defs>
|
||||
<rect id="path-1" x="19.526039" y="1.15770612" width="98" height="11" rx="5.5"></rect>
|
||||
<filter x="-12.2%" y="-109.1%" width="124.5%" height="318.2%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.647058824 0 0 0 0 0.11372549 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<rect id="path-3" x="19.526039" y="0.157706119" width="98" height="11" rx="5.5"></rect>
|
||||
<filter x="-12.2%" y="-109.1%" width="124.5%" height="318.2%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.647058824 0 0 0 0 0.11372549 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<rect id="path-5" x="19.526039" y="0.157706119" width="98" height="11" rx="5.5"></rect>
|
||||
<filter x="-12.2%" y="-109.1%" width="124.5%" height="318.2%" filterUnits="objectBoundingBox" id="filter-6">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.647058824 0 0 0 0 0.11372549 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<rect id="path-7" x="33.7695142" y="-3.75716541" width="22" height="145"></rect>
|
||||
</defs>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-8数据分析" transform="translate(-1136.000000, -600.000000)">
|
||||
<g id="编组-17" transform="translate(1136.000000, 600.000000)">
|
||||
<rect id="矩形备份-3" fill="#FFFFFF" x="0" y="0" width="760" height="448" rx="16"></rect>
|
||||
<path d="M207.288696,284 C236.283645,284 259.788696,307.505051 259.788696,336.5 C259.788696,365.494949 236.283645,389 207.288696,389 C178.293746,389 154.788696,365.494949 154.788696,336.5 C154.788696,307.505051 178.293746,284 207.288696,284 Z M207.998155,303.864865 C189.582444,303.864865 174.653561,318.793748 174.653561,337.209459 C174.653561,355.625171 189.582444,370.554054 207.998155,370.554054 C226.413866,370.554054 241.34275,355.625171 241.34275,337.209459 C241.34275,318.793748 226.413866,303.864865 207.998155,303.864865 Z" id="形状结合备份-7" fill="#FFC49A" opacity="0.083664"></path>
|
||||
<g id="编组-6" transform="translate(191.788696, 81.395307)">
|
||||
<path d="M0,366.604693 C59.762951,366.527338 98.8189583,361.54156 117.168022,351.647359 C173.536391,321.252348 222.996708,270.828073 268.404942,270.828073 C369.775248,270.828073 321.298056,210.294593 398.431035,214.515773 C475.564015,218.736954 490.163321,227.670825 522.018307,224.153073 C543.254964,221.807906 558.652629,212.345851 568.211304,195.766909 L568.211304,350.604693 C568.211304,359.441249 561.04786,366.604693 552.211304,366.604693 L0,366.604693 L0,366.604693 Z" id="路径-2备份" fill="#FEBE93" opacity="0.110351562"></path>
|
||||
<path d="M226.904445,0 C244.301415,0 258.404445,14.1030304 258.404445,31.5 C258.404445,48.8969696 244.301415,63 226.904445,63 C209.507475,63 195.404445,48.8969696 195.404445,31.5 C195.404445,14.1030304 209.507475,0 226.904445,0 Z M226.904445,14.472973 C217.030489,14.472973 209.026067,22.0962326 209.026067,31.5 C209.026067,40.9037674 217.030489,48.527027 226.904445,48.527027 C236.778401,48.527027 244.782823,40.9037674 244.782823,31.5 C244.782823,22.0962326 236.778401,14.472973 226.904445,14.472973 Z" id="形状结合备份-7" fill="#FFC49A" opacity="0.183663504"></path>
|
||||
<path d="M497.279896,97.5845278 C509.430161,97.5845278 519.279896,107.434263 519.279896,119.584528 C519.279896,131.734792 509.430161,141.584528 497.279896,141.584528 C485.129632,141.584528 475.279896,131.734792 475.279896,119.584528 C475.279896,107.434263 485.129632,97.5845278 497.279896,97.5845278 Z M497.279896,107.362306 C490.529749,107.362306 485.057674,112.834381 485.057674,119.584528 C485.057674,126.334675 490.529749,131.80675 497.279896,131.80675 C504.030043,131.80675 509.502118,126.334675 509.502118,119.584528 C509.502118,112.834381 504.030043,107.362306 497.279896,107.362306 Z" id="形状结合备份-10" fill="#FFC49A" opacity="0.195568266"></path>
|
||||
<path d="M568.211304,229.564363 C551.825455,259.713189 525.340556,274.787602 488.756606,274.787602 C412.997037,274.787602 376.562696,300.171746 322.96697,313.709386 C269.371245,327.247027 223.429961,300.820402 161.224946,311.096408 C129.836333,315.362043 100.845254,334.033619 48.6901401,345.720186 C23.2710779,351.415919 7.04103119,358.377421 0,366.604693 L552.211304,366.604693 C561.04786,366.604693 568.211304,359.441249 568.211304,350.604693 L568.211304,229.564363 L568.211304,229.564363 Z" id="路径-5备份" fill="#FFC49A" opacity="0.101888021"></path>
|
||||
<g id="编组-33" transform="translate(247.211304, 89.604693)">
|
||||
<path d="M144,12 C157.254834,12 168,22.745166 168,36 L168,188 C168,201.254834 157.254834,212 144,212 L24,212 C10.745166,212 1.623249e-15,201.254834 0,188 L0,36 C-1.623249e-15,22.745166 10.745166,12 24,12 L25,12 L25,28 C25,32.3349143 28.4478378,35.8645429 32.7508207,35.9961932 L33,36 L135,36 C139.418278,36 143,32.418278 143,28 L143,28 L143,12 L144,12 Z" id="形状结合" fill="#FFEFDB"></path>
|
||||
<path d="M25.5794702,69.3609272 L200.755065,69.3609272 L201.349945,121.37295 C201.400067,125.755252 204.966833,129.281457 209.349422,129.281457 L225.57947,129.281457 L225.57947,129.281457 L225.57947,130.360927 C225.57947,143.615761 214.834304,154.360927 201.57947,154.360927 L49.5794702,154.360927 C36.3246362,154.360927 25.5794702,143.615761 25.5794702,130.360927 L25.5794702,69.3609272 L25.5794702,69.3609272 Z" id="矩形" fill="#FFE5C5" transform="translate(125.579470, 111.860927) rotate(-90.000000) translate(-125.579470, -111.860927) "></path>
|
||||
<g id="编组-34" transform="translate(27.008124, 71.038146)">
|
||||
<rect id="矩形" fill="#5F2F06" x="0" y="0" width="12" height="12" rx="6"></rect>
|
||||
<g id="矩形备份-31">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
<use fill="#FFAE12" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
<g id="编组-34备份" transform="translate(27.008124, 98.038146)">
|
||||
<rect id="矩形" fill="#5F2F06" x="0" y="0" width="12" height="12" rx="6"></rect>
|
||||
<g id="矩形备份-31">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
|
||||
<use fill="#FFAE12" fill-rule="evenodd" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
</g>
|
||||
<g id="编组-34备份-2" transform="translate(27.008124, 148.038146)">
|
||||
<rect id="矩形" fill="#5F2F06" x="0" y="0" width="12" height="12" rx="6"></rect>
|
||||
<g id="矩形备份-31">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
|
||||
<use fill="#FFAE12" fill-rule="evenodd" xlink:href="#path-5"></use>
|
||||
</g>
|
||||
</g>
|
||||
<g id="编组-32" transform="translate(130.999615, 69.000000)">
|
||||
<path d="M80.9929007,25.3239988 C85.1936525,18.0493952 82.5831854,8.72645586 75.2018643,4.72015238 L69.8008977,1.79826188 C62.8396519,-1.98212223 54.1681,0.3825005 50.0573643,7.16008157 L39.0003855,25.4143666 L70.2059702,44 L80.9929007,25.3239988 Z M34.6944049,32 L0.699111239,92.2741491 L0.000385469649,125.006402 C-0.028934822,126.536508 1.62031238,127.511575 2.92782367,126.71652 L31.3513362,109.615343 L66.0003855,49.5362072 L34.6944049,32 Z" id="形状" fill="#FFEFDB" fill-rule="nonzero"></path>
|
||||
<g id="形状备份" transform="translate(0.410412, 1.596776)">
|
||||
<mask id="mask-8" fill="white">
|
||||
<use xlink:href="#path-7"></use>
|
||||
</mask>
|
||||
<g id="蒙版" transform="translate(44.769514, 68.742835) rotate(29.000000) translate(-44.769514, -68.742835) "></g>
|
||||
<path d="M80.5824885,23.727223 C84.7832403,16.4526193 82.1727731,7.12968001 74.7914521,3.12337653 L69.3904855,0.20148603 C62.4292397,-3.57889808 53.7576877,-1.21427535 49.6469521,5.56330572 L38.5899732,23.8175907 L69.795558,42.4032242 L80.5824885,23.727223 Z M34.2839926,30.4032242 L0.288698998,90.6773733 L-0.410026771,123.409627 C-0.439347063,124.939732 1.20990014,125.914799 2.51741143,125.119744 L30.940924,108.018567 L65.5899732,47.9394313 L34.2839926,30.4032242 Z" fill="#FFE5C5" fill-rule="nonzero" mask="url(#mask-8)"></path>
|
||||
</g>
|
||||
</g>
|
||||
<rect id="矩形" fill="#FFEFDB" x="32" y="0" width="102" height="29" rx="8"></rect>
|
||||
<path d="M32,15 L134,15 L134,21 C134,25.418278 130.418278,29 126,29 L40,29 C35.581722,29 32,25.418278 32,21 L32,15 L32,15 Z" id="矩形" fill="#FFE5C5"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
273
src/views/DataAnalysis/yield.vue
Normal file
273
src/views/DataAnalysis/yield.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: lb
|
||||
* @Date: 2022-03-24 13:30:00
|
||||
* @LastEditTime: 2022-05-16 10:00:20
|
||||
* @LastEditors: gtz
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="app-container">
|
||||
<top-title />
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
/>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="trueTableProps.length ? trueTableProps: tableProps"
|
||||
:table-data="tableData.length ? tableData : []"
|
||||
:is-loading="listLoading"
|
||||
:index-config="{ align: 'left', fixed: 'left' }"
|
||||
/>
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<top-title base-title="产品量" />
|
||||
<Line-chart :chart-data="chartData" width="100%" height="400px" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import i18n from '@/lang'
|
||||
import TopTitle from '@/components/TopTitle'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable/index-compound'
|
||||
import LineChart from './components/LineChartYield'
|
||||
import { lineList } from '@/api/DataAnalysis/productionLineBalance'
|
||||
// import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'productName',
|
||||
label: i18n.t('module.dataAnalysis.yield.productName'),
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'productSpecifications',
|
||||
label: i18n.t('module.dataAnalysis.yield.productSpecifications'),
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
}
|
||||
]
|
||||
|
||||
const testData = [
|
||||
{
|
||||
productName: '产品1',
|
||||
productSpecifications: '100cm*100cm',
|
||||
data: [
|
||||
{ time: '02-01', value: 23 },
|
||||
{ time: '02-02', value: 24 },
|
||||
{ time: '02-03', value: 45 },
|
||||
{ time: '02-04', value: 83 },
|
||||
{ time: '02-05', value: 13 },
|
||||
{ time: '02-06', value: 52 },
|
||||
{ time: '02-07', value: 46 },
|
||||
{ time: '02-08', value: 123 },
|
||||
{ time: '02-09', value: 31 },
|
||||
{ time: '02-10', value: 13 },
|
||||
{ time: '02-11', value: 23 },
|
||||
{ time: '02-12', value: 24 },
|
||||
{ time: '02-13', value: 45 },
|
||||
{ time: '02-14', value: 83 },
|
||||
{ time: '02-15', value: 13 },
|
||||
{ time: '02-16', value: 52 },
|
||||
{ time: '02-17', value: 46 },
|
||||
{ time: '02-18', value: 123 },
|
||||
{ time: '02-19', value: 31 },
|
||||
{ time: '02-20', value: 13 },
|
||||
{ time: '02-21', value: 23 },
|
||||
{ time: '02-22', value: 24 },
|
||||
{ time: '02-23', value: 45 },
|
||||
{ time: '02-24', value: 83 },
|
||||
{ time: '02-25', value: 13 },
|
||||
{ time: '02-26', value: 52 },
|
||||
{ time: '02-27', value: 46 },
|
||||
{ time: '02-28', value: 123 }
|
||||
]
|
||||
},
|
||||
{
|
||||
productName: '产品2',
|
||||
productSpecifications: '100cm*100cm',
|
||||
data: [
|
||||
{ time: '02-01', value: 33 },
|
||||
{ time: '02-02', value: 64 },
|
||||
{ time: '02-03', value: 15 },
|
||||
{ time: '02-04', value: 53 },
|
||||
{ time: '02-05', value: 33 },
|
||||
{ time: '02-06', value: 22 },
|
||||
{ time: '02-07', value: 66 },
|
||||
{ time: '02-08', value: 13 },
|
||||
{ time: '02-09', value: 51 },
|
||||
{ time: '02-10', value: 23 },
|
||||
{ time: '02-11', value: 63 },
|
||||
{ time: '02-12', value: 44 },
|
||||
{ time: '02-13', value: 15 },
|
||||
{ time: '02-14', value: 43 },
|
||||
{ time: '02-15', value: 23 },
|
||||
{ time: '02-16', value: 42 },
|
||||
{ time: '02-17', value: 56 },
|
||||
{ time: '02-18', value: 33 },
|
||||
{ time: '02-19', value: 121 },
|
||||
{ time: '02-20', value: 33 },
|
||||
{ time: '02-21', value: 33 },
|
||||
{ time: '02-22', value: 44 },
|
||||
{ time: '02-23', value: 15 },
|
||||
{ time: '02-24', value: 53 },
|
||||
{ time: '02-25', value: 23 },
|
||||
{ time: '02-26', value: 32 },
|
||||
{ time: '02-27', value: 56 },
|
||||
{ time: '02-28', value: 23 }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'ProductPool',
|
||||
components: { TopTitle, BaseTable, HeadForm, LineChart },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
testData,
|
||||
tableData: [],
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
lineList: [],
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: i18n.t('module.dataAnalysis.yield.line'),
|
||||
placeholder: this.$t('module.dataAnalysis.yield.line'),
|
||||
param: 'line',
|
||||
width: 300,
|
||||
selectOptions: []
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: this.$t('module.dataAnalysis.yield.time'),
|
||||
dateType: 'month',
|
||||
format: 'yyyy-MM',
|
||||
valueFormat: 'yyyy-MM',
|
||||
param: 'searchTime'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
trueTableProps: [],
|
||||
headFormValue: {},
|
||||
numArr: [],
|
||||
chartData: [],
|
||||
chartType: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getLineList()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 获取产线列表
|
||||
getLineList() {
|
||||
lineList({ current: 1, size: 999 }).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.lineList = res.data.records
|
||||
Vue.set(this.headFormConfig[0], 'selectOptions', this.lineList)
|
||||
}
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.numArr = []
|
||||
const tableConfig = []
|
||||
this.chartData = []
|
||||
const tableData = this.testData.map((item, index) => {
|
||||
const tableDataArr = {}
|
||||
if (item.data) {
|
||||
const dataArr = item.data.map(i => {
|
||||
if (index === 0) {
|
||||
this.numArr.push(i.time)
|
||||
tableConfig.push({
|
||||
label: i.time,
|
||||
prop: i.time
|
||||
})
|
||||
}
|
||||
tableDataArr[i.time] = i.value
|
||||
return i.value
|
||||
})
|
||||
this.chartData.push({
|
||||
name: item.productName,
|
||||
data: dataArr,
|
||||
timeArr: this.numArr
|
||||
})
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
...tableDataArr
|
||||
}
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.trueTableProps = this.tableProps.concat(tableConfig)
|
||||
this.tableData = this.flatten(tableData)
|
||||
})
|
||||
},
|
||||
// 数组扁平
|
||||
flatten(arr) {
|
||||
var res = []
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (Array.isArray(arr[i])) {
|
||||
res = res.concat(this.flatten(arr[i]))
|
||||
} else {
|
||||
res.push(arr[i])
|
||||
}
|
||||
}
|
||||
return res
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user