初版
This commit is contained in:
commit
8b076f84bc
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
5
.idea/.gitignore
vendored
Normal file
5
.idea/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# 默认忽略的文件
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# 基于编辑器的 HTTP 客户端请求
|
||||
/httpRequests/
|
||||
12
.idea/board.iml
Normal file
12
.idea/board.iml
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
8
.idea/modules.xml
Normal file
8
.idea/modules.xml
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/board.iml" filepath="$PROJECT_DIR$/.idea/board.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
19
README.md
Normal file
19
README.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
# board
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
8175
package-lock.json
generated
Normal file
8175
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
package.json
Normal file
30
package.json
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"name": "board",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.4",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.8.4",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3",
|
||||
"vuex": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"sass": "^1.32.7",
|
||||
"sass-loader": "^12.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead",
|
||||
"not ie 11"
|
||||
]
|
||||
}
|
||||
BIN
public/image/bg.jpg
Normal file
BIN
public/image/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
BIN
public/image/head_bg.png
Normal file
BIN
public/image/head_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
29
public/index.html
Normal file
29
public/index.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>仪征市亚新科立库电子大屏</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body{
|
||||
background-image: url('image/bg.jpg');
|
||||
background-size: cover;
|
||||
font-size: 1rem;
|
||||
color: #e2e2e2;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
14
src/App.vue
Normal file
14
src/App.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<router-view/>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: "微软雅黑",serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
12
src/assets/css/table.css
Normal file
12
src/assets/css/table.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
.el-table {
|
||||
--el-table-border-color: #ffffff15;
|
||||
//--el-table-border: none;
|
||||
--el-table-text-color: #bdbdbe;
|
||||
--el-table-header-text-color: #bdbdbe;
|
||||
--el-table-row-hover-bg-color: transparent;
|
||||
--el-table-current-row-bg-color: transparent;
|
||||
--el-table-header-bg-color: transparent;
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-expanded-cell-bg-color: transparent;
|
||||
}
|
||||
101
src/components/PageHeader.vue
Normal file
101
src/components/PageHeader.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<!-- -->
|
||||
<template>
|
||||
<div class="header">
|
||||
仪征市亚新科立库电子大屏
|
||||
<div class="time">{{timeNow}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
timer: '',
|
||||
timeNow: ''
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
showTime() {
|
||||
const dt = new Date();
|
||||
const y = dt.getFullYear();
|
||||
const mt = dt.getMonth() + 1;
|
||||
const day = dt.getDate();
|
||||
const h = dt.getHours();//获取时
|
||||
const m = dt.getMinutes();//获取分
|
||||
const s = dt.getSeconds();//获取秒
|
||||
this.timeNow = y + "/" + AppendZero(mt) + "/" + AppendZero(day) + " " + AppendZero(h) + ":" + AppendZero(m) + ":" + AppendZero(s) + "";
|
||||
function AppendZero(obj) {
|
||||
if (obj < 10) return "0" + "" + obj;
|
||||
else return obj;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
this.timer = setInterval(this.showTime, 1000);
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
clearTimeout(this.timer);//清除定时器
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
width: 100vw;
|
||||
height: 80px;
|
||||
background-image: url('../../public/image/head_bg.png');
|
||||
background-size: 100% 100%;
|
||||
font-size: 2.3rem;
|
||||
color: #e2e2e2;
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.time {
|
||||
position:absolute;
|
||||
right:.3rem;
|
||||
top: 25px;
|
||||
line-height: .75rem;
|
||||
color:rgba(255,255,255,.7);
|
||||
font-size: 1.4rem;
|
||||
padding-right: .1rem;
|
||||
font-family:electronicFont,serif;
|
||||
}
|
||||
|
||||
</style>
|
||||
100
src/components/Shuttles/ShuttlesEquipmentStatus.vue
Normal file
100
src/components/Shuttles/ShuttlesEquipmentStatus.vue
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="background" style="height: 100%">
|
||||
<div class="title">设备状态信息</div>
|
||||
<el-row style="margin-left: 20px; margin-top: 10px">
|
||||
<el-table :data="tableData" border style="width: calc(50vw - 30px);" height="15vh" :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}">
|
||||
<el-table-column prop="equipmentName" label="设备名称" />
|
||||
<el-table-column prop="status" label="状态" >
|
||||
<template #default="scope">
|
||||
<el-tag class="ml-2" effect="dark" :type=formatterEquipmentStatusEnum(scope.row.status).type>
|
||||
{{formatterEquipmentStatusEnum(scope.row.status).label }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import {formatterEquipmentStatusEnum} from "@/formatter/equipmentStatusFormatter";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
tableData: [
|
||||
{ equipmentName: '一号车', status: '0' },
|
||||
{ equipmentName: '二号车', status: '1' },
|
||||
{ equipmentName: '三号车', status: '2' }
|
||||
]
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {formatterEquipmentStatusEnum},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #e2e2e2;
|
||||
padding-left: 25px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.background {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.title:before {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 4px;
|
||||
background: #49bcf7;
|
||||
border-radius: 5px;
|
||||
content: "";
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
}
|
||||
</style>
|
||||
94
src/components/Shuttles/ShuttlesError.vue
Normal file
94
src/components/Shuttles/ShuttlesError.vue
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="background" style="height: 100%">
|
||||
<div class="title">设备故障记录</div>
|
||||
<el-row style="margin-left: 20px; margin-top: 10px; margin-right: 5px">
|
||||
<el-table :data="tableData" border style="width: calc(50vw - 30px);" height="15vh" :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}">
|
||||
<el-table-column prop="errMsg" label="故障信息" />
|
||||
<el-table-column prop="time" label="时间" />
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
tableData: [
|
||||
{ errMsg: '车辆异常', time: '2022-05-05 12:12:12' },
|
||||
{ errMsg: '通讯异常', time: '2022-05-05 12:12:12' },
|
||||
{ errMsg: '车辆电量异常', time: '2022-05-05 12:12:12' },
|
||||
{ errMsg: '设备故障', time: '2022-05-05 12:12:12' }
|
||||
]
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #e2e2e2;
|
||||
padding-left: 25px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.background {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.title:before {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 4px;
|
||||
background: #49bcf7;
|
||||
border-radius: 5px;
|
||||
content: "";
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
}
|
||||
</style>
|
||||
131
src/components/Shuttles/ShuttlesStock.vue
Normal file
131
src/components/Shuttles/ShuttlesStock.vue
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<!--MiniLoader库存列表-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="background" style="height: 100%">
|
||||
<div class="title">库存表</div>
|
||||
<el-row style="margin-left: 20px; margin-top: 10px">
|
||||
<el-table :data="tableData" border style="width: calc(50vw - 30px);" height="19vh"
|
||||
:cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}" ref="tableRef">
|
||||
<el-table-column prop="location" label="库位" />
|
||||
<el-table-column prop="goodsId" label="物料编号"/>
|
||||
<el-table-column prop="batch" label="批次" />
|
||||
<el-table-column prop="goodsNum" label="数量" />
|
||||
<el-table-column prop="status" label="状态" />
|
||||
<el-table-column prop="inData" label="入库日期" />
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
tableData:[
|
||||
{location: "T111", goodsId: "24234", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "S124434", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "500.30", status: "111", inData: "9999999"},
|
||||
{location: "T111", goodsId: "423423", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "1423423411", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "24234", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "S124434", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "500.30", status: "111", inData: "9999999"},
|
||||
{location: "T111", goodsId: "423423", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
]
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
autoRoll() {
|
||||
const tableBody = this.$refs.tableRef.$el.querySelector('.el-scrollbar__wrap');
|
||||
if (tableBody) {
|
||||
setInterval(() => {
|
||||
if(this.tableData === undefined || this.tableData.length === 0) {
|
||||
return
|
||||
}
|
||||
tableBody.scrollTop += 1
|
||||
if (tableBody.clientHeight + tableBody.scrollTop === tableBody.scrollHeight) {
|
||||
tableBody.scrollTop = 0
|
||||
}
|
||||
}, 50)
|
||||
} else {
|
||||
console.log('没有找到滚动位置')
|
||||
}
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
this.autoRoll()
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #e2e2e2;
|
||||
padding-left: 25px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.background {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.title:before {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 4px;
|
||||
background: #49bcf7;
|
||||
border-radius: 5px;
|
||||
content: "";
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
}
|
||||
</style>
|
||||
161
src/components/Shuttles/ShuttlesStockUsage.vue
Normal file
161
src/components/Shuttles/ShuttlesStockUsage.vue
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<!--MiniLoader库存使用率-->
|
||||
<template>
|
||||
<div class="background" style="height: 100%">
|
||||
<div class="title">库存使用率</div>
|
||||
<div style="width: 18vw; height: 20vh; margin: auto auto" id="shuttlesStockUsage"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 图表实例
|
||||
chart: null,
|
||||
// 柱状图数据
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
align: 'left',
|
||||
x: 'right',
|
||||
y: 'bottom',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '12'
|
||||
}
|
||||
},
|
||||
color: ['rgb(207,251,116)', '#fa7c55', '#ffe12c'],
|
||||
series: [
|
||||
{
|
||||
name: '库存占用率',
|
||||
type: 'pie',
|
||||
radius: ['30%', '55%'],
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 3
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{b}' + '\n\r' + '{d}%',
|
||||
color: '#fff'
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 60, name: '空闲'},
|
||||
{value: 30, name: '占用'},
|
||||
{value: 10, name: '锁定'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
setOptions() {
|
||||
if(!this.chart) {
|
||||
const dom = document.getElementById('shuttlesStockUsage');
|
||||
this.chart = this.$echarts.init(dom);
|
||||
}
|
||||
this.option.series[0].data = [
|
||||
{value: 60, name: '空闲'},
|
||||
{value: 30, name: '占用'},
|
||||
{value: 10, name: '锁定'}
|
||||
];
|
||||
let randomArr = [];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
randomArr.push({
|
||||
value: Math.floor(Math.random() * 80 + 20),
|
||||
name: i === 0 ? '空闲' : i === 1 ? '占用' : i === 2 ? '锁定': '其他'
|
||||
})
|
||||
}
|
||||
this.option.series[0].data = randomArr;
|
||||
this.chart.setOption(this.option, true);
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
this.setOptions();
|
||||
setInterval(() =>
|
||||
{
|
||||
this.setOptions();
|
||||
}, 3000)
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #e2e2e2;
|
||||
padding-left: 25px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.background {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.title:before {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 4px;
|
||||
background: #49bcf7;
|
||||
border-radius: 5px;
|
||||
content: "";
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
</style>
|
||||
128
src/components/Shuttles/ShuttlesTask.vue
Normal file
128
src/components/Shuttles/ShuttlesTask.vue
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<!--MiniLoader任务列表-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="background" style="height: 100%">
|
||||
<div class="title">交付任务</div>
|
||||
<el-row style="margin-left: 20px; margin-top: 10px">
|
||||
<el-table :data="tableData" border style="width: calc(50vw - 30px);" height="19vh"
|
||||
:cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}" ref="tableRef">
|
||||
<el-table-column prop="taskId" label="任务号" />
|
||||
<el-table-column prop="taskType" label="任务类型" />
|
||||
<el-table-column prop="origin" label="起点"/>
|
||||
<el-table-column prop="destination" label="终点" />
|
||||
<el-table-column prop="taskStatus" label="任务状态" />
|
||||
<el-table-column prop="createTime" label="创建时间" />
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
tableData:[
|
||||
{taskId: '001',taskType: '1',origin: '1',destination: '2',taskStatus: '1',createTime: '2022-01-01'},
|
||||
{taskId: '002',taskType: '2',origin: '2',destination: '3',taskStatus: '2',createTime: '2022-01-02'},
|
||||
{taskId: '003',taskType: '3',origin: '453',destination: '789789',taskStatus: '3',createTime: '2022-01-03'},
|
||||
{taskId: '004',taskType: '4',origin: '4',destination: '5',taskStatus: '4',createTime: '2022-01-04'},
|
||||
{taskId: '005',taskType: '5',origin: '5',destination: '6',taskStatus: '5',createTime: '2022-01-05'},
|
||||
{taskId: '006',taskType: '6',origin: '6',destination: '7',taskStatus: '6',createTime: '2022-01-06'},
|
||||
{taskId: '007',taskType: '4657',origin: '6457',destination: '8',taskStatus: '7',createTime: '2022-01-07'},
|
||||
{taskId: '001',taskType: '1',origin: '1',destination: '2',taskStatus: '1',createTime: '2022-01-01'},
|
||||
{taskId: '002',taskType: '2',origin: '2',destination: '3',taskStatus: '2',createTime: '2022-01-02'},
|
||||
{taskId: '003',taskType: '3',origin: '3',destination: '4',taskStatus: '3',createTime: '2022-01-03'},
|
||||
{taskId: '004',taskType: '4',origin: '4',destination: '5',taskStatus: '4',createTime: '2022-01-04'},
|
||||
{taskId: '005',taskType: '5',origin: '5645',destination: '6',taskStatus: '5',createTime: '2022-01-05'},
|
||||
{taskId: '006',taskType: '6',origin: '6',destination: '7',taskStatus: '6',createTime: '2022-01-06'},
|
||||
{taskId: '007',taskType: '7',origin: '7',destination: '8',taskStatus: '7',createTime: '2022-01-07'}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
autoRoll() {
|
||||
const tableBody = this.$refs.tableRef.$el.querySelector('.el-scrollbar__wrap');
|
||||
if (tableBody) {
|
||||
setInterval(() => {
|
||||
if(this.tableData === undefined || this.tableData.length === 0) {
|
||||
return
|
||||
}
|
||||
tableBody.scrollTop += 1
|
||||
if (tableBody.clientHeight + tableBody.scrollTop === tableBody.scrollHeight) {
|
||||
tableBody.scrollTop = 0
|
||||
}
|
||||
}, 50)
|
||||
} else {
|
||||
console.log('没有找到滚动位置')
|
||||
}
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
this.autoRoll()
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #e2e2e2;
|
||||
padding-left: 25px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.background {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.title:before {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 4px;
|
||||
background: #49bcf7;
|
||||
border-radius: 5px;
|
||||
content: "";
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
}
|
||||
</style>
|
||||
155
src/components/Shuttles/ShuttlesTaskCompleteRatio.vue
Normal file
155
src/components/Shuttles/ShuttlesTaskCompleteRatio.vue
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="background" style="height: 100%">
|
||||
<div class="title">当日任务完成率</div>
|
||||
<div style="width: 18vw; height: 20vh; margin: auto auto" id="shuttlesTaskCompleteRadio"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
|
||||
// 图表实例
|
||||
chart: null,
|
||||
// 柱状图数据
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
align: 'left',
|
||||
x: 'right',
|
||||
y: 'bottom',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '12'
|
||||
}
|
||||
},
|
||||
color: ['rgb(179,230,97)', '#ffda01'],
|
||||
series: [
|
||||
{
|
||||
name: '任务完成率',
|
||||
type: 'pie',
|
||||
radius: ['30%', '55%'],
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 3
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{b}' + '\n\r' + '{d}%',
|
||||
color: '#fff'
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 60, name: '已完成'},
|
||||
{value: 40, name: '未完成'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
setOptions() {
|
||||
if(!this.chart) {
|
||||
const dom = document.getElementById('shuttlesTaskCompleteRadio');
|
||||
this.chart = this.$echarts.init(dom);
|
||||
}
|
||||
this.option.series[0].data = [
|
||||
{value: 60, name: '已完成'},
|
||||
{value: 40, name: '未完成'}
|
||||
];
|
||||
let randomArr = [];
|
||||
for (let i = 0; i < 2; i++) {
|
||||
randomArr.push({
|
||||
value: Math.floor(Math.random() * 100 + 30),
|
||||
name: i === 0 ? '已完成' : i === 1 ? '未完成' : '其他'
|
||||
})
|
||||
}
|
||||
this.option.series[0].data = randomArr;
|
||||
this.chart.setOption(this.option, true);
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
this.setOptions();
|
||||
setInterval(() =>
|
||||
{
|
||||
this.setOptions();
|
||||
}, 3000)
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #e2e2e2;
|
||||
padding-left: 25px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.background {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.title:before {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 4px;
|
||||
background: #49bcf7;
|
||||
border-radius: 5px;
|
||||
content: "";
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
}
|
||||
</style>
|
||||
99
src/components/miniloader/MiniLoaderEquipmentStatus.vue
Normal file
99
src/components/miniloader/MiniLoaderEquipmentStatus.vue
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="background" style="height: 100%">
|
||||
<div class="title">设备状态信息</div>
|
||||
<el-row style="margin-left: 20px; margin-top: 10px">
|
||||
<el-table :data="tableData" border style="width: calc(50vw - 30px);" height="15vh" :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}">
|
||||
<el-table-column prop="equipmentName" label="设备名称" />
|
||||
<el-table-column prop="status" label="状态" >
|
||||
<template #default="scope">
|
||||
<el-tag class="ml-2" effect="dark" :type=formatterEquipmentStatusEnum(scope.row.status).type>
|
||||
{{formatterEquipmentStatusEnum(scope.row.status).label }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import {formatterEquipmentStatusEnum} from "@/formatter/equipmentStatusFormatter";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
tableData: [
|
||||
{ equipmentName: 'MiniLoader', status: '0' },
|
||||
{ equipmentName: '箱式输送机', status: '1' }
|
||||
]
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {formatterEquipmentStatusEnum},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #e2e2e2;
|
||||
padding-left: 25px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.background {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.title:before {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 4px;
|
||||
background: #49bcf7;
|
||||
border-radius: 5px;
|
||||
content: "";
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
}
|
||||
</style>
|
||||
94
src/components/miniloader/MiniLoaderError.vue
Normal file
94
src/components/miniloader/MiniLoaderError.vue
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="background" style="height: 100%">
|
||||
<div class="title">设备故障记录</div>
|
||||
<el-row style="margin-left: 20px; margin-top: 10px; margin-right: 5px">
|
||||
<el-table :data="tableData" border style="width: calc(50vw - 30px);" height="15vh" :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}">
|
||||
<el-table-column prop="errMsg" label="故障信息" />
|
||||
<el-table-column prop="time" label="时间" />
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
tableData: [
|
||||
{ errMsg: '设备故障', time: '2022-05-05 12:12:12' },
|
||||
{ errMsg: '通讯异常', time: '2022-05-05 12:12:12' },
|
||||
{ errMsg: '输送卡线', time: '2022-05-05 12:12:12' },
|
||||
{ errMsg: '网络失去连接', time: '2022-05-05 12:12:12' }
|
||||
]
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #e2e2e2;
|
||||
padding-left: 25px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.background {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.title:before {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 4px;
|
||||
background: #49bcf7;
|
||||
border-radius: 5px;
|
||||
content: "";
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
}
|
||||
</style>
|
||||
125
src/components/miniloader/MiniLoaderStock.vue
Normal file
125
src/components/miniloader/MiniLoaderStock.vue
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<!--MiniLoader库存列表-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="background" style="height: 100%">
|
||||
<div class="title">库存表</div>
|
||||
<el-row style="margin-left: 20px; margin-top: 10px">
|
||||
<el-table :data="tableData" border style="width: calc(50vw - 30px);" height="19vh" :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}" ref="tableRef">
|
||||
<el-table-column prop="location" label="库位" />
|
||||
<el-table-column prop="goodsId" label="物料编号"/>
|
||||
<el-table-column prop="batch" label="批次" />
|
||||
<el-table-column prop="goodsNum" label="数量" />
|
||||
<el-table-column prop="status" label="状态" />
|
||||
<el-table-column prop="inData" label="入库日期" />
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
tableData:[
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "9999999"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
|
||||
{location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
autoRoll() {
|
||||
const tableBody = this.$refs.tableRef.$el.querySelector('.el-scrollbar__wrap');
|
||||
if (tableBody) {
|
||||
setInterval(() => {
|
||||
if(this.tableData === undefined || this.tableData.length === 0) {
|
||||
return
|
||||
}
|
||||
tableBody.scrollTop += 1
|
||||
if (tableBody.clientHeight + tableBody.scrollTop === tableBody.scrollHeight) {
|
||||
tableBody.scrollTop = 0
|
||||
}
|
||||
}, 50)
|
||||
} else {
|
||||
console.log('没有找到滚动位置')
|
||||
}
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
this.autoRoll()
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #e2e2e2;
|
||||
padding-left: 25px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.background {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.title:before {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 4px;
|
||||
background: #49bcf7;
|
||||
border-radius: 5px;
|
||||
content: "";
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
}
|
||||
</style>
|
||||
159
src/components/miniloader/MiniLoaderStockUsage.vue
Normal file
159
src/components/miniloader/MiniLoaderStockUsage.vue
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
<!--MiniLoader库存使用率-->
|
||||
<template>
|
||||
<div class="background" style="height: 100%">
|
||||
<div class="title">库存使用率</div>
|
||||
<div style="width: 18vw; height: 20vh; margin: auto auto" id="miniLoaderStockUsage"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 图表实例
|
||||
chart: null,
|
||||
// 柱状图数据
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
align: 'left',
|
||||
x: 'right',
|
||||
y: 'bottom',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '12'
|
||||
}
|
||||
},
|
||||
color: ['rgb(207,251,116)', '#fa7c55', '#ffe12c'],
|
||||
series: [
|
||||
{
|
||||
name: '库存占用率',
|
||||
type: 'pie',
|
||||
radius: ['30%', '55%'],
|
||||
padAngle: 5,
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: {
|
||||
borderRadius: 3
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{b}' + '\n\r' + '{d}%',
|
||||
color: '#fff'
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
showAbove: true,
|
||||
smooth: 0.2
|
||||
},
|
||||
data: [
|
||||
{value: 60, name: '空闲'},
|
||||
{value: 30, name: '占用'},
|
||||
{value: 10, name: '锁定'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
setOptions() {
|
||||
if(!this.chart) {
|
||||
const dom = document.getElementById('miniLoaderStockUsage');
|
||||
this.chart = this.$echarts.init(dom);
|
||||
}
|
||||
this.option.series[0].data = [
|
||||
{value: 60, name: '空闲'},
|
||||
{value: 30, name: '占用'},
|
||||
{value: 10, name: '锁定'}
|
||||
];
|
||||
let randomArr = [];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
randomArr.push({
|
||||
value: Math.floor(Math.random() * 80 + 20),
|
||||
name: i === 0 ? '空闲' : i === 1 ? '占用' : i === 2 ? '锁定': '其他'
|
||||
})
|
||||
}
|
||||
this.option.series[0].data = randomArr;
|
||||
this.chart.setOption(this.option, true);
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
this.setOptions();
|
||||
setInterval(() =>
|
||||
{
|
||||
this.setOptions();
|
||||
}, 3000)
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #e2e2e2;
|
||||
padding-left: 25px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.background {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.title:before {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 4px;
|
||||
background: #49bcf7;
|
||||
border-radius: 5px;
|
||||
content: "";
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
</style>
|
||||
121
src/components/miniloader/MiniLoaderTask.vue
Normal file
121
src/components/miniloader/MiniLoaderTask.vue
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!--MiniLoader任务列表-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="background" style="height: 100%">
|
||||
<div class="title">工单任务</div>
|
||||
<el-row style="margin-left: 20px; margin-top: 10px">
|
||||
<el-table :data="tableData" border style="width: calc(50vw - 30px);" height="19vh"
|
||||
:cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}" ref="tableRef">
|
||||
<el-table-column prop="taskId" label="任务号" />
|
||||
<el-table-column prop="taskType" label="任务类型" />
|
||||
<el-table-column prop="origin" label="起点"/>
|
||||
<el-table-column prop="destination" label="终点" />
|
||||
<el-table-column prop="taskStatus" label="任务状态" />
|
||||
<el-table-column prop="createTime" label="创建时间" />
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
tableData:[
|
||||
{taskId: '001',taskType: '1',origin: '1',destination: '2',taskStatus: '1',createTime: '2022-01-01'},
|
||||
{taskId: '002',taskType: '2',origin: '2',destination: '3',taskStatus: '2',createTime: '2022-01-02'},
|
||||
{taskId: '003',taskType: '3',origin: '3',destination: '4',taskStatus: '3',createTime: '2022-01-03'},
|
||||
{taskId: '004',taskType: '4',origin: '4',destination: '5',taskStatus: '4',createTime: '2022-01-04'},
|
||||
{taskId: '005',taskType: '5',origin: '5',destination: '6',taskStatus: '5',createTime: '2022-01-05'},
|
||||
{taskId: '006',taskType: '6',origin: '6',destination: '7',taskStatus: '6',createTime: '2022-01-06'},
|
||||
{taskId: '007',taskType: '7',origin: '7',destination: '8',taskStatus: '7',createTime: '2022-01-07'}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
autoRoll() {
|
||||
const tableBody = this.$refs.tableRef.$el.querySelector('.el-scrollbar__wrap');
|
||||
if (tableBody) {
|
||||
setInterval(() => {
|
||||
if(this.tableData === undefined || this.tableData.length === 0) {
|
||||
return
|
||||
}
|
||||
tableBody.scrollTop += 1
|
||||
if (tableBody.clientHeight + tableBody.scrollTop === tableBody.scrollHeight) {
|
||||
tableBody.scrollTop = 0
|
||||
}
|
||||
}, 50)
|
||||
} else {
|
||||
console.log('没有找到滚动位置')
|
||||
}
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
this.autoRoll()
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #e2e2e2;
|
||||
padding-left: 25px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.background {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.title:before {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 4px;
|
||||
background: #49bcf7;
|
||||
border-radius: 5px;
|
||||
content: "";
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
}
|
||||
</style>
|
||||
155
src/components/miniloader/MiniLoaderTaskCompleteRatio.vue
Normal file
155
src/components/miniloader/MiniLoaderTaskCompleteRatio.vue
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="background" style="height: 100%">
|
||||
<div class="title">当日任务完成率</div>
|
||||
<div style="width: 18vw; height: 20vh; margin: auto auto" id="miniLoaderTaskCompleteRadio"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
|
||||
// 图表实例
|
||||
chart: null,
|
||||
// 柱状图数据
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
align: 'left',
|
||||
x: 'right',
|
||||
y: 'bottom',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '12'
|
||||
}
|
||||
},
|
||||
color: ['rgb(179,230,97)', '#ffda01'],
|
||||
series: [
|
||||
{
|
||||
name: '任务完成率',
|
||||
type: 'pie',
|
||||
radius: ['30%', '55%'],
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 3
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{b}' + '\n\r' + '{d}%',
|
||||
color: '#fff'
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 60, name: '已完成'},
|
||||
{value: 40, name: '未完成'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
setOptions() {
|
||||
if(!this.chart) {
|
||||
const dom = document.getElementById('miniLoaderTaskCompleteRadio');
|
||||
this.chart = this.$echarts.init(dom);
|
||||
}
|
||||
this.option.series[0].data = [
|
||||
{value: 60, name: '已完成'},
|
||||
{value: 40, name: '未完成'}
|
||||
];
|
||||
let randomArr = [];
|
||||
for (let i = 0; i < 2; i++) {
|
||||
randomArr.push({
|
||||
value: Math.floor(Math.random() * 100 + 30),
|
||||
name: i === 0 ? '已完成' : i === 1 ? '未完成' : '其他'
|
||||
})
|
||||
}
|
||||
this.option.series[0].data = randomArr;
|
||||
this.chart.setOption(this.option, true);
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
this.setOptions();
|
||||
setInterval(() =>
|
||||
{
|
||||
this.setOptions();
|
||||
}, 3000)
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #e2e2e2;
|
||||
padding-left: 25px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.background {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.title:before {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 4px;
|
||||
background: #49bcf7;
|
||||
border-radius: 5px;
|
||||
content: "";
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
}
|
||||
</style>
|
||||
32
src/formatter/equipmentStatusFormatter.js
Normal file
32
src/formatter/equipmentStatusFormatter.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
// 设备状态
|
||||
export const equipmentStatusEnum = {
|
||||
free: {
|
||||
value: 0,
|
||||
label: '空闲',
|
||||
type: 'success'
|
||||
},
|
||||
err: {
|
||||
value: 1,
|
||||
label: '报警',
|
||||
type: 'danger'
|
||||
},
|
||||
running: {
|
||||
value: 2,
|
||||
label: '忙碌',
|
||||
type: 'warning'
|
||||
}
|
||||
}
|
||||
|
||||
export function formatterEquipmentStatusEnum(value) {
|
||||
switch (parseInt(value)){
|
||||
case equipmentStatusEnum.free.value:
|
||||
return {label: equipmentStatusEnum.free.label, type: equipmentStatusEnum.free.type};
|
||||
case equipmentStatusEnum.err.value:
|
||||
return {label: equipmentStatusEnum.err.label, type: equipmentStatusEnum.err.type};
|
||||
case equipmentStatusEnum.running.value:
|
||||
return {label: equipmentStatusEnum.running.label, type: equipmentStatusEnum.running.type};
|
||||
|
||||
default:
|
||||
return {label: `未知类型：${value}`, color: 'danger'};
|
||||
}
|
||||
}
|
||||
13
src/main.js
Normal file
13
src/main.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import * as echarts from 'echarts';
|
||||
import '@/assets/css/table.css';
|
||||
|
||||
const app = createApp(App);
|
||||
app.config.globalProperties.$echarts = echarts;
|
||||
|
||||
app.use(store).use(router).use(ElementPlus).mount('#app')
|
||||
17
src/router/index.js
Normal file
17
src/router/index.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import BaseLayout from "@/views/BaseLayout.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: BaseLayout
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
14
src/store/index.js
Normal file
14
src/store/index.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { createStore } from 'vuex'
|
||||
|
||||
export default createStore({
|
||||
state: {
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
})
|
||||
155
src/views/BaseLayout.vue
Normal file
155
src/views/BaseLayout.vue
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader></PageHeader>
|
||||
<el-row>
|
||||
<!-- MiniLoader-->
|
||||
<div style="background: rgba(6,48,109,.5); height: calc(100vh - 100px); width: calc(50vw - 5px)">
|
||||
<el-row style="text-align: center;">
|
||||
<h3 class="spanTitle">MiniLoader库</h3>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<MiniLoaderStockUsage></MiniLoaderStockUsage>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<MiniLoaderTaskCompleteRatio></MiniLoaderTaskCompleteRatio>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<MiniLoaderStock></MiniLoaderStock>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<MiniLoaderTask></MiniLoaderTask>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<MiniLoaderEquipmentStatus></MiniLoaderEquipmentStatus>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<MiniLoaderError></MiniLoaderError>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
<!-- 四向车库-->
|
||||
<div style="background: rgba(6,48,109,.5); height: calc(100vh - 100px); width: calc(50vw - 5px); margin-left: 10px">
|
||||
<el-row style="text-align: center;">
|
||||
<h3 class="spanTitle">四向车库</h3>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<ShuttlesStockUsage></ShuttlesStockUsage>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<ShuttlesTaskCompleteRatio></ShuttlesTaskCompleteRatio>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<ShuttlesStock></ShuttlesStock>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<ShuttlesTask></ShuttlesTask>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<ShuttlesEquipmentStatus></ShuttlesEquipmentStatus>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<ShuttlesError></ShuttlesError>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import MiniLoaderStockUsage from "@/components/miniloader/MiniLoaderStockUsage.vue";
|
||||
import MiniLoaderStock from "@/components/miniloader/MiniLoaderStock.vue";
|
||||
import MiniLoaderTask from "@/components/miniloader/MiniLoaderTask.vue";
|
||||
import MiniLoaderTaskCompleteRatio from "@/components/miniloader/MiniLoaderTaskCompleteRatio.vue";
|
||||
import MiniLoaderError from "@/components/miniloader/MiniLoaderError.vue";
|
||||
import MiniLoaderEquipmentStatus from "@/components/miniloader/MiniLoaderEquipmentStatus.vue";
|
||||
|
||||
import ShuttlesStockUsage from "@/components/Shuttles/ShuttlesStockUsage.vue";
|
||||
import ShuttlesStock from "@/components/Shuttles/ShuttlesStock.vue";
|
||||
import ShuttlesTask from "@/components/Shuttles/ShuttlesTask.vue";
|
||||
import ShuttlesTaskCompleteRatio from "@/components/Shuttles/ShuttlesTaskCompleteRatio.vue";
|
||||
import ShuttlesError from "@/components/Shuttles/ShuttlesError.vue";
|
||||
import ShuttlesEquipmentStatus from "@/components/Shuttles/ShuttlesEquipmentStatus.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {
|
||||
MiniLoaderEquipmentStatus,
|
||||
MiniLoaderError,
|
||||
MiniLoaderTaskCompleteRatio,
|
||||
MiniLoaderTask,
|
||||
MiniLoaderStock,
|
||||
MiniLoaderStockUsage,
|
||||
ShuttlesStockUsage,
|
||||
ShuttlesStock,
|
||||
ShuttlesTask,
|
||||
ShuttlesTaskCompleteRatio,
|
||||
ShuttlesError,
|
||||
ShuttlesEquipmentStatus,
|
||||
PageHeader},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spanTitle {
|
||||
font-size: 1.5rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin: 5px auto auto auto;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
13
vue.config.js
Normal file
13
vue.config.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// vue.config.js
|
||||
module.exports = {
|
||||
chainWebpack: (config) => {
|
||||
config.plugin('define').tap((definitions) => {
|
||||
Object.assign(definitions[0], {
|
||||
__VUE_OPTIONS_API__: 'true',
|
||||
__VUE_PROD_DEVTOOLS__: 'false',
|
||||
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
|
||||
})
|
||||
return definitions
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user