Merge branch 'master' of https://e.coding.net/ctcdevteam/ehs/ehs_web
This commit is contained in:
commit
6b235697ff
|
|
@ -0,0 +1,279 @@
|
||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-header>
|
||||||
|
<div class="left-panel">
|
||||||
|
<!-- <xtSelect
|
||||||
|
:apiObj="apiObjM"
|
||||||
|
:params="paramsM"
|
||||||
|
v-model="query.id"
|
||||||
|
style="width: 500px"
|
||||||
|
placeholder="选择测点"
|
||||||
|
>
|
||||||
|
<el-table-column label="测点名" prop="name"></el-table-column>
|
||||||
|
</xtSelect> -->
|
||||||
|
<el-input v-model="query.search" placeholder="输入测点名称" style="width: 200px; margin-right:6px" ></el-input>
|
||||||
|
<xtSelect
|
||||||
|
:apiObj="apiObjM2"
|
||||||
|
:params="paramsM2"
|
||||||
|
v-model="query.mgroup"
|
||||||
|
style="width: 300px; padding-left: 2px;"
|
||||||
|
@change="handleQuery"
|
||||||
|
placeholder="选择工段"
|
||||||
|
>
|
||||||
|
<el-table-column label="名称" prop="name"></el-table-column>
|
||||||
|
</xtSelect>
|
||||||
|
<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="apiObjM"
|
||||||
|
:params="paramsM"
|
||||||
|
row-key="id"
|
||||||
|
stripe
|
||||||
|
:query="query"
|
||||||
|
highlightCurrentRow
|
||||||
|
@row-click="rowClick"
|
||||||
|
@dataChange="dataChange"
|
||||||
|
>
|
||||||
|
<el-table-column label="测点" prop="name" min-width="100"></el-table-column>
|
||||||
|
<el-table-column label="所属工段" prop="mgroup_name" min-width="100"></el-table-column>
|
||||||
|
<el-table-column label="当前时间" min-width="100">
|
||||||
|
<template #default="{row}">
|
||||||
|
{{ row.last_data.last_timex || ''}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="当前值" min-width="100">
|
||||||
|
<template #default="{row}">
|
||||||
|
{{row.last_data.last_val != null ? Number(row.last_data.last_val).toFixed(2) : ''}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</scTable>
|
||||||
|
</el-aside>
|
||||||
|
<el-main>
|
||||||
|
<scEcharts :option="chartOption" height="450px" />
|
||||||
|
<el-date-picker v-model="timeRange" type="datetimerange"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
|
||||||
|
start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery2"
|
||||||
|
style="width: 80%"
|
||||||
|
format="YYYY-MM-DD HH"
|
||||||
|
popper-class="tpc"/>
|
||||||
|
</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 {
|
||||||
|
apiObjX: this.$API.enm.mplogx.list,
|
||||||
|
paramsX: {page: 0, timex__gte: null, timex__lte: null, mpoint: null},
|
||||||
|
apiObjM: this.$API.enm.mpoint.list,
|
||||||
|
paramsM: {material__isnull: 0},
|
||||||
|
apiObjM2: this.$API.mtm.mgroup.list,
|
||||||
|
paramsM2: {page: 0},
|
||||||
|
mpointId: null,
|
||||||
|
rowId: null,
|
||||||
|
|
||||||
|
// apiObj: this.$API.enm.mpoint.stat,
|
||||||
|
// params: {
|
||||||
|
// type: "day",
|
||||||
|
// },
|
||||||
|
query: {
|
||||||
|
mpoint: null,
|
||||||
|
timex__gte: null,
|
||||||
|
timex__lte: null,
|
||||||
|
search: 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: [],
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
id: "",
|
||||||
|
val_correct: "",
|
||||||
|
},
|
||||||
|
visible: false,
|
||||||
|
timeRange: [],
|
||||||
|
tableData1:[],
|
||||||
|
mplogxList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
rowClick(row) {
|
||||||
|
let that = this;
|
||||||
|
that.rowId = row.id;
|
||||||
|
console.log('row--id', row.id);
|
||||||
|
that.$API.enm.mplogx.req({ page: 1, mpoint: row.id }).then((res) => {
|
||||||
|
that.tableData1 = res;
|
||||||
|
}
|
||||||
|
).then(() => {
|
||||||
|
this.drawP(that.tableData1.results);
|
||||||
|
});
|
||||||
|
this.timeRange = [];
|
||||||
|
},
|
||||||
|
drawP(tableData) {
|
||||||
|
let that = this;
|
||||||
|
console.log('tableData', tableData);
|
||||||
|
|
||||||
|
let option = { ...that.chartOption };
|
||||||
|
// 获取 x 轴的数据，如果query.type为小时，则显示小时，如果为天则显示天，如果为月则显示月
|
||||||
|
option.xAxis.data = tableData.map((item, index) => item.timex);
|
||||||
|
|
||||||
|
// 获取 y 轴的数据
|
||||||
|
option.series = [
|
||||||
|
{
|
||||||
|
name:"",
|
||||||
|
type: 'line', // 折线图类型
|
||||||
|
data: tableData.length > 0 ? tableData.map((item) => parseFloat(item.val_float)) : [], // 将字符串转为数字
|
||||||
|
smooth: true, // 平滑曲线
|
||||||
|
}
|
||||||
|
];
|
||||||
|
option.legend.data = [""];
|
||||||
|
// 更新图表选项
|
||||||
|
that.chartOption = option;
|
||||||
|
},
|
||||||
|
handleQuery2(){
|
||||||
|
console.log(this.rowId, "rowId");
|
||||||
|
if (this.rowId==null) {
|
||||||
|
alert("请先选择一行数据");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.timeRange && this.timeRange.length > 0) {
|
||||||
|
this.query.timex__gte = this.timeRange[0]
|
||||||
|
this.query.timex__lte = this.timeRange[1]
|
||||||
|
} else {
|
||||||
|
this.query.timex__gte = null
|
||||||
|
this.query.timex__lte = null
|
||||||
|
}
|
||||||
|
this.$API.enm.mplogx.req({page:0, mpoint: this.rowId, timex__gte: this.query.timex__gte, timex__lte: this.query.timex__lte }).then((res) => {
|
||||||
|
this.tableData1 = res;
|
||||||
|
}
|
||||||
|
).then(() => {
|
||||||
|
console.log('tableData2', this.tableData1);
|
||||||
|
this.drawP(this.tableData1);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleQuery() {
|
||||||
|
this.$refs.table.queryData(this.query);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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>
|
||||||
Loading…
Reference in New Issue