Compare commits

..

2 Commits

Author SHA1 Message Date
36ae04dbb5 Merge remote-tracking branch 'origin/main' 2024-05-13 11:57:07 +08:00
03539d4144 首页优化 2024-05-13 11:56:34 +08:00
15 changed files with 145 additions and 32 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 383 KiB

After

Width:  |  Height:  |  Size: 385 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 246 KiB

After

Width:  |  Height:  |  Size: 330 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 386 KiB

After

Width:  |  Height:  |  Size: 304 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 249 KiB

After

Width:  |  Height:  |  Size: 304 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 341 KiB

After

Width:  |  Height:  |  Size: 334 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 341 KiB

After

Width:  |  Height:  |  Size: 335 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 345 KiB

After

Width:  |  Height:  |  Size: 339 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 346 KiB

After

Width:  |  Height:  |  Size: 334 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 248 KiB

After

Width:  |  Height:  |  Size: 297 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 244 KiB

After

Width:  |  Height:  |  Size: 297 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 248 KiB

After

Width:  |  Height:  |  Size: 332 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 249 KiB

After

Width:  |  Height:  |  Size: 332 KiB

View File

@ -175,8 +175,8 @@
></div> ></div>
<div <div
style="font-family: 'BiaoTi';" style="font-family: 'BiaoTi';"
@click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'oip', '进油压力', 'Bar')" @click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'oip', '抽油泵压力', 'Bar')"
>进油压力</div> >抽油泵压力</div>
</div> </div>
<div class="bottom-grid-item"> <div class="bottom-grid-item">
<div <div
@ -185,13 +185,13 @@
> >
<div <div
class="extra-bar-item" class="extra-bar-item"
:style="`height: ${parseInt(l1 * 100)}%;background-color:#6581f0;`" :style="`height: ${parseInt(l1 )}%;background-color:#6581f0;`"
></div> ></div>
<div <div
class="extra-bar-text" class="extra-bar-text"
:style="`height: calc(100% - ${parseInt(l1 * 100)}%);`" :style="`height: calc(100% - ${parseInt(l1)}%);`"
> >
{{ parseInt(l1 * 100) }} {{ parseInt(l1 ) }}
</div> </div>
</div> </div>
<div <div
@ -270,13 +270,13 @@
> >
<div <div
class="extra-bar-item" class="extra-bar-item"
:style="`height: ${parseInt(r2 * 100)}%;background-color:#6581f0;`" :style="`height: ${parseInt(r2)}%;background-color:#6581f0;`"
></div> ></div>
<div <div
class="extra-bar-text" class="extra-bar-text"
:style="`height: calc(100% - ${parseInt(r2 * 100)}%);`" :style="`height: calc(100% - ${parseInt(r2)}%);`"
> >
{{ parseInt(r2 * 100) }} {{ parseInt(r2) }}
</div> </div>
</div> </div>
<div <div
@ -291,8 +291,8 @@
></div> ></div>
<div <div
style="font-family: 'BiaoTi';" style="font-family: 'BiaoTi';"
@click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'oip', '进油压力', 'Bar')" @click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'oip', '抽油泵压力', 'Bar')"
>进油压力</div> >抽油泵压力</div>
</div> </div>
<div class="bottom-grid-item"> <div class="bottom-grid-item">
<div <div
@ -814,7 +814,7 @@ export default {
xAxis: { xAxis: {
data: xAxis, data: xAxis,
}, },
yAxis: { name: "单位: " }, yAxis: { name: "单位: m/s²" },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
@ -886,7 +886,7 @@ export default {
xAxis: { xAxis: {
data: xAxis, data: xAxis,
}, },
yAxis: { name: "单位: " }, yAxis: { name: "单位: m/s²" },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
@ -1060,8 +1060,8 @@ export default {
color: ["0ec6c4", "0ec6c4"], color: ["0ec6c4", "0ec6c4"],
bgColor: "aef1f5", bgColor: "aef1f5",
name: "", name: "",
value: parseInt(owc * 100), value: owc,
limit: 100, limit: 20,
unit: "%", unit: "%",
}), }),
true, true,
@ -1078,8 +1078,8 @@ export default {
color: ["1860b1", "1860b1"], color: ["1860b1", "1860b1"],
bgColor: "c2d6ec", bgColor: "c2d6ec",
name: "", name: "",
value: parseInt(ov * 100), value: ov,
limit: 100, limit: 800,
unit: "CP", unit: "CP",
}), }),
true, true,
@ -1092,12 +1092,11 @@ export default {
initBottomL3(oip = 0) { initBottomL3(oip = 0) {
const chartIns = echarts.init(document.getElementById("bottomL3")); const chartIns = echarts.init(document.getElementById("bottomL3"));
chartIns.setOption( chartIns.setOption(
this.generateGaugeOption({ this.generateGaugeOption2({
color: ["f3c128", "f3c128"], color: ["f3c128", "f3c128"],
bgColor: "f0eace", bgColor: "f0eace",
name: "", name: "",
value: parseInt(oip * 100), value: oip,
limit: 100,
unit: "Bar", unit: "Bar",
}), }),
true, true,
@ -1110,12 +1109,11 @@ export default {
initBottomR1(oip = 0) { initBottomR1(oip = 0) {
const chartIns = echarts.init(document.getElementById("bottomR1")); const chartIns = echarts.init(document.getElementById("bottomR1"));
chartIns.setOption( chartIns.setOption(
this.generateGaugeOption({ this.generateGaugeOption2({
color: ["f3c128", "f3c128"], color: ["f3c128", "f3c128"],
bgColor: "f0eace", bgColor: "f0eace",
name: "", name: "",
value: parseInt(oip * 100), value: oip ,
limit: 100,
unit: "Bar", unit: "Bar",
}), }),
true, true,
@ -1132,8 +1130,8 @@ export default {
color: ["1860b1", "1860b1"], color: ["1860b1", "1860b1"],
bgColor: "c2d6ec", bgColor: "c2d6ec",
name: "", name: "",
value: parseInt(ov * 100), value: ov,
limit: 100, limit: 800,
unit: "CP", unit: "CP",
}), }),
true, true,
@ -1150,8 +1148,8 @@ export default {
color: ["0ec6c4", "0ec6c4"], color: ["0ec6c4", "0ec6c4"],
bgColor: "aef1f5", bgColor: "aef1f5",
name: "", name: "",
value: parseInt(owc * 100), value: owc,
limit: 100, limit: 20,
unit: "%", unit: "%",
}), }),
true, true,
@ -1276,6 +1274,121 @@ export default {
} }
); );
}, },
generateGaugeOption2(
option = {
color: ["0DDF7A"],
bgColor: "fff",
name: "",
value: 0,
limit: 1,
}
) {
return merge(
{
series: [
{
type: "gauge",
center: ["50%", "60%"],
startAngle: 220,
endAngle: -40,
min: -1,
max: 1,
splitNumber: 12,
progress: {
show: true,
width: 20,
itemStyle: {
color: {
type: "linear",
x: 0.8,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#" + option.color[1], // 0%
},
{
offset: 1,
color: "#" + option.color[0], // 100%
},
],
global: false,
},
},
},
pointer: {
show: false,
},
axisLine: {
lineStyle: {
width: 20,
color: [[1, "#" + option.bgColor]],
},
},
axisTick: {
distance: -30,
splitNumber: 3,
lineStyle: {
width: 1,
color: "#" + option.color[0],
},
},
splitLine: {
distance: -40,
length: 10,
lineStyle: {
width: 2,
color: "#" + option.color[0],
},
},
axisLabel: {
show: false,
},
anchor: {
show: false,
},
title: {
show: false,
fontSize: 16,
color: "#" + option.color[0],
offsetCenter: [0, "100%"],
},
detail: {
valueAnimation: true,
width: "60%",
offsetCenter: [0, 0],
formatter: "{back| {value} }\n{unit|" + option.unit + "}",
rich: {
back: {
fontSize: 20,
fontWeight: 700,
color: "#" + option.color[0],
},
unit: {
fontSize: 12,
fontWeight: 400,
color: "#" + option.color[0],
},
},
},
data: [
{
value: option.value,
name: option.name,
},
],
},
],
},
{},
(objVal, srcVal) => {
if (isArray(objVal)) return srcVal;
}
);
},
generateOptions(option = {}) { generateOptions(option = {}) {
return merge( return merge(
{ {

View File

@ -176,7 +176,7 @@
show-overflow-tooltip show-overflow-tooltip
/> />
<el-table-column <el-table-column
label="进油压力" label="抽油泵压力"
align="center" align="center"
key="oip" key="oip"
prop="oip" prop="oip"

View File

@ -451,7 +451,7 @@ export default {
xAxis: { xAxis: {
data: xAxis, data: xAxis,
}, },
yAxis: { name: "单位: " }, yAxis: { name: "单位: m/s²" },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {