From ef93984c4aac13d88f3dbbe2342f28256549d4a2 Mon Sep 17 00:00:00 2001
From: bsw215583320 <baoshiwei121@163.com>
Date: 星期一, 05 八月 2024 10:32:10 +0800
Subject: [PATCH] 增加工单过程趋势查看功能
---
src/views/dry/api/DryOrder.api.ts | 4
src/views/dry/components/dryOrder/DryOrderTrendModal.vue | 4
src/views/dry/components/dryOrder/DryOrderTrendForm.vue | 4
src/views/dry/components/dryOrder/TrendModal.vue | 342 ++++++++++++++++++++++++++++++++++++++++++++++++
src/views/dry/DryOrderList.vue | 19 ++
src/views/dry/components/dryOrder/DryOrderForm.vue | 4
src/views/dry/DryOrderTrendList.vue | 2
src/views/dry/bigScreen/BigEqp.vue | 10
src/views/dry/components/dryOrder/DryOrderModal.vue | 4
9 files changed, 375 insertions(+), 18 deletions(-)
diff --git a/src/views/dry/DryOrderList.vue b/src/views/dry/DryOrderList.vue
index e442b45..98d17ce 100644
--- a/src/views/dry/DryOrderList.vue
+++ b/src/views/dry/DryOrderList.vue
@@ -41,13 +41,15 @@
</BasicTable>
<!-- 琛ㄥ崟鍖哄煙 -->
<DryOrderModal @register="registerModal" @success="handleSuccess" />
+ <TrendModal @register="registerTrendModal" />
</div>
</template>
<script lang="ts" name="dry-dryOrder" setup>
import { ref } from 'vue'
import { batchDelete, deleteOne, getExportUrl, getImportUrl, list } from './api/DryOrder.api'
- import DryOrderModal from './components/DryOrderModal.vue'
+ import DryOrderModal from './components/dryOrder/DryOrderModal.vue'
+ import TrendModal from './components/dryOrder/TrendModal.vue'
import { columns, searchFormSchema } from './dataDefine/DryOrder.data'
import { useModal } from '/@/components/Modal'
import { BasicTable, TableAction } from '/@/components/Table'
@@ -58,6 +60,7 @@
const checkedKeys = ref<Array<string | number>>([])
//娉ㄥ唽model
const [registerModal, { openModal }] = useModal()
+ const [registerTrendModal, { openModal:openTrendModal }] = useModal()
//娉ㄥ唽table鏁版嵁
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
@@ -142,10 +145,7 @@
*/
function getTableAction(record) {
return [
- {
- label: '鎿嶄綔璁板綍',
- onClick: openReport.bind(null, record),
- },
+
{
label: '杩囩▼瓒嬪娍',
onClick: openProcessTendency.bind(null, record),
@@ -157,6 +157,10 @@
*/
function getDropDownAction(record) {
return [
+ {
+ label: '鎿嶄綔璁板綍',
+ onClick: openReport.bind(null, record),
+ },
{
label: '缂栬緫',
onClick: handleEdit.bind(null, record),
@@ -189,6 +193,11 @@
/** 鎵撳紑杩囩▼瓒嬪娍璧板娍鍥剧獥鍙� */
function openProcessTendency(record: Recordable) {
console.log(`output->record`, record)
+ openTrendModal(true, {
+ record,
+ isUpdate: true,
+ showFooter: false,
+ })
}
</script>
diff --git a/src/views/dry/DryOrderTrendList.vue b/src/views/dry/DryOrderTrendList.vue
index 9889d8c..f9e220f 100644
--- a/src/views/dry/DryOrderTrendList.vue
+++ b/src/views/dry/DryOrderTrendList.vue
@@ -47,7 +47,7 @@
<script lang="ts" name="dry-dryOrderTrend" setup>
import { ref } from 'vue'
import { batchDelete, deleteOne, getExportUrl, getImportUrl, list } from './api/DryOrderTrend.api'
- import DryOrderTrendModal from './components/DryOrderTrendModal.vue'
+ import DryOrderTrendModal from './components/dryOrder/DryOrderTrendModal.vue'
import { columns, searchFormSchema } from './dataDefine/DryOrderTrend.data'
import { useModal } from '/@/components/Modal'
import { BasicTable, TableAction } from '/@/components/Table'
diff --git a/src/views/dry/api/DryOrder.api.ts b/src/views/dry/api/DryOrder.api.ts
index ddc95dd..aae157d 100644
--- a/src/views/dry/api/DryOrder.api.ts
+++ b/src/views/dry/api/DryOrder.api.ts
@@ -6,6 +6,7 @@
enum Api {
list = '/dry/dryOrder/list',
queryByEqp = 'dry/dry/queryByEqp',
+ queryOrderTrendById = '/dry/dryOrder/queryOrderTrendById',
save = '/dry/dryOrder/add',
edit = '/dry/dryOrder/edit',
deleteOne = '/dry/dryOrder/delete',
@@ -68,3 +69,6 @@
const url = isUpdate ? Api.edit : Api.save
return defHttp.post({ url: url, params })
}
+
+
+export const queryOrderTrendById = (params) => defHttp.get({url: Api.queryOrderTrendById, params})
diff --git a/src/views/dry/bigScreen/BigEqp.vue b/src/views/dry/bigScreen/BigEqp.vue
index 8361aaa..7f8f689 100644
--- a/src/views/dry/bigScreen/BigEqp.vue
+++ b/src/views/dry/bigScreen/BigEqp.vue
@@ -1398,10 +1398,11 @@
/**骞茬嚗杩涘害銆佽蛋鍔夸笌闃舵鏁堢巼鍜岄樁娈垫秷鑰� */
if (res && res.detailList) {
var progressSeries = []
- var ganZaoXiaoLv = []
+
var zhengQiXiaoHao = []
var dianNengXiaoHao = []
- var totalTime = 1
+ var ganZaoXiaoLv = []
+ var totalTime = 0
var beforeWeight = 0
res.moisList = []
beforeWeight = res.originWeight
@@ -1410,7 +1411,7 @@
//console.log(`output->bef`, beforeWeight)
//console.log(`output->cur`, item.weight)
res.moisList.push([item.totalTime, item.moisture])
- //console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
+ // console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
var curDryTime = item.totalTime - totalTime
if (curDryTime > 0) {
@@ -1495,6 +1496,7 @@
}
res.totalTime = totalTime + res.remain
+ console.log("efficAvg::",res.efficAvg);
/**骞茬嚗鏁堢巼銆佹秷鑰� */
if (efficiencyLineChart) {
//console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
@@ -1510,7 +1512,7 @@
data: [
{
name: '棰濆畾',
- yAxis: res.efficAvg|eqp.value.dryEfficiency,
+ yAxis: res.efficAvg|0,
},
],
label: {
diff --git a/src/views/dry/components/DryOrderForm.vue b/src/views/dry/components/dryOrder/DryOrderForm.vue
similarity index 93%
rename from src/views/dry/components/DryOrderForm.vue
rename to src/views/dry/components/dryOrder/DryOrderForm.vue
index 6e3178d..8f359db 100644
--- a/src/views/dry/components/DryOrderForm.vue
+++ b/src/views/dry/components/dryOrder/DryOrderForm.vue
@@ -9,8 +9,8 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
- import { saveOrUpdate } from '../api/DryOrder.api'
- import { getBpmFormSchema } from '../dataDefine/DryOrder.data'
+ import { saveOrUpdate } from '../../api/DryOrder.api'
+ import { getBpmFormSchema } from '../../dataDefine/DryOrder.data'
import { BasicForm, useForm } from '/@/components/Form/index'
import { defHttp } from '/@/utils/http/axios'
import { propTypes } from '/@/utils/propTypes'
diff --git a/src/views/dry/components/DryOrderModal.vue b/src/views/dry/components/dryOrder/DryOrderModal.vue
similarity index 93%
rename from src/views/dry/components/DryOrderModal.vue
rename to src/views/dry/components/dryOrder/DryOrderModal.vue
index 3fd7795..330ef57 100644
--- a/src/views/dry/components/DryOrderModal.vue
+++ b/src/views/dry/components/dryOrder/DryOrderModal.vue
@@ -6,8 +6,8 @@
<script lang="ts" setup>
import { computed, ref, unref } from 'vue'
- import { saveOrUpdate } from '../api/DryOrder.api'
- import { formSchema } from '../dataDefine/DryOrder.data'
+ import { saveOrUpdate } from '../../api/DryOrder.api'
+ import { formSchema } from '../../dataDefine/DryOrder.data'
import { BasicForm, useForm } from '/@/components/Form/index'
import { BasicModal, useModalInner } from '/@/components/Modal'
// Emits澹版槑
diff --git a/src/views/dry/components/DryOrderTrendForm.vue b/src/views/dry/components/dryOrder/DryOrderTrendForm.vue
similarity index 93%
rename from src/views/dry/components/DryOrderTrendForm.vue
rename to src/views/dry/components/dryOrder/DryOrderTrendForm.vue
index d3eec01..f62dfc4 100644
--- a/src/views/dry/components/DryOrderTrendForm.vue
+++ b/src/views/dry/components/dryOrder/DryOrderTrendForm.vue
@@ -9,8 +9,8 @@
<script lang="ts">
import { computed, defineComponent } from 'vue';
-import { saveOrUpdate } from '../api/DryOrderTrend.api';
-import { getBpmFormSchema } from '../dataDefine/DryOrderTrend.data';
+import { saveOrUpdate } from '../../api/DryOrderTrend.api';
+import { getBpmFormSchema } from '../../dataDefine/DryOrderTrend.data';
import { BasicForm, useForm } from '/@/components/Form/index';
import { defHttp } from '/@/utils/http/axios';
import { propTypes } from '/@/utils/propTypes';
diff --git a/src/views/dry/components/DryOrderTrendModal.vue b/src/views/dry/components/dryOrder/DryOrderTrendModal.vue
similarity index 93%
rename from src/views/dry/components/DryOrderTrendModal.vue
rename to src/views/dry/components/dryOrder/DryOrderTrendModal.vue
index 71af75f..8f77883 100644
--- a/src/views/dry/components/DryOrderTrendModal.vue
+++ b/src/views/dry/components/dryOrder/DryOrderTrendModal.vue
@@ -6,8 +6,8 @@
<script lang="ts" setup>
import { computed, ref, unref } from 'vue';
-import { saveOrUpdate } from '../api/DryOrderTrend.api';
-import { formSchema } from '../dataDefine/DryOrderTrend.data';
+import { saveOrUpdate } from '../../api/DryOrderTrend.api';
+import { formSchema } from '../../dataDefine/DryOrderTrend.data';
import { BasicForm, useForm } from '/@/components/Form/index';
import { BasicModal, useModalInner } from '/@/components/Modal';
// Emits澹版槑
diff --git a/src/views/dry/components/dryOrder/TrendModal.vue b/src/views/dry/components/dryOrder/TrendModal.vue
new file mode 100644
index 0000000..c203738
--- /dev/null
+++ b/src/views/dry/components/dryOrder/TrendModal.vue
@@ -0,0 +1,342 @@
+<template>
+ <BasicModal v-bind="$attrs" destroyOnClose @register="register" title="宸ュ崟杩囩▼瓒嬪娍" width="1200px">
+ <template v-if="loading">
+ <div class="empty-tips"> 鍔犺浇涓紝璇风◢绛夆�︹�� </div>
+ </template>
+ <template v-if="!loading">
+ <div id="chart" style="width: 1200px; height: 500px"></div>
+ </template>
+ </BasicModal>
+</template>
+<script lang="ts">
+ import { defineComponent, ref, watch } from 'vue';
+ import * as echarts from 'echarts'
+ import { BasicModal, useModalInner } from '/@/components/Modal';
+ import { defHttp } from '/@/utils/http/axios'
+ import { getTenantId, getToken } from '/@/utils/auth'
+
+ export default defineComponent({
+ components: { BasicModal },
+ setup() {
+ var chart: echarts.ECharts
+ const loading = ref(true);
+ const lines = ref(10);
+ const orderData = ref();
+ const [register, { setModalProps, redoModalHeight }] = useModalInner((data)=>{
+ data && onDataReceive(data);
+ });
+
+ watch(
+ () => lines.value,
+ () => {
+ redoModalHeight();
+ }
+ );
+
+ function onDataReceive(data) {
+ // console.log('Data Received', data);
+ orderData.value = data.record;
+ handleShow(true);
+ }
+ function initCharts() {
+ let domId = 'chart'
+ let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement
+ chart = echarts.init(chartDom)
+ const option = {
+ color: ['green', 'red', '#1890ff'],
+ title: {
+ text: '鍚按鐜�/娓╁害/鏁堢巼瓒嬪娍',
+ textStyle: {
+ color: '#000',
+ fontSize: 15,
+ },
+ },
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ left: 70,
+ right: 90,
+ top: 60,
+ bottom: 30,
+ },
+ legend: {
+ right: 60,
+ textStyle: {
+ color: '#000',
+ },
+ },
+ // toolbox: {
+ // show: true,
+ // feature: {
+ // dataZoom: {
+ // yAxisIndex: 'none',
+ // },
+ // dataView: { readOnly: false },
+ // magicType: { type: ['line', 'bar'] },
+ // restore: {},
+ // saveAsImage: {},
+ // },
+ // },
+ xAxis: {
+ type: 'value',
+ axisLabel: {
+ color: '#000',
+ },
+ //boundaryGap: false,
+ // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ min: 0,
+ max: function (value) {
+ if (value.max < 50) {
+ return 50
+ } else {
+ return value.max
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: ['#2b2b2b'],
+ },
+ },
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: ['10%', '10%'],
+ axisLabel: {
+ color: '#000',
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: ['#2b2b2b'],
+ },
+ },
+ // min: 0,
+ // max: function (value) {
+ // if (value.max < 100) {
+ // return 100
+ // } else {
+ // return value.max
+ // }
+ // },
+ },
+ // yAxis: {
+ // type: 'value',
+ // axisLabel: {
+ // formatter: '{value} 掳C',
+ // },
+ // },
+ series: [
+ {
+ name: '鍚按鐜�',
+ type: 'line',
+ smooth: true,
+ // symbol: 'none',
+ data: [
+
+ ],
+ lineStyle: {
+ width: 1,
+ },
+ markLine: {
+ data: [{ type: 'average', name: 'Avg' }],
+ },
+ areaStyle: {
+ opacity: 0.2,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgb(128, 255, 165)',
+ },
+ {
+ offset: 1,
+ color: 'rgb(1, 191, 236)',
+ },
+ ]),
+ },
+ },
+ {
+ name: '娓╁害',
+ type: 'line',
+ smooth: true,
+ symbol: 'none',
+ data: [
+
+ ],
+ lineStyle: {
+ width: 1,
+ },
+ areaStyle: {
+ opacity: 0.2,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgb(255, 0, 135)',
+ },
+ {
+ offset: 1,
+ color: 'rgb(135, 0, 157)',
+ },
+ ]),
+ },
+ // markLine: {
+ // data: [
+ // { type: 'average', name: 'Avg' },
+ // [
+ // {
+ // symbol: 'none',
+ // x: '90%',
+ // yAxis: 'max',
+ // },
+ // {
+ // symbol: 'circle',
+ // label: {
+ // position: 'start',
+ // formatter: 'Max',
+ // },
+ // type: 'max',
+ // name: '鏈�楂樼偣',
+ // },
+ // ],
+ // ],
+ // },
+ },
+ {
+ name: '骞茬嚗鏁堢巼',
+ data: [],
+ type: 'line',
+ markPoint: {
+ data: [
+ { type: 'max', name: 'Max' },
+ { type: 'min', name: 'Min' },
+ ],
+ },
+ markLine: {
+ symbol: 'none',
+ data: [
+ {
+ name: '棰濆畾',
+ yAxis: 100,
+ },
+ ],
+ label: {
+ formatter: '{b}\n{c}',
+ color: '#fff',
+ },
+ },
+ },
+ ],
+ }
+ option && chart.setOption(option)
+ }
+ function handleShow(visible: boolean) {
+ console.log("handleShow");
+ if (visible) {
+ loading.value = true;
+ setModalProps({ loading: true, confirmLoading: true });
+ // let tenantId = 1000
+ // let eqpCode ='GM002'
+ // let queryRealTimeUrl = '/dry/real/getRealTimeData'
+ const queryOrderTrendById = '/dry/dryOrder/queryOrderTrendById'
+ // defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => {
+ defHttp.get({ url: queryOrderTrendById, params: { id: orderData.value.id } }).then((res) => {
+
+ //console.log("rrreeesss:::",res)
+ loading.value = false;
+ setModalProps({ loading: false, confirmLoading: false });
+ //console.log("dfdfdf",orderData.value.temps)
+ var tempjson = eval('('+orderData.value.temps+')')
+ Array.from(Object.entries(tempjson))
+
+ var arr = Object.keys(tempjson)
+ var temArr = []
+ arr.forEach((item) => {
+ temArr.push([item * 1, tempjson[item]])
+ })
+ // console.log(temArr);
+ var ganZaoXiaoLv = []
+ var totalTime = 0
+ var beforeWeight = 0
+ var moisList = []
+ beforeWeight = res.originWeight
+ //console.log(`output->res`, res)
+ res.detailList.forEach((item) => {
+ //console.log(`output->bef`, beforeWeight)
+ //console.log(`output->cur`, item.weight)
+ moisList.push([item.totalTime, item.moisture])
+ // console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
+ var curDryTime = item.totalTime - totalTime
+
+ if (curDryTime > 0) {
+ ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)])
+
+ totalTime = item.totalTime
+ }
+ beforeWeight = item.weight
+ })
+
+ setTimeout(()=>{
+ initCharts();
+ chart.setOption({
+ series: [
+ {
+ data: moisList,
+ markLine: {
+ symbol: 'none',
+ data: [
+ {
+ name: '鐩爣',
+ yAxis: orderData.value.target,
+ },
+ ],
+ label: {
+ formatter: '{b}\n{c}%',
+ color: '#000',
+ },
+ },
+ },
+ {
+ data: temArr,
+ },
+ {
+ data: ganZaoXiaoLv,
+ markLine: {
+ symbol: 'none',
+ data: [
+ {
+ name: '棰濆畾',
+ yAxis: res.efficAvg|100,
+ },
+ ],
+ label: {
+ formatter: '{b}\n{c}',
+ color: '#fff',
+ },
+ },
+ },
+ ],
+ })
+ },100)
+
+
+
+ })
+
+ }
+ }
+
+ function setLines() {
+ lines.value = Math.round(Math.random() * 20 + 10);
+ }
+ return { register, loading, handleShow, lines, setLines };
+ },
+ });
+</script>
+<style scoped>
+ .empty-tips {
+ height: 500px;
+ line-height: 500px;
+ text-align: center;
+ }
+</style>
--
Gitblit v1.9.3