diff --git a/package-lock.json b/package-lock.json
index 03055dc..0dfc079 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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=="
+ }
+ }
}
}
}
diff --git a/package.json b/package.json
index 8c1c2f5..80f7187 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/App.vue b/src/App.vue
index 832eeb1..f1bb4a6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
-
-
+
@@ -27,6 +26,4 @@ export default {
height: 100vh;
background-color: #2b2d38;
}
-
-
diff --git a/src/main.js b/src/main.js
index d2b2949..80b9c30 100644
--- a/src/main.js
+++ b/src/main.js
@@ -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,
diff --git a/src/util/chartConfig.js b/src/util/chartConfig.js
new file mode 100644
index 0000000..f44e5d9
--- /dev/null
+++ b/src/util/chartConfig.js
@@ -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 `
+ // `;
+
+ // // return [params[0].name, params[0].value].join("
");
+ // },
+ // },
+ 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)", //
+ },
+ },
+ ],
+};
diff --git a/src/util/font.js b/src/util/font.js
new file mode 100644
index 0000000..98ceb65
--- /dev/null
+++ b/src/util/font.js
@@ -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,
+};
diff --git a/src/views/Cockpit.vue b/src/views/Cockpit.vue
index d5abe2e..b775d5f 100644
--- a/src/views/Cockpit.vue
+++ b/src/views/Cockpit.vue
@@ -30,26 +30,129 @@
-
+
+
+
+ 额定电流监控
+
+
+
+
+
-
-
+
@@ -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,