驾驶舱
This commit is contained in:
lll
parent
149bc8a5a8
commit
da05b5f78c
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.4.3",
|
||||
"element-ui": "^2.15.14",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^11.1.3",
|
||||
|
|
@ -4937,6 +4938,20 @@
|
|||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
|
||||
"integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.4.4"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts/node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
},
|
||||
"node_modules/ee-first": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
|
||||
|
|
@ -11266,6 +11281,19 @@
|
|||
"resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
|
||||
"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "5.4.4",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
|
||||
"integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/zrender/node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -15064,6 +15092,22 @@
|
|||
"integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
|
||||
"dev": true
|
||||
},
|
||||
"echarts": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
|
||||
"integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
|
||||
"requires": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.4.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"ee-first": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
|
||||
|
|
@ -20019,6 +20063,21 @@
|
|||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"zrender": {
|
||||
"version": "5.4.4",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
|
||||
"integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
|
||||
"requires": {
|
||||
"tslib": "2.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.4.3",
|
||||
"element-ui": "^2.15.14",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^11.1.3",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,6 +26,4 @@ export default {
|
|||
height: 100vh;
|
||||
background-color: #2b2d38;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import ElementUI from "element-ui";
|
||||
import "./util/rem";
|
||||
import fontSize from "./util/font";
|
||||
import router from "./router";
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
Vue.config.productionTip = false;
|
||||
Vue.prototype.$fontSize = fontSize;
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
router,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,430 @@
|
|||
//产量数据监控
|
||||
export let productChart = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
"08:00",
|
||||
"09:00",
|
||||
"10:00",
|
||||
"11:00",
|
||||
"12:00",
|
||||
"13:00",
|
||||
"14:00",
|
||||
"15:00",
|
||||
"16:00",
|
||||
"17:00",
|
||||
"18:00",
|
||||
],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
interval: 0, //代表显示所有x轴标签显示
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
top: "5%",
|
||||
left: "10%",
|
||||
right: "5%",
|
||||
bottom: "10%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [26, 19, 13, 18, 20, 17, 23, 12, 28, 14, 11],
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
//柱状颜色
|
||||
color: "#75F9FD",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
//主轴转速监控
|
||||
export let mainshaftChart = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
"08:00",
|
||||
"09:00",
|
||||
"10:00",
|
||||
"11:00",
|
||||
"12:00",
|
||||
"13:00",
|
||||
"14:00",
|
||||
"15:00",
|
||||
"16:00",
|
||||
"17:00",
|
||||
"18:00",
|
||||
"19:00",
|
||||
],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
interval: 0, //代表显示所有x轴标签显示
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 4000,
|
||||
interval: 500,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 设置背景横线
|
||||
color: "#BBB",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
top: "5%",
|
||||
left: "10%",
|
||||
right: "5%",
|
||||
bottom: "10%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
500, 1500, 1800, 1500, 2000, 1600, 1500, 2830, 2500, 1600, 1500, 1900,
|
||||
],
|
||||
symbolSize: 10,
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
//柱状颜色
|
||||
color: "#02CDE6",
|
||||
},
|
||||
symbol: "circle",
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
type: "max", // 标记类型为最大值
|
||||
name: "最大值", // 标记的名称
|
||||
itemStyle: {
|
||||
color: "#FF8D00", // 设置标记点的颜色
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: "#FF8D00", // 设置边框颜色
|
||||
},
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
fontSize: 10, // 标签字体大小
|
||||
color: "#ffff", // 标签颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
markLine: {
|
||||
data: [
|
||||
{
|
||||
name: "标准线",
|
||||
yAxis: 2000, // 标准线的位置
|
||||
symbol: "none",
|
||||
lineStyle: {
|
||||
color: "#A2EF4D", // 标准线的颜色
|
||||
type: "solid", // 标准线的类型，可选值：'solid', 'dashed', 'dotted' 等
|
||||
width: 1, // 标准线的宽度
|
||||
arrow: "none", // 隐藏箭头
|
||||
},
|
||||
label: {
|
||||
show: false, // 是否显示标签
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
//负载电流监控
|
||||
export let loadChartChart = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
interval: 0, //代表显示所有x轴标签显示
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
top: "5%",
|
||||
left: "10%",
|
||||
right: "5%",
|
||||
bottom: "10%",
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: "axis",
|
||||
// show: true,
|
||||
// axisPointer: {
|
||||
// type: "cross",
|
||||
// label: {
|
||||
// backgroundColor: "#6a7985",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// trigger: "axis",
|
||||
// position: "inside", // 设置提示框的位置为 'inside'
|
||||
// formatter: function (params) {
|
||||
// return `<div class='tooltip'>
|
||||
// <p>${params[0].name}</p>
|
||||
// <p>数据 ${params[0].value}</p>
|
||||
// </div>
|
||||
// `;
|
||||
|
||||
// // return [params[0].name, params[0].value].join("<br>");
|
||||
// },
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
data: [14, 18, 13, 25, 21, 17],
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
//柱状颜色
|
||||
color: "#CCF783",
|
||||
},
|
||||
areaStyle: {
|
||||
color: "rgba(106, 126, 129, 0.8)", //
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
//额定电流监控
|
||||
export let ratedChart = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
interval: 0, //代表显示所有x轴标签显示
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
top: "5%",
|
||||
left: "10%",
|
||||
right: "5%",
|
||||
bottom: "10%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [21, 16, 19, 15, 22, 20],
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
//柱状颜色
|
||||
color: "#F6DE30",
|
||||
},
|
||||
areaStyle: {
|
||||
color: "rgba(106, 110, 94, 0.8)", //
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
//切削速度监控
|
||||
export let CuttingSpeedChart = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
"08:00",
|
||||
"09:00",
|
||||
"10:00",
|
||||
"11:00",
|
||||
"12:00",
|
||||
"13:00",
|
||||
"14:00",
|
||||
"15:00",
|
||||
"16:00",
|
||||
"17:00",
|
||||
"18:00",
|
||||
"19:00",
|
||||
],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
interval: 0, //代表显示所有x轴标签显示
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 1600,
|
||||
interval: 200,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 设置背景横线
|
||||
color: "#BBB",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
top: "5%",
|
||||
left: "10%",
|
||||
right: "5%",
|
||||
bottom: "10%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [1000, 600, 700, 500, 700, 1000, 600, 1130, 1000, 700, 1000, 900],
|
||||
symbolSize: 10,
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
//柱状颜色
|
||||
color: "#02CDE6",
|
||||
},
|
||||
symbol: "circle",
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
type: "max", // 标记类型为最大值
|
||||
name: "最大值", // 标记的名称
|
||||
itemStyle: {
|
||||
color: "#FF8D00", // 设置标记点的颜色
|
||||
borderWidth: 1, // 设置边框宽度
|
||||
borderColor: "#FF8D00", // 设置边框颜色
|
||||
},
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
fontSize: 10, // 标签字体大小
|
||||
color: "#ffff", // 标签颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
markLine: {
|
||||
data: [
|
||||
{
|
||||
name: "标准线",
|
||||
yAxis: 1000, // 标准线的位置
|
||||
symbol: "none",
|
||||
lineStyle: {
|
||||
color: "#A2EF4D", // 标准线的颜色
|
||||
type: "solid", // 标准线的类型，可选值：'solid', 'dashed', 'dotted' 等
|
||||
width: 1, // 标准线的宽度
|
||||
arrow: "none", // 隐藏箭头
|
||||
},
|
||||
label: {
|
||||
show: false, // 是否显示标签
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
//急停状态监控
|
||||
export let stopChart = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
"08:00",
|
||||
"09:00",
|
||||
"10:00",
|
||||
"11:00",
|
||||
"12:00",
|
||||
"13:00",
|
||||
"14:00",
|
||||
"15:00",
|
||||
"16:00",
|
||||
"17:00",
|
||||
"18:00",
|
||||
],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
interval: 0, //代表显示所有x轴标签显示
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
top: "5%",
|
||||
left: "10%",
|
||||
right: "5%",
|
||||
bottom: "10%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [0, 1, 0, 1, 1, 1, 1, 1, 0, 0, 1],
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
//柱状颜色
|
||||
color: "#8286F9",
|
||||
},
|
||||
areaStyle: {
|
||||
color: "rgba(64, 102, 157, 0.8)", //
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
export function fontSize(res) {
|
||||
let docEl = document.documentElement,
|
||||
clientWidth =
|
||||
window.innerWidth ||
|
||||
document.documentElement.clientWidth ||
|
||||
document.body.clientWidth;
|
||||
if (!clientWidth) return;
|
||||
let fontSize = 100 * (clientWidth / 1920);
|
||||
return res * fontSize;
|
||||
}
|
||||
export default {
|
||||
fontSize,
|
||||
};
|
||||
|
|
@ -30,26 +30,129 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="productChart">
|
||||
<p></p>
|
||||
<p>
|
||||
<i class="el-icon-arrow-right iconOne"></i>
|
||||
<i class="el-icon-arrow-right iconTwo"></i>
|
||||
<span>产量数据监控</span>
|
||||
<i class="el-icon-arrow-left iconThree"></i>
|
||||
<i class="el-icon-arrow-left iconFour"></i>
|
||||
</p>
|
||||
<div id="productChart"></div>
|
||||
</div>
|
||||
<div class="mainshaftChart">
|
||||
<p></p>
|
||||
<p>
|
||||
<i class="el-icon-arrow-right iconOne"></i>
|
||||
<i class="el-icon-arrow-right iconTwo"></i>
|
||||
<span>主轴转换监控</span>
|
||||
<i class="el-icon-arrow-left iconThree"></i>
|
||||
<i class="el-icon-arrow-left iconFour"></i>
|
||||
</p>
|
||||
<div id="mainshaftChart"></div>
|
||||
</div>
|
||||
<div class="loadChart">
|
||||
<p></p>
|
||||
<p>
|
||||
<i class="el-icon-arrow-right iconOne"></i>
|
||||
<i class="el-icon-arrow-right iconTwo"></i>
|
||||
<span>负载电流监控</span>
|
||||
<i class="el-icon-arrow-left iconThree"></i>
|
||||
<i class="el-icon-arrow-left iconFour"></i>
|
||||
</p>
|
||||
<div id="loadChart"></div>
|
||||
</div>
|
||||
<div class="ratedChart">
|
||||
<p></p>
|
||||
<p>
|
||||
<i class="el-icon-arrow-right iconOne"></i>
|
||||
<i class="el-icon-arrow-right iconTwo"></i>
|
||||
<span>额定电流监控</span>
|
||||
<i class="el-icon-arrow-left iconThree"></i>
|
||||
<i class="el-icon-arrow-left iconFour"></i>
|
||||
</p>
|
||||
<div id="ratedChart"></div>
|
||||
</div>
|
||||
<div class="two">
|
||||
<p>
|
||||
<i class="el-icon-arrow-right iconOne"></i>
|
||||
<i class="el-icon-arrow-right iconTwo"></i>
|
||||
<span>急停状态监控</span>
|
||||
<i class="el-icon-arrow-left iconThree"></i>
|
||||
<i class="el-icon-arrow-left iconFour"></i>
|
||||
</p>
|
||||
<div id="two"></div>
|
||||
</div>
|
||||
<div class="one">
|
||||
<p>
|
||||
<i class="el-icon-arrow-right iconOne"></i>
|
||||
<i class="el-icon-arrow-right iconTwo"></i>
|
||||
<span>切削速度监控</span>
|
||||
<i class="el-icon-arrow-left iconThree"></i>
|
||||
<i class="el-icon-arrow-left iconFour"></i>
|
||||
</p>
|
||||
<div id="one"></div>
|
||||
</div>
|
||||
<div class="one"><p></p></div>
|
||||
<div class="two"><p></p></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
// import "./util/rem";
|
||||
import "../util/rem";
|
||||
import {
|
||||
productChart,
|
||||
mainshaftChart,
|
||||
loadChartChart,
|
||||
ratedChart,
|
||||
CuttingSpeedChart,
|
||||
stopChart,
|
||||
} from "../util/chartConfig";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
productChartOption: {},
|
||||
mainshaftChartOption: {},
|
||||
loadChartChartOption: {},
|
||||
ratedChartOption: {},
|
||||
CuttingSpeedChartOption: {},
|
||||
stopChartOption: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.productChartOption = productChart;
|
||||
this.mainshaftChartOption = mainshaftChart;
|
||||
this.loadChartChartOption = loadChartChart;
|
||||
this.ratedChartOption = ratedChart;
|
||||
this.CuttingSpeedChartOption = CuttingSpeedChart;
|
||||
this.stopChartOption = stopChart;
|
||||
},
|
||||
methods: {
|
||||
getLoadEcharts(dom, option) {
|
||||
var myChart = echarts.init(document.getElementById(dom), null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
// if (option) {
|
||||
// console.log(option.xAxis.axisLabel.textStyle);
|
||||
// option.xAxis.axisLabel.textStyle.fontSize =
|
||||
// this.$fontSize.fontSize(0.1);
|
||||
// option.yAxis.axisLabel.textStyle.fontSize =
|
||||
// this.$fontSize.fontSize(0.1);
|
||||
// }
|
||||
myChart.setOption(option);
|
||||
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getLoadEcharts("productChart", this.productChartOption);
|
||||
this.getLoadEcharts("mainshaftChart", this.mainshaftChartOption);
|
||||
this.getLoadEcharts("loadChart", this.loadChartChartOption);
|
||||
this.getLoadEcharts("ratedChart", this.ratedChartOption);
|
||||
this.getLoadEcharts("one", this.CuttingSpeedChartOption);
|
||||
this.getLoadEcharts("two", this.stopChartOption);
|
||||
},
|
||||
beforeDestoryed() {
|
||||
// 组件销毁前移除监听,防止内存泄露
|
||||
window.removeEventListener("resize");
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -81,8 +184,6 @@ export default {
|
|||
padding-top: 19px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
div {
|
||||
}
|
||||
.topBox {
|
||||
width: 95%;
|
||||
height: 114px;
|
||||
|
|
@ -159,6 +260,7 @@ export default {
|
|||
background-position: center; /* 图像在容器中居中 */
|
||||
width: 414px;
|
||||
height: 308px;
|
||||
overflow: hidden;
|
||||
p {
|
||||
height: 43px;
|
||||
width: 100%;
|
||||
|
|
@ -166,8 +268,57 @@ export default {
|
|||
background-size: cover; /* 图像大小适应容器 */
|
||||
background-repeat: no-repeat; /* 防止图像平铺 */
|
||||
background-position: center; /* 图像在容器中居中 */
|
||||
position: relative;
|
||||
.iconOne,
|
||||
.iconFour {
|
||||
color: #2d8fdb;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
}
|
||||
.iconTwo,
|
||||
.iconThree {
|
||||
color: #9acef7;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
}
|
||||
.iconOne {
|
||||
left: 97px;
|
||||
}
|
||||
.iconTwo {
|
||||
left: 108px;
|
||||
}
|
||||
.iconThree {
|
||||
right: 108px;
|
||||
}
|
||||
.iconFour {
|
||||
right: 97px;
|
||||
}
|
||||
span {
|
||||
font-size: 20px;
|
||||
color: rgba(35, 125, 191, 1);
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
top: 6px;
|
||||
font-family: "SourceHanSansSC-regular";
|
||||
}
|
||||
}
|
||||
div {
|
||||
height: 265px;
|
||||
#productChart {
|
||||
transform: scale(0.85);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .tooltip {
|
||||
// background-color: red;
|
||||
// border: none;
|
||||
// }
|
||||
#loadChart div:nth-child(2) {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background-color: #fff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,9 +34,7 @@
|
|||
<GatewayConfiguration />
|
||||
<!-- 网关维护 -->
|
||||
<GatewayMaintenance />
|
||||
<div class="ip">
|
||||
<NetProtocol></NetProtocol>
|
||||
</div>
|
||||
<div class="ip"></div>
|
||||
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
|
|
@ -61,7 +59,6 @@ import NetworkConfiguration from "../components/NetworkConfiguration.vue";
|
|||
import Wireles from "../components/Wireles.vue";
|
||||
import NetworkManagement from "../components/NetworkManagement.vue";
|
||||
import ObjectManagement from "../components/ObjectManagement.vue";
|
||||
import NetProtocol from "../components/NetProtocol.vue";
|
||||
import PolicyManagement from "../components/PolicyManagement.vue";
|
||||
import GatewayConfiguration from "../components/GatewayConfiguration.vue";
|
||||
import GatewayMaintenance from "../components/GatewayMaintenance.vue";
|
||||
|
|
@ -93,7 +90,6 @@ export default {
|
|||
Wireles,
|
||||
NetworkManagement,
|
||||
ObjectManagement,
|
||||
NetProtocol,
|
||||
PolicyManagement,
|
||||
GatewayConfiguration,
|
||||
GatewayMaintenance,
|
||||
|
|
|
|||
Loading…
Reference in New Issue