修bug&更改散点图样式 #6

Merged
juzi merged 1 commits from zjl into master 2023-02-21 16:36:44 +08:00
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": {
"axios": "^0.27.2",
"code-brick-zj": "^0.0.7",
"code-brick-zj": "^0.1.0",
"core-js": "^3.8.3",
"echarts": "^5.4.0",
"element-ui": "^2.15.8",

View File

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

View File

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

View File

@ -72,7 +72,7 @@ export default {
if (res.code === 0) {
this.form.type = res.data.type
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
}
})

View File

@ -98,6 +98,7 @@ import {
} from '@/api/deviceManagement'
import productPowerEdit from './../components/productPowerEdit.vue'
import deviceOeeLine from './../components/deviceOeeLine.vue'
import moment from 'moment'
const tableProps = [
{
prop: 'date',
@ -184,6 +185,7 @@ export default {
placeholder: '月份选择',
param: 'timePosition',
defaultSelect: '',
pickerOptions: {},
width: 200
},
{
@ -213,6 +215,7 @@ export default {
window.addEventListener('resize', () => {
this.tableH = tableHeight(214) / 2 - 75
})
this.getMonth()
this.setDefaultVal()
this.getTree()
},
@ -239,6 +242,27 @@ export default {
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() {
// OEE
performanceAnalysisGet({ ...this.listQuery }).then((res) => {
@ -259,31 +283,34 @@ export default {
//
let date = new Date(this.listQuery.timePosition)
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(
(res) => {
console.log(res)
if (res.code === 0 && !!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++) {
arr[i].value = obj[arr[i].type]
}
this.tableData2 = arr.slice(0, 6)
this.tableData3 = arr.slice(6, 12)
} else {
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>
<div>
<span>载具管理,暂时不做</span>
</div>
<div>暂时不做</div>
</template>
<script>
export default {
name: 'VehicleManagement'
name: 'VehicleManagement',
data() {
return {
split1: 0.5
}
}
}
</script>

View File

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

View File

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

View File

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