mt-fe-group/11-mes-new
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

'init'

Browse Source
This commit is contained in:
gtz
2022-11-07 08:45:49 +08:00
commit 4d1231adc2
1222 changed files with 194552 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
src/views/QualityManager/components/TechyAnalysisBar.vue Normal file
View File

@@ -0,0 +1,196 @@
<template>
<div class="quality-analysis-bar" :class="`border-${color}`">
<div class="placeholder-block-wrapper">
<div class="flex justify-end">
<div class="placeholder-block" :class="`block-${color}-1`" />
<div class="placeholder-block" :class="`block-${color}-2`" />
<div class="placeholder-block" :class="`block-${color}-3`" />
<div class="placeholder-block" :class="`block-${color}-4`" />
<div class="placeholder-block" :class="`block-${color}-5`" />
</div>
</div>
<span class="quality-analysis-bar__name">
{{ name }}
</span>
<span class="quality-analysis-bar__amount" :title="'数量:' + amount">{{ amount | amountFilter }}</span>
</div>
</template>
<script>
export default {
name: 'TechyAnalysisBar',
filters: {
amountFilter: val => {
const sVal = val.toString()
return sVal.length > 7 ? sVal.slice(0, 6) + '...' : sVal
}
},
props: {
name: {
type: String,
default: 'null'
},
amount: {
type: Number,
default: 0
},
color: {
type: String,
default: 'green'
}
},
data() {
return {}
},
methods: {}
}
</script>
<style scoped>
.flex {
display: flex;
}
.justify-end {
justify-content: flex-end;
}
.quality-analysis-bar {
border-radius: 2px;
padding: 2px;
display: flex;
}
.border-green {
border: 2px solid #35abad;
}
.border-blue {
border: 2px solid #49b2ff;
}
.border-orange {
border: 2px solid #ffb94d;
}
.border-pink {
border: 2px solid #ed879f;
}
.placeholder-block-wrapper {
flex-grow: 1;
overflow: hidden;
min-width: 32px;
position: relative;
display: flex;
justify-content: center;
}
.placeholder-block-wrapper > div {
width: 300px;
position: absolute;
top: 0;
right: 0;
}
.placeholder-block {
width: 20px;
height: 20px;
margin-left: 3px;
}
.block-green-5 {
background: linear-gradient(to left, #35abad, hsla(181, 53%, 44%, 0.65));
/* margin-left: 4px; */
}
.block-green-4 {
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.65), hsla(181, 53%, 44%, 0.4));
}
.block-green-3 {
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.4), hsla(181, 53%, 44%, 0.2));
}
.block-green-2 {
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0));
}
.block-green-1 {
/* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
background: transparent;
}
/* ================ blue ================ */
.block-blue-5 {
background: linear-gradient(to left, hsl(205, 100%, 64%), hsla(205, 100%, 64%, 0.65));
/* margin-left: 4px; */
}
.block-blue-4 {
background: linear-gradient(to left, hsla(205, 100%, 64%, 0.65), hsla(205, 100%, 64%, 0.4));
}
.block-blue-3 {
background: linear-gradient(to left, hsla(205, 100%, 64%, 0.4), hsla(205, 100%, 64%, 0.2));
}
.block-blue-2 {
background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0));
}
.block-blue-1 {
/* background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0)); */
background: transparent;
}
/* ================ orange ================ */
.block-orange-5 {
background: linear-gradient(to left, hsl(36, 100%, 65%), hsla(36, 100%, 65%, 0.65));
/* margin-left: 4px; */
}
.block-orange-4 {
background: linear-gradient(to left, hsla(36, 100%, 65%, 0.65), hsla(36, 100%, 65%, 0.4));
}
.block-orange-3 {
background: linear-gradient(to left, hsla(36, 100%, 65%, 0.4), hsla(36, 100%, 65%, 0.2));
}
.block-orange-2 {
background: linear-gradient(to left, hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0));
}
.block-orange-1 {
/* background: linear-gradient(to left,hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0)); */
background: transparent;
}
/* ================ pink ================ */
.block-pink-5 {
background: linear-gradient(to left, hsl(346, 74%, 73%), hsla(346, 74%, 73%, 0.65));
/* margin-left: 4px; */
}
.block-pink-4 {
background: linear-gradient(to left, hsla(346, 74%, 73%, 0.65), hsla(346, 74%, 73%, 0.4));
}
.block-pink-3 {
background: linear-gradient(to left, hsla(346, 74%, 73%, 0.4), hsla(346, 74%, 73%, 0.2));
}
.block-pink-2 {
background: linear-gradient(to left, hsla(346, 74%, 73%, 0.2), hsla(346, 74%, 73%, 0));
}
.block-pink-1 {
/* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
background: transparent;
}
.quality-analysis-bar__name {
text-align: center;
white-space: normal;
overflow-wrap: break-word;
overflow: hidden;
color: white;
display: inline-block;
padding: 3px 8px;
font-size: 14px;
line-height: 12px;
}
.quality-analysis-bar__amount {
color: rgba(255, 255, 255, 0.725);
display: inline-block;
/* min-width: 35%; */
width: 35%;
text-align: left;
padding: 3px 0;
font-size: 14px;
line-height: 12px;
}
</style>

