mt-fe-group/pms-aomei
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 订单详情-窑车详情

Browse Source
This commit is contained in:
lb
2023-05-05 14:17:25 +08:00
parent ebfbc895bb
commit 74c0adbc46
5 changed files with 285 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -38,9 +38,9 @@
<% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
<script>
// window.SITE_CONFIG['apiURL'] = 'http://192.168.1.103:8080/pms-am';
// window.SITE_CONFIG['apiURL'] = 'http://192.168.1.49:8080/pms-am'; // tengyun
window.SITE_CONFIG['apiURL'] = 'http://192.168.1.49:8080/pms-am'; // tengyun
// window.SITE_CONFIG['apiURL'] = 'http://192.168.1.62:8080/pms-am'; // tao
window.SITE_CONFIG['apiURL'] = 'http://192.168.1.21:8080/pms-am'; // xv
// window.SITE_CONFIG['apiURL'] = 'http://192.168.1.21:8080/pms-am'; // xv
// window.SITE_CONFIG['apiURL'] = 'http://localhost:3000/pms-am'; // xv
</script>
<% } %>

24
src/views/modules/pms/finishedOrder/components/tabs/carDetail.vue
View File

@@ -24,6 +24,13 @@
:dialog-visible.sync="carPayloadDialogVisible"
:configs="carPayloadDialogConfigs" />
<!-- @refreshDataList="getList" -->
<TemperatureDialog
ref="temperature-dialog"
v-if="!!temperatureDialogVisible"
:dialog-visible.sync="temperatureDialogVisible"
@refreshDataList="getAList" />
</div>
</template>
@@ -32,11 +39,12 @@ import BaseListTable from "@/components/BaseListTable.vue";
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
// import StateSelect from '@/components/StateSelect.vue';
import { timeFilter, dictFilter } from "@/utils/filters";
import TemperatureDialog from "./temperatureDialog.vue";
import DialogCarPayload from "@/components/DialogCarPayload.vue";
export default {
name: "CarDetailTag",
components: { BaseListTable, DialogCarPayload },
components: { BaseListTable, DialogCarPayload, TemperatureDialog },
props: {
orderId: {
type: String,
@@ -67,6 +75,7 @@ export default {
width: 90,
subcomponent: TableOperaionComponent,
options: [
{ name: "temperature", label: "烧制温度", icon: "odometer", color: '#ff4d00' },
{ name: "to-car-payload", label: "装载详情", icon: "shopping-cart-full" }, // or el-icon-box
// { name: "delete", label: "删除", icon: "delete", emitFull: true, promptField: "code" },
],
@@ -99,6 +108,7 @@ export default {
],
},
},
temperatureDialogVisible: false,
};
},
watch: {
@@ -178,10 +188,22 @@ export default {
case "to-car-payload": {
// open dialog instead of redirect to a new page
this.openCarPayloadDialog(data);
break;
}
case "temperature": {
this.openTemperatureDialog(data);
break;
}
}
},
openTemperatureDialog(id) {
this.temperatureDialogVisible = true;
this.$nextTick(() => {
this.$refs["temperature-dialog"].init(id);
});
},
openCarPayloadDialog(id) {
this.carPayloadDialogVisible = true;
this.$nextTick(() => {

70
src/views/modules/pms/finishedOrder/components/tabs/configs/chart.js Normal file
View File

@@ -0,0 +1,70 @@
const colors = {
line: '#555'
}
export default (x_data, y_data) => ({
title: {
text: "窑车温度",
},
grid: {
show: true,
top: 96,
left: 52,
right: 32,
bottom: 24,
},
xAxis: {
type: "category",
data: Array(65)
.fill(1)
.map((val, index) => {
return val + index;
}),
axisLine: {
lineStyle: {
color: colors.line
},
},
},
yAxis: {
type: "value",
name: "温度",
nameTextStyle: {
fontSize: 18,
align: "right",
verticalAlign: "bottom",
lineHeight: 36,
padding: 10,
},
axisLine: {
show: true,
lineStyle: {
color: colors.line,
},
},
axisLabel: {
formatter: '{value} ℃'
},
splitLine: {
lineStyle: {
color: '#ddd'
}
},
},
tooltip: {
trigger: 'axis',
formatter: '<strong style="font-size: 16px">位置</strong> ({b}) <span style="font-size: 16px; font-weight: bold;">{c}</span> ℃'
},
dataZoom: {
type: 'inside'
},
series: [
{
data: y_data,
// data: Array(65)
// .fill(1)
// .map((val) => Math.floor(Math.random() * 1000)),
type: "line",
},
],
})

26
src/views/modules/pms/finishedOrder/components/tabs/configs/tableProps.js Normal file
View File

@@ -0,0 +1,26 @@
import { timeFilter } from '@/utils/filters'
export default [
// { type: 'index', label: '序号' },
// { prop: "createTime", label: "添加时间", filter: timeFilter },
// { prop: "stateDictValue", label: "状态", filter: v => (v !== null && v !== undefined) ? ['没有数据', '正常', '判废', '过渡'][v] : '-' }, // subcomponent
// { prop: "stateDictValue", label: "温度", subcomponent: StateSelect },
{ width: 60, prop: "code", label: "位置" },
{ width: 60, prop: "temp1", label: "温度" },
{ width: 80, prop: "press1", label: "窑内压力" },
{ width: 80, prop: "press2", label: "车下压力" },
{ prop: "createTime", label: "时间", filter: timeFilter },
// { prop: "endTime", label: "结束时间", filter: timeFilter },
// {
// prop: "operations",
// name: "操作",
// fixed: "right",
// width: 150,
// subcomponent: TableOperaionComponent,
// options: [
// { name: "temperature", label: "烧制温度", },
// { name: "to-car-payload", label: "装载详情", icon: 'document' },
// { name: "delete", label: "删除", icon: 'delete', emitFull: true, promptField: 'code' }
// ],
// },
];

164
src/views/modules/pms/finishedOrder/components/tabs/temperatureDialog.vue Normal file
View File

@@ -0,0 +1,164 @@
<template>
<el-dialog
:visible="visible"
title="烧制温度"
class="temperature-dialog"
width="80%"
@close="handleClose"
:append-to-body="true"
:destroy-on-close="false">
<div class="data-list">
<BaseListTable
v-loading="tableLoading"
style="height: 85%"
:table-config="{ height: '100%' }"
:column-config="tableConfig"
:table-data="dataList"
@operate-event="handleOperate"
:current-page="page"
:current-size="size"
:refresh-layout-key="refreshLayoutKey" />
<el-pagination
class=""
style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%)"
@size-change="handleSizeChange"
@current-change="handlePageChange"
:current-page.sync="page"
:page-sizes="[20, 50, 100]"
:page-size="size"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
<div class="temp-chart" style="height: 300px;">
<div id="temp-chart" class="temp-chart__inner" style="height: 100%;" />
</div>
</el-dialog>
</template>
<script>
import BaseListTable from "@/components/BaseListTable.vue";
import loadChartConfig from "./configs/chart";
import tableConfig from "./configs/tableProps";
import * as echarts from "echarts";
export default {
name: "TemperatureDialog",
components: { BaseListTable },
props: {},
data() {
return {
visible: false,
hisId: null,
tableConfig,
chart: null,
dataList: [],
page: 1,
size: 100,
tableLoading: false,
refreshLayoutKey: 0,
totalPage: 0,
};
},
activated() {
this.refreshLayoutKey = Math.random();
},
mounted() {},
watch: {
dataList: {
handler: function (val) {
this.drawChart(val);
},
},
},
methods: {
init(id) {
this.hisId = id;
this.visible = true;
this.$nextTick(() => {
this.getList();
});
},
getList() {
this.tableLoading = true;
this.$http
.post("/pms/kilnPosHistory/pageView", {
page: this.page,
limit: this.size,
hisId: this.hisId,
})
.then(({ data: res }) => {
console.log("temp dialog res", res);
this.tableLoading = false;
if (res.code === 0) {
if ("list" in res.data) {
this.dataList = res.data.list;
} else if (Array.isArray(res.data)) {
this.dataList = res.data;
} // else ...
} else {
this.dataList.splice(0);
}
// this.dataList = [
// { id: 1, code: 1, press1: 1, press2: 1, createTime: "2023-4-21 01:00:00", temp1: 1000 },
// { id: 2, code: 2, press1: 2, press2: 2, createTime: "2023-4-21 02:00:00", temp1: 2000 },
// { id: 3, code: 3, press1: 3, press2: 3, createTime: "2023-4-21 03:00:00", temp1: 3000 },
// { id: 4, code: 4, press1: 4, press2: 4, createTime: "2023-4-21 04:00:00", temp1: 4000 },
// { id: 5, code: 5, press1: 5, press2: 5, createTime: "2023-4-21 05:00:00", temp1: 5000 },
// { id: 6, code: 6, press1: 6, press2: 6, createTime: "2023-4-21 06:00:00", temp1: 6000 },
// { id: 7, code: 7, press1: 7, press2: 7, createTime: "2023-4-21 07:00:00", temp1: 7000 },
// { id: 8, code: 8, press1: 8, press2: 8, createTime: "2023-4-21 08:00:00", temp1: 8000 },
// { id: 9, code: 9, press1: 9, press2: 9, createTime: "2023-4-21 09:00:00", temp1: 9000 },
// { id: 10, code: 10, press1: 10, press2: 10, createTime: "2023-4-21 10:00:00", temp1: 10000 },
// { id: 11, code: 11, press1: 11, press2: 11, createTime: "2023-4-21 11:00:00", temp1: 11000 },
// { id: 12, code: 12, press1: 12, press2: 12, createTime: "2023-4-21 12:00:00", temp1: 12000 },
// ];
});
},
drawChart() {
// 根据 dataList 绘制折线图
if (!this.chart) this.chart = echarts.init(document.getElementById("temp-chart"));
// const y_data = Array(65).fill(0)
this.chart.setOption(loadChartConfig(null, this.dataList.map(i => i.temp1)));
},
handleOperate() {},
handlePageChange(page) {
this.page = page;
this.getList();
},
handleSizeChange(size) {
this.size = size;
this.getList();
},
handleClose() {
setTimeout(() => {
this.$emit("destroy-dialog");
}, 300);
this.visible = false;
},
},
};
</script>
<style scoped>
.temperature-dialog >>> .el-dialog__body {
height: 70vh;
display: flex;
}
.data-list,
.temp-chart {
/* border: 1px solid #ccc; */
width: 35%;
overflow-y: auto;
position: relative;
}
.temp-chart {
flex: 1;
/* margin-left: 18px; */
padding-left: 10px;
margin-left: 10px;
/* border-left: 1px solid #ccc; */
/* background-color: lightblue; */
}
</style>