产前备料

This commit is contained in:
赵正易 2024-09-05 16:48:01 +08:00
parent 394f0b6bde
commit 3771314559
3 changed files with 109 additions and 13 deletions

View File

@ -28,6 +28,7 @@
"countup.js": "^2.1.0",
"crypto-js": "^4.1.1",
"echarts": "^5.5.0",
"echarts-liquidfill": "^3.1.0",
"element-plus": "^2.4.1",
"file-saver": "2.0.5",
"fuse.js": "6.4.6",

View File

@ -12,8 +12,11 @@ import QrcodeVue from 'qrcode.vue';
// DataV https://datav-vue3.netlify.app/Guide/Guide.html
// 图表组件
import DataVVue3 from '@kjgl77/datav-vue3'
// import * as echarts from 'echarts/core';
import * as echarts from 'echarts';
import {
CanvasRenderer
} from 'echarts/renderers';
echarts.use([CanvasRenderer]);
import VueEcharts from 'vue-echarts';
// import * as DataV from '@dataview/datav-vue3';
// element-plus dayJS

View File

@ -19,8 +19,8 @@
<el-form-item>
<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
<el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
<el-button icon="Printer" @click="printAll">打印全部</el-button>
<el-button icon="Printer" @click="printSelect">打印勾选工单</el-button>
<!-- <el-button icon="Printer" @click="printAll">打印全部</el-button>
<el-button icon="Printer" @click="printSelect">打印勾选工单</el-button> -->
</el-form-item>
</el-form>
<!-- 工单列表 -->
@ -38,7 +38,7 @@
}"
:loading="loading"
:data="dataList">
<vxe-column type="checkbox" width="60"></vxe-column>
<!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
<vxe-column type="seq" title="序号" width="60"></vxe-column>
<vxe-column title="优先级" width="80">
<template #default="{ row, rowIndex }">
@ -53,15 +53,19 @@
<template #header>
<div class="card-header">
<el-row justify="space-between">
<el-col :span="18">{{ item.taskCode }}</el-col>
<el-col :span="18">配料号:{{ item.taskCode }}</el-col>
<el-col :span="6"
><el-button type="danger" @click="handleDeleteTask(item, index, row)">删除</el-button></el-col
>
</el-row>
</div>
</template>
<el-scrollbar height="100px">
<el-row justify="space-between">
<el-scrollbar height="200px">
<div class="chart-box">
<vChart style="width: 200px; height: 200px" :option="getLiquidFillOptions(item.percentage)"></vChart>
</div>
<!-- <el-row justify="space-between">
<el-col :span="18">物料总数</el-col>
<el-col :span="6">200</el-col>
</el-row>
@ -72,7 +76,7 @@
<el-row justify="space-between">
<el-col :span="18">完成进度</el-col>
<el-col :span="6">12/24</el-col>
</el-row>
</el-row> -->
</el-scrollbar>
<template #footer>
<el-row justify="space-between">
@ -388,7 +392,12 @@ const confirmFilterEvent = (option) => {
}
//
function cellClassName({ row, column }) {
if (row.configured_all_Quantity > 0) {
const needNum = row.boM_require_Quantity
const useNum = row.configured_all_Quantity
if (useNum > 0 && useNum < needNum) {
return 'row-orange'
}
if (useNum >= needNum) {
return 'row-green'
}
}
@ -418,6 +427,77 @@ function getTaskInfoList(taskCode) {
}
/// ========================================================
/// ========== ================
import 'echarts-liquidfill/src/liquidFill.js'
function getLiquidFillOptions(num) {
let _color = '#ff0000'
if (num > 50 && num < 90) {
_color = '#ffaa00'
}
if (num >= 90) {
_color = '#00aa00'
}
return {
// title: {
// text: ''
// },
legend: {
padding: 0
},
series: [
{
type: 'gauge',
//
progress: {
show: true,
width: 18
},
//
axisLine: {
lineStyle: {
width: 18
}
},
//
axisTick: {
//
show: false
},
// 线
splitLine: {
show: false
},
//
axisLabel: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: false,
fontSize: 18,
offsetCenter: [0, '50%']
},
itemStyle: {
color: _color,
shadowColor: 'rgba(214, 214, 214, 0.4)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
data: [
{
value: num
}
]
}
]
}
}
/// =======================================
/// ======================= ==============================
import printTemplate from './ThePrintTemplate.vue'
@ -454,8 +534,8 @@ function printSelect() {
font-weight: 600;
}
.add-box {
width: 100%;
height: 280px;
width: 300px;
height: 380px;
display: flex;
align-items: center;
justify-content: center;
@ -465,8 +545,20 @@ function printSelect() {
display: flex;
flex-direction: row;
}
.chart-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
::v-deep(.row-green) {
background-color: #55aa7f;
color: #fff;
}
</style>
::v-deep(.row-orange) {
background-color: #e29700;
color: #fff;
}
</style>