From da05b5f78cb7e04a82ff4852e4352b58e087d9c0 Mon Sep 17 00:00:00 2001 From: lll Date: Wed, 1 Nov 2023 15:15:15 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A9=BE=E9=A9=B6=E8=88=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 59 ++++++ package.json | 1 + src/App.vue | 5 +- src/main.js | 3 +- src/util/chartConfig.js | 430 ++++++++++++++++++++++++++++++++++++++++ src/util/font.js | 13 ++ src/views/Cockpit.vue | 169 +++++++++++++++- src/views/Index.vue | 6 +- 8 files changed, 667 insertions(+), 19 deletions(-) create mode 100644 src/util/chartConfig.js create mode 100644 src/util/font.js 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 `
+ //

${params[0].name}

+ //

数据 ${params[0].value}

+ //
+ // `; + + // // 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 @@
-

+

+ + + 产量数据监控 + + +

+
-

+

+ + + 主轴转换监控 + + +

+
-

+

+ + + 负载电流监控 + + +

+
-

+

+ + + 额定电流监控 + + +

+
+
+
+

+ + + 急停状态监控 + + +

+
+
+
+

+ + + 切削速度监控 + + +

+
-

-

@@ -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; + } } diff --git a/src/views/Index.vue b/src/views/Index.vue index 2490c93..b7073a1 100644 --- a/src/views/Index.vue +++ b/src/views/Index.vue @@ -34,9 +34,7 @@ -
- -
+
@@ -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,