初版
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