feat: 大屏
This commit is contained in:
parent
3d1e1cc8da
commit
ecfd60e249
@ -530,10 +530,10 @@ div.el-table {
|
|||||||
}
|
}
|
||||||
.pagination-container {
|
.pagination-container {
|
||||||
.el-pagination__total {
|
.el-pagination__total {
|
||||||
color: #fff;
|
@include font_color(buttonFontColor);
|
||||||
}
|
}
|
||||||
.el-pagination__jump {
|
.el-pagination__jump {
|
||||||
color: #fff;
|
@include font_color(buttonFontColor);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -543,14 +543,22 @@ div.el-table {
|
|||||||
.el-pagination.is-background .btn-prev,
|
.el-pagination.is-background .btn-prev,
|
||||||
.el-pagination.is-background .btn-next {
|
.el-pagination.is-background .btn-next {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: #fff;
|
@include font_color(buttonFontColor);
|
||||||
}
|
}
|
||||||
.el-pagination.is-background .el-pager li:not(.active) {
|
.el-pagination.is-background .el-pager li:not(.active) {
|
||||||
border: 1px solid #47cbfb;
|
border: 1px solid #47cbfb;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: #fff;
|
@include font_color(buttonFontColor);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||||
|
@include border_color(buttonActiveBackgroundColor);
|
||||||
|
@include background_color(buttonActiveBackgroundColor);
|
||||||
|
@include font_color(buttonActiveFontColor);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
div.el-switch {
|
div.el-switch {
|
||||||
.el-switch__core {
|
.el-switch__core {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|||||||
@ -5,67 +5,699 @@
|
|||||||
<div class="card-item-wrapper">
|
<div class="card-item-wrapper">
|
||||||
<div class="card-big-title">R上辊操作侧数据监控</div>
|
<div class="card-big-title">R上辊操作侧数据监控</div>
|
||||||
<div class="card-sub-title">油膜轴承振动监测</div>
|
<div class="card-sub-title">油膜轴承振动监测</div>
|
||||||
<div class="card-main-item-wrapper">IIIIIIII</div>
|
<div class="card-main-item-wrapper" id="chart1" style="height:calc(100% - 6.4rem);"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="grid-item-wrapper" style="grid-row: span 2;grid-column: span 2;padding: 2rem;">
|
||||||
class="grid-item-wrapper"
|
|
||||||
style="grid-row: span 2;grid-column: span 2;padding: 2rem;"
|
|
||||||
>
|
|
||||||
<div class="device-image"></div>
|
<div class="device-image"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-item-wrapper">
|
<div class="grid-item-wrapper">
|
||||||
<div class="card-item-wrapper">
|
<div class="card-item-wrapper">
|
||||||
<div class="card-big-title">R上棍传动侧数据监控</div>
|
<div class="card-big-title">R上棍传动侧数据监控</div>
|
||||||
<div class="card-sub-title">油膜轴承振动监测</div>
|
<div class="card-sub-title">油膜轴承振动监测</div>
|
||||||
<div class="card-main-item-wrapper">IIIIIIII</div>
|
<div class="card-main-item-wrapper" id="chart2" style="height:calc(100% - 6.4rem);"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-item-wrapper">
|
<div class="grid-item-wrapper">
|
||||||
<div class="card-item-wrapper">
|
<div class="card-item-wrapper">
|
||||||
<div class="card-sub-title">油液颗粒度特性</div>
|
<div class="card-sub-title">油液颗粒度特性</div>
|
||||||
<div class="card-main-item-wrapper">IIIIIIII</div>
|
<div class="card-main-item-wrapper" id="chart3" style="height:calc(100% - 2.8rem);"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-item-wrapper">
|
<div class="grid-item-wrapper">
|
||||||
<div class="card-item-wrapper">
|
<div class="card-item-wrapper">
|
||||||
<div class="card-sub-title">油液颗粒度特性</div>
|
<div class="card-sub-title">油液颗粒度特性</div>
|
||||||
<div class="card-main-item-wrapper">IIIIIIII</div>
|
<div class="card-main-item-wrapper" id="chart4" style="height:calc(100% - 2.8rem);"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="grid-item-wrapper" style="grid-column: span 2;">
|
||||||
class="grid-item-wrapper"
|
|
||||||
style="grid-column: span 2;"
|
|
||||||
>
|
|
||||||
<div class="card-item-wrapper">
|
<div class="card-item-wrapper">
|
||||||
<div class="big-car-title-bg">油膜轴承系统油品特性</div>
|
<div class="big-car-title-bg">油膜轴承系统油品特性</div>
|
||||||
<div class="card-main-item-wrapper">IIIIIIII</div>
|
<div class="card-main-item-wrapper" style="padding: .8rem 1.2rem;height: calc(100% - 2.4rem);">
|
||||||
|
<div class="bottom-grid-wrapper">
|
||||||
|
<div class="bottom-grid-item">
|
||||||
|
<div id="bottomL1" style="width: 100%;aspect-ratio: 1;"></div>
|
||||||
|
<div style="font-family: 'BiaoTi';">油水含量</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="bottom-grid-item">
|
||||||
|
<div id="bottomL2" style="width: 100%;aspect-ratio: 1;"></div>
|
||||||
|
<div style="font-family: 'BiaoTi';">油品粘度</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="bottom-grid-item">
|
||||||
|
<div id="bottomL3" style="width: 100%;aspect-ratio: 1;"></div>
|
||||||
|
<div style="font-family: 'BiaoTi';">进油压力</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-grid-item">
|
||||||
<div
|
<div
|
||||||
class="grid-item-wrapper"
|
style="width: 100%;aspect-ratio: 1;"
|
||||||
style="grid-column: span 2;"
|
class="extra-bar-wrapper"
|
||||||
>
|
>
|
||||||
|
<div class="extra-bar-item" :style="`height: ${parseInt(l1 * 100)}%;background-color:#6581f0;`"></div>
|
||||||
|
<div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(l1 * 100)}%);`">
|
||||||
|
{{ parseInt(l1 * 100) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-family: 'BiaoTi';">回油温度</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-grid-item">
|
||||||
|
<div
|
||||||
|
style="width: 100%;aspect-ratio: 1;"
|
||||||
|
class="extra-bar-wrapper"
|
||||||
|
>
|
||||||
|
<div class="extra-bar-item" :style="`height: ${parseInt(l2 * 100)}%;background-color:#19ca88;`"></div>
|
||||||
|
<div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(l2 * 100)}%);`">
|
||||||
|
{{ parseInt(l2 * 100) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-family: 'BiaoTi';">轴套区温度</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-item-wrapper" style="grid-column: span 2;">
|
||||||
<div class="card-item-wrapper">
|
<div class="card-item-wrapper">
|
||||||
<div class="big-car-title-bg">油膜轴承系统油品特性</div>
|
<div class="big-car-title-bg">油膜轴承系统油品特性</div>
|
||||||
<div class="card-main-item-wrapper">IIIIIIII</div>
|
<div class="card-main-item-wrapper" style="padding: .8rem 1.2rem;height: calc(100% - 2.4rem);">
|
||||||
|
<div class="bottom-grid-wrapper">
|
||||||
|
<div class="bottom-grid-item">
|
||||||
|
<div
|
||||||
|
style="width: 100%;aspect-ratio: 1;"
|
||||||
|
class="extra-bar-wrapper"
|
||||||
|
>
|
||||||
|
<div class="extra-bar-item" :style="`height: ${parseInt(r1 * 100)}%;background-color:#19ca88;`"></div>
|
||||||
|
<div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(r1 * 100)}%);`">
|
||||||
|
{{ parseInt(r1 * 100) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-family: 'BiaoTi';">轴套区温度</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-grid-item">
|
||||||
|
<div
|
||||||
|
style="width: 100%;aspect-ratio: 1;"
|
||||||
|
class="extra-bar-wrapper"
|
||||||
|
>
|
||||||
|
<div class="extra-bar-item" :style="`height: ${parseInt(r2 * 100)}%;background-color:#6581f0;`"></div>
|
||||||
|
<div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(r2 * 100)}%);`">
|
||||||
|
{{ parseInt(r2 * 100) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-family: 'BiaoTi';">回油温度</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-grid-item">
|
||||||
|
<div id="bottomR1" style="width: 100%;aspect-ratio: 1;"></div>
|
||||||
|
<div style="font-family: 'BiaoTi';">进油压力</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-grid-item">
|
||||||
|
<div id="bottomR2" style="width: 100%;aspect-ratio: 1;"></div>
|
||||||
|
<div style="font-family: 'BiaoTi';">油品粘度</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-grid-item">
|
||||||
|
<div id="bottomR3" style="width: 100%;aspect-ratio: 1;"></div>
|
||||||
|
<div style="font-family: 'BiaoTi';">油水含量</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { isArray, merge } from "lodash";
|
||||||
|
import request from "@/utils/request";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'BigScreen',
|
name: 'BigScreen',
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {
|
||||||
|
l1: 0,
|
||||||
|
l2: 0,
|
||||||
|
|
||||||
|
r1: 0,
|
||||||
|
r2: 0
|
||||||
|
}
|
||||||
},
|
},
|
||||||
created() {
|
mounted() {
|
||||||
this.initBigScreen()
|
this.getDataResponse(['rtd', 'rto']).then(({ data }) => {
|
||||||
|
console.log('RREESS', data);
|
||||||
|
const { drive, operation } = data;
|
||||||
|
// 处理传动测数据
|
||||||
|
if (drive) {
|
||||||
|
const { xSensorData, vx, vy, vz } = drive;
|
||||||
|
this.initChart2(xSensorData, vx, vy, vz)
|
||||||
|
|
||||||
|
const { xPlcData, pz4, pz6, pz14, pz21 } = drive
|
||||||
|
this.initChart4(xPlcData, pz4, pz6, pz14, pz21)
|
||||||
|
|
||||||
|
const { ssat, rot, oip, ov, owc } = drive
|
||||||
|
|
||||||
|
this.initBottomR1(oip)
|
||||||
|
this.initBottomR2(ov)
|
||||||
|
this.initBottomR3(owc)
|
||||||
|
|
||||||
|
console.log('ssat', ssat);
|
||||||
|
this.r1 = ssat
|
||||||
|
this.r2 = rot
|
||||||
|
}
|
||||||
|
// 处理操作侧数据
|
||||||
|
if (operation) {
|
||||||
|
const { xSensorData, vx, vy, vz } = operation;
|
||||||
|
this.initChart1(xSensorData, vx, vy, vz)
|
||||||
|
|
||||||
|
const { xPlcData, pz4, pz6, pz14, pz21 } = operation;
|
||||||
|
this.initChart3(xPlcData, pz4, pz6, pz14, pz21)
|
||||||
|
|
||||||
|
const { owc, ov, oip, rot, ssat } = operation
|
||||||
|
this.initBottomL1(owc)
|
||||||
|
this.initBottomL2(ov)
|
||||||
|
this.initBottomL3(oip)
|
||||||
|
|
||||||
|
this.l1 = rot
|
||||||
|
this.l2 = ssat
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initBigScreen() {
|
initChart1(xAxis = [], vx, vy, vz) {
|
||||||
console.log('initBigScreen');
|
const chartIns = echarts.init(document.getElementById("chart1"));
|
||||||
|
chartIns.setOption(this.generateOptions({
|
||||||
|
xAxis: {
|
||||||
|
data: xAxis
|
||||||
|
},
|
||||||
|
yAxis: { name: "单位: ㎛" },
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
label: {
|
||||||
|
backgroundColor: "#6a7985",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "X轴",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: vx,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Y轴",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: vy,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Z轴",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: vz,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}), true, true);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chartIns && chartIns.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initChart2(xAxis = [], vx, vy, vz) {
|
||||||
|
const chartIns = echarts.init(document.getElementById("chart2"));
|
||||||
|
chartIns.setOption(this.generateOptions({
|
||||||
|
xAxis: {
|
||||||
|
data: xAxis
|
||||||
|
},
|
||||||
|
yAxis: { name: "单位: ㎛" },
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
label: {
|
||||||
|
backgroundColor: "#6a7985",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "X轴",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: vx,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Y轴",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: vy,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Z轴",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: vz,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}), true, true);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chartIns && chartIns.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initChart3(xAxis = [], pz4, pz6, pz14, pz21) {
|
||||||
|
const chartIns = echarts.init(document.getElementById("chart3"));
|
||||||
|
chartIns.setOption(this.generateOptions({
|
||||||
|
xAxis: {
|
||||||
|
data: xAxis
|
||||||
|
},
|
||||||
|
yAxis: { name: "单位: ㎛" },
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
label: {
|
||||||
|
backgroundColor: "#6a7985",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "4㎛",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: pz4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "6㎛",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: pz6,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "14㎛",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: pz14,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "21㎛",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: pz21,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}), true, true);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chartIns && chartIns.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initChart4(xAxis = [], pz4, pz6, pz14, pz21) {
|
||||||
|
const chartIns = echarts.init(document.getElementById("chart4"));
|
||||||
|
chartIns.setOption(this.generateOptions({
|
||||||
|
xAxis: {
|
||||||
|
data: xAxis
|
||||||
|
},
|
||||||
|
yAxis: { name: "单位: ㎛" },
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
label: {
|
||||||
|
backgroundColor: "#6a7985",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "4㎛",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: pz4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "6㎛",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: pz6,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "14㎛",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: pz14,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "21㎛",
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
data: pz21,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}), true, true);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chartIns && chartIns.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initBottomL1(owc = 0) {
|
||||||
|
const chartIns = echarts.init(document.getElementById("bottomL1"));
|
||||||
|
chartIns.setOption(
|
||||||
|
this.generateGaugeOption({
|
||||||
|
color: ["0ec6c4", "0ec6c4"],
|
||||||
|
bgColor: "aef1f5",
|
||||||
|
name: "",
|
||||||
|
value: parseInt(owc * 100),
|
||||||
|
limit: 100,
|
||||||
|
unit: "%",
|
||||||
|
}),
|
||||||
|
true,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chartIns && chartIns.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initBottomL2(ov = 0) {
|
||||||
|
const chartIns = echarts.init(document.getElementById("bottomL2"));
|
||||||
|
chartIns.setOption(
|
||||||
|
this.generateGaugeOption({
|
||||||
|
color: ["1860b1", "1860b1"],
|
||||||
|
bgColor: "c2d6ec",
|
||||||
|
name: "",
|
||||||
|
value: parseInt(ov * 100),
|
||||||
|
limit: 100,
|
||||||
|
unit: "CP",
|
||||||
|
}),
|
||||||
|
true,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chartIns && chartIns.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initBottomL3(oip = 0) {
|
||||||
|
const chartIns = echarts.init(document.getElementById("bottomL3"));
|
||||||
|
chartIns.setOption(
|
||||||
|
this.generateGaugeOption({
|
||||||
|
color: ["f3c128", "f3c128"],
|
||||||
|
bgColor: "f0eace",
|
||||||
|
name: "",
|
||||||
|
value: parseInt(oip * 100),
|
||||||
|
limit: 100,
|
||||||
|
unit: "Bar",
|
||||||
|
}),
|
||||||
|
true,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chartIns && chartIns.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initBottomR1(oip = 0) {
|
||||||
|
const chartIns = echarts.init(document.getElementById("bottomR1"));
|
||||||
|
chartIns.setOption(
|
||||||
|
this.generateGaugeOption({
|
||||||
|
color: ["f3c128", "f3c128"],
|
||||||
|
bgColor: "f0eace",
|
||||||
|
name: "",
|
||||||
|
value: parseInt(oip * 100),
|
||||||
|
limit: 100,
|
||||||
|
unit: "Bar",
|
||||||
|
}),
|
||||||
|
true,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chartIns && chartIns.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initBottomR2(ov = 0) {
|
||||||
|
const chartIns = echarts.init(document.getElementById("bottomR2"));
|
||||||
|
chartIns.setOption(
|
||||||
|
this.generateGaugeOption({
|
||||||
|
color: ["1860b1", "1860b1"],
|
||||||
|
bgColor: "c2d6ec",
|
||||||
|
name: "",
|
||||||
|
value: parseInt(ov * 100),
|
||||||
|
limit: 100,
|
||||||
|
unit: "CP",
|
||||||
|
}),
|
||||||
|
true,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chartIns && chartIns.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initBottomR3(owc = 0) {
|
||||||
|
const chartIns = echarts.init(document.getElementById("bottomR3"));
|
||||||
|
chartIns.setOption(
|
||||||
|
this.generateGaugeOption({
|
||||||
|
color: ["0ec6c4", "0ec6c4"],
|
||||||
|
bgColor: "aef1f5",
|
||||||
|
name: "",
|
||||||
|
value: parseInt(owc * 100),
|
||||||
|
limit: 100,
|
||||||
|
unit: "%",
|
||||||
|
}),
|
||||||
|
true,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
chartIns && chartIns.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
generateGaugeOption(
|
||||||
|
option = {
|
||||||
|
color: ["0DDF7A"],
|
||||||
|
bgColor: "fff",
|
||||||
|
name: "",
|
||||||
|
value: 0,
|
||||||
|
limit: 1,
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
return merge(
|
||||||
|
{
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "gauge",
|
||||||
|
center: ["50%", "60%"],
|
||||||
|
startAngle: 220,
|
||||||
|
endAngle: -40,
|
||||||
|
min: 0,
|
||||||
|
max: option.limit,
|
||||||
|
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 = {}) {
|
||||||
|
return merge(
|
||||||
|
{
|
||||||
|
color: [
|
||||||
|
"#306fff",
|
||||||
|
"#30c9c9",
|
||||||
|
"#f7ad08",
|
||||||
|
"#93beff",
|
||||||
|
"#80FFA5",
|
||||||
|
"#00DDFF",
|
||||||
|
"#37A2FF",
|
||||||
|
"#FF0087",
|
||||||
|
"#FFBF00",
|
||||||
|
"#5470c6",
|
||||||
|
"#91cc75",
|
||||||
|
"#fac858",
|
||||||
|
"#ee6666",
|
||||||
|
"#73c0de",
|
||||||
|
"#3ba272",
|
||||||
|
"#fc8452",
|
||||||
|
"#9a60b4",
|
||||||
|
"#ea7ccc",
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
show: true,
|
||||||
|
name: "",
|
||||||
|
nameLocation: "end", // 坐标轴名称及显示位置，可以时start和middle
|
||||||
|
nameTextStyle: {
|
||||||
|
// 坐标轴名称的样式
|
||||||
|
color: "#818181",
|
||||||
|
},
|
||||||
|
nameGap: 15, // 坐标轴名称与轴线的距离
|
||||||
|
inverse: false, // 是否反向坐标轴
|
||||||
|
axisLabel: {
|
||||||
|
// 刻度标签的样式
|
||||||
|
hideOverlap: true, // 隐藏重叠的标签
|
||||||
|
color: "#818181",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
position: "bottom",
|
||||||
|
offset: 0, // 相对正常位置的偏移
|
||||||
|
type: "category", // 类目轴，也可以是time， value， 对数轴log
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: "",
|
||||||
|
nameTextStyle: {
|
||||||
|
// 坐标轴名称的样式
|
||||||
|
color: "#818181",
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
// 刻度标签的样式
|
||||||
|
hideOverlap: true, // 隐藏重叠的标签
|
||||||
|
color: "#818181",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
minorTick: {
|
||||||
|
// 坐标轴刻度线相关配置
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
// 坐标轴在grid区域中的分割线
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed",
|
||||||
|
color: "#818181",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
// 图例配置
|
||||||
|
orient: "horizontal", // horizontal水平布局， vertical垂直布局
|
||||||
|
top: "20",
|
||||||
|
right: "30",
|
||||||
|
// backgroundColor: "#000000",
|
||||||
|
// borderColor: "#ccc",
|
||||||
|
// borderWidth: 0,
|
||||||
|
padding: 5,
|
||||||
|
itemGap: 10, // 各个item之间的距离
|
||||||
|
itemWidth: 10, // 图例图形宽度
|
||||||
|
itemHeight: 10, // 图例图形高度
|
||||||
|
borderRadius: 10,
|
||||||
|
textStyle: {
|
||||||
|
color: "#d7d8db",
|
||||||
|
fontSize: 9,
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
type: "dotted",
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "10%",
|
||||||
|
top: "25%",
|
||||||
|
right: "6%",
|
||||||
|
bottom: "12%",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
option,
|
||||||
|
(objVal, srcVal) => {
|
||||||
|
if (isArray(objVal)) return srcVal;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
getDataResponse(params = []) {
|
||||||
|
return request({
|
||||||
|
url: "/ipc/dataShow/byPart/" + params.join(','),
|
||||||
|
method: "get"
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -77,6 +709,7 @@ export default {
|
|||||||
font-family: 'BiaoTi';
|
font-family: 'BiaoTi';
|
||||||
src: url(../../../assets/biaoti.ttf);
|
src: url(../../../assets/biaoti.ttf);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bigscreen-outer-wrappeer {
|
.bigscreen-outer-wrappeer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 86px);
|
height: calc(100vh - 86px);
|
||||||
@ -84,11 +717,13 @@ export default {
|
|||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
@include font_color(fontPrimary);
|
@include font_color(fontPrimary);
|
||||||
padding: .6rem;
|
padding: .6rem;
|
||||||
|
|
||||||
.grid-main-wrapper {
|
.grid-main-wrapper {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 34% 33% 33%;
|
grid-template-rows: 34% 33% 33%;
|
||||||
grid-template-columns: repeat(4, 25%);
|
grid-template-columns: repeat(4, 25%);
|
||||||
|
|
||||||
.grid-item-wrapper {
|
.grid-item-wrapper {
|
||||||
padding: .4rem;
|
padding: .4rem;
|
||||||
}
|
}
|
||||||
@ -100,6 +735,7 @@ export default {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.card-big-title {
|
.card-big-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3.3rem;
|
height: 3.3rem;
|
||||||
@ -111,6 +747,7 @@ export default {
|
|||||||
text-shadow: 2px 2px 2px #fff;
|
text-shadow: 2px 2px 2px #fff;
|
||||||
@include background_bg(bigGridTitleBackgroundImage);
|
@include background_bg(bigGridTitleBackgroundImage);
|
||||||
}
|
}
|
||||||
|
|
||||||
.big-car-title-bg {
|
.big-car-title-bg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 2.4rem;
|
height: 2.4rem;
|
||||||
@ -122,6 +759,7 @@ export default {
|
|||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
@include background_bg(subBigTitleBackgroundImage);
|
@include background_bg(subBigTitleBackgroundImage);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-sub-title {
|
.card-sub-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 2.4rem;
|
height: 2.4rem;
|
||||||
@ -143,4 +781,39 @@ export default {
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bottom-grid-wrapper {
|
||||||
|
display: grid;
|
||||||
|
height: 100%;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
|
||||||
|
.bottom-grid-item {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.extra-bar-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 1rem;
|
||||||
|
.extra-bar-item {
|
||||||
|
width: 2rem;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
.extra-bar-text {
|
||||||
|
background-color: #c1c1c142;
|
||||||
|
width: 2rem;
|
||||||
|
color: #eb1616;
|
||||||
|
font-family: 'BiaoTi';
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user