129
src/views/QualityManager/components/TechyAnalysisHeader.vue Normal file
View File

@@ -0,0 +1,129 @@
<template>
<div class="techy-analysis-header">
<span v-html="titleLeftSVG" />
<span class="techy-analysis-header__title">
<slot />
</span>
<span v-html="titleRightSVG" />
</div>
</template>
<script>
const titleLeftSVG = `<svg
width="56px"
height="13px"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>left</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份"
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
>
<polygon
id="路径-11"
points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"
></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>`
const titleRightSVG = `<svg
width="56px"
height="13px"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>right</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份-2"
transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
>
<polygon
id="路径-11"
points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"
></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
</g>
</g>
</g>
</g>
</g>
</g></svg>`
export default {
name: 'TechyAnalysisHeader',
data() {
return { titleLeftSVG, titleRightSVG }
}
}
</script>
<style scoped>
.techy-analysis-header {
text-align: center;
margin-bottom: 16px;
}
.techy-analysis-header__title {
color: #01cfcc;
font-size: 15px;
line-height: 18px;
}
</style>

21
src/views/QualityManager/components/TechyBox.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<div class="techy-box">
<slot />
</div>
</template>
<script>
export default {}
</script>
<style scoped>
.techy-box {
background: transparent;
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.5);
display: inline-block;
height: 100%;
width: 100%;
border-radius: .25rem;
position: relative;
}
</style>

114
src/views/QualityManager/components/TechyContainer.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<div class="techy-container">
<template v-if="showCorner">
<div class="line top left vertical" />
<div class="line top left horizontal" />
<div class="line top right vertical" />
<div class="line top right horizontal " />
<div class="line bottom right horizontal" />
<div class="line bottom right vertical" />
<div class="line bottom left vertical" />
<div class="line bottom left horizontal" />
</template>
<div class="container-title-wrapper">
<span class="container-icon" v-html="icon" />
<span class="container-title">{{ title }}</span>
</div>
<slot />
</div>
</template>
<script>
export default {
name: 'TechyContainer',
props: {
title: String,
icon: String,
showCorner: {
type: Boolean,
default: true
}
},
data() {
return {}
},
mounted() {}
}
</script>
<style scoped>
.techy-container {
border: 2px solid #52fff1;
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
display: inline-block;
position: relative;
/* padding: 24px; */
padding: calc(100vw / 1920 * 22);
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
}
.line {
position: absolute;
background-color: #52fff1;
}
.horizontal {
/* height: 4px;
width: 24px; */
/* height: 0.325vh;
width: 3vh; */
height: calc(100vw / 1920 * 4);
width: calc(100vw / 1920 * 30);
}
.vertical {
/* height: 24px;
width: 4px; */
/* height: 3vh;
width: 0.325vh; */
height: calc(100vw / 1920 * 30);
width: calc(100vw / 1920 * 4);
}
.top {
top: -3px;
}
.left {
left: -3px;
}
.right {
right: -3px;
}
.bottom {
bottom: -3px;
}
.container-title-wrapper {
color: #52fff1;
display: flex;
align-items: center;
/* font-size: 18px;
line-height: 1;
height: 24px;
margin-bottom: 8px; */
/* font-size: 1.25vh;
line-height: 1;
height: 1.5vh;
margin-bottom: 1.25vh; */
font-size: calc((100vw / 1920) * 16);
line-height: 1;
height: calc((100vw / 1920) * 20);
margin-bottom: 1.5vh;
}
.container-title {
margin-left: 4px;
}
</style>

