13 Commits

Author SHA1 Message Date
5a3e16df1b Merge pull request 'fzq' (#32) from fzq into develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #32
2023-09-12 15:37:15 +08:00
Fanzink
6815ac4cc4 '修改设备与PLC关联-新增-下拉框条数' 2023-09-12 12:44:54 +05:30
Fanzink
4ffbdaef8a '设备与PLC,设备获取所有' 2023-04-22 10:51:10 +05:30
36e6551465 Merge pull request ''厂务设备参数修改设备列表size,设备分析状态监控去掉默认产线工厂'' (#29) from fzq into develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #29
2023-04-18 15:42:29 +08:00
Fanzink
b1ab1962b1 '厂务设备参数修改设备列表size,设备分析状态监控去掉默认产线工厂' 2023-04-18 09:48:13 +05:30
2cefabc24b Merge pull request ''修改日期选择器样式文件index.css'' (#28) from fzq into develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #28
2023-03-30 15:40:27 +08:00
Fanzink
db47bffb18 '修改日期选择器样式文件index.css' 2023-03-30 11:28:14 +05:30
65b489d37c Merge pull request ''数据分析bug修改2次'' (#27) from fzq into develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #27
2023-03-27 10:59:39 +08:00
Fanzink
5afadfb1ce '数据分析bug修改2次' 2023-03-24 17:23:26 +05:30
67612107ea Merge pull request ''改数据分析bug'' (#26) from fzq into develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #26
2023-03-23 17:09:52 +08:00
Fanzink
e0d4e5327f '改数据分析bug' 2023-03-23 11:31:59 +05:30
7ec1c5f3fc Merge pull request ''修改数据分析/产品质量分析和产量分析'' (#25) from fzq into develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #25
2023-03-21 14:20:58 +08:00
Fanzink
3da95fed21 '修改数据分析/产品质量分析和产量分析' 2023-03-18 13:58:14 +05:30
12 changed files with 347 additions and 103 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -408,6 +408,7 @@ t.pl = {}
t.pl.title = 'Product Line' t.pl.title = 'Product Line'
t.pl.id = 'Product Line ID' t.pl.id = 'Product Line ID'
t.pl.name = 'Product Line Name' t.pl.name = 'Product Line Name'
t.pl.sum = 'Sum'
t.pl.code = 'Product Line Code' t.pl.code = 'Product Line Code'
t.pl.status = 'Product Line Status' t.pl.status = 'Product Line Status'
t.pl.belong = 'Product Line' t.pl.belong = 'Product Line'

View File

@@ -409,6 +409,7 @@ t.pl = {}
t.pl.title = '产线' t.pl.title = '产线'
t.pl.id = '产线ID' t.pl.id = '产线ID'
t.pl.name = '产线名称' t.pl.name = '产线名称'
t.pl.sum = '合计'
t.pl.code = '产线编码' t.pl.code = '产线编码'
t.pl.status = '产线状态' t.pl.status = '产线状态'
t.pl.belong = '所属产线' t.pl.belong = '所属产线'

View File

@@ -358,7 +358,8 @@ export default {
dialogEqList: [], dialogEqList: [],
count: 0, count: 0,
// 产线默认产线1 // 产线默认产线1
lineIds: ['1'], // lineIds: ['1'],
lineIds: [],
sectionIds: [], sectionIds: [],
lineList: [], lineList: [],
// tableConfigStatic, // tableConfigStatic,
@@ -428,10 +429,10 @@ export default {
if (data && data.code === 0) { if (data && data.code === 0) {
this.lineList = data.data this.lineList = data.data
// console.log('产线数组', this.lineList) // console.log('产线数组', this.lineList)
/** set default */ /** set default 默认*/
if (this.lineList.length) { // if (this.lineList.length) {
this.lineIds = [this.lineList[this.lineList.length - 1].id] // this.lineIds = [this.lineList[this.lineList.length - 1].id]
} // }
} else { } else {
this.lineList = [] this.lineList = []
} }
@@ -446,6 +447,7 @@ export default {
// 获取工序列表 // 获取工序列表
getWorksetionList() { getWorksetionList() {
// 分页列表才有根据产线过滤功能 // 分页列表才有根据产线过滤功能
// this.wsList = []
for (let i = 0; i < this.lineIds.length; i++) { for (let i = 0; i < this.lineIds.length; i++) {
this.$http({ this.$http({
// url: this.$http.adornUrl('/monitoring/workshopSection/list'), // url: this.$http.adornUrl('/monitoring/workshopSection/list'),
@@ -582,6 +584,8 @@ export default {
// this.renderChart() // this.renderChart()
// }) // })
} }
}).catch((err) => {
// console.error(err)
}) })
}, },
setOptions(opts) { setOptions(opts) {
@@ -592,29 +596,29 @@ export default {
if (this.chart) this.chart.setOption(this.defaultOpts, true) if (this.chart) this.chart.setOption(this.defaultOpts, true)
}, },
// 失效函数 // 失效函数
parseTableProps(nameData) { // parseTableProps(nameData) {
const subProps = [] // const subProps = []
const labelNameMap = new Map() // const labelNameMap = new Map()
// if (nameData.length) { // // if (nameData.length) {
// /** 处理 nameData */ // // /** 处理 nameData */
// nameData.forEach((item) => { // // nameData.forEach((item) => {
// if (!labelNameMap.get(item.name)) { // // if (!labelNameMap.get(item.name)) {
// labelNameMap.set(item.name, 1) // // labelNameMap.set(item.name, 1)
// subProps.push({ name: item.name, prop: item.name }) // // subProps.push({ name: item.name, prop: item.name })
// } // // }
// }) // // })
// } // // }
this.tableConfigDynamic = [ // this.tableConfigDynamic = [
{ type: 'index', width: 100, name: i18n.t('index') }, // { type: 'index', width: 100, name: i18n.t('index') },
{ name: i18n.t('pl.name'), prop: '0' }, // { name: i18n.t('pl.name'), prop: '0' },
...Array.from(new Set(res.data.data[0].records.map((item) => moment(item.recordTime).format('MM-DD')))).map((name) => ({ prop: String(++this.count), name })) // ...Array.from(new Set(res.data.data[0].records.map((item) => moment(item.recordTime).format('MM-DD')))).map((name) => ({ prop: String(++this.count), name }))
] // ]
/** echarts related */ // /** echarts related */
// this.echartCategories = subProps.map((item) => item.name) // // this.echartCategories = subProps.map((item) => item.name)
this.echartCategories = this.dataListDynamic.map((item) => item.name) // this.echartCategories = this.dataListDynamic.map((item) => item.name)
}, // },
// parseDynamicData(data) { // parseDynamicData(data) {
// this.echartCheckTypes.splice(0) // this.echartCheckTypes.splice(0)
@@ -740,9 +744,11 @@ export default {
//遍历属性 //遍历属性
this.keys = [...Object.keys(res.data),...this.keys] this.keys = [...Object.keys(res.data),...this.keys]
// console.log('this.finalVal', this.finalVal) // console.log('this.finalVal', this.finalVal)
// console.log('keys', this.keys) console.log('keys', this.keys)
this.values = Object.values(res.data) this.values = Object.values(res.data)
// console.log('values', this.values) // console.log('values', this.values)
// 初始化values2
this.values2 = []
for (let c = 0; c < this.values.length; c++) { for (let c = 0; c < this.values.length; c++) {
this.values2.push( this.values2.push(
this.values[c].map((item) => { this.values[c].map((item) => {
@@ -750,8 +756,9 @@ export default {
}) })
) )
} }
console.log('values2', this.values2)
this.finalVal = [...this.values2,...this.finalVal] this.finalVal = [...this.values2,...this.finalVal]
// console.log('this.finalVal', this.finalVal) console.log('this.finalVal', this.finalVal)
this.$message.success(this.$t('pl.success')) this.$message.success(this.$t('pl.success'))
this.$nextTick(() => { this.$nextTick(() => {
this.dialogVisible = false this.dialogVisible = false

View File

@@ -165,7 +165,11 @@ export default {
getEqList() { getEqList() {
this.$http({ this.$http({
url: this.$http.adornUrl('/monitoring/equipment/page'), url: this.$http.adornUrl('/monitoring/equipment/page'),
method: 'get' method: 'get',
params: this.$http.adornParams({
limit: 99999,
page: 1
})
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.eqList = data.data.list this.eqList = data.data.list

View File

@@ -207,7 +207,7 @@ export default {
this.factoryList = res.data this.factoryList = res.data
/** set default */ /** set default */
if (this.factoryList.length) { if (this.factoryList.length) {
this.dataForm.ftId = this.factoryList[0].id // this.dataForm.ftId = this.factoryList[0].id
} }
} else { } else {
this.factoryList = [] this.factoryList = []
@@ -236,7 +236,7 @@ export default {
if (res && res.code === 0 && res.data.length) { if (res && res.code === 0 && res.data.length) {
this.productLineList = res.data this.productLineList = res.data
/** set default */ /** set default */
this.dataForm.productlines = [this.productLineList[0].id] // this.dataForm.productlines = [this.productLineList[0].id]
} else { } else {
this.productLineList = [] this.productLineList = []
this.dataForm.productlines = [] this.dataForm.productlines = []

View File

@@ -135,10 +135,10 @@ export default {
}).then(({ data: res }) => { }).then(({ data: res }) => {
if (res && res.code === 0) { if (res && res.code === 0) {
this.productLineList = res.data this.productLineList = res.data
/** set default */ /** set default 默认*/
if (this.productLineList.length) { // if (this.productLineList.length) {
this.dataForm.productlines = [this.productLineList[0].id] // this.dataForm.productlines = [this.productLineList[0].id]
} // }
} else { } else {
this.productLineList = [] this.productLineList = []
this.dataForm.productlines = [] this.dataForm.productlines = []

View File

@@ -165,6 +165,8 @@ export default {
// page: this.pageIndex, // page: this.pageIndex,
// limit: this.pageSize, // limit: this.pageSize,
// key: this.dataForm.key // key: this.dataForm.key
limit: 99999,
page: 1
}) })
}).then(({ data }) => { }).then(({ data }) => {
const eqConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'equipmentId') const eqConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'equipmentId')
@@ -180,6 +182,8 @@ export default {
// page: this.pageIndex, // page: this.pageIndex,
// limit: this.pageSize, // limit: this.pageSize,
// key: this.dataForm.key // key: this.dataForm.key
limit: 99999,
page: 1
}) })
}).then(({ data }) => { }).then(({ data }) => {
const plcConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'plcId') const plcConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'plcId')

View File

@@ -270,10 +270,10 @@ export default {
}).then(({ data: res }) => { }).then(({ data: res }) => {
if (res && res.code === 0) { if (res && res.code === 0) {
this.productLineList = res.data this.productLineList = res.data
/** set default */ /** set default 默认*/
if (this.productLineList.length) { // if (this.productLineList.length) {
this.dataForm.productlines = this.productLineList[0].id // this.dataForm.productlines = this.productLineList[0].id
} // }
} else { } else {
this.productLineList = [] this.productLineList = []
} }

View File

@@ -57,15 +57,10 @@
<!-- style="margin-top: 12px" --> <!-- style="margin-top: 12px" -->
<el-row> <el-row>
<!-- v-if="!showGraph" --> <!-- v-if="!showGraph" -->
<base-table <base-table :data="dataList" :table-head-configs="tableConfigDynamic" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
:data="dataList"
:table-head-configs="tableConfigDynamic"
:max-height="500"
@operate-event="handleOperations"
@refreshDataList="getDataList" />
</el-row> </el-row>
<!-- :series-data="echartsData" --> <!-- :series-data="echartsData" -->
<!-- v-else --> <!-- v-else -->
<el-row style="margin-top: 8px"> <el-row style="margin-top: 8px">
<fake-chart <fake-chart
:categories="echartCategories" :categories="echartCategories"
@@ -172,7 +167,9 @@ const FakeChart = {
show: true show: true
}, },
/** end */ /** end */
data: [this.$t('eq.line1'), this.$t('eq.line2'), this.$t('eq.line3'), this.$t('eq.line4')] data: []
// selected:{'产线1':(this.echartsData1 === [] ? false : true) , 'Line 1':(this.echartsData1 === [] ? false : true) ,
// '产线2':(this.echartsData2 === [] ? false : true) , 'Line 2':(this.echartsData2 === [] ? false : true) }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@@ -273,8 +270,8 @@ const FakeChart = {
typeList: { typeList: {
handler: function (val, oldVal) { handler: function (val, oldVal) {
if (val && val !== oldVal) { if (val && val !== oldVal) {
this.defaultOpts.legend.data.push(...val) // this.defaultOpts.legend.data.push(...val)
// this.defaultOpts.legend.data = val this.defaultOpts.legend.data = val
} }
}, },
immediate: true immediate: true
@@ -428,10 +425,10 @@ export default {
if (data && data.code === 0) { if (data && data.code === 0) {
this.lineList = data.data this.lineList = data.data
// console.log('产线数组', this.lineList) // console.log('产线数组', this.lineList)
/** set default */ /** set default 默认 */
if (this.lineList.length) { // if (this.lineList.length) {
this.lineIds = [this.lineList[this.lineList.length - 1].id] // this.lineIds = [this.lineList[this.lineList.length - 1].id]
} // }
} else { } else {
this.lineList = [] this.lineList = []
} }
@@ -489,7 +486,8 @@ export default {
this.tableConfigDynamic = [ this.tableConfigDynamic = [
{ type: 'index', width: 100, name: i18n.t('index') }, { type: 'index', width: 100, name: i18n.t('index') },
{ name: i18n.t('pl.name'), prop: '0' }, { name: i18n.t('pl.name'), prop: '0' },
...Array.from(new Set(res.data.data[0].records.map((item) => moment(item.recordTime).format('MM-DD')))).map((name) => ({ prop: String(++this.count), name })) { name: i18n.t('pl.sum'), prop: '1' },
...Array.from(new Set(res.data.data[0].records.map((item) => moment(item.recordTime).format('MM-DD')))).map((name) => ({ prop: String(++this.count + 1), name }))
/** /**
这一行无敌的,记一下: 这一行无敌的,记一下:
1. '...'是扩展运算符是ES6的语法用于取出参数对象的所有可遍历属性然后拷贝到当前对象之中。例如 1. '...'是扩展运算符是ES6的语法用于取出参数对象的所有可遍历属性然后拷贝到当前对象之中。例如
@@ -504,7 +502,8 @@ export default {
7.要在getDataList() 中 7.要在getDataList() 中
this.dataList = [] this.dataList = []
this.count = 0 this.count = 0
初始化一下,否则连续按按钮会空 初始化一下,否则连续按按钮会空一个
8.因为后期加了个"合计"字段,所以++this.count + 1右移一位
*/ */
] ]
// console.log('this.tableConfigDynamic', this.tableConfigDynamic) // console.log('this.tableConfigDynamic', this.tableConfigDynamic)
@@ -512,12 +511,14 @@ export default {
// this.dataListDynamic = this.parseDynamicData(res.data.data) || [] // this.dataListDynamic = this.parseDynamicData(res.data.data) || []
for (let i = 0; i < res.data.data.length; i++) { for (let i = 0; i < res.data.data.length; i++) {
this.dataListDynamic[i] = res.data.data[i].records.map((item) => item.outputNum) || [] this.dataListDynamic[i] = res.data.data[i].records.map((item) => item.outputNum) || []
this.dataListDynamic[i].unshift(res.data.data[i].sum)
this.dataListDynamic[i].unshift(res.data.data[i].records[i].lineName) this.dataListDynamic[i].unshift(res.data.data[i].records[i].lineName)
var json = {} var json = {}
for (var j = 0; j < this.dataListDynamic[i].length; j++) { for (var j = 0; j < this.dataListDynamic[i].length; j++) {
json[j] = this.dataListDynamic[i][j] json[j] = this.dataListDynamic[i][j]
} }
this.dataList.push(json) this.dataList.push(json)
// console.log('this.dataList', this.dataList)
// this.dataListDynamic[i] =JSON.stringify(this.dataListDynamic[i]) // this.dataListDynamic[i] =JSON.stringify(this.dataListDynamic[i])
} }
/** echarts related */ /** echarts related */
@@ -626,6 +627,11 @@ export default {
// this.echartsData4 = this.dataListDynamic[3] // this.echartsData4 = this.dataListDynamic[3]
// 不抛出老是报shift错误 // 不抛出老是报shift错误
try { try {
// 因为又加了“合计”字段,所以再多删除一次
this.echartsData1.shift()
this.echartsData2.shift()
this.echartsData3.shift()
this.echartsData4.shift()
this.echartsData1.shift() this.echartsData1.shift()
this.echartsData2.shift() this.echartsData2.shift()
this.echartsData3.shift() this.echartsData3.shift()
@@ -637,6 +643,24 @@ export default {
// { name: '11', type: 'bar', data: [/**产线1*/ 2, /**产线2*/ 3] }, // { name: '11', type: 'bar', data: [/**产线1*/ 2, /**产线2*/ 3] },
// { name: '222', type: 'bar', data: [1, 2, 3] } // { name: '222', type: 'bar', data: [1, 2, 3] }
// ] // ]
// 没有数据的产线legend隐藏
if (this.echartsData1.length !== 0) {
this.echartCheckTypes.push(this.$t('eq.line1'))
}
if (this.echartsData2.length !== 0) {
this.echartCheckTypes.push(this.$t('eq.line2'))
}
if (this.echartsData3.length !== 0) {
this.echartCheckTypes.push(this.$t('eq.line3'))
}
if (this.echartsData4.length !== 0) {
this.echartCheckTypes.push(this.$t('eq.line4'))
}
// console.log('this.echartCheckTypes', this.echartCheckTypes)
// console.log(this.echartsData1.length)
// console.log(this.echartsData2.length)
// console.log(this.echartsData3)
// console.log(this.echartsData4)
}, },
fetchList(startTime, endTime, lineIds) { fetchList(startTime, endTime, lineIds) {
@@ -692,4 +716,14 @@ export default {
color: #fff; color: #fff;
background: #0b58ff; background: #0b58ff;
} }
.el-month-table td.today .cell {
font-weight: normal;
color: #000 !important;
}
.el-month-table td.current:not(.disabled) .cell{
color: #ffffff;
font-weight: bold !important;
background-color: var(--el-datepicker-active-color);
border-radius: 100px;
}
</style> </style>

View File

@@ -55,6 +55,21 @@
</el-radio-group> </el-radio-group>
</el-row> </el-row>
<el-row style="margin-top: 12px"> <el-row style="margin-top: 12px">
<div style="text-align: right">
<!-- 设置设备名称小齿轮table列的图标 -->
<el-popover width="200" trigger="click" v-if="showGraph">
<div class="box">
<!-- :label="item.name ? item.name : item.label" 三元判别就可以让厂务的实时数据可以显示 -->
<el-checkbox
v-for="(item, index) in echartCategories"
:key="'cb' + index"
v-model="selectedBox[index]"
:label="item"
@change="checkboxChange(echartCategories)" />
</div>
<i slot="reference" class="el-icon-s-tools" style="color: #0b58ff">{{ $t('pl.choose') }}</i>
</el-popover>
</div>
<base-table <base-table
v-if="!showGraph" v-if="!showGraph"
:data="dataListDynamic" :data="dataListDynamic"
@@ -63,7 +78,7 @@
@operate-event="handleOperations" @operate-event="handleOperations"
@refreshDataList="getDataList" /> @refreshDataList="getDataList" />
<!-- :series-data="echartsData" --> <!-- :series-data="echartsData" -->
<fake-chart v-else :categories="echartCategories" :type-list="echartCheckTypes" :series-data1="echartsData1" :series-data2="echartsData2" :pass-rate="pass" /> <fake-chart v-else :categories="echartRealtime" :type-list="echartCheckTypes" :series-data1="echartsData1" :series-data2="echartsData2" :pass-rate="pass" />
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
@@ -124,6 +139,7 @@ const FakeChart = {
}, },
data() { data() {
return { return {
// selectedBox: new Array(100).fill(true),
calcMaxHeight, calcMaxHeight,
chart: null, chart: null,
// 新加 // 新加
@@ -135,7 +151,7 @@ const FakeChart = {
left: '5%', left: '5%',
right: '12%', right: '12%',
top: '20%', top: '20%',
bottom: '10%' bottom: '22%'
}, },
title: { title: {
text: i18n.t('eq.productQuality') text: i18n.t('eq.productQuality')
@@ -147,12 +163,76 @@ const FakeChart = {
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
} }
}, },
toolbox: {
feature: {
dataView: {
show: true,
readOnly: true,
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data
var series = opt.series
//验证是否是中文
var pattern = new RegExp('[\u4E00-\u9FA5]+')
if (pattern.test(series[0].name)) {
var table =
'<table class="layui-table" style="width:100%;text-align:center"><tbody><tr>' +
'<td>设备名称</td>' +
'<td>' +
series[0].name +
'</td>' +
'<td>' +
series[1].name +
'</td>' +
'<td>' +
series[2].name +
'</td>' +
'</tr>'
} else {
var table =
'<table class="layui-table" style="width:100%;text-align:center"><tbody><tr>' +
'<td>Equipment Name</td>' +
'<td>' +
series[0].name +
'</td>' +
'<td>' +
series[1].name +
'</td>' +
'<td>' +
series[2].name +
'</td>' +
'</tr>'
}
for (var i = 0, l = axisData.length; i < l; i++) {
table +=
'<tr>' +
'<td>' +
axisData[i] +
'</td>' +
'<td>' +
series[0].data[i] +
'</td>' +
'<td>' +
series[1].data[i] +
'</td>' +
'<td>' +
series[2].data[i] +
'</td>' +
'</tr>'
}
table += '</tbody></table>'
return table
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: { legend: {
orient: 'vertical', // orient: 'vertical',
type: 'scroll', // type: 'scroll',
top: 10, // top: 10,
right: 0, // right: 0,
width: '12%', // width: '12%',
/** 修复文本太长时显示问题 */ /** 修复文本太长时显示问题 */
// formatter: function (name) { // formatter: function (name) {
// return echarts.format.truncateText(name, 120, '14px Microsoft Yahei', '...') // return echarts.format.truncateText(name, 120, '14px Microsoft Yahei', '...')
@@ -165,6 +245,9 @@ const FakeChart = {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
axisTick: {
alignWithLabel: true
},
data: [], data: [],
// axisLine: { // axisLine: {
// show: true, // show: true,
@@ -187,14 +270,72 @@ const FakeChart = {
// data: ['下片1', '上片1', '磨边机1', '设备13', '钢化炉2', '磨边机2', '设备15', '清洗机1', '钢化炉3'] // data: ['下片1', '上片1', '磨边机1', '设备13', '钢化炉2', '磨边机2', '设备15', '清洗机1', '钢化炉3']
}, },
yAxis: { yAxis: [
type: 'value' {
}, type: 'value',
name: i18n.t('eq.okNum'),
position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#5470C6'
}
},
axisLabel: {
// formatter: '{value} pcs'
}
},
{
type: 'value',
name: i18n.t('eq.nokNum'),
position: 'right',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#91CC75'
}
},
axisLabel: {
// formatter: '{value} pcs'
}
},
{
type: 'value',
name: i18n.t('eq.passRatePercent'),
position: 'right',
offset: 80,
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#FAC857'
}
},
axisLabel: {
formatter: '{value} %'
}
}
],
dataZoom: [
{
type: 'slider',
start: 0,
end: 100,
// 最大的放大是图形的2%
// maxSpan: 2
},
{
start: 0,
end: 10
}
],
series: [ series: [
// dynamic // dynamic
{ {
name: i18n.t('eq.okNum'), name: i18n.t('eq.okNum'),
type: 'line', type: 'bar',
data: [], data: [],
label: { label: {
normal: { normal: {
@@ -207,7 +348,8 @@ const FakeChart = {
}, },
{ {
name: i18n.t('eq.nokNum'), name: i18n.t('eq.nokNum'),
type: 'line', type: 'bar',
yAxisIndex: 1,
data: [], data: [],
label: { label: {
normal: { normal: {
@@ -221,6 +363,7 @@ const FakeChart = {
{ {
name: i18n.t('eq.passRatePercent'), name: i18n.t('eq.passRatePercent'),
type: 'line', type: 'line',
yAxisIndex: 2,
data: [], data: [],
label: { label: {
normal: { normal: {
@@ -243,7 +386,8 @@ const FakeChart = {
categories: { categories: {
handler: function (val, oldVal) { handler: function (val, oldVal) {
if (val && val !== oldVal) { if (val && val !== oldVal) {
this.defaultOpts.xAxis.data.push(...val) // this.defaultOpts.xAxis.data.push(...val)
this.defaultOpts.xAxis.data = val
} }
}, },
immediate: true immediate: true
@@ -260,7 +404,8 @@ const FakeChart = {
// this.defaultOpts.series[0].data.push 注意 // this.defaultOpts.series[0].data.push 注意
handler: function (val, oldVal) { handler: function (val, oldVal) {
if (val && val !== oldVal) { if (val && val !== oldVal) {
this.defaultOpts.series[0].data.push(...val) // this.defaultOpts.series[0].data.push(...val)
this.defaultOpts.series[0].data = val
} }
}, },
immediate: true immediate: true
@@ -268,7 +413,7 @@ const FakeChart = {
seriesData2: { seriesData2: {
handler: function (val, oldVal) { handler: function (val, oldVal) {
if (val && val !== oldVal) { if (val && val !== oldVal) {
this.defaultOpts.series[1].data.push(...val) this.defaultOpts.series[1].data = val
} }
}, },
immediate: true immediate: true
@@ -276,7 +421,7 @@ const FakeChart = {
passRate: { passRate: {
handler: function (val, oldVal) { handler: function (val, oldVal) {
if (val && val !== oldVal) { if (val && val !== oldVal) {
this.defaultOpts.series[2].data.push(...val) this.defaultOpts.series[2].data = val
} }
}, },
immediate: true immediate: true
@@ -329,6 +474,7 @@ export default {
components: { BaseTable, SmallTitle, FakeChart }, components: { BaseTable, SmallTitle, FakeChart },
data() { data() {
return { return {
selectedBox: new Array(100).fill(true),
lineIds: [], lineIds: [],
lineList: [], lineList: [],
// tableConfigStatic, // tableConfigStatic,
@@ -354,6 +500,7 @@ export default {
// ] // ]
// }, // },
echartCategories: null, echartCategories: null,
echartRealtime: [],
echartCheckTypes: [], echartCheckTypes: [],
interval: null interval: null
} }
@@ -369,6 +516,9 @@ export default {
this.getDataList() this.getDataList()
}, 1000 * 5 * 60) }, 1000 * 5 * 60)
}, },
beforeMount() {
this.selectedBox = new Array(100).fill(true)
},
deactivated() { deactivated() {
if (this.interval) { if (this.interval) {
clearInterval(this.interval) clearInterval(this.interval)
@@ -395,10 +545,16 @@ export default {
this.showGraph = value === dict[0] ? false : true this.showGraph = value === dict[0] ? false : true
}, },
getDataList() { getDataList() {
// this.echartsData1 = []
// this.echartsData2 = []
// this.pass = []
this.showGraph = false this.showGraph = false
this.dataType = i18n.t('table2') this.dataType = i18n.t('table2')
this.echartCategories = null this.echartCategories = null
this.echartCheckTypes.splice(0) this.echartCheckTypes.splice(0)
this.echartRealtime = []
// 更新下checkbox全选
this.selectedBox = new Array(100).fill(true)
/** 设置默认日期 */ /** 设置默认日期 */
// const startTime = this.datetime[0] || moment().set({ hour: 0, minute: 0, second: 0 }).format('yyyy-MM-DDTHH:mm:ss') // const startTime = this.datetime[0] || moment().set({ hour: 0, minute: 0, second: 0 }).format('yyyy-MM-DDTHH:mm:ss')
// const endTime = this.datetime[1] || moment().set({ hour: 23, minute: 59, second: 59 }).format('yyyy-MM-DDTHH:mm:ss') // const endTime = this.datetime[1] || moment().set({ hour: 23, minute: 59, second: 59 }).format('yyyy-MM-DDTHH:mm:ss')
@@ -442,9 +598,10 @@ export default {
this.echartCategories = this.dataListDynamic.map((item) => { this.echartCategories = this.dataListDynamic.map((item) => {
return item.equipmentName return item.equipmentName
}) })
this.echartRealtime = this.echartCategories
// this.parseTableProps(res.data.nameData) // this.parseTableProps(res.data.nameData)
// console.log('this.dataListDynamic', this.dataListDynamic) console.log('this.dataListDynamic', this.dataListDynamic)
this.buildGraphData() this.buildGraphData()
}) })
@@ -453,34 +610,34 @@ export default {
}) })
}, },
parseTableProps(nameData) { // parseTableProps(nameData) {
const subProps = [] // const subProps = []
const labelNameMap = new Map() // const labelNameMap = new Map()
// if (nameData.length) { // // if (nameData.length) {
// /** 处理 nameData */ // // /** 处理 nameData */
// nameData.forEach((item) => { // // nameData.forEach((item) => {
// if (!labelNameMap.get(item.name)) { // // if (!labelNameMap.get(item.name)) {
// labelNameMap.set(item.name, 1) // // labelNameMap.set(item.name, 1)
// subProps.push({ name: item.name, prop: item.name }) // // subProps.push({ name: item.name, prop: item.name })
// } // // }
// }) // // })
// } // // }
this.tableConfigDynamic = [ // this.tableConfigDynamic = [
{ type: 'index', width: 100, name: i18n.t('index') }, // { type: 'index', width: 100, name: i18n.t('index') },
{ name: i18n.t('eq.sectionName'), prop: 'sectionName' }, // { name: i18n.t('eq.sectionName'), prop: 'sectionName' },
// ...subProps, // // ...subProps,
{ name: i18n.t('eq.equipmentName'), prop: 'equipmentName' }, // { name: i18n.t('eq.equipmentName'), prop: 'equipmentName' },
{ name: i18n.t('eq.okNum'), prop: 'okNum' }, // { name: i18n.t('eq.okNum'), prop: 'okNum' },
{ name: i18n.t('eq.nokNum'), prop: 'nokNum' }, // { name: i18n.t('eq.nokNum'), prop: 'nokNum' },
{ name: i18n.t('eq.passRate'), prop: 'passRate', filter: (val) => (val || val === 0 ? `${val}%` : '-') } // { name: i18n.t('eq.passRate'), prop: 'passRate', filter: (val) => (val || val === 0 ? `${val}%` : '-') }
] // ]
/** echarts related */ // /** echarts related */
// this.echartCategories = subProps.map((item) => item.name) // // this.echartCategories = subProps.map((item) => item.name)
this.echartCategories = this.dataListDynamic.map((item) => item.name) // this.echartCategories = this.dataListDynamic.map((item) => item.name)
}, // },
// parseDynamicData(data) { // parseDynamicData(data) {
// this.echartCheckTypes.splice(0) // this.echartCheckTypes.splice(0)
@@ -516,9 +673,32 @@ export default {
// } // }
// }) // })
// }) // })
this.echartsData1 = this.dataListDynamic.map((item) => item.okNum)
this.echartsData2 = this.dataListDynamic.map((item) => item.nokNum) // 新建一个echartRealtime来保存修改checkbox后实时的横坐标数据
this.pass = this.dataListDynamic.map((item) => item.passRate) // this.echartRealtime = this.echartCategories
this.echartsData1 = []
this.echartsData2 = []
this.pass = []
// 尝试写个改变checkbox时触发改变this.echartCategories
// console.log('this.echartRealtime1', this.echartRealtime)
// 初始化
this.echartRealtime = []
// 根据selectedBox的真假动态生成横坐标和数值运用了数组与元素合并
for (let i = 0; i < this.echartCategories.length; i++) {
if (this.selectedBox[i] == true) {
// console.log('this.echartCategories.slice(i)',this.echartCategories.slice(i))
// console.log(
// 'this.dataListDynamic.map((item) => item.okNum)',
// this.dataListDynamic.map((item) => item.okNum)
// )
this.echartRealtime = [...this.echartRealtime, ...this.echartCategories.slice(i, i + 1)]
this.echartsData1 = [...this.echartsData1, this.dataListDynamic.map((item) => item.okNum)[i]]
this.echartsData2 = [...this.echartsData2, this.dataListDynamic.map((item) => item.nokNum)[i]]
this.pass = [...this.pass, this.dataListDynamic.map((item) => item.passRate)[i]]
}
}
// console.log('this.echartRealtime2', this.echartRealtime)
// console.log('this.echartsData1', this.echartsData1)
// this.echartsData = result // this.echartsData = result
// console.log('result', result) // console.log('result', result)
// [ // [
@@ -539,6 +719,13 @@ export default {
}).catch((err) => { }).catch((err) => {
console.error(err) console.error(err)
}) })
},
checkboxChange(val) {
// console.log('val', val)
// console.log('this.selectedBox', this.selectedBox)
this.buildGraphData()
// console.log('this.echartCategories', this.echartCategories)
// console.log('val',val)
} }
} }
} }