327 lines
8.8 KiB
Vue
327 lines
8.8 KiB
Vue
<template>
|
||
<el-container>
|
||
<el-header>
|
||
<div class="left-panel">
|
||
<xtSelect
|
||
:apiObj="apiObjM"
|
||
:params="paramsM"
|
||
v-model="query.mpoint"
|
||
style="width: 500px"
|
||
@change="handleQuery"
|
||
placeholder="选择测点"
|
||
>
|
||
<el-table-column label="测点名" prop="name"></el-table-column>
|
||
<el-table-column label="别名" prop="nickname"></el-table-column>
|
||
<el-table-column label="计量物料" prop="material_name"></el-table-column>
|
||
</xtSelect>
|
||
<el-select
|
||
v-model="query.type"
|
||
placeholder="类型"
|
||
style="margin: 0 6px; width: 160px"
|
||
@change="handleQuery"
|
||
>
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
<el-date-picker v-model="timeRange" type="datetimerange"
|
||
value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
|
||
start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery"
|
||
style="width: 100%"
|
||
format="YYYY-MM-DD HH"
|
||
popper-class="tpc"/>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-search"
|
||
style="margin-left: 6px"
|
||
@click="handleQuery"
|
||
></el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-main class="nopadding">
|
||
<el-container>
|
||
<el-aside style="width: 60%; float: right;">
|
||
<!-- 折线图组件 -->
|
||
<scTable
|
||
ref="table"
|
||
:apiObj="apiObj"
|
||
row-key="id"
|
||
stripe
|
||
:params="params"
|
||
:query="query"
|
||
highlightCurrentRow
|
||
@row-click="rowClick"
|
||
@dataChange="dataChange"
|
||
>
|
||
<el-table-column label="测点" prop="mpoint_name" min-width="160">
|
||
</el-table-column>
|
||
<el-table-column label="所属集合" prop="mgroup_name">
|
||
</el-table-column>
|
||
<el-table-column label="类型" prop="type" width="75"> </el-table-column>
|
||
<el-table-column label="年" prop="year" width="60"> </el-table-column>
|
||
<el-table-column label="班年" prop="year_s" width="60"> </el-table-column>
|
||
<el-table-column label="月" prop="month" width="50"> </el-table-column>
|
||
<el-table-column label="班月" prop="month_s" width="50"> </el-table-column>
|
||
<el-table-column label="日" prop="day" width="50"> </el-table-column>
|
||
<el-table-column label="班日" prop="day_s" width="50"> </el-table-column>
|
||
<el-table-column label="时" prop="hour" width="50"> </el-table-column>
|
||
<el-table-column label="当前值" prop="val" min-width="100"></el-table-column>
|
||
<el-table-column
|
||
label="校正值"
|
||
prop="val_correct"
|
||
min-width="100"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="原始计算值"
|
||
prop="val_origin"
|
||
min-width="100"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="操作"
|
||
fixed="right"
|
||
align="center"
|
||
width="140"
|
||
>
|
||
<template #default="scope">
|
||
<el-button
|
||
link
|
||
size="small"
|
||
v-if="scope.row.type == 'year_s' || scope.row.type == 'month_s' || scope.row.type == 'day_s'"
|
||
@click="handle_edit(scope.row)"
|
||
type="primary"
|
||
>校正</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</scTable>
|
||
</el-aside>
|
||
<el-main>
|
||
<scEcharts :option="chartOption" height="400px" />
|
||
</el-main>
|
||
</el-container>
|
||
</el-main>
|
||
</el-container>
|
||
<el-dialog title="校正" v-model="visible">
|
||
<el-main style="padding: 0 20px 20px 20px">
|
||
<el-form
|
||
ref="dialogForm"
|
||
:model="form"
|
||
label-position="right"
|
||
label-width="80px"
|
||
style="padding: 0 10px"
|
||
>
|
||
<el-row>
|
||
<el-col :md="8" :sm="24">
|
||
<el-form-item label="所属部门">
|
||
<span>{{ form.belong_dept_name }}</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="8" :sm="24">
|
||
<el-form-item label="工段名称">
|
||
<span>{{ form.mgroup_name }}</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="8" :sm="24">
|
||
<el-form-item label="测点名">
|
||
<span>{{ form.mpoint_name }}</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="8" :sm="24">
|
||
<el-form-item label="时间范围">
|
||
<span>{{ form.year_s }}/{{ form.month_s }}/{{ form.day_s }}</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="8" :sm="24">
|
||
<el-form-item label="校正值">
|
||
<el-input-number
|
||
v-model="form.val_correct"
|
||
:min="0"
|
||
controls-position="right"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-main>
|
||
<el-footer>
|
||
<el-button type="primary" :loading="isSaveing" @click="submit"
|
||
>保存</el-button
|
||
>
|
||
<el-button @click="visible = false">取消</el-button>
|
||
</el-footer>
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
|
||
export default {
|
||
name: "sflog",
|
||
data() {
|
||
return {
|
||
apiObjM: this.$API.enm.mpoint.list,
|
||
paramsM: {material__isnull: 0},
|
||
apiObj: this.$API.enm.mpoint.stat,
|
||
params: {
|
||
type: "day_s",
|
||
},
|
||
query: {
|
||
mpoint: null,
|
||
type: "day_s",
|
||
start_time: null,
|
||
end_time: null
|
||
},
|
||
chartOption: {
|
||
title: {
|
||
text: '趋势图'
|
||
},
|
||
color: ["#191970"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
icon: "stack",
|
||
top: 5,
|
||
right: 5,
|
||
data: [],
|
||
},
|
||
grid: {
|
||
left: "2%",
|
||
right: "4%",
|
||
bottom: "5%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
name: "",
|
||
type: "category",
|
||
axisLabel: {
|
||
rotate: 45,
|
||
fontSize: 10,
|
||
},
|
||
data: [],
|
||
|
||
},
|
||
yAxis: {
|
||
name: "",
|
||
type: "value",
|
||
|
||
},
|
||
series: [],
|
||
},
|
||
options: [
|
||
{ label: "班天", value: "day_s" },
|
||
{ label: "班月", value: "month_s" },
|
||
{ label: "小时", value: "hour"},
|
||
{ label: "天", value: "day" },
|
||
{ label: "月", value: "month"},
|
||
],
|
||
form: {
|
||
id: "",
|
||
val_correct: "",
|
||
},
|
||
visible: false,
|
||
timeRange: []
|
||
};
|
||
},
|
||
mounted() {
|
||
},
|
||
methods: {
|
||
dataChange(req, tableData) {
|
||
let that = this;
|
||
if(that.query.mpoint == null) {
|
||
return
|
||
}
|
||
let option = { ...that.chartOption };
|
||
// 获取 x 轴的数据，如果query.type为小时，则显示小时，如果为天则显示天，如果为月则显示月
|
||
if (that.query.type == "hour") {
|
||
option.title.text = "小时统计";
|
||
option.xAxis.data = tableData.reverse().map((item) => item.year + "-" + item.month + "-" + item.day + " " + item.hour);
|
||
}else if (that.query.type == "day") {
|
||
option.title.text = "天统计";
|
||
option.xAxis.data = tableData.reverse().map((item, index) => item.year + "-" + item.month + "-" + item.day);
|
||
}else if (that.query.type == "month") {
|
||
option.title.text = "月统计";
|
||
option.xAxis.data = tableData.reverse().map((item, index) => item.year + "-" + item.month);
|
||
}else if (that.query.type == "day_s") {
|
||
option.title.text = "班天统计";
|
||
option.xAxis.data = tableData.reverse().map((item, index) => item.year_s + "-" + item.month_s + "-" + item.day_s);
|
||
}else if (that.query.type == "month_s") {
|
||
option.title.text = "班月统计";
|
||
option.xAxis.data = tableData.reverse().map((item, index) => item.year_s + "-" + item.month_s);
|
||
}
|
||
// 获取 y 轴的数据
|
||
option.series = [
|
||
{
|
||
name: tableData.length > 0 ? tableData[0].mpoint_name : "",
|
||
type: 'line', // 折线图类型
|
||
data: tableData.length > 0 ? tableData.reverse().map((item) => parseFloat(item.val)) : [], // 将字符串转为数字
|
||
smooth: true, // 平滑曲线
|
||
}
|
||
];
|
||
option.legend.data = [tableData.length > 0 ? tableData[0].mpoint_name : ""];
|
||
// 更新图表选项
|
||
that.chartOption = option;
|
||
},
|
||
handle_add() {},
|
||
handleQuery() {
|
||
if (this.timeRange.length > 0) {
|
||
this.query.start_time = this.timeRange[0]
|
||
this.query.end_time = this.timeRange[1]
|
||
} else {
|
||
this.query.start_time = null
|
||
this.query.end_time = null
|
||
}
|
||
this.$refs.table.queryData(this.query);
|
||
},
|
||
//编辑
|
||
handle_edit(row) {
|
||
this.form = { ...row };
|
||
this.form.val_correct = row.val;
|
||
this.visible = true;
|
||
},
|
||
//提交
|
||
submit() {
|
||
this.$refs.dialogForm.validate((valid) => {
|
||
if (valid) {
|
||
this.isSaveing = true;
|
||
let obj = {};
|
||
obj.val_correct = this.form.val_correct;
|
||
this.$API.enm.mpointstat.correct
|
||
.req(this.form.id, obj)
|
||
.then((res) => {
|
||
this.isSaveing = false;
|
||
this.visible = false;
|
||
this.$refs.table.queryData(this.query);
|
||
})
|
||
.catch((e) => {
|
||
this.isSaveing = false;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.searchBtn {
|
||
margin-left: 5px;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
.tpc .el-time-spinner__wrapper {
|
||
width:100% !important;
|
||
}
|
||
.tpc .el-scrollbar:nth-of-type(2) {
|
||
display: none !important;
|
||
}
|
||
</style>
|