This commit is contained in:
lll
parent
d21daaa861
commit
b7b1a62ace
|
|
@ -12,6 +12,7 @@
|
|||
"element-ui": "^2.15.14",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^11.1.3",
|
||||
"postcss-pxtorem": "^6.0.0",
|
||||
"prismjs": "^1.29.0",
|
||||
"sass-loader": "^13.3.2",
|
||||
"scss-loader": "^0.0.1",
|
||||
|
|
@ -8765,6 +8766,14 @@
|
|||
"postcss": "^8.2.15"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-pxtorem": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
|
||||
"integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-reduce-initial": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
|
||||
|
|
@ -18034,6 +18043,12 @@
|
|||
"postcss-value-parser": "^4.2.0"
|
||||
}
|
||||
},
|
||||
"postcss-pxtorem": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
|
||||
"integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-reduce-initial": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -12,12 +12,13 @@
|
|||
"element-ui": "^2.15.14",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^11.1.3",
|
||||
"postcss-pxtorem": "^6.0.0",
|
||||
"prismjs": "^1.29.0",
|
||||
"sass-loader": "^13.3.2",
|
||||
"scss-loader": "^0.0.1",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.5.1",
|
||||
"vue-prism-editor": "^1.3.0"
|
||||
"vue-prism-editor": "^1.3.0",
|
||||
"vue-router": "^3.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {},
|
||||
"postcss-pxtorem": {
|
||||
rootValue: 16, // 基准值，可以根据需求修改
|
||||
unitPrecision: 5,
|
||||
propList: ["*"],
|
||||
selectorBlackList: ["body"],
|
||||
replace: true,
|
||||
mediaQuery: false,
|
||||
minPixelValue: 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
99
src/App.vue
99
src/App.vue
|
|
@ -1,102 +1,18 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div class="db_lite">
|
||||
<router-link to="/ipsetting">IP设置</router-link>
|
||||
<router-link to="/datacollect">数据采集配置</router-link>
|
||||
</div>
|
||||
<div class="chihou">
|
||||
<h2>斥候工业网关</h2>
|
||||
<ChiGate></ChiGate>
|
||||
<ChiWireld></ChiWireld>
|
||||
<ChiGateway></ChiGateway>
|
||||
<ChiDevice></ChiDevice>
|
||||
<ChiCollection></ChiCollection>
|
||||
<ChiClone></ChiClone>
|
||||
</div>
|
||||
<IpConfiguration></IpConfiguration>
|
||||
<PortConfiguration></PortConfiguration>
|
||||
|
||||
<div>
|
||||
<!-- //串口及网络协议设置 -->
|
||||
<netConfiguration />
|
||||
<!-- 网口配置 -->
|
||||
<NetworkConfiguration />
|
||||
<!-- 无线配置 -->
|
||||
<Wireles />
|
||||
<!-- 网络管理 -->
|
||||
<NetworkManagement />
|
||||
<!-- 对象管理 -->
|
||||
<ObjectManagement />
|
||||
<!-- 策略管理 -->
|
||||
<PolicyManagement />
|
||||
<!-- 网关配置 -->
|
||||
<GatewayConfiguration />
|
||||
<!-- 网关维护 -->
|
||||
<GatewayMaintenance />
|
||||
<div class="ip">
|
||||
<NetProtocol></NetProtocol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CollectionView from "./components/CollectionView.vue";
|
||||
import CloneView from "./components/CloneView.vue";
|
||||
import ChiGate from "./components/ChiGate.vue";
|
||||
import ChiWireld from "./components/ChiWireld.vue";
|
||||
import ChiGateway from "./components/ChiGateway.vue";
|
||||
import IpConfiguration from "./components/IpConfiguration.vue";
|
||||
import PortConfiguration from "./components/PortConfiguration.vue";
|
||||
import ChiDevice from "./components/ChiDevice.vue";
|
||||
import ChiCollection from "./components/ChiCollection.vue";
|
||||
import ChiClone from "./components/ChiClone.vue";
|
||||
import netConfiguration from "./components/netConfiguration.vue";
|
||||
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";
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
components: {
|
||||
// GateWay,
|
||||
// DataAcquisition,
|
||||
// DataView,
|
||||
// TreeView,
|
||||
// SerialPort,
|
||||
// DeviceVIew,
|
||||
CollectionView,
|
||||
CloneView,
|
||||
ChiGate,
|
||||
ChiWireld,
|
||||
ChiGateway,
|
||||
ChiDevice,
|
||||
ChiCollection,
|
||||
ChiClone,
|
||||
IpConfiguration,
|
||||
PortConfiguration,
|
||||
netConfiguration,
|
||||
NetworkConfiguration,
|
||||
Wireles,
|
||||
NetworkManagement,
|
||||
ObjectManagement,
|
||||
NetProtocol,
|
||||
PolicyManagement,
|
||||
GatewayConfiguration,
|
||||
GatewayMaintenance,
|
||||
},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -112,16 +28,5 @@ export default {
|
|||
background-color: #2b2d38;
|
||||
}
|
||||
|
||||
.db_lite,
|
||||
.chihou,
|
||||
.ip {
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
17
src/main.js
17
src/main.js
|
|
@ -1,11 +1,12 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import ElementUI from 'element-ui';
|
||||
import router from './router';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
Vue.config.productionTip = false
|
||||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import ElementUI from "element-ui";
|
||||
import "./util/rem";
|
||||
import router from "./router";
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
Vue.config.productionTip = false;
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
|
|
|
|||
|
|
@ -1,29 +1,40 @@
|
|||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router';
|
||||
Vue.use(VueRouter)
|
||||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/ipsetting',
|
||||
name: 'IPsetting',
|
||||
component: () => import("../views/IpSetting.vue")
|
||||
},
|
||||
{
|
||||
path: '/datacollect',
|
||||
name: 'datacollect',
|
||||
component: () => import('../views/DataCollect.vue')
|
||||
},
|
||||
{
|
||||
{
|
||||
path: "/",
|
||||
component: () => import("../views/Index.vue"),
|
||||
children: [
|
||||
{
|
||||
path: "/ipsetting",
|
||||
name: "IPsetting",
|
||||
component: () => import("../views/IpSetting.vue"),
|
||||
},
|
||||
{
|
||||
path: "/datacollect",
|
||||
name: "datacollect",
|
||||
component: () => import("../views/DataCollect.vue"),
|
||||
},
|
||||
{
|
||||
path: "/channelconfig",
|
||||
name: "channelconfig",
|
||||
component: () => import("../views/ChannelConfig.vue"),
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/cockpit",
|
||||
name: "cockpit",
|
||||
component: () => import("../views/Cockpit.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
mode: "history",
|
||||
base: process.env.BASE_URL,
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
function getHeightRate() {
|
||||
const { clientHeight } = document.documentElement;
|
||||
return clientHeight / 1080;
|
||||
}
|
||||
|
||||
function setRootFontSize() {
|
||||
document.documentElement.style.fontSize = `${getHeightRate() * 18}px`;
|
||||
}
|
||||
|
||||
setRootFontSize();
|
||||
|
||||
window.addEventListener("resize", setRootFontSize);
|
||||
|
||||
export {
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
getHeightRate,
|
||||
};
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="title">5G工厂机电智核数字孪生平台</div>
|
||||
<div class="bottom">
|
||||
<div class="topBox">
|
||||
<div class="date">实时数据</div>
|
||||
<div>
|
||||
<span>25</span>
|
||||
<p>产量</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>2130</span>
|
||||
<p>主轴转速</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>1</span>
|
||||
<p>急停状态</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>1090</span>
|
||||
<p>切削速度</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>21</span>
|
||||
<p>负载电流</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>19</span>
|
||||
<p>额定电流</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productChart">
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="mainshaftChart">
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="loadChart">
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="ratedChart">
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="one"><p></p></div>
|
||||
<div class="two"><p></p></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scope lang="less">
|
||||
.container {
|
||||
font-family: "SourceHanSansSC-regular";
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
background-image: url("../assets/image/图片 2 Copy@1x.png");
|
||||
background-size: cover; /* 图像大小适应容器 */
|
||||
background-repeat: no-repeat; /* 防止图像平铺 */
|
||||
background-position: center; /* 图像在容器中居中 */
|
||||
.title {
|
||||
height: 11%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 48px;
|
||||
color: #fff;
|
||||
font-family: "SourceHanSansSC-regular";
|
||||
background-image: url("../assets/image/边框样式2@1x.png");
|
||||
background-size: cover; /* 图像大小适应容器 */
|
||||
background-repeat: no-repeat; /* 防止图像平铺 */
|
||||
background-position: center; /* 图像在容器中居中 */
|
||||
}
|
||||
.bottom {
|
||||
height: calc(100vh - 11%);
|
||||
padding-top: 19px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
div {
|
||||
}
|
||||
.topBox {
|
||||
width: 95%;
|
||||
height: 114px;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background-image: url("../assets/image/矩形 2 Copy@1x.png");
|
||||
background-size: cover; /* 图像大小适应容器 */
|
||||
background-repeat: no-repeat; /* 防止图像平铺 */
|
||||
background-position: center; /* 图像在容器中居中 */
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
span {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 48px;
|
||||
}
|
||||
p {
|
||||
color: rgba(239, 239, 239, 1);
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
left: 53px;
|
||||
top: 157px;
|
||||
width: 40px;
|
||||
height: 63px;
|
||||
color: rgba(64, 149, 229, 1);
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
font-family: "SourceHanSansSC-bold";
|
||||
}
|
||||
}
|
||||
.productChart {
|
||||
margin-top: 45px;
|
||||
margin-left: 45px;
|
||||
}
|
||||
.mainshaftChart {
|
||||
margin-left: 45px;
|
||||
margin-top: 45px;
|
||||
}
|
||||
.loadChart {
|
||||
position: absolute;
|
||||
right: 45px;
|
||||
top: 180px;
|
||||
}
|
||||
.ratedChart {
|
||||
position: absolute;
|
||||
right: 45px;
|
||||
top: 533px;
|
||||
}
|
||||
.one {
|
||||
position: absolute;
|
||||
right: 560px;
|
||||
top: 533px;
|
||||
}
|
||||
.two {
|
||||
position: absolute;
|
||||
left: 560px;
|
||||
top: 533px;
|
||||
}
|
||||
.one,
|
||||
.two,
|
||||
.ratedChart,
|
||||
.loadChart,
|
||||
.mainshaftChart,
|
||||
.productChart {
|
||||
background-image: url("../assets/image/矩形 2 Copy@1x.png");
|
||||
background-size: cover; /* 图像大小适应容器 */
|
||||
background-repeat: no-repeat; /* 防止图像平铺 */
|
||||
background-position: center; /* 图像在容器中居中 */
|
||||
width: 414px;
|
||||
height: 308px;
|
||||
p {
|
||||
height: 43px;
|
||||
width: 100%;
|
||||
background-image: url("../assets/image/矩形 3 Copy@1x (1).png");
|
||||
background-size: cover; /* 图像大小适应容器 */
|
||||
background-repeat: no-repeat; /* 防止图像平铺 */
|
||||
background-position: center; /* 图像在容器中居中 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div class="db_lite">
|
||||
<router-link to="/ipsetting">IP设置</router-link>
|
||||
<router-link to="/datacollect">数据采集配置</router-link>
|
||||
<router-link to="/cockpit">驾驶舱</router-link>
|
||||
</div>
|
||||
<div class="chihou">
|
||||
<h2>斥候工业网关</h2>
|
||||
<ChiGate></ChiGate>
|
||||
<ChiWireld></ChiWireld>
|
||||
<ChiGateway></ChiGateway>
|
||||
<ChiDevice></ChiDevice>
|
||||
<ChiCollection></ChiCollection>
|
||||
<ChiClone></ChiClone>
|
||||
</div>
|
||||
<IpConfiguration></IpConfiguration>
|
||||
<PortConfiguration></PortConfiguration>
|
||||
|
||||
<div>
|
||||
<!-- //串口及网络协议设置 -->
|
||||
<netConfiguration />
|
||||
<!-- 网口配置 -->
|
||||
<NetworkConfiguration />
|
||||
<!-- 无线配置 -->
|
||||
<Wireles />
|
||||
<!-- 网络管理 -->
|
||||
<NetworkManagement />
|
||||
<!-- 对象管理 -->
|
||||
<ObjectManagement />
|
||||
<!-- 策略管理 -->
|
||||
<PolicyManagement />
|
||||
<!-- 网关配置 -->
|
||||
<GatewayConfiguration />
|
||||
<!-- 网关维护 -->
|
||||
<GatewayMaintenance />
|
||||
<div class="ip">
|
||||
<NetProtocol></NetProtocol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CollectionView from "../components/CollectionView.vue";
|
||||
import CloneView from "../components/CloneView.vue";
|
||||
import ChiGate from "../components/ChiGate.vue";
|
||||
import ChiWireld from "../components/ChiWireld.vue";
|
||||
import ChiGateway from "../components/ChiGateway.vue";
|
||||
import IpConfiguration from "../components/IpConfiguration.vue";
|
||||
import PortConfiguration from "../components/PortConfiguration.vue";
|
||||
import ChiDevice from "../components/ChiDevice.vue";
|
||||
import ChiCollection from "../components/ChiCollection.vue";
|
||||
import ChiClone from "../components/ChiClone.vue";
|
||||
import netConfiguration from "../components/netConfiguration.vue";
|
||||
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";
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
components: {
|
||||
// GateWay,
|
||||
// DataAcquisition,
|
||||
// DataView,
|
||||
// TreeView,
|
||||
// SerialPort,
|
||||
// DeviceVIew,
|
||||
CollectionView,
|
||||
CloneView,
|
||||
ChiGate,
|
||||
ChiWireld,
|
||||
ChiGateway,
|
||||
ChiDevice,
|
||||
ChiCollection,
|
||||
ChiClone,
|
||||
IpConfiguration,
|
||||
PortConfiguration,
|
||||
netConfiguration,
|
||||
NetworkConfiguration,
|
||||
Wireles,
|
||||
NetworkManagement,
|
||||
ObjectManagement,
|
||||
NetProtocol,
|
||||
PolicyManagement,
|
||||
GatewayConfiguration,
|
||||
GatewayMaintenance,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #2b2d38;
|
||||
}
|
||||
|
||||
.db_lite,
|
||||
.chihou,
|
||||
.ip {
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
const { defineConfig } = require('@vue/cli-service')
|
||||
const { defineConfig } = require("@vue/cli-service");
|
||||
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true,
|
||||
lintOnSave:false,
|
||||
})
|
||||
lintOnSave: false,
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue