done 1019
This commit is contained in:
parent
002c5a80e5
commit
41f2f01fd7
@ -65,7 +65,14 @@ const DIALOG_CARPAYLOAD = "DialogCarPayload";
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ListViewWithHead",
|
name: "ListViewWithHead",
|
||||||
components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogCarPayload, TemperatureDialog },
|
components: {
|
||||||
|
BaseSearchForm,
|
||||||
|
BaseListTable,
|
||||||
|
DialogWithMenu,
|
||||||
|
DialogJustForm,
|
||||||
|
DialogCarPayload,
|
||||||
|
TemperatureDialog,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
tableConfig: {
|
tableConfig: {
|
||||||
type: Object,
|
type: Object,
|
||||||
@ -170,7 +177,7 @@ export default {
|
|||||||
// if (this.urls.pageIsPostApi) {
|
// if (this.urls.pageIsPostApi) {
|
||||||
// } else {
|
// } else {
|
||||||
// 默认是 get 方式请求 page
|
// 默认是 get 方式请求 page
|
||||||
console.log("params: ", params);
|
// console.log("params: ", params);
|
||||||
this.$http[this.urls.pageIsPostApi ? "post" : "get"](
|
this.$http[this.urls.pageIsPostApi ? "post" : "get"](
|
||||||
this.urls.page,
|
this.urls.page,
|
||||||
this.urls.pageIsPostApi
|
this.urls.pageIsPostApi
|
||||||
@ -416,7 +423,9 @@ export default {
|
|||||||
}
|
}
|
||||||
case "detach": {
|
case "detach": {
|
||||||
return this.$http
|
return this.$http
|
||||||
.post(this.urls.detach, data /* { id: data } */, { headers: { "Content-Type": "application/json" } })
|
.post(this.urls.detach, data /* { id: data } */, {
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
})
|
||||||
.then(({ data: res }) => {
|
.then(({ data: res }) => {
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
this.$message({
|
this.$message({
|
||||||
|
|||||||
@ -2,97 +2,206 @@ const colors = {
|
|||||||
line: '#555'
|
line: '#555'
|
||||||
}
|
}
|
||||||
|
|
||||||
export default (x_data, y_data) => ({
|
export default ({ x_data, y_data }, graph2) => {
|
||||||
title: {
|
// debugger;
|
||||||
text: "窑车温度",
|
|
||||||
},
|
return {
|
||||||
grid: [
|
title: {
|
||||||
{
|
text: "窑车温度",
|
||||||
id: 'temp-grid',
|
|
||||||
show: true,
|
|
||||||
top: 96,
|
|
||||||
left: 56,
|
|
||||||
right: 56,
|
|
||||||
bottom: 32,
|
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'lambda-grid',
|
legend: {
|
||||||
top: 0,
|
icon: 'circle',
|
||||||
left: 0,
|
top: 280,
|
||||||
right: 0,
|
left: 'center',
|
||||||
bottom: 0
|
itemHeight: 8,
|
||||||
}
|
itemWidth: 8
|
||||||
],
|
},
|
||||||
xAxis: [
|
|
||||||
{
|
tooltip: {
|
||||||
gridIndex: 0,
|
show: true,
|
||||||
id: 'temp-x-axis',
|
trigger: 'axis',
|
||||||
type: "category",
|
formatter: function (params) {
|
||||||
data: Array(65)
|
// debugger;
|
||||||
.fill(1)
|
return `<span>位置${params[0].name}</span>` + params.map(item => {
|
||||||
.map((val, index) => {
|
return item.value ? `<div style="min-width: 180px; display: flex; justify-content: space-between;"><span>${item.seriesName}</span><span style="color: #888">${item.value}${item.seriesName == 'lambda' ? '' : item.seriesName == '温度' ? '℃' : 'm³'}</span></div>` : ''
|
||||||
return val + index;
|
}).join('')
|
||||||
}),
|
}
|
||||||
axisLine: {
|
// formatter:
|
||||||
lineStyle: {
|
// '<strong style="font-size: 16px">位置</strong> ({b}) <span style="font-size: 16px; font-weight: bold;">{c}</span> ℃'
|
||||||
color: colors.line
|
},
|
||||||
|
|
||||||
|
grid: [
|
||||||
|
{
|
||||||
|
id: 'temp-grid',
|
||||||
|
top: 72,
|
||||||
|
left: 56,
|
||||||
|
right: 56,
|
||||||
|
bottom: 24,
|
||||||
|
height: 180,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'lambda-grid',
|
||||||
|
top: 320,
|
||||||
|
left: 56,
|
||||||
|
right: 56,
|
||||||
|
bottom: 24,
|
||||||
|
height: 180,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
gridIndex: 0,
|
||||||
|
id: 'temp-x-axis',
|
||||||
|
type: "category",
|
||||||
|
data: Array(65)
|
||||||
|
.fill(1)
|
||||||
|
.map((val, index) => {
|
||||||
|
return val + index;
|
||||||
|
}),
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: colors.line
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
{
|
gridIndex: 1,
|
||||||
gridIndex: 1,
|
id: 'lambda-x-axis',
|
||||||
id: 'lambda-x-axis',
|
data: Array(65)
|
||||||
data: Array(65)
|
.fill(1)
|
||||||
.fill(1)
|
.map((val, index) => {
|
||||||
.map((val, index) => {
|
return val + index;
|
||||||
return val + index;
|
}),
|
||||||
}),
|
axisLine: {
|
||||||
axisLine: {
|
lineStyle: {
|
||||||
lineStyle: {
|
color: colors.line
|
||||||
color: colors.line
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
],
|
||||||
],
|
yAxis: [
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
{
|
||||||
name: "温度",
|
gridIndex: 0,
|
||||||
nameTextStyle: {
|
type: "value",
|
||||||
fontSize: 18,
|
interval: 20,
|
||||||
align: "right",
|
name: "温度",
|
||||||
verticalAlign: "bottom",
|
nameTextStyle: {
|
||||||
lineHeight: 36,
|
fontSize: 14,
|
||||||
padding: 10,
|
align: "right",
|
||||||
},
|
verticalAlign: "bottom",
|
||||||
axisLine: {
|
lineHeight: 20,
|
||||||
show: true,
|
padding: 6,
|
||||||
lineStyle: {
|
},
|
||||||
color: colors.line,
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: colors.line,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} ℃'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ddd'
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
axisLabel: {
|
gridIndex: 1,
|
||||||
formatter: '{value} ℃'
|
type: "value",
|
||||||
},
|
interval: 20,
|
||||||
splitLine: {
|
name: "消耗量",
|
||||||
lineStyle: {
|
nameTextStyle: {
|
||||||
color: '#ddd'
|
fontSize: 14,
|
||||||
|
align: "right",
|
||||||
|
verticalAlign: "bottom",
|
||||||
|
lineHeight: 20,
|
||||||
|
padding: 6,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: colors.line,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} m³'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ddd'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 0,
|
||||||
|
type: "value",
|
||||||
|
name: "lambda",
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
align: "left",
|
||||||
|
verticalAlign: "bottom",
|
||||||
|
lineHeight: 20,
|
||||||
|
padding: 6,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: colors.line,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ddd'
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
],
|
||||||
|
|
||||||
|
dataZoom: {
|
||||||
|
type: 'inside'
|
||||||
},
|
},
|
||||||
},
|
series: [
|
||||||
tooltip: {
|
{
|
||||||
trigger: 'axis',
|
id: 'temp-series',
|
||||||
formatter: '<strong style="font-size: 16px">位置</strong> ({b}) <span style="font-size: 16px; font-weight: bold;">{c}</span> ℃'
|
name: '温度',
|
||||||
},
|
data: y_data,
|
||||||
dataZoom: {
|
xAxisIndex: 0,
|
||||||
type: 'inside'
|
yAxisIndex: 0,
|
||||||
},
|
// data: Array(65)
|
||||||
series: [
|
// .fill(1)
|
||||||
{
|
// .map((val) => Math.floor(Math.random() * 1000)),
|
||||||
data: y_data,
|
type: "line",
|
||||||
// data: Array(65)
|
},
|
||||||
// .fill(1)
|
{
|
||||||
// .map((val) => Math.floor(Math.random() * 1000)),
|
id: 'gas-series',
|
||||||
type: "line",
|
name: '燃气消耗量(m³)',
|
||||||
},
|
xAxisIndex: 1,
|
||||||
],
|
yAxisIndex: 1,
|
||||||
})
|
data: Array(65)
|
||||||
|
.fill(1)
|
||||||
|
.map((val) => Math.floor(Math.random() * 128)),
|
||||||
|
type: "line",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'lambda-series',
|
||||||
|
name: 'lambda',
|
||||||
|
data: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 33, 11, 21, 3, 5, 67, 8, 88, 90, 12, 32, 2, 31, 33, null, null],
|
||||||
|
xAxisIndex: 0,
|
||||||
|
yAxisIndex: 2,
|
||||||
|
// data: Array(65)
|
||||||
|
// .fill(1)
|
||||||
|
// .map((val) => Math.floor(Math.random() * 1000)),
|
||||||
|
type: "line",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -29,8 +29,8 @@
|
|||||||
:total="totalPage"
|
:total="totalPage"
|
||||||
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||||
</div>
|
</div>
|
||||||
<div class="temp-chart" style="height: 100%; overflow: hidden;">
|
<div class="temp-chart" style="height: 100%; overflow: hidden">
|
||||||
<div id="temp-chart" class="temp-chart__inner" style="height: 100%; background:#ccc;" />
|
<div id="temp-chart" class="temp-chart__inner" style="height: 100%" />
|
||||||
<!-- <div id="lambda-chart" class="lambda-chart__inner" style="height: 50%; background: #f001;" /> -->
|
<!-- <div id="lambda-chart" class="lambda-chart__inner" style="height: 50%; background: #f001;" /> -->
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@ -80,6 +80,50 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
getList() {
|
getList() {
|
||||||
|
this.dataList = [
|
||||||
|
{
|
||||||
|
code: "1",
|
||||||
|
temp1: 39,
|
||||||
|
press1: 12,
|
||||||
|
press2: 10,
|
||||||
|
remark: 9.9,
|
||||||
|
createTime: "2021-09-09 12:00:00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "2",
|
||||||
|
temp1: 49,
|
||||||
|
press1: 11,
|
||||||
|
press2: 32,
|
||||||
|
remark: 9.9,
|
||||||
|
createTime: "2021-09-09 12:00:00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "3",
|
||||||
|
temp1: 59,
|
||||||
|
press1: 32,
|
||||||
|
press2: 43,
|
||||||
|
remark: 39,
|
||||||
|
createTime: "2021-09-09 12:00:00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "1",
|
||||||
|
temp1: 39,
|
||||||
|
press1: 21,
|
||||||
|
press2: 94,
|
||||||
|
remark: 19,
|
||||||
|
createTime: "2021-09-09 12:00:00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "1",
|
||||||
|
temp1: 22,
|
||||||
|
press1: 55,
|
||||||
|
press2: 42,
|
||||||
|
remark: 98,
|
||||||
|
createTime: "2021-09-09 12:00:00",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return;
|
||||||
|
|
||||||
this.tableLoading = true;
|
this.tableLoading = true;
|
||||||
this.$http
|
this.$http
|
||||||
.post("/pms/kilnPosHistory/pageView", {
|
.post("/pms/kilnPosHistory/pageView", {
|
||||||
@ -89,6 +133,7 @@ export default {
|
|||||||
})
|
})
|
||||||
.then(({ data: res }) => {
|
.then(({ data: res }) => {
|
||||||
//console.log("temp dialog res", res);
|
//console.log("temp dialog res", res);
|
||||||
|
|
||||||
this.tableLoading = false;
|
this.tableLoading = false;
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
if ("list" in res.data) {
|
if ("list" in res.data) {
|
||||||
@ -122,11 +167,12 @@ export default {
|
|||||||
// 根据 dataList 绘制折线图
|
// 根据 dataList 绘制折线图
|
||||||
if (!this.chart) this.chart = echarts.init(document.getElementById("temp-chart"));
|
if (!this.chart) this.chart = echarts.init(document.getElementById("temp-chart"));
|
||||||
// const y_data = Array(65).fill(0)
|
// const y_data = Array(65).fill(0)
|
||||||
|
// debugger;
|
||||||
this.chart.setOption(
|
this.chart.setOption(
|
||||||
loadChartConfig(
|
loadChartConfig({
|
||||||
null,
|
x_data: null,
|
||||||
this.dataList.map((i) => i.temp1)
|
y_data: this.dataList.map((i) => i.temp1),
|
||||||
)
|
})
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
handleOperate() {},
|
handleOperate() {},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user