zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:日志异常改动，全场电量统计折线图

This commit is contained in:
shijing 2024-04-28 17:05:25 +08:00
parent de77f4eaee
commit 5b73a45e20
4 changed files with 546 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/views/enm_energy/day_base.vue
View File

@ -100,8 +100,12 @@
</td>
<td class="numCell">{{ item[1] }}</td>
<td class="numCell">{{ item[2] }}</td>
<td v-for="day in days" :key="day" class="numCell">
<td
v-for="day in days"
:key="day"
class="numCell"
@click="itemClick(item, index)"
>
{{ item[2 + day] }}
</td>
<td class="numCell">{{ item[headerLength] }}</td>
@ -110,17 +114,34 @@
</div>
</div>
</el-card>
<el-dialog v-model="itemVisible" :title="tableName">
<scEcharts
height="400px"
width="1033px"
:option="option"
></scEcharts>
<template #footer>
<slot name="footer"></slot>
</template>
</el-dialog>
</div>
</template>
<script>
import scEcharts from "@/components/scEcharts";
export default {
components: {
scEcharts,
},
data() {
return {
year: "",
month: "",
days: "",
myChart: null,
search_date: "",
headerLength: 33,
itemVisible: false,
xAxisData: [],
tableDatas: [
["石灰石破碎", "破碎机", "kw.h"], //0
["石灰石破碎", "堆取料机", "kw.h"],
@ -154,8 +175,101 @@ export default {
],
timeStamp: null,
tableWidth: "3300",
itemChartTitle: "",
tableName: "全厂电量日统计",
sourceData: {},
option: {
title: {
text: "全厂电量日统计",
x: "center",
},
grid: {
// 图表距离边框的距离，可用百分比和数字（px）配置
top: "20%",
left: "3%",
right: "10%",
bottom: "5%",
containLabel: true,
},
legend: {
// 图例配置选项
orient: "horizontal", //图例布局方式：水平 'horizontal' 、垂直 'vertical'
x: "right", // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
y: "10", // 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
data: [],
},
xAxis: {
type: "category",
data: [],
name: "时间",
// x轴名称样式
nameTextStyle: {
fontWeight: 600,
fontSize: 14,
},
axisLine: {
lineStyle: {
color: "#3366CC",
},
},
axisLabel: {
rotate: 45, // X 轴标签文字旋转角度
interval: 0, //设置 X 轴数据间隔几个显示一个，为0表示都显示
},
boundaryGap: false, //数据从 Y 轴起始
},
yAxis: {
type: "value",
name: "对象值",
// y轴名称样式
nameTextStyle: {
fontWeight: 500,
fontSize: 14,
},
//min:0, // 配置 Y 轴刻度最小值
//max:4000, // 配置 Y 轴刻度最大值
//splitNumber:7, // 配置 Y 轴数值间隔
axisLine: {
lineStyle: {
// Y 轴颜色配置
color: "#3366CC",
},
},
},
tooltip: {
show: true, // 是否显示
trigger: "axis", // axis item none
axisPointer: {
// 坐标轴指示器配置项。
type: "cross", // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis: "auto", // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
showContent: true,
},
series: [
{
name: "",
data: [4, 1, 9, 2, 11, 3, 5, 7, 8, 10, 6, 12],
type: "line",
symbolSize: 8, //设置折线上圆点大小
symbol: "circle",
smooth: 0.5, // 设置折线弧度
itemStyle: {
normal: {
label: {
show: true, // 在折线拐点上显示数据
},
lineStyle: {
width: 1, // 设置虚线宽度
type: "dotted", // 虚线'dotted' 实线'solid'
color: "#3366CC", // 折线颜色设置为0，即只显示点，不显示折线
},
},
},
},
],
},
};
},
mounted() {
@ -177,6 +291,9 @@ export default {
this.$forceUpdate();
}
}
for (let n = 1; n <= that.days; n++) {
that.xAxisData.push(n + "日");
}
this.getData();
},
methods: {
@ -394,6 +511,13 @@ export default {
})
.then(() => {});
},
itemClick(item, index) {
let that = this;
let lineData = that.tableDatas[index].slice(3, that.headerLength);
that.option.xAxis.data = that.xAxisData;
that.option.series[0].data = lineData;
this.itemVisible = true;
},
exportExcel() {
this.exportLoading = true;
this.$XLSX("#myTable", this.tableName);

111
src/views/enm_energy/hour_base.vue
View File

@ -105,6 +105,7 @@
class="numCell"
v-for="hour_item in hours"
:key="hour_item"
@click="itemClick(item, index)"
>
{{ item[2 + hour_item] }}
</td>
@ -114,10 +115,24 @@
</div>
</div>
</el-card>
<el-dialog v-model="itemVisible" :title="itemChartTitle">
<scEcharts
height="400px"
width="1033px"
:option="option"
></scEcharts>
<template #footer>
<slot name="footer"></slot>
</template>
</el-dialog>
</div>
</template>
<script>
import scEcharts from "@/components/scEcharts";
export default {
components: {
scEcharts,
},
data() {
return {
year: "",
@ -160,9 +175,95 @@ export default {
19, 20, 21, 22, 23, 24,
],
timeStamp: null,
itemVisible: false,
exportLoading: false,
tableName: "全厂电量小时统计",
sourceData: {},
option: {
title: {
text: "全厂电量小时统计",
x: "center",
},
grid: {
top: "20%",
left: "3%",
right: "10%",
bottom: "5%",
containLabel: true,
},
legend: {
orient: "horizontal",
x: "right",
y: "10",
data: [],
},
xAxis: {
type: "category",
data: [],
name: "时间",
nameTextStyle: {
fontWeight: 600,
fontSize: 14,
},
axisLine: {
lineStyle: {
color: "#3366CC",
},
},
axisLabel: {
rotate: 45,
interval: 0,
},
boundaryGap: false,
},
yAxis: {
type: "value",
name: "对象值",
nameTextStyle: {
fontWeight: 500,
fontSize: 14,
},
axisLine: {
lineStyle: {
color: "#3366CC",
},
},
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
type: "cross",
axis: "auto",
snap: true,
},
showContent: true,
},
series: [
{
name: "",
data: [],
type: "line",
symbolSize: 8,
symbol: "circle",
smooth: 0.5,
itemStyle: {
normal: {
label: {
show: true,
},
lineStyle: {
width: 1,
type: "dotted",
color: "#3366CC",
},
},
},
},
],
},
xAxisData: [],
};
},
mounted() {
@ -181,6 +282,9 @@ export default {
this.$forceUpdate();
}
}
for (let n = 0; n < 24; n++) {
that.xAxisData.push(n + "时");
}
this.getData();
},
methods: {
@ -415,6 +519,13 @@ export default {
}
}
},
itemClick(item, index) {
let that = this;
let lineData = that.tableDatas[index].slice(3, that.headerLength);
that.option.xAxis.data = that.xAxisData;
that.option.series[0].data = lineData;
this.itemVisible = true;
},
exportExcel() {
this.exportLoading = true;
this.$XLSX("#myTable", this.tableName);

123
src/views/enm_energy/month_base.vue
View File

@ -104,6 +104,7 @@
class="numCell"
v-for="month_item in months"
:key="month_item"
@click="itemClick(item, index)"
>
{{ item[2 + month_item] }}
</td>
@ -113,10 +114,24 @@
</div>
</div>
</el-card>
<el-dialog v-model="itemVisible" :title="tableName">
<scEcharts
height="400px"
width="1033px"
:option="option"
></scEcharts>
<template #footer>
<slot name="footer"></slot>
</template>
</el-dialog>
</div>
</template>
<script>
import scEcharts from "@/components/scEcharts";
export default {
components: {
scEcharts,
},
data() {
return {
year: "",
@ -155,9 +170,108 @@ export default {
["全厂进线", "全厂耗电量", "kw.h"],
],
timeStamp: null,
itemVisible: false,
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
tableName: "全厂电量小时统计",
tableName: "全厂电量月统计",
sourceData: {},
xAxisData: [],
option: {
title: {
text: "全厂电量月统计",
x: "center",
},
grid: {
top: "20%",
left: "3%",
right: "10%",
bottom: "5%",
containLabel: true,
},
legend: {
orient: "horizontal",
x: "right",
y: "10",
data: [],
},
xAxis: {
type: "category",
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
name: "时间",
nameTextStyle: {
fontWeight: 600,
fontSize: 14,
},
axisLine: {
lineStyle: {
color: "#3366CC",
},
},
axisLabel: {
rotate: 45,
interval: 0,
},
boundaryGap: false,
},
yAxis: {
type: "value",
name: "对象值",
nameTextStyle: {
fontWeight: 500,
fontSize: 14,
},
axisLine: {
lineStyle: {
color: "#3366CC",
},
},
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
type: "cross",
axis: "auto",
snap: true,
},
showContent: true,
},
series: [
{
name: "",
data: [4, 1, 9, 2, 11, 3, 5, 7, 8, 10, 6, 12],
type: "line",
symbolSize: 8,
symbol: "circle",
smooth: 0.5,
itemStyle: {
normal: {
label: {
show: true,
},
lineStyle: {
width: 1,
type: "dotted",
color: "#3366CC",
},
},
},
},
],
},
};
},
mounted() {
@ -387,6 +501,13 @@ export default {
})
.then(() => {});
},
itemClick(item, index) {
let that = this;
let lineData = that.tableDatas[index].slice(3, that.headerLength);
that.option.xAxis.data = that.xAxisData;
that.option.series[0].data = lineData;
this.itemVisible = true;
},
exportExcel() {
this.exportLoading = true;
this.$XLSX("#myTable", this.tableName);

458
src/views/enm_rm/logDetail.vue
View File

@ -25,7 +25,7 @@
style="
position: absolute;
top: 6px;
right: 10px;
right: 43%;
z-index: 100;
"
>新增异常</el-button
@ -298,229 +298,41 @@
</div>
</el-tab-pane>
<el-tab-pane label="异常" name="fourth">
<el-table
ref="stlogTable"
:data="stlogList"
row-key="id"
stripe
@row-click="stlogRowClick"
highlightCurrentRow
>
<el-table-column type="index" width="50" />
<el-table-column label="异常类别" prop="duration">
<template #default="scope">
<span v-if="scope.row.duration > 0"
>停机</span
>
<span v-else>其他</span>
</template>
</el-table-column>
<el-table-column
label="发生时间"
prop="happen_time"
></el-table-column>
<el-table-column
label="原因类别"
prop="cate"
></el-table-column>
<el-table-column
label="异常名称"
prop="title"
></el-table-column>
<el-table-column
label="事件原因"
prop="reason"
></el-table-column>
<el-table-column
label="处置措施"
prop="measure"
></el-table-column>
<el-table-column
label="停机时长"
prop="duration"
></el-table-column>
<el-table-column
label="操作"
fixed="right"
align="center"
width="120"
>
<template #default="scope">
<el-button
link
size="small"
@click="editStlog(scope.row)"
type="primary"
>编辑</el-button
>
<el-divider
direction="vertical"
></el-divider>
<el-button
link
size="small"
@click="stlog_delete(scope.row)"
type="danger"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-row :gutter="20">
<!-- <el-col :span="12">
<p>异常详情</p>
<el-form
ref="stlogForms"
:rules="rules"
label-width="100px"
:model="stlogForm"
>
<el-row>
<el-col :md="12" :sm="24">
<el-form-item label="异常类别">
<el-select
style="width: 100%"
v-model="sflogexpType"
placeholder="异常类别"
:disabled="1"
>
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item
label="异常名称"
prop="title"
>
<el-input
v-model="stlogForm.title"
placeholder="异常名称"
/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item
label="发生时间"
prop="happen_time"
>
<el-date-picker
v-model="
stlogForm.happen_time
"
type="datetime"
placeholder="发生时间"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
:disabled="
stlogTitle !==
'新增异常' &&
stlogForm.duration > 0
"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item
label="原因类别"
prop="cate"
>
<el-select
style="width: 100%"
v-model="stlogForm.cate"
placeholder="原因类别"
>
<el-option
v-for="item in options"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col
:md="12"
:sm="24"
v-if="sflogexpType == 0"
>
<el-form-item label="停机时长">
<el-input-number
v-model="stlogForm.duration"
:precision="2"
:min="0"
controls-position="right"
placeholder="停机时长"
:disabled="
stlogTitle !==
'新增异常' &&
stlogForm.duration > 0
"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :md="12" :sm="24">
<el-form-item
label="异常原因"
prop="reason"
>
<el-input
type="textarea"
:rows="2"
v-model="stlogForm.reason"
placeholder="异常原因"
/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item
label="处置措施"
prop="measure"
>
<el-input
type="textarea"
:rows="2"
v-model="stlogForm.measure"
placeholder="处置措施"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-col> -->
<el-col :span="12">
<el-col :span="14">
<el-table
ref="expTable"
:data="sflogexpList"
v-if="sflogExpVisiable"
ref="stlogTable"
:data="stlogList"
row-key="id"
stripe
@row-click="stlogRowClick"
:height="300"
highlightCurrentRow
>
<el-table-column type="index" width="50" />
<el-table-column
label="操作人"
prop="measure"
></el-table-column>
label="异常类别"
prop="duration"
>
<template #default="scope">
<span v-if="scope.row.is_shutdown"
>停机</span
>
<span v-else>其他</span>
</template>
</el-table-column>
<el-table-column
label="操作时间"
prop="happen_time"
label="发生时间"
prop="start_time"
></el-table-column>
<el-table-column
label="原因类别"
prop="cate"
></el-table-column>
<el-table-column
label="异常名称"
prop="title"
></el-table-column>
<el-table-column
label="事件原因"
prop="reason"
@ -529,6 +341,66 @@
label="处置措施"
prop="measure"
></el-table-column>
<el-table-column
label="停机时长"
prop="duration"
></el-table-column>
<el-table-column
label="操作"
fixed="right"
align="center"
width="120"
>
<template #default="scope">
<el-button
link
size="small"
@click="editStlog(scope.row)"
type="primary"
>编辑</el-button
>
<el-divider
direction="vertical"
></el-divider>
<el-button
link
size="small"
@click="stlog_delete(scope.row)"
type="danger"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="10">
<el-table
ref="expTable"
:data="sflogexpList"
row-key="id"
stripe
:height="300"
highlightCurrentRow
>
<el-table-column type="index" width="50" />
<el-table-column label="处理班组">
<template #default="scope">
<span v-if="scope.row.sflog_">{{
scope.row.sflog_.shift_name
}}</span>
</template>
</el-table-column>
<el-table-column label="所在工段">
<template #default="scope">
<span v-if="scope.row.sflog_">{{
scope.row.sflog_.mgroup_name
}}</span>
</template>
</el-table-column>
<el-table-column
label="处理备注"
prop="note"
></el-table-column>
<el-table-column
label="操作"
fixed="right"
@ -550,8 +422,32 @@
</el-table>
</el-col>
</el-row>
<!-- <el-row :gutter="20" v-if="sflogExpVisiable"> -->
<el-dialog :title="stlogTitle" v-model="visible">
<el-form
v-if="sflogExpVisiable"
ref="sflogExpForm"
label-width="100px"
:model="sflogExpForm"
>
<el-row>
<el-col :md="12" :sm="24">
<el-form-item
label="处理备注"
prop="current_note"
>
<el-input
type="textarea"
:rows="2"
v-model="sflogExpForm.note"
placeholder="处理备注"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-form
v-else
ref="stlogForms"
:rules="rules"
label-width="100px"
@ -560,25 +456,22 @@
<el-row>
<el-col :md="12" :sm="24">
<el-form-item label="异常类别">
<el-select
style="width: 100%"
v-model="stlogForm.cate"
placeholder="异常类别"
:disabled="1"
<el-tag
v-if="stlogForm.is_shutdown"
type="danger"
>停机</el-tag
>
<el-tag v-else type="danger"
>其他</el-tag
>
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="异常名称">
<el-input
:disabled="
stlogForm.is_shutdown
"
v-model="stlogForm.title"
placeholder="异常名称"
/>
@ -590,6 +483,9 @@
prop="start_time"
>
<el-date-picker
:disabled="
stlogForm.is_shutdown
"
v-model="stlogForm.start_time"
type="datetime"
placeholder="发生时间"
@ -602,6 +498,9 @@
<el-col :md="12" :sm="24">
<el-form-item label="结束时间">
<el-date-picker
:disabled="
stlogForm.is_shutdown
"
v-model="stlogForm.end_time"
type="datetime"
placeholder="结束时间"
@ -611,6 +510,29 @@
</el-date-picker>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item
label="原因类别"
prop="cate"
>
<el-input
v-model="stlogForm.cate"
placeholder="原因类别"
/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="处置措施">
<el-input
v-model="stlogForm.measure"
placeholder="处置措施"
/>
</el-form-item>
</el-col>
<el-divider></el-divider>
<el-col>
<p>本班处理情况</p>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item
label="处理备注"
@ -624,43 +546,13 @@
/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item
label="原因类别"
prop="cate"
>
<el-select
style="width: 100%"
v-model="stlogForm.reason"
placeholder="原因类别"
>
<el-option
v-for="item in options"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="处置措施">
<el-input
type="textarea"
:rows="2"
v-model="stlogForm.measure"
placeholder="处置措施"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-footer>
<el-button
type="primary"
:loading="isSaveing"
@click="submit4"
@click="submit42"
>保存</el-button
>
<el-button @click="visible = false"
@ -693,9 +585,9 @@ export default {
visible: false,
hideDelete: true,
isSaveing: false,
sflogExpVisiable: false,
activeName: "fourth",
stlogTitle: "新增异常",
clickItem: {},
sflogItem: {},
form: {},
thirdForm: {
@ -712,6 +604,7 @@ export default {
measure: "",
handler: "",
mgroup: "",
is_shutdown: false,
},
query: {
page: 0,
@ -722,12 +615,10 @@ export default {
{ required: true, message: "请填写值班异常处理备注" },
],
},
sflogexpType: "1",
typeOptions: [
{ value: "0", name: "停机" },
{ value: "1", name: "其他" },
],
options: ["工艺", "电器", "机械", "其他"],
sflogExpForm: {
note: "",
},
sflogExpVisiable: false,
checkList: [],
stlogList: [],
teamOptions: [],
@ -852,6 +743,11 @@ export default {
this.stlogForm = row;
this.visible = true;
},
handleStlog() {
this.stlogTitle = "异常处理";
this.stlogForm = row;
this.visible = true;
},
//新增异常提交
submit4() {
let that = this;
@ -870,7 +766,7 @@ export default {
.catch((res) => {
that.isSaveing = false;
});
} else {
} else if (that.stlogTitle == "编辑异常") {
that.$API.wpm.stlog.update
.req(that.stlogForm.id, that.stlogForm)
.then((res) => {
@ -886,6 +782,21 @@ export default {
}
});
},
submit42() {
let that = this;
that.$API.wpm.sflogexp.update
.req(that.sflogExpForm.id, that.sflogExpForm)
.then((res) => {
this.sflogExpVisiable = false;
that.isSaveing = false;
that.visible = false;
that.$message.success("操作成功");
that.getSflogexp(that.clickItem.id);
})
.catch((res) => {
that.isSaveing = false;
});
},
//异常删除
async stlog_delete(row) {
this.$confirm(`确定删除选中的异常吗？`, "提示", {
@ -905,29 +816,34 @@ export default {
//点击stlog，展示sflogexp
stlogRowClick(row) {
console.log(row);
this.clickItem = row;
this.getSflogexp(row.id);
this.sflogExpVisiable = true;
},
getSflogexp(id) {
let obj = {};
obj.page = 0;
obj.sflog = id;
obj.stlog = id;
this.$API.wpm.sflogexp.list.req(obj).then((res) => {
this.sflogexpList = res;
});
},
//异常编辑
sflogexp_edit(row) {
Object.assign(this.stlogForm, row);
this.stlogTitle = "编辑异常";
this.stlogForm.handler = this.$TOOL.data.get("USER_INFO").id;
if (this.stlogForm.duration > 0) {
this.stlogForm.cate = "0";
} else {
this.stlogForm.cate = "1";
}
this.stlogTitle = "本班处理情况";
this.sflogExpForm.id = row.id;
this.sflogExpForm.note = row.note;
this.sflogExpVisiable = true;
this.visible = true;
},
//异常处理
sflogexp_handle(row) {
this.stlogForm = row;
this.stlogTitle = "异常处理";
this.stlogForm.handler = this.$TOOL.data.get("USER_INFO").id;
this.visible = true;
this.sflogExpVisiable = false;
},
handlePrint() {
this.$PRINT("#myReport");
},