92
src/views/QualityManager/components/TechyHeader.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<header class="techy-header">
<img class="logo-img" src="./logo.png" alt="cnbm">
<span style="display: line-block; margin-left: calc(100vw / 1920 * 8); letter-spacing: 3px;">{{ headTitle }}</span>
<span class="fullscreen-btn" @click="handleClick('fullscreen')">
<span v-if="isFullScreen" v-html="unfullScreenSvg" />
<span v-else v-html="fullScreenSvg" />
</span>
</header>
</template>
<script>
const fullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 54备份</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-1864.000000, -162.000000)">
<g id="编组-54备份" transform="translate(1864.000000, 162.000000)">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M26.7638125,1.45454545 L27.0177905,1.4628567 C27.4387521,1.49054436 27.8474996,1.58732758 28.2359531,1.75197014 C28.6866948,1.94029725 29.0896137,2.2117619 29.4389259,2.56107409 C29.7857111,2.90785927 30.0584977,3.31352185 30.2477734,3.76343947 C30.4456009,4.23019115 30.5454545,4.72555866 30.5454545,5.23618754 L30.5454545,5.23618754 L30.5454545,26.7638125 L30.5371433,27.0177905 C30.5094556,27.4387521 30.4126724,27.8474996 30.2480299,28.2359531 C30.0597028,28.6866948 29.7882381,29.0896137 29.4389259,29.4389259 C29.0921407,29.7857111 28.6864782,30.0584977 28.2365605,30.2477734 C27.7698088,30.4456009 27.2744413,30.5454545 26.7638125,30.5454545 L26.7638125,30.5454545 L5.23618754,30.5454545 L4.98220952,30.5371433 C4.56124792,30.5094556 4.15250044,30.4126724 3.7640469,30.2480299 C3.31330516,30.0597028 2.91038628,29.7882381 2.56107409,29.4389259 C2.21428891,29.0921407 1.94150232,28.6864782 1.75222663,28.2365605 C1.55439906,27.7698088 1.45454545,27.2744413 1.45454545,26.7638125 L1.45454545,26.7638125 L1.45454545,5.23618754 L1.4628567,4.98220952 C1.49054436,4.56124792 1.58732758,4.15250044 1.75197014,3.7640469 C1.94029725,3.31330516 2.2117619,2.91038628 2.56107409,2.56107409 C2.90785927,2.21428891 3.31352185,1.94150232 3.76343947,1.75222663 C4.23019115,1.55439906 4.72555866,1.45454545 5.23618754,1.45454545 L5.23618754,1.45454545 L26.7638125,1.45454545 Z M26.7638125,3.33876293 L5.23618754,3.33876293 L5.08796584,3.34447462 C4.10971624,3.42016081 3.33876293,4.23861746 3.33876293,5.23618754 L3.33876293,5.23618754 L3.33876293,26.7638125 L3.34447462,26.9120342 C3.42016081,27.8902838 4.23861746,28.6612371 5.23618754,28.6612371 L5.23618754,28.6612371 L26.7638125,28.6612371 L26.9120342,28.6555254 C27.8902838,28.5798392 28.6612371,27.7613825 28.6612371,26.7638125 L28.6612371,26.7638125 L28.6612371,5.23618754 L28.6555254,5.08796584 C28.5798392,4.10971624 27.7613825,3.33876293 26.7638125,3.33876293 L26.7638125,3.33876293 Z M6.64116798,17.2700375 L6.74890704,17.2784355 C7.20902464,17.3410097 7.56504512,17.7372269 7.56504512,18.2121946 L7.56504512,18.2121946 L7.56504512,23.06998 L12.2154875,18.4195377 L12.3038841,18.341579 C12.6723846,18.0557307 13.2096238,18.0817169 13.5474445,18.4195377 C13.9134169,18.7855101 13.9134169,19.3855223 13.5474445,19.7514947 L13.5474445,19.7514947 L8.86035653,24.4349549 L13.6953555,24.4349549 L13.8090001,24.4414765 C14.2937488,24.4974586 14.6711425,24.9068233 14.6639054,25.3965331 C14.6534571,25.9083109 14.2345395,26.3191724 13.7217698,26.3191724 L13.7217698,26.3191724 L6.64604887,26.3191724 L6.53329365,26.3126932 C6.05255502,26.2570589 5.68082765,25.8499062 5.68082765,25.3539511 L5.68082765,25.3539511 L5.68082765,18.2353071 L5.68737703,18.1218678 C5.74358847,17.6379293 6.15445128,17.2603996 6.64116798,17.2700375 L6.64116798,17.2700375 Z M25.3605547,5.68082765 L25.4723738,5.68728667 C25.9492196,5.74274215 26.3191724,6.14846553 26.3191724,6.6394453 L26.3191724,6.6394453 L26.3191724,13.7613912 L26.312623,13.8748304 C26.2564115,14.3587689 25.8455487,14.7362986 25.358832,14.7266607 C24.8478544,14.716179 24.4349549,14.2960073 24.4349549,13.7845036 L24.4349549,13.7845036 L24.4349549,8.93001999 L19.7845125,13.5804623 L19.6961159,13.658421 C19.3276154,13.9442693 18.7903762,13.9182831 18.4525555,13.5804623 C18.0865831,13.2144899 18.0865831,12.6144777 18.4525555,12.2485053 L18.4525555,12.2485053 L23.1360157,7.56504512 L18.3013427,7.56504512 L18.1876721,7.55852521 C17.7028859,7.50255928 17.3264448,7.09334546 17.3360737,6.60468076 C17.3465429,6.0916891 17.7654605,5.68082765 18.2782302,5.68082765 L18.2782302,5.68082765 L25.3605547,5.68082765 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</g>
</svg>`
const unfullScreenSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 54备份 2</title>
<g id="3WMS。1、2、3、4、5、6" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-54备份-2">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M26.7638125,1.45454545 L27.0177905,1.4628567 C27.4387521,1.49054436 27.8474996,1.58732758 28.2359531,1.75197014 C28.6866948,1.94029725 29.0896137,2.2117619 29.4389259,2.56107409 C29.7857111,2.90785927 30.0584977,3.31352185 30.2477734,3.76343947 C30.4456009,4.23019115 30.5454545,4.72555866 30.5454545,5.23618754 L30.5454545,5.23618754 L30.5454545,26.7638125 L30.5371433,27.0177905 C30.5094556,27.4387521 30.4126724,27.8474996 30.2480299,28.2359531 C30.0597028,28.6866948 29.7882381,29.0896137 29.4389259,29.4389259 C29.0921407,29.7857111 28.6864782,30.0584977 28.2365605,30.2477734 C27.7698088,30.4456009 27.2744413,30.5454545 26.7638125,30.5454545 L26.7638125,30.5454545 L5.23618754,30.5454545 L4.98220952,30.5371433 C4.56124792,30.5094556 4.15250044,30.4126724 3.7640469,30.2480299 C3.31330516,30.0597028 2.91038628,29.7882381 2.56107409,29.4389259 C2.21428891,29.0921407 1.94150232,28.6864782 1.75222663,28.2365605 C1.55439906,27.7698088 1.45454545,27.2744413 1.45454545,26.7638125 L1.45454545,26.7638125 L1.45454545,5.23618754 L1.4628567,4.98220952 C1.49054436,4.56124792 1.58732758,4.15250044 1.75197014,3.7640469 C1.94029725,3.31330516 2.2117619,2.91038628 2.56107409,2.56107409 C2.90785927,2.21428891 3.31352185,1.94150232 3.76343947,1.75222663 C4.23019115,1.55439906 4.72555866,1.45454545 5.23618754,1.45454545 L5.23618754,1.45454545 L26.7638125,1.45454545 Z M26.7638125,3.33876293 L5.23618754,3.33876293 L5.08796584,3.34447462 C4.10971624,3.42016081 3.33876293,4.23861746 3.33876293,5.23618754 L3.33876293,5.23618754 L3.33876293,26.7638125 L3.34447462,26.9120342 C3.42016081,27.8902838 4.23861746,28.6612371 5.23618754,28.6612371 L5.23618754,28.6612371 L26.7638125,28.6612371 L26.9120342,28.6555254 C27.8902838,28.5798392 28.6612371,27.7613825 28.6612371,26.7638125 L28.6612371,26.7638125 L28.6612371,5.23618754 L28.6555254,5.08796584 C28.5798392,4.10971624 27.7613825,3.33876293 26.7638125,3.33876293 L26.7638125,3.33876293 Z M13.6987866,17.269857 L13.8115418,17.2763362 C14.2922804,17.3319705 14.6640078,17.7391232 14.6640078,18.2350783 L14.6640078,18.2350783 L14.6640078,25.3537223 L14.6574584,25.4671616 C14.6012469,25.9511001 14.1903841,26.3286298 13.7036674,26.3189919 L13.7036674,26.3189919 L13.5959284,26.3105939 C13.1358108,26.2480197 12.7797903,25.8518025 12.7797903,25.3768348 L12.7797903,25.3768348 L12.7797903,20.5190494 L8.12934794,25.1694917 L8.04095127,25.2474504 C7.67245079,25.5332987 7.13521162,25.5073124 6.79739091,25.1694917 C6.43141847,24.8035193 6.43141847,24.2035071 6.79739091,23.8375347 L6.79739091,23.8375347 L11.4844789,19.1540745 L6.64947993,19.1540745 L6.53583534,19.1475529 C6.05108664,19.0915708 5.67369292,18.6822061 5.68093001,18.1924962 C5.69137836,17.6807185 6.11029591,17.269857 6.62306566,17.269857 L6.62306566,17.269857 L13.6987866,17.269857 Z M18.2962333,5.68100813 C18.807211,5.69148979 19.2201105,6.11166149 19.2201105,6.62316519 L19.2201105,6.62316519 L19.2201105,11.4776488 L23.8705528,6.82720649 L23.9589495,6.74924786 C24.32745,6.46339956 24.8646892,6.48938577 25.2025099,6.82720649 C25.5684823,7.19317893 25.5684823,7.79319108 25.2025099,8.15916352 L25.2025099,8.15916352 L20.5190497,12.8426237 L25.3537226,12.8426237 L25.4673933,12.8491436 C25.9521795,12.9051095 26.3286206,13.3143234 26.3189917,13.8029881 C26.3085224,14.3159797 25.8896049,14.7268412 25.3768351,14.7268412 L25.3768351,14.7268412 L18.2945107,14.7268412 L18.1826915,14.7203822 C17.7058457,14.6649267 17.335893,14.2592033 17.335893,13.7682235 L17.335893,13.7682235 L17.335893,6.64627767 L17.3424424,6.53283844 C17.3986538,6.04889994 17.8095166,5.67137018 18.2962333,5.68100813 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</svg>`
export default {
name: 'TechyHeader',
props: ['headTitle'],
data() {
return {
fullScreenSvg,
unfullScreenSvg,
isFullScreen: false
}
},
methods: {
handleClick(source) {
if (source === 'fullscreen') {
this.isFullScreen = !this.isFullScreen
this.$emit('toggle-full-screen', { full: this.isFullScreen })
}
}
}
}
</script>
<style scoped>
.techy-header {
background: transparent;
display: flex;
justify-content: center;
align-items: center;
position: relative;
color: white;
/* font-size: 24px; */
font-size: 2vh;
padding: calc(100vw / 1920 * 16) 0;
line-height: 1;
background: url(./header-new.png) no-repeat;
/** 背景图片好像左右不对称 : */
/* background-position: bottom left 40px; */
/* background-size: cover; */
background-size: 100% 100%;
background-position: bottom left calc(100vw / 1920 * 40);
height: calc(100vw / 1920 * 80);
}
.logo-img {
width: calc(100vw / 1920 * 24);
}
.fullscreen-btn {
width: 32px;
height: 32px;
cursor: pointer;
position: absolute;
/* right: 24px; */
/** techy-body 的内部 padding 值 */
right: calc(100vw / 1920 * 24);
bottom: 0;
}
</style>

