feat: 大屏
This commit is contained in:
parent
3d1e1cc8da
commit
ecfd60e249
@ -530,10 +530,10 @@ div.el-table {
|
||||
}
|
||||
.pagination-container {
|
||||
.el-pagination__total {
|
||||
color: #fff;
|
||||
@include font_color(buttonFontColor);
|
||||
}
|
||||
.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-next {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
@include font_color(buttonFontColor);
|
||||
}
|
||||
.el-pagination.is-background .el-pager li:not(.active) {
|
||||
border: 1px solid #47cbfb;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
@include font_color(buttonFontColor);
|
||||
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 {
|
||||
.el-switch__core {
|
||||
background-color: transparent;
|
||||
|
||||
@ -5,67 +5,699 @@
|
||||
<div class="card-item-wrapper">
|
||||
<div class="card-big-title">R上辊操作侧数据监控</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
|
||||
class="grid-item-wrapper"
|
||||
style="grid-row: span 2;grid-column: span 2;padding: 2rem;"
|
||||
>
|
||||
<div class="grid-item-wrapper" style="grid-row: span 2;grid-column: span 2;padding: 2rem;">
|
||||
<div class="device-image"></div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper">
|
||||
<div class="card-item-wrapper">
|
||||
<div class="card-big-title">R上棍传动侧数据监控</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 class="grid-item-wrapper">
|
||||
<div class="card-item-wrapper">
|
||||
<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 class="grid-item-wrapper">
|
||||
<div class="card-item-wrapper">
|
||||
<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
|
||||
class="grid-item-wrapper"
|
||||
style="grid-column: span 2;"
|
||||
>
|
||||
<div class="grid-item-wrapper" style="grid-column: span 2;">
|
||||
<div class="card-item-wrapper">
|
||||
<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 class="bottom-grid-item">
|
||||
<div id="bottomL2" style="width: 100%;aspect-ratio: 1;"></div>
|
||||
<div style="font-family: 'BiaoTi';">油品粘度</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
|
||||
class="grid-item-wrapper"
|
||||
style="grid-column: span 2;"
|
||||
style="width: 100%;aspect-ratio: 1;"
|
||||
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="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>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { isArray, merge } from "lodash";
|
||||
import request from "@/utils/request";
|
||||
|
||||
export default {
|
||||
name: 'BigScreen',
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
l1: 0,
|
||||
l2: 0,
|
||||
|
||||
r1: 0,
|
||||
r2: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initBigScreen()
|
||||
mounted() {
|
||||
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: {
|
||||
initBigScreen() {
|
||||
console.log('initBigScreen');
|
||||
initChart1(xAxis = [], vx, vy, vz) {
|
||||
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';
|
||||
src: url(../../../assets/biaoti.ttf);
|
||||
}
|
||||
|
||||
.bigscreen-outer-wrappeer {
|
||||
width: 100%;
|
||||
height: calc(100vh - 86px);
|
||||
@ -84,11 +717,13 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
@include font_color(fontPrimary);
|
||||
padding: .6rem;
|
||||
|
||||
.grid-main-wrapper {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 34% 33% 33%;
|
||||
grid-template-columns: repeat(4, 25%);
|
||||
|
||||
.grid-item-wrapper {
|
||||
padding: .4rem;
|
||||
}
|
||||
@ -100,6 +735,7 @@ export default {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card-big-title {
|
||||
width: 100%;
|
||||
height: 3.3rem;
|
||||
@ -111,6 +747,7 @@ export default {
|
||||
text-shadow: 2px 2px 2px #fff;
|
||||
@include background_bg(bigGridTitleBackgroundImage);
|
||||
}
|
||||
|
||||
.big-car-title-bg {
|
||||
width: 100%;
|
||||
height: 2.4rem;
|
||||
@ -122,6 +759,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
@include background_bg(subBigTitleBackgroundImage);
|
||||
}
|
||||
|
||||
.card-sub-title {
|
||||
width: 100%;
|
||||
height: 2.4rem;
|
||||
@ -143,4 +781,39 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
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>
|
||||
Loading…
Reference in New Issue
Block a user