修bug&更改散点图样式

This commit is contained in:
朱菊兰 2023-02-21 16:34:49 +08:00
parent 49604f23c2
commit fcedda5076
10 changed files with 2185 additions and 4944 deletions

6722
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -9,7 +9,7 @@
}, },
"dependencies": { "dependencies": {
"axios": "^0.27.2", "axios": "^0.27.2",
"code-brick-zj": "^0.0.7", "code-brick-zj": "^0.1.0",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"echarts": "^5.4.0", "echarts": "^5.4.0",
"element-ui": "^2.15.8", "element-ui": "^2.15.8",

View File

@ -74,10 +74,7 @@ export default {
{ min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' } { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
], ],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
name: [ name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
],
proLineId: [ proLineId: [
{ required: true, message: '请选择所属产线', trigger: 'change' } { required: true, message: '请选择所属产线', trigger: 'change' }
], ],
@ -108,29 +105,38 @@ export default {
submitForm() { submitForm() {
this.$refs['form'].validate((valid) => { this.$refs['form'].validate((valid) => {
if (valid) { if (valid) {
this.form.account = this.form.account.replace(/[\W]/g, '') let reg = /^[\da-z]+$/i
if (this.isEdit) { let re = new RegExp(reg)
// if (re.test(this.form.account)) {
accountUpdate({ ...this.form }).then((res) => { if (this.isEdit) {
if (res.code === 0) { //
this.$message({ accountUpdate({ ...this.form }).then((res) => {
message: '操作成功', if (res.code === 0) {
type: 'success', this.$message({
duration: 1500 message: '操作成功',
}) type: 'success',
this.$emit('successSubmit') duration: 1500
} })
}) this.$emit('successSubmit')
}
})
} else {
addAccount({ ...this.form }).then((res) => {
if (res.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
this.$emit('successSubmit')
}
})
}
} else { } else {
addAccount({ ...this.form }).then((res) => { this.$message({
if (res.code === 0) { message: '用户名格式不正确应为数字或者字母,请检查',
this.$message({ type: 'error',
message: '操作成功', duration: 1500
type: 'success',
duration: 1500
})
this.$emit('successSubmit')
}
}) })
} }
} else { } else {

View File

@ -51,11 +51,11 @@ export default {
}, },
rules: { rules: {
name: [{ required: true, message: '请输入耗材名称', trigger: 'blur' }], name: [{ required: true, message: '请输入耗材名称', trigger: 'blur' }],
spec: [{ required: true, message: '请输入耗材规格', trigger: 'blur' }], spec: [{ required: true, message: '请输入耗材规格', trigger: 'blur' }]
unit: [{ required: true, message: '请输入耗材单位', trigger: 'blur' }], // unit: [{ required: true, message: '', trigger: 'blur' }],
basicConsume: [ // basicConsume: [
{ required: true, message: '请输入基础消耗量', trigger: 'blur' } // { required: true, message: '', trigger: 'blur' }
] // ]
}, },
stateList: JSON.parse(localStorage.getItem('publicList')).enabledVoList, stateList: JSON.parse(localStorage.getItem('publicList')).enabledVoList,
isEdit: false isEdit: false
@ -69,7 +69,7 @@ export default {
if (res.code === 0) { if (res.code === 0) {
console.log(res) console.log(res)
this.form.name = res.data.name this.form.name = res.data.name
this.form.spec = res.data.spec this.form.spec = val.type === 'copy' ? '' : res.data.spec
this.form.unit = res.data.unit this.form.unit = res.data.unit
this.form.basicConsume = res.data.basicConsume this.form.basicConsume = res.data.basicConsume
this.form.enabled = res.data.enabled this.form.enabled = res.data.enabled

View File

@ -72,7 +72,7 @@ export default {
if (res.code === 0) { if (res.code === 0) {
this.form.type = res.data.type this.form.type = res.data.type
this.form.name = res.data.name this.form.name = res.data.name
this.form.model = res.data.model this.form.model = val.type === 'copy' ? '' : res.data.model
this.form.enabled = res.data.enabled this.form.enabled = res.data.enabled
} }
}) })

View File

@ -98,6 +98,7 @@ import {
} from '@/api/deviceManagement' } from '@/api/deviceManagement'
import productPowerEdit from './../components/productPowerEdit.vue' import productPowerEdit from './../components/productPowerEdit.vue'
import deviceOeeLine from './../components/deviceOeeLine.vue' import deviceOeeLine from './../components/deviceOeeLine.vue'
import moment from 'moment'
const tableProps = [ const tableProps = [
{ {
prop: 'date', prop: 'date',
@ -184,6 +185,7 @@ export default {
placeholder: '月份选择', placeholder: '月份选择',
param: 'timePosition', param: 'timePosition',
defaultSelect: '', defaultSelect: '',
pickerOptions: {},
width: 200 width: 200
}, },
{ {
@ -213,6 +215,7 @@ export default {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.tableH = tableHeight(214) / 2 - 75 this.tableH = tableHeight(214) / 2 - 75
}) })
this.getMonth()
this.setDefaultVal() this.setDefaultVal()
this.getTree() this.getTree()
}, },
@ -239,6 +242,27 @@ export default {
this.getPlan() this.getPlan()
}) })
}, },
getMonth() {
let arr = [
'2022-03',
'2022-05',
'2022-06',
'2022-08',
'2022-11',
'2023-01',
'2022-03'
]
this.formConfig[0].pickerOptions = {
disabledDate(date) {
for (let i = 0; i < arr.length; i++) {
if (moment(date).format('YYYY-MM') === arr[i]) {
return false
}
}
return true
}
}
},
getList() { getList() {
// OEE // OEE
performanceAnalysisGet({ ...this.listQuery }).then((res) => { performanceAnalysisGet({ ...this.listQuery }).then((res) => {
@ -259,31 +283,34 @@ export default {
// //
let date = new Date(this.listQuery.timePosition) let date = new Date(this.listQuery.timePosition)
let year = date.getFullYear() let year = date.getFullYear()
let arr = [
{ month: '1月', value: null, type: 'january' },
{ month: '2月', value: null, type: 'february' },
{ month: '3月', value: null, type: 'march' },
{ month: '4月', value: null, type: 'april' },
{ month: '5月', value: null, type: 'may' },
{ month: '6月', value: null, type: 'june' },
{ month: '7月', value: null, type: 'july' },
{ month: '8月', value: null, type: 'august' },
{ month: '9月', value: null, type: 'september' },
{ month: '10月', value: null, type: 'october' },
{ month: '11月', value: null, type: 'november' },
{ month: '12月', value: null, type: 'december' }
]
performanceAnalysisPlan({ name: this.unitName, year: year }).then( performanceAnalysisPlan({ name: this.unitName, year: year }).then(
(res) => { (res) => {
console.log(res)
if (res.code === 0 && !!res.data) { if (res.code === 0 && !!res.data) {
let obj = res.data let obj = res.data
let arr = [
{ month: '1月', value: '', type: 'january' },
{ month: '2月', value: '', type: 'february' },
{ month: '3月', value: '', type: 'march' },
{ month: '4月', value: '', type: 'april' },
{ month: '5月', value: '', type: 'may' },
{ month: '6月', value: '', type: 'june' },
{ month: '7月', value: '', type: 'july' },
{ month: '8月', value: '', type: 'august' },
{ month: '9月', value: '', type: 'september' },
{ month: '10月', value: '', type: 'october' },
{ month: '11月', value: '', type: 'november' },
{ month: '12月', value: '', type: 'december' }
]
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
arr[i].value = obj[arr[i].type] arr[i].value = obj[arr[i].type]
} }
this.tableData2 = arr.slice(0, 6) } else {
this.tableData3 = arr.slice(6, 12) for (let i = 0; i < arr.length; i++) {
arr[i].value = null
}
} }
this.tableData2 = arr.slice(0, 6)
this.tableData3 = arr.slice(6, 12)
} }
) )
}, },

View File

@ -1,10 +1,13 @@
<template> <template>
<div> <div>暂时不做</div>
<span>载具管理,暂时不做</span>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'VehicleManagement' name: 'VehicleManagement',
data() {
return {
split1: 0.5
}
}
} }
</script> </script>

View File

@ -22,19 +22,28 @@ export default {
return { return {
chartDom: '', chartDom: '',
chart: '', chart: '',
chartHeight: tableHeight(480) chartHeight: tableHeight(446)
} }
}, },
mounted() { mounted() {
this.chartDom = document.getElementById('defectScatterPlotChart')
this.chart = echarts.init(this.chartDom)
this.getChart()
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.chartHeight = tableHeight(480) this.chartHeight = tableHeight(446)
}) })
setTimeout(() => {
this.getChart()
}, 20)
}, },
methods: { methods: {
getChart() { getChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose() // Dom
}
this.chartDom = document.getElementById('defectScatterPlotChart')
this.chart = echarts.init(this.chartDom)
const dataS = [ const dataS = [
[1, 55, 9, 56, 0.46, 18, 6, '良'], [1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'], [2, 25, 11, 21, 0.65, 34, 9, '优'],
@ -141,8 +150,16 @@ export default {
left: 0, left: 0,
data: ['S', 'M', 'L'], data: ['S', 'M', 'L'],
textStyle: { textStyle: {
fontSize: 12 fontSize: 9
} },
itemWidth: 10 //
},
grid: {
x: 60,
y: 60,
x2: 10,
y2: 60,
borderWidth: 1
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
@ -176,17 +193,20 @@ export default {
{ {
name: 'S', name: 'S',
type: 'scatter', type: 'scatter',
data: dataS data: dataS,
symbolSize: 5
}, },
{ {
name: 'M', name: 'M',
type: 'scatter', type: 'scatter',
data: dataM data: dataM,
symbolSize: 5
}, },
{ {
name: 'L', name: 'L',
type: 'scatter', type: 'scatter',
data: dataL data: dataL,
symbolSize: 5
} }
] ]
} }

View File

@ -1,24 +1,24 @@
<template> <template>
<el-row :gutter="4"> <div class="bottom-box">
<el-col :span="6"> <div class="bottom-left">
<div class="title">颗粒数据</div>
<ul class="dataTab"> <ul class="dataTab">
<div class="title">颗粒数据</div>
<li v-for="(item, index) in a" :key="index"> <li v-for="(item, index) in a" :key="index">
<p class="tabHead">{{ item.name }}</p> <p class="tabHead">{{ item.name }}</p>
<p class="tabValue">{{ item.value }}</p> <p class="tabValue">{{ item.value }}</p>
</li> </li>
</ul> </ul>
</el-col> </div>
<el-col :span="18"> <div class="bottom-right">
<div class="title">面检数据</div>
<ul class="dataTab"> <ul class="dataTab">
<div class="title">面检数据</div>
<li v-for="(item, index) in b" :key="index"> <li v-for="(item, index) in b" :key="index">
<p class="tabHead">{{ item.name }}</p> <p class="tabHead">{{ item.name }}</p>
<p class="tabValue">{{ item.value }}</p> <p class="tabValue">{{ item.value }}</p>
</li> </li>
</ul> </ul>
</el-col> </div>
</el-row> </div>
</template> </template>
<script> <script>
export default { export default {
@ -51,23 +51,49 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bottom-box {
overflow-x: auto;
display: flex;
.bottom-left,
.bottom-right {
display: inline-block;
}
.bottom-left {
width: 290px;
margin-right: 8px;
.dataTab {
li {
width: 65px;
}
}
}
.bottom-right {
width: calc(100% - 300px);
.dataTab {
li {
width: 7.7%;
min-width: 60px;
}
}
}
}
.title { .title {
height: 27px; display: inline-block;
height: 66px;
width: 30px;
font-size: 14px; font-size: 14px;
line-height: 14px;
font-weight: 500; font-weight: 500;
padding: 5px 8px 0px;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
padding-left: 16px;
padding-top: 3px;
margin-top: 5px;
background-color: #fafafa; background-color: #fafafa;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-bottom-left-radius: 5px;
} }
.dataTab { .dataTab {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
li { li {
width: 25%;
font-size: 14px; font-size: 14px;
border-right: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
@ -77,20 +103,16 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.tabHead { .tabHead {
height: 30px; height: 31px;
background: #e9ebf0; background: #e9ebf0;
} }
.tabHead, .tabHead,
.tabValue { .tabValue {
padding-left: 16px; padding: 8px;
padding-top: 7px;
} }
.tabValue { .tabValue {
height: 35px; height: 35px;
} }
} }
:last-child {
border-right: none;
}
} }
</style> </style>

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="defectScatterPlot"> <div class="defectScatterPlot">
<el-row :gutter="8" class="top-box"> <split-pane v-model="split1" @on-move-end="moveEnd">
<el-col :span="12"> <template #left>
<div class="top-left"> <div class="split-pane left-box">
<search-bar :formConfigs="formConfig" @headBtnClick="buttonClick" /> <search-bar :formConfigs="formConfig" @headBtnClick="buttonClick" />
<base-table <base-table
:selectWidth="50" :selectWidth="50"
@ -14,66 +14,49 @@
/> />
<pagination :limit="listQuery.size" :total="total" /> <pagination :limit="listQuery.size" :total="total" />
</div> </div>
</el-col> </template>
<el-col :span="12"> <template #right>
<div class="top-right"> <div class="split-pane right-box">
<div class="line1"> <div class="inner-box">
<span style="margin-right: 8px">颗粒缺陷选择</span> <div class="line1">
<el-radio-group <span style="margin-right: 8px">颗粒缺陷选择</span>
v-model="type" <el-radio-group
size="small" v-model="type"
style="margin-right: 24px" size="small"
> style="margin-right: 24px"
<el-radio-button label="1">颗粒全选</el-radio-button>
<el-radio-button label="2">面检全选</el-radio-button>
</el-radio-group>
<span>检验项目 </span>
<el-select
v-model="checkItem"
placeholder="检验项目"
size="small"
style="width: 160px; margin-right: 24px"
>
<el-option
v-for="item in selectList"
:key="item.value"
:label="item.label"
:value="item.value"
> >
</el-option> <el-radio-button label="1">颗粒全选</el-radio-button>
</el-select> <el-radio-button label="2">面检全选</el-radio-button>
<el-button type="primary" size="small" style="margin-right: 14px" </el-radio-group>
>绘图</el-button <el-button type="primary" size="small" style="margin-right: 14px"
> >绘图</el-button
<el-button type="success" size="small">导出</el-button>
</div>
<div class="line2">
<el-checkbox-group v-model="checkList">
<el-checkbox
v-for="(item, index) in list"
:key="index"
:label="item.value"
>{{ item.label }}</el-checkbox
> >
</el-checkbox-group> <el-button type="primary" size="small" plain>导出</el-button>
</div> </div>
<div> <div class="line2">
<span class="title">缺陷散点图(1245241242)</span> <el-checkbox-group v-model="checkList">
</div> <el-checkbox
<defect-scatter-plot-chart /> v-for="(item, index) in list"
</div> :key="index"
</el-col> :label="item.value"
</el-row> >{{ item.label }}</el-checkbox
<el-row> >
<el-col> </el-checkbox-group>
<div class="bottom"> </div>
<div style="margin-bottom: 10px"> <div>
<span class="title">合计</span> <span class="title">缺陷散点图(1245241242)</span>
<defect-scatter-plot-total /> </div>
<defect-scatter-plot-chart ref="poltChart" />
<div class="bottom">
<div style="margin-bottom: 10px">
<span class="title">合计</span>
<defect-scatter-plot-total />
</div>
</div>
</div> </div>
</div> </div>
</el-col> </template>
</el-row> </split-pane>
</div> </div>
</template> </template>
<script> <script>
@ -113,6 +96,7 @@ export default {
components: { defectScatterPlotTotal, defectScatterPlotChart }, components: { defectScatterPlotTotal, defectScatterPlotChart },
data() { data() {
return { return {
split1: 0.4,
formConfig: [ formConfig: [
{ {
type: 'datePicker', type: 'datePicker',
@ -138,7 +122,7 @@ export default {
}, },
tableProps, tableProps,
tableData: [], tableData: [],
tableH: tableHeight(450), tableH: tableHeight(290),
total: 0, total: 0,
type: '1', type: '1',
selectList: [ selectList: [
@ -172,7 +156,7 @@ export default {
}, },
mounted() { mounted() {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.tableH = tableHeight(450) this.tableH = tableHeight(290)
}) })
this.getList() this.getList()
}, },
@ -188,39 +172,46 @@ export default {
}, },
buttonClick(val) { buttonClick(val) {
console.log(val) console.log(val)
},
moveEnd() {
this.$refs.poltChart.getChart()
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.defectScatterPlot { .defectScatterPlot {
.top-box { height: calc(100vh - 206px);
width: 100%; overflow: auto;
padding: 0 9px 0 16px; .split-pane {
} height: 100%;
.top-left,
.top-right,
.bottom {
padding: 8px 16px;
border-radius: 8px; border-radius: 8px;
}
.left-box {
margin-left: 16px;
padding: 16px 16px 0;
background-color: #fff; background-color: #fff;
} }
.top-left { .right-box {
height: calc(100vh - 343px); margin-right: 16px;
} .inner-box {
.top-right { height: 100%;
height: calc(100vh - 343px); margin-left: 16px;
font-size: 14px; padding: 16px 16px 0;
.line1 { border-radius: 8px;
margin-bottom: 18px; overflow: auto;
background-color: #fff;
font-size: 14px;
.line1 {
margin-bottom: 18px;
}
.line2 {
margin-bottom: 12px;
.el-checkbox {
margin-right: 8px;
}
}
} }
.line2 {
margin-bottom: 18px;
}
}
.bottom {
margin: 8px 16px 0;
height: 130px;
} }
.title { .title {
font-size: 14px; font-size: 14px;