这是前端<template>
<div class="historyData_page" style="display: flex; margin
-bottom: 0px; width: 100%">
<div style="width: 100%">
<div class="content">
<label><strong>工序号</strong></label>
<el
-select placeholder="请选择工序号" v
-model="processColumnParams.process_no" clearable style="width: 250px">
<el
-option v
-for="item in this.$store.state.commonProcessList" :key="item.process_no" :label="item.process_no + item.details" :value="item.process_no"> </el
-option>
</el
-select>
<label><strong>主条形码</strong></label>
<el
-input placeholder="请输入主条形码" v
-model="selectParams.bar_no" clearable style="width: 300px"> </el
-input>
<label><strong>结果</strong></label>
<el
-select placeholder="请选择查询结果" v
-model="selectParams.ok_flag" clearable style="width: 150px">
<el
-option v
-for="item in $t('histortData.flag_options')" :key="item.value" :label="item.label" :value="item.value"> </el
-option>
</el
-select>
<label><strong>选择时间范围</strong></label>
<el
-date
-picker type="datetime" placeholder="选择开始时间" v
-model="selectParams.startTime" default
-time="12:00:00"> </el
-date
-picker>
<el
-date
-picker type="datetime" placeholder="选择结束时间" v
-model="selectParams.endTime" default
-time="12:00:00"> </el
-date
-picker>
<el
-button style="margin: 0 0 0 10px" type="primary" icon="el
-icon
-search" @click="SearchTable">搜索</el
-button>
<el
-button style="margin: 0 10px 0 10px" type="primary" icon="el
-icon
-refresh" @click="resetInput">重置</el
-button>
</div>
<div style="margin: 5px 0 10px 10px">
<el
-button type="primary" plain icon="el
-icon
-plus" @click="dialogFormVisible = true">{{ "新增" }} </el
-button>
<el
-button type="danger" plain icon="el
-icon
-delete">{{ "删除" }} </el
-button>
<el
-button type="warning" plain icon="el
-icon
-download" @click="handleDownload">{{ "导出" }} </el
-button>
</div>
<div class="tab_Data">
<el
-table
:data="tableData.slice((currentPage
- 1) * PageSize, currentPage * PageSize)"
style="width: 100%"
height="1115"
border
:cell
-style="cellStyle"
:header
-cell
-style="{
background: '#f5f7fa',
color: '#000000',
}"
v
-loading="loading"
ref="tableRef"
@selection
-change="selectionLineChangeHandle"
>
<af
-table
-column type="selection"></af
-table
-column>
<template v
-for="(item, index) in processTableColumnName">
<af
-table
-column v
-if="item.type == 'bar'" :key="index" :label="item.label" :prop="item.name" fixed> </af
-table
-column>
<af
-table
-column v
-else
-if="item.type == 'img'" :key="index" :label="item.label" :prop="item.name">
<template slot
-scope="scope">
<el
-button type="text" @click="SearchProcessFile(scope.row.bar_no, processColumnParams.process_no, item.label, scope.row.do_time)">
{{ item.label }}
</el
-button>
</template>
</af
-table
-column>
<af
-table
-column v
-else
-if="item.type == 'csv'" :key="index" :label="item.label" :prop="item.name">
<template slot
-scope="scope">
<el
-button type="text" @click="SearchCsvFile(scope.row.bar_no, processColumnParams.process_no, item.label, scope.row.do_time)">
{{ item.label }}
</el
-button>
</template>
</af
-table
-column>
<af
-table
-column v
-else :key="index" :prop="item.name" :label="item.label"> </af
-table
-column>
</template>
</el
-table>
<div class="tabListPage">
<el
-pagination @size
-change="handleSizeChange" @current
-change="handleCurrentChange" :current
-page="currentPage" :page
-sizes="pageSizes" :page
-size="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </el
-pagination>
</div>
</div>
</div>
<!
-- 照片
弹框 -->
<el
-dialog :visible.sync="imageDialogVisible" width="40%">
<div>
<span class="demonstration">{{ ProcessFile.name }}</span
><br />
<span class="demonstration">{{ ProcessFile.bar_no }}</span
><br />
<span class="demonstration">{{ image.picPath }}</span>
</div>
<div>
<el
-image :src="image.path" :preview
-src
-list="srcList"></el
-image>
</div>
</el
-dialog>
<!
-- csv
弹框 -->
<el
-dialog :visible.sync="csvDialogVisible" width="60%">
<!
-- <div>
<el
-button type="primary" icon="el
-icon
-download" @click="csvDownload">{{ 111 }}</el
-button>
</div>
-->
<div>
<span class="demonstration">{{ csvFile.bar_no }}</span>
</div>
<div class="main" ref="chartDom" style="widows: 1200px; height: 400px"></div>
</el
-dialog>
</div>
</template>
<script>
import api from "@/api";
import { saveJsonToExcel } from "@/utils/xlsx";
export default {
data() {
return {
processColumnParams: {
process_no: "",
eqpt_status: "1",
},
routerValue: {},
selectParams: {
process_no: "",
bar_no: "",
ok_flag: "All",
startTime: "",
endTime: "",
},
image: {
name: "",
path: "",
picPath: "",
},
imageDialogVisible: false,
csvDialogVisible: false,
searchedImage: false,
ProcessFile: { bar_no: "", process_no: "", name: "", lang: "zh", do_time: "" },
plcadress: "",
interactionvalue: "",
tableData: [],
totalCount: 1,
currentPage: 1,
PageSize: 15,
pageSizes: [5, 15, 30, 40],
dialogFormVisible: false,
modifyDialogFormVisible: false,
formDialog: {
Process_no: "",
Details: "",
},
labelPosition: "left",
selectedRows: [],
processTableColumnName: [],
srcList: [],
loading: true,
// 查询csv文件参数
csvFile: { bar_no: "", process_no: "", name: "", lang: "", do_time: "" },
//曲线数据
csvChart: [],
};
},
computed: {
change() {
this.selectParams = this.$route.params.value == null ? this.selectParams : this.$route.params.value;
}
},
watch: {
change(val) {
console.log(val)
}
},
created() {
console.log(this.$route.params.value);
console.log(this.selectParams);
this.selectParams = this.$store.state.historyData;
this.processColumnParams.process_no = this.selectParams.process_no;
console.log("this.selectParams");
this.SearchTable();
},
methods: {
setinfor() {
//console.log(this.selectParams);
this.$store.dispatch("historyData", this.selectParams);
},
SearchTable() {
// console.log(this.selectParams);
this.loading = true;
this.selectParams.process_no = this.processColumnParams.process_no;
console.log(this.selectParams.process_no);
if (this.processColumnParams.process_no == "") {
this.$message.warning("请先选择要查询的工序号!");
} else if (this.processColumnParams.startTime == "") {
this.$message.warning("请先选择要查询的起始时间!");
} else if (this.processColumnParams.endTime == "") {
this.$message.warning("请先选择要查询的截止时间!");
} else {
this.processTableColumnName = [];
for (let index = 0; index < this.$t("histortData.processFixedTableColumnName").length; index++) {
const element = this.$t("histortData.processFixedTableColumnName")[index];
this.processTableColumnName.push(element);
}
api.getProcessTableColumnName("/ProcessTableColumnName", this.processColumnParams).then((data) => {
for (let index = 0; index < data.data.length; index++) {
const element = data.data[index];
this.processTableColumnName.push(element);
}
console.log(data.data);
});
api.getProcessProperties("/ProcessProperties", this.selectParams).then((data) => {
console.log(data.data);
this.loading = false;
this.totalCount = data.data.length;
this.tableData = data.data;
console.log(data.data);
this.setinfor(); //数据存储
});
}
},
//获取工序图片 产品码、工序、图片名
SearchProcessFile(val, val2, val3, val4) {
console.log(val, val2, val3, val4);
this.ProcessFile.bar_no = val;
this.ProcessFile.process_no = val2;
this.ProcessFile.name = val3;
this.ProcessFile.do_time = val4;
this.ProcessFile.lang = "zh";
// 显示指定产品的指定图片
api.getProcessFileSingle("/ProcessFileSingle", this.ProcessFile).then((data) => {
// 清空image数据
this.image = [];
// 清空
this.srcList = [];
this.imageDialogVisible = true;
if (data.data[0].path == "") {
this.searchedImage = false;
} else {
this.image = data.data[0];
for (let index = 0; index < data.data.length; index++) {
const element = data.data[index].path;
this.srcList.push(element);
}
this.searchedImage = true;
}
});
},
//获取csv
SearchCsvFile(val, val2, val3, val4) {
this.csvFile.bar_no = val;
this.csvFile.process_no = val2;
this.csvFile.name = val3;
this.csvFile.do_time = val4;
this.csvFile.lang = "zh";
// 获取最新图片
//this.csvColumnName = this.$t("PointInspectionResult.VibrationCsvColumnName");
api.getReadCurves("/ReadCurves", this.csvFile).then((data) => {
//this.csvChart = data.data;
this.csvDialogVisible = true;
console.log(this.csvFile);
console.log(data.data);
this.initChart(data.data);
});
},
initChart(data) {
this.$nextTick(() => {
this.csvChart = data;
var chartDom = this.$refs.chartDom;
// 检查 DOM 元素是否存在
if (!chartDom) {
console.error("chartDom is not found");
return;
}
// 检查 DOM 元素的宽度和高度
console.log("chartDom width:", chartDom.offsetWidth, "height:", chartDom.offsetHeight);
var myChart = this.$echarts.init(chartDom);
var xAxis = [];
var yAxis = [];
this.csvChart.forEach((el) => {
xAxis.push(el.x_Absolute);
yAxis.push(el.y);
});
yAxis = data.map((el) => parseFloat(el.y));
console.log("xAxis:", xAxis);
console.log("yAxis:", yAxis);
var option = {
tooltip: {
trigger: "axis",
formatter: (params) => {
const xValue = params[0].axisValue;
const yValue = params[0].data;
return `${xValue}:${yValue}`;
},
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
xAxis: {
type: "category",
data: xAxis,
name: "单位(s)",
axisLabel: {
show: true,
showMaxLabel: true,
showMinLabel: true,
},
},
yAxis: {
type: "value",
name: "单位(N)",
//max: 2,
},
series: [
{
data: yAxis,
type: "line",
},
],
};
myChart.setOption(option);
});
},
selectionLineChangeHandle(val) {
// console.log(this.selectedRows);
this.selectedRows = val;
},
resetInput() {
(this.fieldname = ""), (this.plcadress = ""), (this.interactionvalue = "");
},
modifyData(val) {
this.modifyDialogFormVisible = true;
},
cellStyle({ row, column, rowIndex, columnIndex }) {
// NG字样红色显示
// for (let index = 0; index < this.$t("ShowResult.tableColumnName").length; index++) {
// const element = this.$t("ShowResult.tableColumnName")[index].name;
// if (row[element] == "NG" && column.property == element) {
// return "color:red";
// }
// }
// 数据超限红色显示
// for (let i = 0; i < this.ParamatesLimit.length; i++) {
// const element = this.ParamatesLimit[i].name;
// if ((Number(this.ParamatesLimit[i].up_limit) < Number(row[element]) || Number(row[element]) < Number(this.ParamatesLimit[i].down_limit)) && column.property == element) {
// return "color:red";
// }
// }
for (let index = 0; index < this.processTableColumnName.length; index++) {
const element = this.processTableColumnName[index].name;
if (row[element] == "NG" && column.property == element) {
return "color:red";
}
}
},
// 导出数据
handleDownload() {
var tabHandle = []; //导出表头
for (let index = 0; index < this.processTableColumnName.length; index++) {
const element = this.processTableColumnName[index];
if (element.type != "img" && element.type != "csv") {
tabHandle.push(element.label);
}
}
saveJsonToExcel(this.tableData, tabHandle, "OP" + this.processColumnParams.process_no + ".xlsx");
},
// 每页显示的条数
handleSizeChange(val) {
// 改变每页显示的条数
this.PageSize = val;
// 注意：在改变每页显示的条数时，要将页码显示到第一页
this.currentPage = 1;
},
// 显示第几页
handleCurrentChange(val) {
// 改变默认的页数
this.currentPage = val;
},
},
updated() {
// tableRef是表格的ref属性值
if (this.$refs.tableRef && this.$refs.tableRef.doLayout) {
this.$refs.tableRef.doLayout();
}
},
};
</script>
<style scoped lang="less">
.el
-menu {
width: 200px;
}
.tab_Data {
// width: 100%;
/* margin
-top: 30px;
margin
-left: 10px;
margin
-right: 10px; */
}
.content {
// justify
-content: flex
-start;
// display: flex;
}
</style>
这是后端using SanHuaMesApiServer.Models;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.VisualBasic.FileIO;
using System.Data;
using System.Globalization;
using System.Text;
using SanHuaMesApiServer.Helps;
namespace SanHuaMesApiServer.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class ProcessCheckColumnNameController : ControllerBase
{
[HttpGet]
public async Task<IEnumerable<ProcessTableColumnName>> Get([FromQuery] string process_no,string inspection_type,string eqpt_status,string? file_type)
{
return await Task.Factory.StartNew(() =>
{
StringBuilder sb = new StringBuilder();
sb.Append($"select field_name,field_name_cn from SHProcessInspectionPropertyParse where process_no = '{process_no}' and inspection_type = '{inspection_type}' ORDER BY field_name ");
DataSet data = SqlHelper.GetTable(CommandType.Text, sb.ToString(), null);
StringBuilder sbImag = new StringBuilder();
sbImag.Append($"select name,name_en from GTProcessFileConfig where process_no = '{process_no}' and eqpt_status = '{eqpt_status}' and file_type = '{file_type}'");
DataSet dataImag = SqlHelper.GetTable(CommandType.Text, sbImag.ToString(), null);
List<ProcessTableColumnName> temp = new List<ProcessTableColumnName>();
foreach (DataRow row in dataImag.Tables[0].Rows)
{
temp.Add(new ProcessTableColumnName()
{
Name = row[1].ToString(),
Label = row[0].ToString(),
Type = file_type,
}); ; ;
}
foreach (DataRow row in data.Tables[0].Rows)
{
temp.Add(new ProcessTableColumnName()
{
Name = row[0].ToString(),
Label = row[1].ToString(),
Type = "",
}); ; ;
}
return temp.AsEnumerable();
});
}
}
[Route("api/[controller]")]
[ApiController]
public class ProcessCheckColumnNameEnController : ControllerBase
{
[HttpGet]
public async Task<IEnumerable<ProcessTableColumnName>> Get([FromQuery] string process_no, string inspection_type, string eqpt_status, string? file_type)
{
return await Task.Factory.StartNew(() =>
{
StringBuilder sb = new StringBuilder();
sb.Append($"select field_name,field_name_en from SHProcessInspectionPropertyParse where process_no = '{process_no}' and inspection_type = '{inspection_type}' ");
DataSet data = SqlHelper.GetTable(CommandType.Text, sb.ToString(), null);
StringBuilder sbImag = new StringBuilder();
sbImag.Append($"select name,name_en,file_type from GTProcessFileConfig where process_no = '{process_no}' and eqpt_status = '{eqpt_status}' and file_type = '{file_type}'");
DataSet dataImag = SqlHelper.GetTable(CommandType.Text, sbImag.ToString(), null);
List<ProcessTableColumnName> temp = new List<ProcessTableColumnName>();
foreach (DataRow row in dataImag.Tables[0].Rows)
{
temp.Add(new ProcessTableColumnName()
{
Name = row[1].ToString(),
Label = row[1].ToString(),
Type = row[2].ToString(),
}); ; ;
}
foreach (DataRow row in data.Tables[0].Rows)
{
temp.Add(new ProcessTableColumnName()
{
Name = row[0].ToString(),
Label = row[1].ToString(),
Type = "",
}); ; ;
}
return temp.AsEnumerable();
});
}
}
}报错这个index.js:116
GET https://127.0.0.1:7053/api/ProcessProperties?process_no=20&bar_no=&ok_flag= 400 (Bad Request)
settle.js:19
Uncaught (in promise)
AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code
:
"ERR_BAD_REQUEST"
config
:
{transitional: {…}, adapter:
Array(3), transformRequest:
Array(1), transformResponse:
Array(1), timeout: 10000, …}
message
:
"Request failed with status code 400"
name
:
"AxiosError"
request
:
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 10000, withCredentials: false, upload: XMLHttpRequestUpload, …}
response
:
{data: {…}, status: 400, statusText: '', headers: AxiosHeaders, config: {…}, …}
status
:
400
stack
:
"AxiosError: Request failed with status code 400\n at settle (webpack
-internal:///./node_modules/axios/lib/core/settle.js:24:12)\n at XMLHttpRequest.onloadend (webpack
-internal:///./node_modules/axios/lib/adapters/xhr.js:63:66)\n at Axios.request (webpack
-internal:///./node_modules/axios/lib/core/Axios.js:54:41)"
[[Prototype]]
:
Error
XMLHttpRequest.send
getProcessProperties @ index.js:116
SearchTable @ historyData.vue:197
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
