feat: tkx 增加柱状图
This commit is contained in:
parent
6cb44c71ec
commit
4db4a87d99
|
@ -1021,7 +1021,7 @@ const routes = [
|
||||||
meta: {
|
meta: {
|
||||||
title: "水报表",
|
title: "水报表",
|
||||||
// icon: "el-icon-grid",
|
// icon: "el-icon-grid",
|
||||||
perms: ["hour_base"],
|
perms: ["water_base"],
|
||||||
},
|
},
|
||||||
component: "enm_energy/water",
|
component: "enm_energy/water",
|
||||||
},
|
},
|
||||||
|
|
|
@ -42,12 +42,27 @@
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="生产厂" prop="factory" show-overflow-tooltip>
|
<el-table-column label="生产厂" prop="factory" show-overflow-tooltip>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="设备重要性" prop="importance">
|
<el-table-column label="设备重要性">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag v-if="scope.row.importance === 10" type="A">
|
||||||
|
{{ importance_[scope.row.importance] }}
|
||||||
|
</el-tag>
|
||||||
|
<el-tag v-else-if="scope.row.importance === 20" type="B">
|
||||||
|
{{ importance_[scope.row.importance] }}
|
||||||
|
</el-tag>
|
||||||
|
<el-tag v-else-if="scope.row.importance === 30" type="C">
|
||||||
|
{{ importance_[scope.row.importance] }}
|
||||||
|
</el-tag>
|
||||||
|
|
||||||
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="购置日期" prop="buy_date">
|
<el-table-column label="购置日期" prop="buy_date">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
<el-table-column label="工段运行" prop="indicate_mgroup_running">
|
||||||
|
</el-table-column>
|
||||||
<el-table-column label="设备负责人" prop="device_people" show-overflow-tooltip>
|
<el-table-column label="设备负责人" prop="device_people" show-overflow-tooltip>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column label="更新时间" prop="update_time"></el-table-column>
|
<el-table-column label="更新时间" prop="update_time"></el-table-column>
|
||||||
<el-table-column label="状态">
|
<el-table-column label="状态">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
|
@ -243,6 +258,11 @@ export default {
|
||||||
30: '在修',
|
30: '在修',
|
||||||
40: '禁用',
|
40: '禁用',
|
||||||
},
|
},
|
||||||
|
importance_: {
|
||||||
|
10: 'A',
|
||||||
|
20: 'B',
|
||||||
|
30: 'C',
|
||||||
|
},
|
||||||
groupsProps: {
|
groupsProps: {
|
||||||
// value: "id",
|
// value: "id",
|
||||||
multiple: false,
|
multiple: false,
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
<el-input v-model="form.number" placeholder="设备位号" />
|
<el-input v-model="form.number" placeholder="设备位号" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :md="12" :sm="24" v-if="form.type == 10">
|
<el-col :md="12" :sm="24" v-if="form.type == 10" v-auth="['equipment.running']">
|
||||||
<el-form-item
|
<el-form-item
|
||||||
label="表明工段运行的方式"
|
label="表明工段运行的方式"
|
||||||
label-width="160"
|
label-width="160"
|
||||||
|
|
|
@ -175,6 +175,11 @@
|
||||||
prop="material_name"
|
prop="material_name"
|
||||||
width="100"
|
width="100"
|
||||||
></el-table-column>
|
></el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="计算系数"
|
||||||
|
prop="coefficient"
|
||||||
|
width="100"
|
||||||
|
></el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label="所属工段"
|
label="所属工段"
|
||||||
prop="mgroup_name"
|
prop="mgroup_name"
|
||||||
|
|
|
@ -53,19 +53,12 @@
|
||||||
></el-table-column>
|
></el-table-column>
|
||||||
<el-table-column label="开启能源监测" min-width="100">
|
<el-table-column label="开启能源监测" min-width="100">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-icon v-if="scope.row.need_enm" color="green"
|
<span v-if="scope.row.need_enm" style="color: green">是</span>
|
||||||
><CircleCheckFilled
|
|
||||||
/></el-icon>
|
|
||||||
<el-icon v-else color="red"
|
|
||||||
><CircleCloseFilled
|
|
||||||
/></el-icon>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="是否正在运行" min-width="100">
|
<el-table-column label="是否正在运行" min-width="100">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-icon v-if="scope.row.is_running" color="green"
|
<span v-if="scope.row.is_running" style="color: green">是</span>
|
||||||
><CircleCheckFilled
|
|
||||||
/></el-icon>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
|
|
|
@ -52,15 +52,100 @@
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
<div class="chartWrap">
|
||||||
|
<div class="chartTitle">本年工业总产值</div>
|
||||||
|
<scEcharts
|
||||||
|
height="400px"
|
||||||
|
width="1033px"
|
||||||
|
:option="optionMonth"
|
||||||
|
></scEcharts>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import scEcharts from "@/components/scEcharts";
|
||||||
|
import { defineAsyncComponent } from "vue";
|
||||||
|
const colors = ["#647bfe", "#cbd3fe", "#91CC75", "#EE6666", "#CC00CC", "#551e13"];
|
||||||
|
let tooltip = {
|
||||||
|
show: true,
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
},
|
||||||
|
confine: false,
|
||||||
|
showContent: true,
|
||||||
|
triggerOn: "mousemove",
|
||||||
|
};
|
||||||
|
let grid = {
|
||||||
|
right: "7%",
|
||||||
|
left: "4%",
|
||||||
|
top: "15%",
|
||||||
|
};
|
||||||
|
let toolbox = {
|
||||||
|
right: "5%",
|
||||||
|
feature: {
|
||||||
|
dataView: { show: true, readOnly: false },
|
||||||
|
saveAsImage: { show: true },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
let legend = {
|
||||||
|
top: "2%",
|
||||||
|
data: ["总产量", "分布电耗", "总电耗", "成本", "消耗", "进厂"],
|
||||||
|
};
|
||||||
|
let yAxis = [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: "产值 (万元)",
|
||||||
|
position: "left",
|
||||||
|
alignTicks: true,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: colors[0],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
];
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
scEcharts,
|
||||||
|
charts: defineAsyncComponent(() =>
|
||||||
|
import("@/components/scEnm/lineChartsdialog.vue")
|
||||||
|
),
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
timeStamp: 0,
|
timeStamp: 0,
|
||||||
year_s: "",
|
year_s: "",
|
||||||
tableDatas: [],
|
tableDatas: [],
|
||||||
|
optionMonth:{},
|
||||||
|
option1: {
|
||||||
|
color: colors,
|
||||||
|
tooltip: tooltip,
|
||||||
|
grid: grid,
|
||||||
|
toolbox: toolbox,
|
||||||
|
legend: legend,
|
||||||
|
xAxis: {
|
||||||
|
axisTick: {
|
||||||
|
show: true,
|
||||||
|
length: 5,
|
||||||
|
inside: true,
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
yAxis: yAxis,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "工业总产值",
|
||||||
|
type: "bar",
|
||||||
|
yAxisIndex: 0,
|
||||||
|
data: [],
|
||||||
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -69,6 +154,7 @@ export default {
|
||||||
let year = myDate.getFullYear();
|
let year = myDate.getFullYear();
|
||||||
that.year_s = year;
|
that.year_s = year;
|
||||||
this.getData();
|
this.getData();
|
||||||
|
let month = (that.month = myDate.getMonth() + 1);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getData() {
|
getData() {
|
||||||
|
@ -93,6 +179,7 @@ export default {
|
||||||
obj2.page = 0;
|
obj2.page = 0;
|
||||||
obj2.type = 'month_s';
|
obj2.type = 'month_s';
|
||||||
that.$API.enm.enstat2.req(obj2).then((res2) => {
|
that.$API.enm.enstat2.req(obj2).then((res2) => {
|
||||||
|
let seriesData0 = [];
|
||||||
if (res2.length > 0) {
|
if (res2.length > 0) {
|
||||||
res2.forEach((item2) => {
|
res2.forEach((item2) => {
|
||||||
let ind2 = item2.month_s - 1;
|
let ind2 = item2.month_s - 1;
|
||||||
|
@ -100,17 +187,20 @@ export default {
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let i = 0; i < wrapArr2.length; i++) {
|
for (let i = 0; i < wrapArr2.length; i++) {
|
||||||
if (Boolean(wrapArr2[i])) {
|
if (Boolean(wrapArr2[i])) {
|
||||||
if (this.tableDatas[i]) {
|
if (this.tableDatas[i]) {
|
||||||
} else {
|
} else {
|
||||||
this.tableDatas[i] = [];
|
this.tableDatas[i] = [];
|
||||||
}
|
}
|
||||||
|
let ind = wrapArr2[i].month_s - 1;
|
||||||
let time =
|
let time =
|
||||||
wrapArr2[i].year_s + "." + wrapArr2[i].month_s;
|
wrapArr2[i].year_s + "." + wrapArr2[i].month_s;
|
||||||
this.tableDatas[i][0] = time;
|
this.tableDatas[i][0] = time;
|
||||||
this.tableDatas[i][1] =
|
this.tableDatas[i][1] =
|
||||||
wrapArr2[i].industry_total_val;
|
wrapArr2[i].industry_total_val;
|
||||||
|
seriesData0[ind] = wrapArr2[i].industry_total_val;
|
||||||
this.tableDatas[i][2] =
|
this.tableDatas[i][2] =
|
||||||
wrapArr2[i].industry_add_val;
|
wrapArr2[i].industry_add_val;
|
||||||
this.tableDatas[i][3] = wrapArr2[i].en_consume; //当期值
|
this.tableDatas[i][3] = wrapArr2[i].en_consume; //当期值
|
||||||
|
@ -230,6 +320,15 @@ export default {
|
||||||
} else {
|
} else {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
let options = { ...that.option1 };
|
||||||
|
options.series[0].data = seriesData0;
|
||||||
|
let monthXAxis = [];
|
||||||
|
for (let i = 1; i <= that.month; i++) {
|
||||||
|
let item = i + "月";
|
||||||
|
monthXAxis.push(item);
|
||||||
|
}
|
||||||
|
options.xAxis.data = monthXAxis;
|
||||||
|
that.optionMonth = options;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
|
@ -641,9 +641,9 @@ export default {
|
||||||
if (data1.imaterial_data.length > 0) {
|
if (data1.imaterial_data.length > 0) {
|
||||||
data1.imaterial_data.forEach((item) => {
|
data1.imaterial_data.forEach((item) => {
|
||||||
if (item.material_name == "湿电石渣消耗") {
|
if (item.material_name == "湿电石渣消耗") {
|
||||||
that.tableDatas[4][4] = item.amount_consume;
|
that.tableDatas[4][4] = (item.amount_consume).toFixed(2);
|
||||||
}else if(item.material_name == "湿电石渣进厂"){
|
}else if(item.material_name == "湿电石渣进厂"){
|
||||||
that.tableDatas[5][4] = item.amount_consume;
|
that.tableDatas[5][4] = (item.amount_consume).toFixed(2);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -71,12 +71,7 @@
|
||||||
<el-col :span='12'>
|
<el-col :span='12'>
|
||||||
<el-form-item label="所属工段:">{{ eventItem.enm_data.mgroup_name }}</el-form-item>
|
<el-form-item label="所属工段:">{{ eventItem.enm_data.mgroup_name }}</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span='12'>
|
|
||||||
<el-form-item label="所在班组:">{{ eventItem.enm_data.team_name }}</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span='12'>
|
|
||||||
<el-form-item label="所在班次:">{{ eventItem.enm_data.shift_name }}</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span='12'>
|
<el-col :span='12'>
|
||||||
<el-form-item label="发生时间:">{{ eventItem.create_time }}</el-form-item>
|
<el-form-item label="发生时间:">{{ eventItem.create_time }}</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
@ -107,7 +102,7 @@
|
||||||
<el-descriptions-item label="处理时间">
|
<el-descriptions-item label="处理时间">
|
||||||
{{ eventItem.handle_time }}
|
{{ eventItem.handle_time }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
<el-descriptions-item label="处理描述" column="3">
|
<el-descriptions-item label="异常分析" column="3">
|
||||||
{{ eventItem.handle_desc }}
|
{{ eventItem.handle_desc }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
|
@ -126,7 +121,7 @@
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span='12'>
|
<el-col :span='12'>
|
||||||
<el-form-item label="处理描述">
|
<el-form-item label="异常分析">
|
||||||
<el-input v-model="form.handle_desc" clearable type="textarea"></el-input>
|
<el-input v-model="form.handle_desc" clearable type="textarea"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
Loading…
Reference in New Issue