188
src/views/QualityManager/components/TechyTable.vue Normal file
View File

@@ -0,0 +1,188 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: gtz
* @LastEditTime: 2022-06-14 11:12:39
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description:
-->
<template>
<div class="visual-base-table-container">
<el-table
v-loading="isLoading"
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
>
<el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
<el-table-column
v-for="(item, index) in renderTableHeadList"
:key="item.prop"
:show-overflow-tooltip="showOverflow"
v-bind="item"
>
<template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :key="index" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
</el-table>
</div>
</template>
<script>
import { isObject, isString } from 'lodash'
export default {
name: 'TechyTable',
filters: {
commonFilter: (source, filterType = a => a) => {
return filterType(source)
}
},
props: {
tableData: {
type: Array,
required: true,
validator: val => val.filter(item => !isObject(item)).length === 0
},
tableConfig: {
type: Array,
required: true,
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
},
isLoading: {
type: Boolean,
required: false
},
page: {
type: Number,
required: false,
default: 1
},
limit: {
type: Number,
required: false,
default: 5
},
beilv: {
type: Number,
default: 1
},
showOverflow: {
type: Boolean,
default: true
},
showIndex: {
type: Boolean,
default: true
}
},
data() {
return {
tableConfigBak: [],
selectedBox: new Array(100).fill(true)
}
},
computed: {
renderData() {
if (this.tableData.length && !this.tableData[0]._pageIndex) {
this.tableData.forEach((item, index) => {
item._pageIndex = (this.page - 1) * this.limit + index + 1
})
}
return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
},
renderTableHeadList() {
return this.tableConfig.filter((item, index) => {
return this.selectedBox[index]
})
}
},
beforeMount() {
this.selectedBox = new Array(100).fill(true)
},
methods: {
emitData(val) {
this.$emit('emitFun', val)
},
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(76,97,123,0.2)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
} else {
return {
background: 'rgba(79,114,136,0.29)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
}
},
setCellStyle(v) {
return {
lineHeight: 23 * this.beilv + 'px'
}
}
}
}
</script>
<style lang="scss">
@import "~@/styles/index.scss";
.visual-base-table-container {
.el-table {
border: 0;
}
.el-table::before,.el-table--border::after {
background-color: transparent;
}
.el-table th,td{
border-color: #0D1728 !important;
padding: 0;
}
.el-table tr {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
// new
.el-table {
width: 100%;
.el-table__header-wrapper table, .el-table__body-wrapper table {
width: 100% !important;
}
.el-table__body, .el-table__footer, .el-table__header {
table-layout: auto;
}
}
}
.setting {
text-align: right;
padding: 15px;
.setting-box {
width: 100px;
}
i {
color: #aaa;
@extend .pointer;
}
}
</style>

77
src/views/QualityManager/components/charts/FaultCategoryChart.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<div ref="chartContainer" class="chartContainer" style="width: 100%; height: calc(100% - 36px)" />
</template>
<script>
import echarts from 'echarts'
import 'echarts/theme/macarons'
export default {
name: 'FaultCategoryChart',
props: {},
data() {
return {
chart: null,
configs: null
}
},
mounted() {
window.addEventListener('resize', function() {
if (this.chart) {
this.chart.resize()
}
})
this.$nextTick(() => {
if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, 'macarons')
this.chart.setOption({
grid: {
left: 0,
right: 12,
bottom: 10,
width: '100%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: '#fff',
opacity: 0.3
}
}
}
],
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
})
this.chart.resize()
})
}
}
</script>
<style scoped>
.chartContainer >>> div {
width: 100% !important;
}
</style>

