projects/mesxc-zhp #162
4
.env.dev
4
.env.dev
@ -1,7 +1,7 @@
|
|||||||
###
|
###
|
||||||
# @Author: Do not edit
|
# @Author: Do not edit
|
||||||
# @Date: 2023-08-29 09:40:39
|
# @Date: 2023-08-29 09:40:39
|
||||||
# @LastEditTime: 2023-12-18 13:35:00
|
# @LastEditTime: 2023-12-29 08:57:36
|
||||||
# @LastEditors: zhp
|
# @LastEditors: zhp
|
||||||
# @Description:
|
# @Description:
|
||||||
###
|
###
|
||||||
@ -19,7 +19,7 @@ VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
|||||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.49:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.56:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.104:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.62:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
|
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
|
||||||
|
|
||||||
|
|||||||
14
src/assets/icons/svg/energyMonitoring.svg
Normal file
14
src/assets/icons/svg/energyMonitoring.svg
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<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>
|
||||||
|
<g id="mes-看板/驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="冷端看板" transform="translate(-685.000000, -149.000000)" fill-rule="nonzero">
|
||||||
|
<g id="编组-26备份-4" transform="translate(661.000000, 127.000000)">
|
||||||
|
<g id="能源监控" transform="translate(24.000000, 22.000000)">
|
||||||
|
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
|
||||||
|
<path d="M5.56606392,22 L5.56606392,8.69394435 C5.56606392,8.16339333 5.15113542,7.75513729 4.65294365,7.75513729 L1.91312026,7.75513729 C1.41539106,7.75513729 1,8.20385524 1,8.69394435 L1,22 L5.56606392,22 L5.56606392,22 Z M11.3773759,22 L11.3773759,2.97972358 C11.3773759,2.44871795 10.9624474,2 10.4642557,2 L7.72443229,2 C7.22624054,2 6.81131201,2.44871795 6.81131201,2.97972358 L6.81131201,22 L11.3773759,22 Z M17.188688,22 L17.188688,13.591653 C17.188688,13.061102 16.7737595,12.6123841 16.2755677,12.6123841 L13.5362069,12.6123841 C13.0380151,12.6123841 12.622624,13.061102 12.622624,13.591653 L12.622624,22 L17.188688,22 Z M23,22 L23,8.69394435 C23,8.16339333 22.5850715,7.75513729 22.0868797,7.75513729 L19.3470564,7.75513729 C18.8493272,7.75513729 18.4339361,8.20385524 18.4339361,8.69394435 L18.4339361,22 L23,22 L23,22 Z" id="形状" fill="#59D0E2"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
14
src/assets/icons/svg/eqAlarm.svg
Normal file
14
src/assets/icons/svg/eqAlarm.svg
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<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>
|
||||||
|
<g id="新增看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="深加工看板" transform="translate(-64.000000, -149.000000)" fill-rule="nonzero">
|
||||||
|
<g id="编组-26" transform="translate(40.000000, 127.000000)">
|
||||||
|
<g id="报警" transform="translate(24.000000, 22.000000)">
|
||||||
|
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
|
||||||
|
<path d="M20.7657338,18.1387399 L13.9284614,22.3462921 C13.4025174,22.6969215 12.8765734,22.3462921 12.8765734,21.6450334 L12.8765734,11.8274116 C12.8765734,11.6520969 13.0518881,11.3014676 13.2272027,11.1261529 L20.0644751,6.91860067 C20.5904191,6.56797132 21.1163631,6.91860067 21.1163631,7.61985938 L21.1163631,17.6127959 C21.1163631,17.7881106 20.9410485,18.1387399 20.7657338,18.1387399 Z M3.23426622,18.1387399 L10.0715386,22.3462921 C10.5974826,22.6969215 11.1234266,22.3462921 11.1234266,21.6450334 L11.1234266,11.8274116 C11.1234266,11.6520969 10.9481119,11.3014676 10.7727973,11.1261529 L3.93552492,6.91860067 C3.58489557,6.743286 2.88363686,7.09391535 2.88363686,7.61985938 L2.88363686,17.6127959 C2.88363686,17.7881106 3.05895154,18.1387399 3.23426622,18.1387399 Z M11.8246853,1.48384573 L3.93552492,4.46419521 C3.58489557,4.63950989 3.58489557,5.16545392 3.93552492,5.34076859 L11.8246853,10.2495795 C12,10.2495795 12.1753147,10.2495795 12.1753147,10.2495795 L20.2397898,5.34076859 C20.5904191,5.16545392 20.5904191,4.63950989 20.2397898,4.46419521 L12.1753147,1.48384573 C12,1.48384573 12,1.48384573 11.8246853,1.48384573 Z" id="形状" fill="#59D0E2"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
17
src/assets/icons/svg/eqMonitoring.svg
Normal file
17
src/assets/icons/svg/eqMonitoring.svg
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="19.7127155px" height="19.7127155px" viewBox="0 0 19.7127155 19.7127155" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>设备监控</title>
|
||||||
|
<g id="mes-看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="深加工看板" transform="translate(-1309.143642, -151.143642)">
|
||||||
|
<g id="编组-26备份-4" transform="translate(1283.000000, 127.000000)">
|
||||||
|
<g id="设备监控" transform="translate(24.000000, 22.000000)">
|
||||||
|
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
|
||||||
|
<g id="异常" transform="translate(2.143642, 2.143642)" fill-rule="nonzero">
|
||||||
|
<rect id="矩形" fill="#000000" opacity="0" x="0.856357767" y="0.856357767" width="17" height="17"></rect>
|
||||||
|
<path d="M9.85640228,0.000116285784 C7.94997171,-0.0106702658 6.11587607,0.729338602 4.75082135,2.0602014 C3.41793975,3.37801839 2.66584368,5.173105 2.66128994,7.04744966 L2.66128994,16.6671387 L16.9726637,16.6671387 L16.9726637,7.04743041 C16.9710126,5.1705386 16.2144177,3.37320892 14.8732566,2.06018215 C13.5319151,0.748116476 11.7327241,0.00936885323 9.85638303,0.000116285784 L9.85640228,0.000116285784 Z M9.26502002,14.3607842 L9.05803623,9.69875531 L5.52947465,9.69875531 L10.1619113,3.85402838 L10.5561661,7.61911494 L13.9073323,7.73739052 L9.22555602,14.3607842 L9.26502002,14.3607842 Z M4.37471863e-05,18.6383791 C-0.00254075641,18.3517467 0.109484124,18.0759491 0.311244358,17.8723357 C0.513004592,17.6687223 0.787767718,17.5541863 1.07441422,17.5541863 L18.6383903,17.5541863 C18.9225391,17.5577245 19.1943787,17.6707029 19.3973309,17.8696071 C19.5968337,18.0761491 19.7096866,18.3512359 19.7127155,18.6383791 C19.7127155,19.2317112 19.2317269,19.7127155 18.6383903,19.7127155 L1.07441422,19.7127155 C0.481077682,19.7127155 4.37471863e-05,19.2317112 4.37471863e-05,18.6383791 L4.37471863e-05,18.6383791 Z" id="形状" fill="#59D0E2"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
14
src/assets/icons/svg/productLine.svg
Normal file
14
src/assets/icons/svg/productLine.svg
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<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>
|
||||||
|
<g id="新增看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="周转看板" transform="translate(-64.000000, -618.000000)" fill-rule="nonzero">
|
||||||
|
<g id="编组-26备份" transform="translate(40.000000, 596.000000)">
|
||||||
|
<g id="库存管理" transform="translate(24.000000, 22.000000)">
|
||||||
|
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
|
||||||
|
<path d="M17.5599807,5.95300863 L17.5599807,7.05052701 L6.39641163,7.05052701 L6.39641163,5.95300863 L5.15061552,5.95300863 C4.59833077,5.95300863 4.15061552,6.40072388 4.15061552,6.95300863 L4.15061552,21.465846 C4.15061552,22.0181307 4.59833077,22.465846 5.15061552,22.465846 L18.8493845,22.465846 C19.4016692,22.465846 19.8493845,22.0181307 19.8493845,21.465846 L19.8493845,6.95300863 C19.8493845,6.40072388 19.4016692,5.95300863 18.8493845,5.95300863 L17.5599807,5.95300863 L17.5599807,5.95300863 Z M6.35280394,9.22062017 L17.516373,9.22062017 L17.516373,11.3240808 L6.35280394,11.3240808 L6.35280394,9.22062017 Z M14.2456217,20.2200499 L6.3962372,20.2200499 L6.3962372,18.0396653 L14.2456217,18.0396653 L14.2456217,20.2200499 Z M17.5709698,15.8758516 L6.40740077,15.8758516 L6.40740077,13.6570923 L17.5709698,13.6570923 L17.5709698,15.8758516 Z M10.7650186,1.53415402 L13.234807,1.53415402 C13.7870917,1.53415402 14.234807,1.98186927 14.234807,2.53415402 L14.234807,4.82653474 L14.234807,4.82653474 L9.76501859,4.82653474 L9.76501859,2.53415402 C9.76501859,1.98186927 10.2127338,1.53415402 10.7650186,1.53415402 Z M16.4807775,4.75814629 L16.4807775,5.95300863 L16.4807775,5.95300863 L7.51922248,5.95300863 L7.51922248,4.75814629 C7.51922248,4.20586154 7.96693773,3.75814629 8.51922248,3.75814629 L15.4807775,3.75814629 C16.0330623,3.75814629 16.4807775,4.20586154 16.4807775,4.75814629 Z" id="形状" fill="#59D0E2"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
16
src/assets/icons/svg/scrap.svg
Normal file
16
src/assets/icons/svg/scrap.svg
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="23.9999981px" height="23.9999981px" viewBox="0 0 23.9999981 23.9999981" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>缺陷</title>
|
||||||
|
<g id="mes-看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="深加工看板" transform="translate(-686.000000, -149.000000)" fill-rule="nonzero">
|
||||||
|
<g id="编组-26备份-2" transform="translate(662.000000, 127.000000)">
|
||||||
|
<g id="编组-24" transform="translate(24.000000, 22.000000)">
|
||||||
|
<g id="缺陷" transform="translate(0.000000, 0.000000)">
|
||||||
|
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="23.9999981" height="23.9999981"></rect>
|
||||||
|
<path d="M20.2321175,10.4550863 L18.9032068,10.4550863 L18.9032068,6.47221732 C18.9010796,5.9702116 18.4935224,5.56438134 17.9915122,5.56438585 L13.108538,5.56438585 L13.108538,3.98437284 C13.1108007,3.21607553 12.8028771,2.47938539 12.2545397,1.94122931 C11.7062023,1.40307324 10.9638711,1.1090093 10.1957511,1.12566955 C8.60430329,1.19855778 7.3587693,2.52279309 7.38340516,4.11571867 L7.38340516,5.56438585 L2.5004309,5.56438585 C1.99842068,5.56438134 1.59086349,5.9702116 1.58870356,6.47221732 L1.58870356,9.53566556 C1.58667583,9.77879788 1.68181868,10.0126808 1.85301841,10.1853314 C2.02421815,10.3579819 2.25728984,10.4550951 2.5004309,10.4550863 L3.01036175,10.4550863 C4.60185595,10.4303757 5.92550348,11.6736467 6.00041086,13.2635692 C6.0149973,14.0317095 5.71894789,14.773225 5.17934105,15.3201042 C4.63973421,15.8669834 3.90224815,16.1729324 3.13398136,16.1686298 L2.5004309,16.1686298 C1.9969159,16.1686298 1.58870356,16.5768093 1.58870356,17.0803243 L1.58870356,21.9632986 C1.58870356,22.4668136 1.9969159,22.8750014 2.5004309,22.8750014 L6.47171061,22.8750014 C6.71382208,22.8760256 6.94631552,22.780304 7.11751574,22.6091037 C7.28871596,22.4379035 7.38443764,22.2054101 7.38340516,21.9632986 L7.38340516,21.5113144 C7.3587693,19.9183889 8.60430329,18.5941536 10.1957511,18.5212653 C10.9638711,18.5046051 11.7062023,18.798669 12.2545397,19.3368251 C12.8028771,19.8749812 13.1108007,20.6116713 13.108538,21.3799686 L13.108538,21.9632986 C13.1075105,22.2047391 13.202703,22.4366433 13.3730659,22.6077311 C13.5434288,22.778819 13.7749267,22.8750014 14.0163694,22.8750014 L17.9915122,22.8750014 C18.4950272,22.8750014 18.9032068,22.4668136 18.9032068,21.9632986 L18.9032068,16.1686298 L20.3596002,16.1686298 C21.127882,16.1719118 21.8649697,15.8649752 22.403851,15.3173671 C22.9427323,14.769759 23.2377892,14.027836 23.2221666,13.259706 C23.1452437,11.6713093 21.8221825,10.4302984 20.2321175,10.4550863 Z" id="路径" fill="#59D0E2"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Date: 2020-12-14 09:07:03
|
* @Date: 2020-12-14 09:07:03
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2023-11-14 10:11:09
|
* @LastEditTime: 2023-12-28 09:00:44
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -16,9 +16,8 @@
|
|||||||
style="width: 100%; background: transparent"
|
style="width: 100%; background: transparent"
|
||||||
>
|
>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
v-if="page && limit && showIndex"
|
|
||||||
prop="_pageIndex"
|
prop="_pageIndex"
|
||||||
:label="'tableHeader.index' | i18nFilter"
|
label="序号"
|
||||||
:width="70"
|
:width="70"
|
||||||
align="center"
|
align="center"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-09-21 09:06:28
|
* @Date: 2023-09-21 09:06:28
|
||||||
* @LastEditTime: 2023-10-16 14:20:45
|
* @LastEditTime: 2023-12-27 18:28:45
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -60,98 +60,17 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
series: []
|
nameList: [],
|
||||||
|
series: [{
|
||||||
|
type: 'bar',
|
||||||
|
data: [],
|
||||||
|
barWidth: 6
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log('mounted')
|
console.log('mounted')
|
||||||
console.log('borderRadius: ', this.borderRadius)
|
console.log('borderRadius: ', this.borderRadius)
|
||||||
|
|
||||||
this.series = [
|
|
||||||
{
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[0].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
|
||||||
]),
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[0].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[1].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[1].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
|
||||||
]),
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[1].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[2].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[2].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[2].bottomColor }
|
|
||||||
]),
|
|
||||||
// borderRadius: [5, 5, 0, 0]
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[2].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[3].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[3].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[3].bottomColor }
|
|
||||||
]),
|
|
||||||
// borderRadius: [5, 5, 0, 0]
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[3].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[4].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[4].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[4].bottomColor }
|
|
||||||
]),
|
|
||||||
// borderRadius: [5, 5, 0, 0]
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[4].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[5].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[5].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[5].bottomColor }
|
|
||||||
]),
|
|
||||||
// borderRadius: [5, 5, 0, 0]
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[5].data,
|
|
||||||
barWidth: 6
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart()
|
this.initChart()
|
||||||
})
|
})
|
||||||
@ -164,8 +83,50 @@ export default {
|
|||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart() {
|
initChart(nameList, passRateList, outputNumList) {
|
||||||
console.log(1)
|
let series= [
|
||||||
|
{
|
||||||
|
name: '产线产量',
|
||||||
|
type: 'bar',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#9DD5FF' },
|
||||||
|
{ offset: 1, color: '#1295FF' }
|
||||||
|
])
|
||||||
|
// barBorderRadius: this.borderRadius
|
||||||
|
},
|
||||||
|
barWidth: 12,
|
||||||
|
data: outputNumList
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '产线良品率',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 0,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(255, 209, 96, 0.18)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(255, 234, 153, 0)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 209, 96, 1)' //改变折线颜色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: passRateList
|
||||||
|
}
|
||||||
|
]
|
||||||
const colors = ['#5470C6', '#91CC75', '#EE6666']
|
const colors = ['#5470C6', '#91CC75', '#EE6666']
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
this.chart = echarts.init(document.getElementById(this.id))
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
@ -177,7 +138,12 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
right: '20%'
|
left: "3%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "3%",
|
||||||
|
width: 'auto',
|
||||||
|
height: "auto",
|
||||||
|
containLabel: true
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['产线产量', '产线良品率'],
|
data: ['产线产量', '产线良品率'],
|
||||||
@ -205,7 +171,7 @@ export default {
|
|||||||
color: '#213259'
|
color: '#213259'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线', '钢七线', '钢八线']
|
data: nameList
|
||||||
},
|
},
|
||||||
// yAxis: {
|
// yAxis: {
|
||||||
|
|
||||||
@ -236,8 +202,7 @@ export default {
|
|||||||
axisLabel: {
|
axisLabel: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#ced1d5', // 坐标值得具体的颜色
|
color: '#ced1d5', // 坐标值得具体的颜色
|
||||||
formatter: '{value} 片'
|
formatter: '{value}%'
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
@ -295,29 +260,7 @@ export default {
|
|||||||
// },
|
// },
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: series
|
||||||
{
|
|
||||||
name: '产线产量',
|
|
||||||
type: 'bar',
|
|
||||||
yAxisIndex: 1,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: '#9DD5FF' },
|
|
||||||
{ offset: 1, color: '#1295FF' }
|
|
||||||
])
|
|
||||||
// barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
2032, 3032, 1802, 2932, 2322, 2613, 2873, 2561
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '产线良品率',
|
|
||||||
type: 'line',
|
|
||||||
yAxisIndex: 0,
|
|
||||||
data: [98, 97, 94, 97.6, 98.2, 98.2, 97.4, 98.5]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -41,113 +41,39 @@ export default {
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
nameList: {
|
// nameList: {
|
||||||
type: Array,
|
// type: Array,
|
||||||
default: () => []
|
// default: () => []
|
||||||
},
|
// },
|
||||||
dataList: {
|
// dataList: {
|
||||||
type: Array,
|
// type: Array,
|
||||||
default: () => []
|
// default: () => []
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
series: []
|
nameList: [],
|
||||||
|
series: [{
|
||||||
|
type: 'bar',
|
||||||
|
data: [],
|
||||||
|
barWidth: 6
|
||||||
|
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log('mounted')
|
console.log('mounted')
|
||||||
console.log('borderRadius: ', this.borderRadius)
|
console.log('borderRadius: ', this.borderRadius)
|
||||||
|
// console.log('33333', this.dataList)
|
||||||
this.series = [
|
// let arr = []
|
||||||
{
|
// this.dataList.forEach(ele => {
|
||||||
name: this.dataList[0].name,
|
// console.log(ele);
|
||||||
type: 'bar',
|
// this.series = []
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[0].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
|
||||||
]),
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[0].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[1].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[1].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
|
||||||
]),
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[1].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[2].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[2].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[2].bottomColor }
|
|
||||||
]),
|
|
||||||
// borderRadius: [5, 5, 0, 0]
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[2].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[3].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[3].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[3].bottomColor }
|
|
||||||
]),
|
|
||||||
// borderRadius: [5, 5, 0, 0]
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[3].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[4].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[4].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[4].bottomColor }
|
|
||||||
]),
|
|
||||||
// borderRadius: [5, 5, 0, 0]
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[4].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[5].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[5].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[5].bottomColor }
|
|
||||||
]),
|
|
||||||
// borderRadius: [5, 5, 0, 0]
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[5].data,
|
|
||||||
barWidth: 6
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initChart()
|
this.initChart()
|
||||||
})
|
// this.$nextTick(() => {
|
||||||
|
// // this.initChart()
|
||||||
|
// })
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (!this.chart) {
|
if (!this.chart) {
|
||||||
@ -157,9 +83,20 @@ export default {
|
|||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart() {
|
initChart(nameList,dataList) {
|
||||||
console.log(1)
|
// console.log(1)
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
this.chart = echarts.init(document.getElementById(this.id))
|
||||||
|
if (dataList.length !== 0) {
|
||||||
|
// this.$set(this.series, "data", dataList);
|
||||||
|
this.series = [{
|
||||||
|
type: 'bar',
|
||||||
|
data: dataList,
|
||||||
|
barWidth: 6
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
if (nameList.length !== 0) {
|
||||||
|
this.nameList = nameList
|
||||||
|
}
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
@ -216,19 +153,19 @@ export default {
|
|||||||
},
|
},
|
||||||
type: 'value'
|
type: 'value'
|
||||||
},
|
},
|
||||||
legend: {
|
// legend: {
|
||||||
itemHeight: 10,
|
// itemHeight: 10,
|
||||||
itemWidth: 10,
|
// itemWidth: 10,
|
||||||
x: 'center', // 可设定图例在左、右、居中
|
// x: 'center', // 可设定图例在左、右、居中
|
||||||
y: 'top', // 可设定图例在上、下、居中
|
// y: 'top', // 可设定图例在上、下、居中
|
||||||
show: this.showLegend,
|
// show: this.showLegend,
|
||||||
data: this.dataList,
|
// data: this.dataList,
|
||||||
right: '1%',
|
// right: '1%',
|
||||||
textStyle: {
|
// textStyle: {
|
||||||
fontSize: 12 * this.beilv,
|
// fontSize: 12 * this.beilv,
|
||||||
color: '#ced1d5'
|
// color: '#ced1d5'
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
series: this.series
|
series: this.series
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
235
src/views/OperationalOverview/components/pileBarChart.vue
Normal file
235
src/views/OperationalOverview/components/pileBarChart.vue
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zhp
|
||||||
|
* @Date: 2023-12-27 13:54:52
|
||||||
|
* @LastEditTime: 2023-12-27 19:47:27
|
||||||
|
* @LastEditors: zhp
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import 'echarts/theme/macarons' // echarts theme
|
||||||
|
import resize from './mixins/resize'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'OverviewBar',
|
||||||
|
mixins: [resize],
|
||||||
|
props: {
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
default: 'linearBarChart'
|
||||||
|
},
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [9, 9, 0, 0]
|
||||||
|
},
|
||||||
|
beilv: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
|
default: 200
|
||||||
|
},
|
||||||
|
showLegend: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// nameList: {
|
||||||
|
// type: Array,
|
||||||
|
// default: () => []
|
||||||
|
// },
|
||||||
|
// dataList: {
|
||||||
|
// type: Array,
|
||||||
|
// default: () => []
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
nameList: [],
|
||||||
|
series: [{
|
||||||
|
type: 'bar',
|
||||||
|
data: [],
|
||||||
|
barWidth: 6
|
||||||
|
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
console.log('mounted')
|
||||||
|
// console.log('borderRadius: ', this.borderRadius)
|
||||||
|
// console.log('33333', this.dataList)
|
||||||
|
// let arr = []
|
||||||
|
// this.dataList.forEach(ele => {
|
||||||
|
// console.log(ele);
|
||||||
|
// this.series = []
|
||||||
|
this.initChart()
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// // this.initChart()
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
|
||||||
|
// console.log(1)
|
||||||
|
this.chart = echarts.init(document.getElementById(this.id))
|
||||||
|
let series = [{
|
||||||
|
name: '成品面积',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
// label: {
|
||||||
|
// show: true
|
||||||
|
// },
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: passRateList,
|
||||||
|
itemStyle: {
|
||||||
|
normal: { color: '#2359ec' }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '废片面积',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
// label: {
|
||||||
|
// show: true
|
||||||
|
// },
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
barWidth: 12,
|
||||||
|
data: wasteList,
|
||||||
|
itemStyle: {
|
||||||
|
normal: { color: '#745fe4' }
|
||||||
|
}
|
||||||
|
},]
|
||||||
|
// for (i = 0; i < 5; i++) {
|
||||||
|
// series.push({
|
||||||
|
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
const yAxisDataLeft = topNameList;
|
||||||
|
// const yAxisDataRight = ['服装', '矿产', '服务业', '建筑业', '金融业'];
|
||||||
|
const yAxisDataRight = nameWasteList
|
||||||
|
this.chart.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
// Use axis to trigger tooltip
|
||||||
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// legend: {},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
width: 'auto',
|
||||||
|
height: 'auto',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||||||
|
axisTick: {
|
||||||
|
show: false // 不显示坐标轴刻度线
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false, // 不显示坐标轴线
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false, // 不显示坐标轴上的文字
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false // 不显示网格线
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
inverse: true,
|
||||||
|
data: yAxisDataLeft,
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
inside: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: 12,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
formatter: '{value}\n{a|占位}\n{a|占位}',
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
color: 'transparent',
|
||||||
|
lineHeight: 24,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//offset: 30,
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
inverse: false,
|
||||||
|
data: yAxisDataRight,
|
||||||
|
axisLabel: {
|
||||||
|
inside: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: 12,
|
||||||
|
align: 'right',
|
||||||
|
},
|
||||||
|
formatter: '{value}\n{a|占位}\n{a|占位}',
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
color: 'transparent',
|
||||||
|
lineHeight: 24,
|
||||||
|
fontFamily: 'digital'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
offset: 0,
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: series
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-07-19 15:18:30
|
* @Date: 2021-07-19 15:18:30
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @LastEditTime: 2023-12-19 14:25:07
|
* @LastEditTime: 2023-12-28 10:22:06
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -29,26 +29,21 @@
|
|||||||
<el-row class="container-main flex-col" type="flex">
|
<el-row class="container-main flex-col" type="flex">
|
||||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
|
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||||
<base-container :title="'设备报警'" :title-icon="'5_1'">
|
<base-container :title="'设备报警'" :title-icon="'eqAlarm'">
|
||||||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityYearTableProps"
|
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityYearTableProps"
|
||||||
:table-data="qualityYearList" />
|
:table-data="equipmentList" />
|
||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||||
<base-container :title="'各工序缺陷汇总'" :title-icon="'5_2'">
|
<base-container :title="'各工序缺陷汇总'" :title-icon="'scrap'">
|
||||||
<div class="visual-select">
|
|
||||||
<el-select class="coldSelect" v-model="modelMonth" size="mini" placeholder="">
|
|
||||||
<el-option key="1" value="钢1线" label="钢1线" default />
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityMonthTableProps"
|
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityMonthTableProps"
|
||||||
:table-data="qualityMonthList" />
|
:table-data="qualityMonthList" />
|
||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||||
<base-container :title="'设备监控'" :title-icon="'5_3'">
|
<base-container :title="'工单监控'" :title-icon="'eqMonitoring'">
|
||||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||||
<top-radio-group />
|
<top-radio-group />
|
||||||
</div> -->
|
</div> -->
|
||||||
@ -59,13 +54,15 @@
|
|||||||
<!-- <el-row style="margin-bottom: 1em">
|
<!-- <el-row style="margin-bottom: 1em">
|
||||||
<p class="now-team-title">加工工单进度</p>
|
<p class="now-team-title">加工工单进度</p>
|
||||||
</el-row> -->
|
</el-row> -->
|
||||||
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
|
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
|
||||||
<el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
|
<!-- <el-col :span="12"> -->
|
||||||
<p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
|
<el-progress :percentage="op.progressRate * 100" class="custom-progress-bar" />
|
||||||
|
<!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD">
|
||||||
<i class="el-icon-check" />
|
<i class="el-icon-check" />
|
||||||
{{ op.name }}
|
{{ op.name }}
|
||||||
</p>
|
</p> -->
|
||||||
<p v-else class="now-secondary-title">{{ op.name }}</p>
|
<p class="now-secondary-title">{{ op.name }}</p>
|
||||||
|
<!-- </el-col> -->
|
||||||
</el-row>
|
</el-row>
|
||||||
<!-- <el-row>
|
<!-- <el-row>
|
||||||
<el-progress :percentage="100" class="custom-progress-bar" />
|
<el-progress :percentage="100" class="custom-progress-bar" />
|
||||||
@ -98,13 +95,14 @@
|
|||||||
|
|
||||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
|
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||||
<base-container :height="256" :title="'能源监控'" :title-icon="'5_5'">
|
<base-container :height="256" :title="'能源监控'" :title-icon="'energyMonitoring'">
|
||||||
<div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||||
<top-radio-group />
|
<top-radio-group />
|
||||||
</div>
|
</div> -->
|
||||||
<el-row :gutter="9">
|
<el-row :gutter="9">
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
||||||
<linear-bar-chart :name-list="cxNameList" :data-list="cxDataList" :height="359" :show-legend="true" />
|
<linear-bar-chart ref="EnergyMonitoringChart" :name-list="EnergyMonitoringNameList"
|
||||||
|
:data-list="EnergyMonitoringList" :height="359" />
|
||||||
</el-col>
|
</el-col>
|
||||||
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||||
<base-table3
|
<base-table3
|
||||||
@ -119,13 +117,13 @@
|
|||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||||
<base-container :height="318 + 338 + 16" :title="'产线产量及良品率'" :title-icon="'5_4'">
|
<base-container :height="318 + 338 + 16" :title="'产线产量及良品率'" :title-icon="'productLine'">
|
||||||
<div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||||
<top-radio-group />
|
<top-radio-group />
|
||||||
</div>
|
</div> -->
|
||||||
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
|
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
|
||||||
<double-y-chart :id=" 'doubleYChart' " :name-list="cxNameList" :data-list="cxDataList" :height="359"
|
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :name-list="cxNameList"
|
||||||
:show-legend="true" />
|
:data-list="cxDataList" :height="359" :show-legend="true" />
|
||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -400,22 +398,22 @@ const legendData3 = [
|
|||||||
]
|
]
|
||||||
const qualityYearTableProps = [
|
const qualityYearTableProps = [
|
||||||
{
|
{
|
||||||
prop: 'eqName',
|
prop: 'name',
|
||||||
label: '设备名称'
|
label: '设备名称'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'eqCode',
|
prop: 'code',
|
||||||
label: '设备编码'
|
label: '设备编码'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'level',
|
prop: 'status',
|
||||||
label: '报警级别',
|
label: '设备状态',
|
||||||
subcomponent: alarmLevel,
|
// subcomponent: alarmLevel,
|
||||||
align: 'center'
|
align: 'center'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'content',
|
prop: 'error',
|
||||||
label: '报警内容'
|
label: '是否故障'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -439,206 +437,39 @@ const qualityYearList = [
|
|||||||
]
|
]
|
||||||
const qualityMonthTableProps = [
|
const qualityMonthTableProps = [
|
||||||
{
|
{
|
||||||
prop: 'lineName',
|
prop: 'productionLineName',
|
||||||
label: '产线名'
|
label: '产线名'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'process',
|
prop: 'sectionName',
|
||||||
label: '工序'
|
label: '工序'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'eqName',
|
prop: 'count',
|
||||||
label: '设备名'
|
label: '损耗片数'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'eqCode',
|
prop: 'inspectionTypeName',
|
||||||
label: '设备编码'
|
label: '缺陷类型'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
prop: 'long',
|
|
||||||
label: '总运行时长(h)'
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// prop: 'createTime',
|
|
||||||
// label: '保养时间'
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
prop: 'status',
|
|
||||||
label: '设备状态'
|
|
||||||
}
|
|
||||||
// {
|
|
||||||
// prop: 'nextCreateTime',
|
|
||||||
// label: '下次保养时间'
|
|
||||||
// }
|
|
||||||
// {
|
|
||||||
// prop: 'nextLong',
|
|
||||||
// label: '距离保养时间(天)',
|
|
||||||
// // subcomponent: nextDay,
|
|
||||||
// align: 'center'
|
|
||||||
// }
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const qualityMonthList = [
|
|
||||||
{
|
|
||||||
lineName: '钢一线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '二次清洗机',
|
|
||||||
eqCode: '2312312',
|
|
||||||
long: '200',
|
|
||||||
// createTime: '2021-02-25 12:00:01',
|
|
||||||
status: '报警'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 365
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢二线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '锻造机',
|
|
||||||
eqCode: '43434',
|
|
||||||
long: '252',
|
|
||||||
// createTime: '2021-11-25 12:00:01',
|
|
||||||
status: '正常'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 4
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢三线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '设备3',
|
|
||||||
eqCode: '23213212',
|
|
||||||
long: '100',
|
|
||||||
// createTime: '2021-10-25 12:00:01',
|
|
||||||
status: '故障停机'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 24
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢四线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '设备4',
|
|
||||||
eqCode: '23213',
|
|
||||||
long: '322',
|
|
||||||
// createTime: '2021-02-25 12:00:01',
|
|
||||||
status: '故障停机'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: -36
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢五线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '设备5',
|
|
||||||
eqCode: '23121312',
|
|
||||||
long: '232',
|
|
||||||
// createTime: '2021-06-25 12:00:01',
|
|
||||||
status: '待机'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 111
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢五线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '设备5',
|
|
||||||
eqCode: '23121312',
|
|
||||||
long: '212',
|
|
||||||
// createTime: '2021-06-25 12:00:01',
|
|
||||||
status: '待机'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 111
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢五线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '设备5',
|
|
||||||
eqCode: '23121312',
|
|
||||||
long: '123',
|
|
||||||
// createTime: '2021-06-25 12:00:01',
|
|
||||||
status: '镀膜机'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 111
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢五线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '清洗机',
|
|
||||||
eqCode: '23121312',
|
|
||||||
long: '322',
|
|
||||||
// createTime: '2021-06-25 12:00:01',
|
|
||||||
status: 'Remote'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 111
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢五线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '磨边机',
|
|
||||||
eqCode: '23121312',
|
|
||||||
long: '232',
|
|
||||||
// createTime: '2021-06-25 12:00:01',
|
|
||||||
status: 'Non-scheduled'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 111
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢五线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '磨边机',
|
|
||||||
eqCode: '23121312',
|
|
||||||
long: '232',
|
|
||||||
// createTime: '2021-06-25 12:00:01',
|
|
||||||
status: 'Non-scheduled'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 111
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢五线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '磨边机',
|
|
||||||
eqCode: '23121312',
|
|
||||||
long: '232',
|
|
||||||
// createTime: '2021-06-25 12:00:01',
|
|
||||||
status: 'Non-scheduled'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 111
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢五线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '磨边机',
|
|
||||||
eqCode: '23121312',
|
|
||||||
long: '232',
|
|
||||||
// createTime: '2021-06-25 12:00:01',
|
|
||||||
status: 'Non-scheduled'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 111
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢五线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '磨边机',
|
|
||||||
eqCode: '23121312',
|
|
||||||
long: '232',
|
|
||||||
// createTime: '2021-06-25 12:00:01',
|
|
||||||
status: 'Non-scheduled'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 111
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const orderProcessList = [
|
const orderProcessList = [
|
||||||
{
|
{
|
||||||
id: '1', outRate: '.8', name: '凯盛0322'
|
id: '1', outRate: '.8', name: '凯盛0322'
|
||||||
}, {
|
}, {
|
||||||
id: '1', outRate: '.4', name: '光伏玻璃4.0'
|
id: '2', outRate: '.4', name: '光伏玻璃4.0'
|
||||||
}, {
|
}, {
|
||||||
id: '1', outRate: '.5', name: '光伏玻璃3.0'
|
id: '3', outRate: '.5', name: '光伏玻璃3.0'
|
||||||
}, {
|
}, {
|
||||||
id: '1', outRate: '.3', name: '光伏玻璃2.0'
|
id: '4', outRate: '.3', name: '光伏玻璃2.0'
|
||||||
}, {
|
}, {
|
||||||
id: '1', outRate: '.5', name: '光伏玻璃1.0'
|
id: '5', outRate: '.5', name: '光伏玻璃1.0'
|
||||||
}, {
|
}, {
|
||||||
id: '1', outRate: '.8', name: '光伏玻璃'
|
id: '6', outRate: '.8', name: '光伏玻璃'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '1', outRate: '.8', name: '统计订单'
|
id: '7', outRate: '.8', name: '统计订单'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
export default {
|
export default {
|
||||||
@ -661,11 +492,16 @@ export default {
|
|||||||
beilv2: 1,
|
beilv2: 1,
|
||||||
beilv: 1,
|
beilv: 1,
|
||||||
value: 100,
|
value: 100,
|
||||||
|
orderList:[],
|
||||||
times: '',
|
times: '',
|
||||||
|
EnergyMonitoringNameList: [],
|
||||||
|
equipmentList:[],
|
||||||
|
EnergyMonitoringList: [],
|
||||||
// offsetWidth: null,
|
// offsetWidth: null,
|
||||||
qualityYearTableProps,
|
qualityYearTableProps,
|
||||||
cxNameList,
|
cxNameList,
|
||||||
cxDataList,
|
cxDataList,
|
||||||
|
productLineList:[],
|
||||||
qualityYearList,
|
qualityYearList,
|
||||||
clientWidth: 0,
|
clientWidth: 0,
|
||||||
containerWidth: 111111,
|
containerWidth: 111111,
|
||||||
@ -673,7 +509,7 @@ export default {
|
|||||||
// orderProcessList: [],
|
// orderProcessList: [],
|
||||||
orderProcessList,
|
orderProcessList,
|
||||||
qualityTableProps1,
|
qualityTableProps1,
|
||||||
qualityMonthList,
|
qualityMonthList:[],
|
||||||
qualityMonthTableProps,
|
qualityMonthTableProps,
|
||||||
modelMonth: '',
|
modelMonth: '',
|
||||||
qualityList1,
|
qualityList1,
|
||||||
@ -719,8 +555,17 @@ export default {
|
|||||||
this.init()
|
this.init()
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.getList()
|
||||||
|
this.initWebSocket()
|
||||||
this.getTimes()
|
this.getTimes()
|
||||||
this.windowWidth(document.documentElement.clientWidth)
|
const _this = this;
|
||||||
|
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||||||
|
window.onresize = () => {
|
||||||
|
return (() => {
|
||||||
|
_this.clientWidth = `${document.documentElement.clientWidth}`
|
||||||
|
this.beilv2 = _this.clientWidth / 1920
|
||||||
|
})()
|
||||||
|
}
|
||||||
// const _this = this;
|
// const _this = this;
|
||||||
// window.onresize = () => {
|
// window.onresize = () => {
|
||||||
// return (() => {
|
// return (() => {
|
||||||
@ -746,6 +591,23 @@ export default {
|
|||||||
// removeEventListener('resize', resizeFun)
|
// removeEventListener('resize', resizeFun)
|
||||||
// },
|
// },
|
||||||
methods: {
|
methods: {
|
||||||
|
getList() {
|
||||||
|
this.$axios.get(
|
||||||
|
'base/core-production-line/listAll',
|
||||||
|
'get',
|
||||||
|
this.queryParams
|
||||||
|
).then((res) => {
|
||||||
|
console.log('11111', res);
|
||||||
|
this.productLineList = res.data
|
||||||
|
})
|
||||||
|
this.$axios.get(
|
||||||
|
'base/quality-inspection-record/dayStatistics',
|
||||||
|
'get',
|
||||||
|
).then((res) => {
|
||||||
|
console.log('11111', res);
|
||||||
|
this.qualityMonthList = res.data
|
||||||
|
})
|
||||||
|
},
|
||||||
getTimes() {
|
getTimes() {
|
||||||
setInterval(this.getTimesInterval, 1000);
|
setInterval(this.getTimesInterval, 1000);
|
||||||
},
|
},
|
||||||
@ -770,6 +632,165 @@ export default {
|
|||||||
//拼接格式化当前时间
|
//拼接格式化当前时间
|
||||||
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
||||||
},
|
},
|
||||||
|
initWebSocket() {
|
||||||
|
if (typeof (WebSocket) === 'undefined') {
|
||||||
|
alert('您的浏览器不支持WebSocket')
|
||||||
|
} else {
|
||||||
|
const wsUrl = `ws://192.168.0.33:48082/websocket/message?userId=EN${date}`
|
||||||
|
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||||||
|
let date = new Date().valueOf()
|
||||||
|
console.log(date);
|
||||||
|
const SJGWsUrl = `ws://192.168.0.33:48082/websocket/message?userId=SJG${date}`
|
||||||
|
this.SJGWebsocket = new WebSocket(SJGWsUrl)
|
||||||
|
// 监听 WebSocket 连接
|
||||||
|
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
|
||||||
|
// 监听 WebSocket 错误信息
|
||||||
|
this.SJGWebsocket.onerror = this.SJGWebsocketOnError
|
||||||
|
// 监听 WebSocket 消息
|
||||||
|
this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
|
||||||
|
// 监听 webSocket 断开信息
|
||||||
|
this.SJGWebsocket.onclose = this.SJGWebsocketClose
|
||||||
|
// const wsUrl = 'ws://192.168.0.33:48082/websocket/message?userId=EN111'
|
||||||
|
// 实例化 WebSocket
|
||||||
|
this.websocket = new WebSocket(wsUrl)
|
||||||
|
// 监听 WebSocket 连接
|
||||||
|
this.websocket.onopen = this.websocketOnOpen
|
||||||
|
// 监听 WebSocket 错误信息
|
||||||
|
this.websocket.onerror = this.websocketOnError
|
||||||
|
// 监听 WebSocket 消息
|
||||||
|
this.websocket.onmessage = this.websocketOnMessage
|
||||||
|
// 监听 webSocket 断开信息
|
||||||
|
this.websocket.onclose = this.websocketClose
|
||||||
|
}
|
||||||
|
},
|
||||||
|
SJGWebsocketOnOpen() {
|
||||||
|
console.log('socket连接成功')
|
||||||
|
console.log(this.SJGWebsocket.onmessage);
|
||||||
|
this.SJGWebsocket.onmessage()
|
||||||
|
},
|
||||||
|
// 连接建立失败重连
|
||||||
|
SJGWebsocketOnError(e) {
|
||||||
|
// console.log('11111', e)
|
||||||
|
this.initWebSocket()
|
||||||
|
},
|
||||||
|
// 数据接收
|
||||||
|
SJGWebsocketOnMessage(e) {
|
||||||
|
// console.log(1111, e)
|
||||||
|
this.wsData = JSON.parse(e.data)
|
||||||
|
// console.log(this.wsData.detData);
|
||||||
|
// console.log('22222', this.wsData.data)
|
||||||
|
if (this.wsData.type === 'order') {
|
||||||
|
this.orderList = this.wsData.detData.map((ele, index) => {
|
||||||
|
if (ele.progressRate != 1) {
|
||||||
|
return {
|
||||||
|
id: ele.id,
|
||||||
|
name: ele.name,
|
||||||
|
progressRate: ele.progressRate.toFixed(3)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log(this.orderList)
|
||||||
|
} else if (this.wsData.type === 'equipment') {
|
||||||
|
this.equipmentList = this.wsData.detData.map((ele, index) => {
|
||||||
|
// if (ele.progressRate != 1) {
|
||||||
|
return {
|
||||||
|
id: ele.id,
|
||||||
|
name: ele.name,
|
||||||
|
code: ele.code,
|
||||||
|
status: ele.status,
|
||||||
|
error: ele.error=== true ? '是' : '否'
|
||||||
|
}
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
// console.log(this.orderList)
|
||||||
|
} else if (this.wsData.type === 'productline') {
|
||||||
|
console.log(this.wsData.detData);
|
||||||
|
let nameList = []
|
||||||
|
let passRateList = []
|
||||||
|
let outputNumList = []
|
||||||
|
|
||||||
|
// console.log('2222222222', this.productLineList);
|
||||||
|
this.productLineList.forEach((item) => {
|
||||||
|
this.wsData.detData.forEach((ele) => {
|
||||||
|
if (item.id == ele.productionLineId) {
|
||||||
|
nameList.push(item.name)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
console.log(Array.from(new Set(nameList)))
|
||||||
|
// progressRateList = EnergyNameList
|
||||||
|
// let EnergyDataList = []
|
||||||
|
this.wsData.detData.forEach((ele) => {
|
||||||
|
passRateList.push(ele.passRate *100
|
||||||
|
)
|
||||||
|
})
|
||||||
|
this.wsData.detData.forEach((ele) => {
|
||||||
|
outputNumList.push(ele.outputNum
|
||||||
|
)
|
||||||
|
})
|
||||||
|
// console.log(this.EnergyMonitoringNameList)
|
||||||
|
// console.log(this.EnergyMonitoringList)
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 数据发送
|
||||||
|
// SJGWebsocketSend() {
|
||||||
|
// this.websocket.send('11111')
|
||||||
|
// },
|
||||||
|
// // 关闭
|
||||||
|
// SJGWebsocketClose(e) {
|
||||||
|
// console.log('WebSocket 断开连接', e)
|
||||||
|
// },
|
||||||
|
// // 连接建立之后执行send方法发送数据
|
||||||
|
websocketOnOpen() {
|
||||||
|
console.log('socket连接成功')
|
||||||
|
this.websocket.onmessage()
|
||||||
|
},
|
||||||
|
// 连接建立失败重连
|
||||||
|
websocketOnError(e) {
|
||||||
|
console.log('11111', e)
|
||||||
|
this.initWebSocket()
|
||||||
|
},
|
||||||
|
// 数据接收
|
||||||
|
websocketOnMessage(e) {
|
||||||
|
// console.log(1111, e)
|
||||||
|
this.wsData = JSON.parse(e.data)
|
||||||
|
// console.log('22222', this.wsData.data)
|
||||||
|
if (this.wsData.type === 'EnergyMonitoring') {
|
||||||
|
let EnergyNameList = []
|
||||||
|
this.wsData.data.forEach((ele) => {
|
||||||
|
EnergyNameList.push(ele.lineName)
|
||||||
|
})
|
||||||
|
this.EnergyMonitoringNameList = EnergyNameList
|
||||||
|
let EnergyDataList = []
|
||||||
|
this.wsData.data.forEach((ele) => {
|
||||||
|
EnergyDataList.push(ele.useQuantity
|
||||||
|
// {
|
||||||
|
// type: 'bar',
|
||||||
|
// data: ele.useQuantity,
|
||||||
|
// barWidth: 6
|
||||||
|
|
||||||
|
// }
|
||||||
|
)
|
||||||
|
})
|
||||||
|
this.EnergyMonitoringList = EnergyDataList
|
||||||
|
console.log(EnergyDataList)
|
||||||
|
// console.log(this.EnergyMonitoringNameList)
|
||||||
|
// console.log(this.EnergyMonitoringList)
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 数据发送
|
||||||
|
websocketSend() {
|
||||||
|
this.websocket.send('11111')
|
||||||
|
},
|
||||||
|
// 关闭
|
||||||
|
websocketClose(e) {
|
||||||
|
// console.log('WebSocket 断开连接', e)
|
||||||
|
},
|
||||||
windowWidth(value) {
|
windowWidth(value) {
|
||||||
this.clientWidth = value
|
this.clientWidth = value
|
||||||
this.beilv2 = this.clientWidth / 1920
|
this.beilv2 = this.clientWidth / 1920
|
||||||
@ -902,7 +923,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// .container-main {
|
// .container-main {
|
||||||
// padding: 0px;
|
// padding: 5px;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user