275
src/views/QualityManager/components/charts/PlFaultAnalysisPieChart.vue Normal file
View File

@@ -0,0 +1,275 @@
<template>
<div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: calc(100% - 36px)" />
</template>
<script>
import echarts from 'echarts'
// import 'echarts/theme/macarons'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'PlFaultAnalysisPieChart',
mixins: [resize],
props: {},
data() {
let totalRate = 0
const colors = [
{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
{ color: '#FB418C00', offset: 0.1 },
{ color: '#FB418C', offset: 1 } // 红
],
global: false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
{ color: '#DDB11200', offset: 0.1 },
{ color: '#DDB112', offset: 1 } // 黄
],
global: false
},
{
type: 'linear',
x: 1,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
{ color: '#1A99FF00', offset: 0.1 },
{ color: '#1A99FF', offset: 1 } // 兰
],
global: false
},
{
type: 'linear',
x: 1,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
{ color: '#A691FF00', offset: 0.1 },
{ color: '#A691FF', offset: 1 } // 紫 3
],
global: false
},
{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
{ color: '#49FBD600', offset: 0.1 },
{ color: '#49FBD6', offset: 1 } // 绿
],
global: false
}
]
return {
chart: null,
// default configs
configs: {
title: {
textAlign: 'center',
left: '59%',
top: '35%',
text: '33039',
textStyle: {
color: '#fff',
fontSize: 26,
fontWeight: 'normal'
},
subtext: '总数',
subtextStyle: {
color: '#fff',
fontSize: 12,
fontWeight: 'lighter'
}
},
legend: {
top: '20%',
bottom: '25%',
left: 0,
orient: 'vertical',
icon: 'none',
formatter: function(name) {
// test data - dynamic
const testData = [
{ name: 'A', value: 100 },
{ name: 'B', value: 200 },
{ name: 'C', value: 300 },
{ name: 'D', value: 400 },
{ name: 'E', value: 500 }
]
let pieLegendVale = {}
testData.filter((item, index) => {
if (item.name === name) {
pieLegendVale = item
}
})
const color = ['c', 'd', 'e', 'f', 'g']
const arr = [
'{' + color[testData.findIndex(item => item.name === name)] + '|}',
'{b|' + pieLegendVale.name + '}',
'{a|' + pieLegendVale.value + '}'
]
return arr.join(' ')
},
textStyle: {
rich: {
a: {
align: 'center',
fontSize: 10,
color: 'rgba(255, 255, 255, 0.7)',
lineHeight: 16
},
b: {
// verticalAlign: 'top',
align: 'center',
fontSize: 10,
color: 'rgba(255, 255, 255)'
},
c: {
// verticalAlign: 'top',
align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#FB418C'
// backgroundColor: '#1A99FF'
},
d: {
// verticalAlign: 'top',
align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#DDB112'
// backgroundColor: '#A691FF'
},
e: {
// verticalAlign: 'top',
align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#1A99FF'
// backgroundColor: '#FB418C'
},
f: {
// verticalAlign: 'top',
align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#A691FF'
// backgroundColor: '#49FBD6'
},
g: {
// verticalAlign: 'top',
align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#49FBD6'
// backgroundColor: '#DDB112'
}
}
}
},
series: [
{
name: 'PieForm',
type: 'pie',
center: ['60%', '45%'],
radius: ['50%', '70%'],
avoidLabelOverlap: true,
label: {
formatter: params => {
const colorMap = ['first', 'second', 'third', 'fourth', 'fifth']
return `{${colorMap[params.dataIndex]}|${params.percent} %}`
},
rich: {
first: { color: '#FB418C', fontSize: 12 },
second: { color: '#DDB112', fontSize: 12 },
third: { color: '#1A99FF', fontSize: 12 },
fourth: { color: '#A691FF', fontSize: 12 },
fifth: { color: '#49FBD6', fontSize: 12 }
}
},
itemStyle: {
color: params => {
/** 计算渐变方向的过程，只靠 dataIndex 不太行 */
const { dataIndex, percent } = params
const colorGradient = colors[dataIndex]
if (totalRate + percent < 25) {
/** 也许这里需要完善，但目前工作良好 */
(() => {})()
} else if (totalRate + percent < 50) {
colorGradient.x = 0
colorGradient.y = 0
colorGradient.x2 = 1
colorGradient.y2 = 1
} else if (totalRate + percent < 100) {
/** 也许这里需要完善，但目前工作良好 */
(() => {})()
}
totalRate += percent
return colorGradient
}
},
data: [
{ value: 100, name: 'A' },
{ value: 200, name: 'B' },
{ value: 300, name: 'C' },
{ value: 400, name: 'D' },
{ value: 500, name: 'E' }
]
}
]
}
}
},
mounted() {
window.addEventListener('resize', function() {
if (this.chart) {
this.chart.resize()
}
})
this.$nextTick(() => {
// if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
this.chart.setOption(this.configs)
this.chart.resize()
})
},
methods: {}
}
</script>
<style scoped>
.chartContainer >>> div {
width: 100% !important;
}
</style>

301
src/views/QualityManager/components/charts/newBar.vue Normal file
View File

@@ -0,0 +1,301 @@
<template>
<div
ref="chartContainer"
class="chartContainer"
:class="bindClass"
style="position: relative; width: 100%; height: calc(100% - 36px)"
/>
</template>
<script>
import echarts from 'echarts' // echarts theme
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
chartName: {
type: String,
default: ''
},
xlabelFontSize: {
type: Number,
default: 12
},
xlabelRotate: {
type: Number,
default: 0
},
nameList: {
type: Array,
default: () => []
},
dataList: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
series: []
}
},
computed: {
bindClass() {
return {
'fault-category-chart': this.chartName === 'fault-category',
'process-fault-chart': this.chartName === 'process-fault'
}
}
},
mounted() {
if (this.dataList.length > 1) {
this.series = [
{
// 柱体
name: this.dataList[0].name,
type: 'bar',
barWidth: 30,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor },
{ offset: 1, color: this.dataList[0].bottomColor }
])
},
data: this.dataList[0].data
},
{
// 柱顶
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: 26,
symbol: 'diamond',
symbolPosition: 'end',
symbolOffset: [0, '-50%'],
symbolSize: [30, 12],
zlevel: 2,
itemStyle: { color: this.dataList[0].topColor },
data: this.dataList[0].data
},
{
// 柱底
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: 26,
symbol: 'diamond',
symbolOffset: [0, '50%'],
symbolSize: [30, 15],
itemStyle: { color: this.dataList[0].bottomColor },
data: this.dataList[0].data
},
{
// 柱体
name: this.dataList[1].name,
type: 'bar',
barWidth: 30,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor },
{ offset: 1, color: this.dataList[1].bottomColor }
])
},
data: this.dataList[1].data
},
{
// 柱顶
name: this.dataList[1].name,
type: 'pictorialBar',
barWidth: 26,
symbol: 'diamond',
symbolPosition: 'end',
symbolOffset: [0, '-50%'],
symbolSize: [30, 12],
zlevel: 2,
itemStyle: { color: this.dataList[1].topColor },
data: this.dataList[1].data
},
{
// 柱底
name: this.dataList[1].name,
type: 'pictorialBar',
barWidth: 26,
symbol: 'diamond',
symbolOffset: [0, '50%'],
symbolSize: [30, 15],
itemStyle: { color: this.dataList[1].topColor },
data: this.dataList[1].data
}
]
} else {
const barWidth = 400 / 2 / this.dataList[0].data.length
this.series = [
{
// 柱体
name: this.dataList[0].name,
type: 'bar',
// barWidth: 26,
barWidth: barWidth,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor },
{ offset: 1, color: this.dataList[0].bottomColor }
])
// borderWidth: 1,
// borderColor: this.dataList[0].bottomColor + '66' // 边框颜色+透明度
},
data: this.dataList[0].data
// backgroundStyle: {
// // borderColor: this.dataList[0].bottomColor,
// borderColor: '#ff0000',
// borderWidth: 1
// }
},
{
// 柱顶
name: this.dataList[0].name,
type: 'pictorialBar',
// barWidth: 26,
barWidth: barWidth,
symbol: 'circle',
symbolPosition: 'end',
symbolOffset: [0, '-50%'],
symbolSize: [barWidth, 6],
zlevel: 2,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
{ offset: 1, color: '#2c6e7d' }
])
},
label: {
color: this.chartName === 'process-fault' ? 'rgba(119, 255, 242, 1)' : '#31a2ff',
show: true,
offset: [0, 10],
position: 'top',
vertialAlign: 'bottom'
},
data: this.dataList[0].data
},
{
// 柱底
name: this.dataList[0].name,
type: 'pictorialBar',
// barWidth: 26,
barWidth: barWidth,
symbol: 'circle',
symbolOffset: [0, '50%'],
symbolSize: [barWidth, 6],
itemStyle: { color: '#2c6e7d' },
data: this.dataList[0].data
}
]
}
this.$nextTick(() => {
console.log('on Mounted(): ')
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chartContainer)
this.chart.setOption({
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontSize: this.xlabelFontSize,
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
},
margin: 20,
rotate: this.xlabelRotate
},
data: this.nameList
},
yAxis: {
axisLine: {
lineStyle: {
type: 'solid',
color: this.dataList[0].bottomColor,
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
},
splitLine: {
lineStyle: {
type: 'dotted',
color: 'rgba(119, 255, 242, 0.2)'
}
},
type: 'value'
},
series: this.series
})
}
}
}
</script>
<style scoped>
.chartContainer >>> div {
width: 100% !important;
height: 100% !important;
/* position: relative !important; */
}
.fault-category-chart >>> div::before {
/* .fault-category-chart::before { */
content: '';
position: absolute;
/* bottom: calc(100vh/1920 * 80);
left: calc(100vw/1920 * 48); */
/* bottom: calc(10% + 100vh/1920 * 28); */
bottom: 25px;
left: 9%;
height: 52px;
width: 90%;
background: linear-gradient(to top, #31a2ff6d, transparent);
transform: skew(-45deg);
z-index: 0;
}
.process-fault-chart >>> div::before {
/* .process-fault-chart::before { */
content: '';
position: absolute;
bottom: 26px;
left: 10%;
height: 48px;
width: 90%;
background: linear-gradient(to top, #49fbd789, transparent);
transform: skew(-45deg);
z-index: 0;
}
</style>

274
src/views/QualityManager/components/charts/newLineStack.vue Normal file
View File

@@ -0,0 +1,274 @@
<template>
<div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: calc(100% - 36px)" />
</template>
<script>
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'PlFaultAnalysisPieChart',
mixins: [resize],
props: {},
data() {
return {
chart: null,
configs: {
color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
// legend: {
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
// },
grid: {
top: '15%',
left: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#ffffff66'
}
},
axisTick: { show: false },
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,1)' //
},
margin: 20
},
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
}
],
yAxis: [
{
name: '成品率',
type: 'value',
nameTextStyle: {
color: 'rgba(255,255,255,0.7)',
fontSize: 10,
align: 'right'
},
axisLine: {
lineStyle: {
type: 'solid',
color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
},
splitLine: {
lineStyle: {
type: 'dotted',
color: 'rgba(119, 255, 242, 0.2)'
}
}
}
],
series: [
{
name: 'A1下片机',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FB418C' // 0% 处的颜色
},
{
offset: 1,
color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
emphasis: {
focus: 'series'
},
data: [11, 199, 140, 63, 185, 5, 78]
},
{
name: '磨边机',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#DDB112' // 0% 处的颜色
},
{
offset: 1,
color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
emphasis: {
focus: 'series'
},
data: [151, 57, 31, 7, 77, 88, 119]
},
{
name: '镀膜机',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#1A99FF' // 0% 处的颜色
},
{
offset: 1,
color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
emphasis: {
focus: 'series'
},
data: [58, 3, 67, 100, 42, 96, 124]
},
{
name: '包装纸',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#A691FF' // 0% 处的颜色
},
{
offset: 1,
color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
emphasis: {
focus: 'series'
},
data: [92, 88, 122, 169, 108, 130, 147]
},
{
name: '丝印',
type: 'line',
symbol: 'none',
label: {
show: true,
position: 'top'
},
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#49FBD6' // 0% 处的颜色
},
{
offset: 1,
color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
emphasis: {
focus: 'series'
},
data: [44, 40, 118, 197, 123, 95, 96]
}
]
}
}
},
mounted() {
window.addEventListener('resize', function() {
if (this.chart) {
this.chart.resize()
}
})
this.$nextTick(() => {
// if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
this.chart.setOption(this.configs)
this.chart.resize()
})
},
methods: {}
}
</script>
<style scoped>
.chartContainer >>> div {
width: 100% !important;
}
</style>

BIN
src/views/QualityManager/components/header-new.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
src/views/QualityManager/components/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/views/QualityManager/components/logo2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB