tao.zhang/tianyi_DataV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初步完成自适应

Browse Source
This commit is contained in:
刘佳
2024-03-06 09:15:02 +08:00
parent 2539fbabd5
commit 0c5818fb27
15 changed files with 39511 additions and 6770 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+30731
View File
File diff suppressed because it is too large Load Diff
package.json
+10 -3
View File
@@ -10,12 +10,16 @@
"dependencies": { "dependencies": {
"@jiaminghi/data-view": "^2.7.3", "@jiaminghi/data-view": "^2.7.3",
"@types/echarts": "^4.4.3", "@types/echarts": "^4.4.3",
"axios": "^1.6.7",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"echarts": "^4.6.0", "echarts": "^4.6.0",
"element-ui": "^2.15.14",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-awesome": "^4.0.2", "vue-awesome": "^4.0.2",
"vue-router": "^3.1.5", "vue-router": "^3.1.5",
"vuex": "^3.1.2" "vuex": "^3.1.2",
"webpack": "^4.23.0",
"webpack-cli": "^3.3.10"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^4.2.0", "@vue/cli-plugin-babel": "^4.2.0",
@@ -24,6 +28,7 @@
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2", "eslint-plugin-vue": "^6.1.2",
"postcss-plugin-px2rem": "^0.8.1",
"sass": "^1.25.0", "sass": "^1.25.0",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.11"
@@ -40,10 +45,12 @@
"parserOptions": { "parserOptions": {
"parser": "babel-eslint" "parser": "babel-eslint"
}, },
"rules": {} "rules": {
"no-unused-vars": "off"
}
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",
"last 2 versions" "last 2 versions"
] ]
} }
src/api/index.js
+7
View File
@@ -0,0 +1,7 @@
import request from '../utils/request'
export function gettaskList() {
return request({
url: '/api/production/prd-mo/prd-task',
method: 'post',
})
}
src/main.js
+4
View File
@@ -3,6 +3,9 @@ import App from './App.vue';
import router from './router'; import router from './router';
import store from './store'; import store from './store';
import dataV from '@jiaminghi/data-view'; import dataV from '@jiaminghi/data-view';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './utils/fontSize';
// 引入全局css // 引入全局css
import './assets/scss/style.scss'; import './assets/scss/style.scss';
// 按需引入vue-awesome图标 // 按需引入vue-awesome图标
@@ -25,6 +28,7 @@ Vue.config.productionTip = false;
// 全局注册 // 全局注册
Vue.component('icon', Icon); Vue.component('icon', Icon);
Vue.use(dataV); Vue.use(dataV);
Vue.use(ElementUI);
new Vue({ new Vue({
router, router,
src/utils/fontSize.js
+43
View File
@@ -0,0 +1,43 @@
(function flexible(window, document) {
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
function setBodyFontSize() {
if (document.body) {
// 1.body 字体大小默认为 16px
document.body.style.fontSize = 16 * dpr + "px";
} else {
document.addEventListener("DOMContentLoaded", setBodyFontSize);
}
}
setBodyFontSize();
// 这里默认平均分成 10 等分(适用移动端)
function setRemUnit() {
// 2.这里改成了24，将网页分成 24 等份，这样每个 1rem 对应的为 80px
// 3.为什么要分成 24份 ？ 目的是让缩放的细腻度更小，比如 0.1rem -> 8px
var rem = docEl.clientWidth / 24;
docEl.style.fontSize = rem + "px";
}
setRemUnit();
window.addEventListener("resize", setRemUnit);
window.addEventListener("pageshow", function (e) {
if (e.persisted) {
setRemUnit();
}
});
if (dpr >= 2) {
var fakeBody = document.createElement("body");
var testElement = document.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
docEl.classList.add("hairlines");
}
docEl.removeChild(fakeBody);
}
})(window, document);
src/utils/request.js
+15
View File
@@ -0,0 +1,15 @@
import axios from 'axios'
const server = axios.create({
baseURL: "http://192.168.11.109", //配置请求的url
timeout: 6000, //配置超时时间
headers:{}//配置请求头
})
// axios的拦截器
server.interceptors.request.use(function (config) {
//非登录的请求都加上一个请求头
console.log("请求拦截器已经执行");
return config;
}, function (error) {
return Promise.reject(error);
});
export default server
src/views/bottomRight.vue
+3 -16
View File
@@ -1,21 +1,8 @@
<template> <template>
<div id="bottomRight"> <div id="bottomRight">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span>
<icon name="chart-area" class="text-icon"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
<div class="decoration2">
<dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
</div>
</div>
</div>
<div>
<BottomRightChart /> <BottomRightChart />
</div>
</div>
</div> </div>
</template> </template>
@@ -29,7 +16,7 @@ export default {
</script> </script>
<style lang="scss" class> <style lang="scss" class>
$box-height: 520px; $box-height: 920px;
$box-width: 100%; $box-width: 100%;
#bottomRight { #bottomRight {
padding: 14px 16px; padding: 14px 16px;
src/views/cpcView/index.vue
+263
View File
@@ -0,0 +1,263 @@
<template>
<div class="box">
<div v-for="(item, index) of data" :key="index" class="box-x">
<div class="index">{{ index + 1 }}</div>
<div v-for="(it, ind) of item" :key="ind" class="item" :class="it.type == 1 ? 'typeOne' : 'typeTwo'">
<div>
<div>{{ it.location_code }}</div>
<div v-if="it.type == 1">载具:LX001</div>
<div v-if="it.type == 1">物料:包装袋</div>
<div v-if="it.type == 1">数量:10</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'yclView',
data() {
return {
data: [
[
{ type: 1, location_code: 'YCL-A02-1' },
{ type: 2, location_code: 'YCL-A03-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
],
[
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
],
[
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A11-1' },
],
[
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },]
,
[
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
],
[
{ type: 1, location_code: 'YCL-A02-1' },
{ type: 2, location_code: 'YCL-A03-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
],
[
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
],
[
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 0, location_code: 'YCL-A01-1' },
{ type: 1, location_code: 'YCL-A11-1' },
],
[
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },
{ type: 1, location_code: 'YCL-A11-1' },]
,
]
}
},
mounted() {
},
beforeDestroy() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.box {
width: 100%;
height: 860px;
// display: flex;
padding: 30px;
// justify-content: space-evenly;
// flex-wrap: wrap;
.box-x {
display: flex;
margin-bottom: 10px;
.index {
display: flex;
align-items: center;
margin-right: 30px;
width: 10px;
}
}
.item {
width: 70px;
height: 75px;
margin-right: 5px;
color: rgba(0, 0, 0, .5);
font-size: 9px;
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
div {
text-align: center;
// line-height: 18px;
}
}
.typeOne {
background-color: #35ff39;
background-image: linear-gradient(#35ff39, darken(#35ff39, 20%));
}
.typeTwo {
background-color: #849384;
background-image: linear-gradient(#849384, darken(#849384, 20%));
}
.typeth {
background-color: #d2de25;
}
}
</style>
src/views/eqpView/index.vue
+109
View File
@@ -0,0 +1,109 @@
<template>
<div class="box">
<div v-for="(it,ind) of data" :key="ind" class="item" :class="it.type==1?'typeOne':it.type==0?'typeTwo':'typeth'">
{{ it.name }}
</div>
</div>
</template>
<script>
export default {
name: 'yclView',
data() {
return {
data: [
{ type: 1, name: '设备1' },
{ type: 2, name: '设备2' },
{ type: 0, name: '设备3' },
{ type: 0, name: '设备3' },
{ type: 0, name: '设备3' },
{ type: 0, name: '设备3' },
{ type: 1, name: '设备3' },
{ type: 0, name: '设备3' },
{ type: 1, name: '设备3' },
{ type: 1, name: '设备3' },
{ type: 0, name: '设备3' },
{ type: 0, name: '设备3' },
{ type: 1, name: '设备3' },
{ type: 1, name: '设备3' },
{ type: 0, name: '设备3' },
{ type: 1, name: '设备3' },
{ type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
// { type: 0, name: '设备3' },
]
}
},
mounted() {
},
beforeDestroy() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.box {
width: 100%;
height: 860px;
display: flex;
padding: 50px;
// justify-content: space-evenly;
flex-wrap: wrap;
.item {
width: 200px;
height: 220px;
margin-right: 20px;
color: rgba(0, 0, 0, .5);
font-size: 20px;
text-align: center;
line-height: 220px;
// padding-top: 90px;
}
.typeOne{
background-color: #35ff39;
}
.typeTwo{
background-color: #849384;
}
.typeth{
background-color: #d2de25;
}
}
</style>
src/views/index.vue
+76 -42
View File
@@ -8,18 +8,10 @@
<div class="d-flex jc-center"> <div class="d-flex jc-center">
<dv-decoration-8 class="dv-dec-8" :color="decorationColor" /> <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
<div class="title"> <div class="title">
<span class="title-text">大数据可视化平台</span> <span class="title-text">天益医疗</span>
<dv-decoration-6 <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
class="dv-dec-6"
:reverse="true"
:color="['#50e3c2', '#67a1e5']"
/>
</div> </div>
<dv-decoration-8 <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
class="dv-dec-8"
:reverse="true"
:color="decorationColor"
/>
</div> </div>
<dv-decoration-10 class="dv-dec-10-s" /> <dv-decoration-10 class="dv-dec-10-s" />
</div> </div>
@@ -27,29 +19,43 @@
<!-- 第二行 --> <!-- 第二行 -->
<div class="d-flex jc-between px-2"> <div class="d-flex jc-between px-2">
<div class="d-flex aside-width"> <div class="d-flex aside-width">
<div class="react-left ml-4 react-l-s"> <div class="react-left ml-4 react-l-s" @click="type = 1"
<span class="react-left"></span> :style="type == 1 ? 'background-color: #1a5cd7' : 'background-color: #0f1325'">
<span class="text">数据分析1</span> <span class="react-left"
:style="type == 1 ? 'background-color: #1a5cd7' : 'background-color: #0f1325'"></span>
<span class="text"
:style="type == 1 ? 'background-color: #1a5cd7' : 'background-color: #0f1325'">原材料仓</span>
</div> </div>
<div class="react-left ml-3"> <div class="react-left ml-3" @click="type = 2"
<span class="text">数据分析2</span> :style="type == 2 ? 'background-color: #1a5cd7' : 'background-color: #0f1325'">
<span class="text">中储仓</span>
</div>
<div class="react-left ml-3" @click="type = 3"
:style="type == 3 ? 'background-color: #1a5cd7' : 'background-color: #0f1325'">
<span class="text">成品仓</span>
</div>
<div class="react-left ml-3" @click="type = 4"
:style="type == 4 ? 'background-color: #1a5cd7' : 'background-color: #0f1325'">
<span class="text">设备数采</span>
</div>
<div class="react-left ml-3" @click="type = 5"
:style="type == 5 ? 'background-color: #1a5cd7' : 'background-color: #0f1325'">
<span class="text">生产任务</span>
</div> </div>
</div> </div>
<div class="d-flex aside-width"> <div class="d-flex aside-width">
<div class="react-right bg-color-blue mr-3"> <div class="react-right bg-color-blue mr-3">
<span class="text fw-b">vue-big-screen</span> <span class="text fw-b">天益医疗大屏可视化</span>
</div> </div>
<div class="react-right mr-4 react-l-s"> <div class="react-right mr-4 react-l-s">
<span class="react-after"></span> <span class="react-after"></span>
<span class="text" <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
>{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
>
</div> </div>
</div> </div>
</div> </div>
<div class="body-box"> <!-- <div class="body-box" v-if="false">
<!-- 第三行数据 --> 第三行数据
<div class="content-box"> <div class="content-box">
<div> <div>
<dv-border-box-12> <dv-border-box-12>
@@ -61,11 +67,11 @@
<centerLeft2 /> <centerLeft2 />
</dv-border-box-12> </dv-border-box-12>
</div> </div>
<!-- 中间 --> 中间
<div> <div>
<center /> <center />
</div> </div>
<!-- 中间 --> 中间
<div> <div>
<centerRight2 /> <centerRight2 />
</div> </div>
@@ -76,7 +82,7 @@
</div> </div>
</div> </div>
<!-- 第四行数据 --> 第四行数据
<div class="bottom-box"> <div class="bottom-box">
<dv-border-box-13> <dv-border-box-13>
<bottomLeft /> <bottomLeft />
@@ -85,6 +91,23 @@
<bottomRight /> <bottomRight />
</dv-border-box-12> </dv-border-box-12>
</div> </div>
</div> -->
<div class="body-box">
<dv-border-box-12 v-if="type == 1">
<yclView />
</dv-border-box-12>
<dv-border-box-12 v-if="type == 2">
<zccView />
</dv-border-box-12>
<dv-border-box-10 v-if="type == 3">
<cpcView />
</dv-border-box-10>
<dv-border-box-8 v-if="type == 4">
<eqpView />
</dv-border-box-8>
<dv-border-box-11 v-if="type == 5">
<taskView />
</dv-border-box-11>
</div> </div>
</div> </div>
</div> </div>
@@ -94,16 +117,21 @@
<script> <script>
import drawMixin from "../utils/drawMixin"; import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js' import { formatTime } from '../utils/index.js'
import centerLeft1 from './centerLeft1' // import centerLeft1 from './centerLeft1'
import centerLeft2 from './centerLeft2' // import centerLeft2 from './centerLeft2'
import centerRight1 from './centerRight1' // import centerRight1 from './centerRight1'
import centerRight2 from './centerRight2' // import centerRight2 from './centerRight2'
import center from './center' // import center from './center'
import bottomLeft from './bottomLeft' // import bottomLeft from './bottomLeft'
import bottomRight from './bottomRight' // import bottomRight from './bottomRight'
import eqpView from './eqpView'
import taskView from './taskView'
import cpcView from './cpcView'
import yclView from './yclView'
import zccView from './zccView'
export default { export default {
mixins: [ drawMixin ], mixins: [drawMixin],
data() { data() {
return { return {
timing: null, timing: null,
@@ -112,23 +140,29 @@ export default {
dateYear: null, dateYear: null,
dateWeek: null, dateWeek: null,
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
decorationColor: ['#568aea', '#000000'] decorationColor: ['#568aea', '#000000'],
type: 1,
} }
}, },
components: { components: {
centerLeft1, // centerLeft1,
centerLeft2, // centerLeft2,
centerRight1, // centerRight1,
centerRight2, // centerRight2,
center, // center,
bottomLeft, // bottomLeft,
bottomRight // bottomRight,
eqpView,
taskView,
cpcView,
yclView,
zccView,
}, },
mounted() { mounted() {
this.timeFn() this.timeFn()
this.cancelLoading() this.cancelLoading()
}, },
beforeDestroy () { beforeDestroy() {
clearInterval(this.timing) clearInterval(this.timing)
}, },
methods: { methods: {
src/views/taskView/index.vue
+125
View File
@@ -0,0 +1,125 @@
<template>
<div class="box">
<el-table :data="data" style="width: 100%" height="760" v-loading="loadingShow">
<el-table-column prop="mo_code" label="任务单编号">
</el-table-column>
<el-table-column prop="f_fullname" label="状态">
</el-table-column>
<el-table-column prop="material_name" label="物料名称">
</el-table-column>
<el-table-column prop="plan_qty" label="计划数量">
</el-table-column>
<el-table-column prop="scheduled_qty" label="已排产数量">
</el-table-column>
<el-table-column prop="tobe_scheduled_qty" label="待排产数量">
</el-table-column>
<el-table-column prop="reported_work_qty" label="已完工数量">
</el-table-column>
<el-table-column prop="complete_rate" label="进度">
<template slot-scope="scope">
<el-progress :percentage="parseInt(scope.row.complete_rate)"
v-if="scope.row.complete_rate"></el-progress>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { gettaskList } from '@/api/index'
export default {
name: 'yclView',
data() {
return {
data: [],
loadingShow: false,
}
},
created() {
this.gettaskList()
},
mounted() {
},
beforeDestroy() {
},
methods: {
gettaskList() {
this.loadingShow = true
gettaskList().then(res => {
this.data = res.data.data || []
}).finally(e => { this.loadingShow = false })
}
}
}
</script>
<style lang="scss" scoped>
.box {
width: 100%;
height: 860px;
display: flex;
padding: 50px;
// justify-content: space-evenly;
flex-wrap: wrap;
}
// ::v-deep .el-table {
// background-color: aqua;
// }
// ::v-deep .has-gutter {
// background-color: aqua;
// }
// 滚动条隐藏
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
/*width: 0;宽度为0隐藏*/
width: 2px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 2px;
height: 50px;
background: #eee;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 2px;
background: rgba(0, 0, 0, 0.4);
}
/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
background-color: transparent !important;
border: 0; //去除表格
}
/*去除底边框*/
::v-deep.el-table td.el-table__cell {
border: 0;
}
::v-deep.el-table th.el-table__cell.is-leaf {
border: 0;
}
/*去除底部灰条.el-table::before*/
::v-deep .el-table::before {
display: none;
}
::v-deep .el-loading-mask {
background-color: transparent !important;
}
</style>
src/views/yclView/index.vue
+485
View File
@@ -0,0 +1,485 @@
<template>
<div class="box">
<div v-for="(item, index) of data" :key="index" class="box-x">
<div class="index">{{ ab[index] }}</div>
<div>
<div class="item-top">
<div v-for="(it, ind) of filterData(item, '1')" :key="ind" class="item-x "
:class="it.type == 1 ? 'typeOne' : 'typeTwo'">
<div class="lists">
<div>{{ it.location_code }}</div>
<!-- <div>载具:LX001</div>
<div>物料:包装袋</div>
<div>数量:10</div> -->
<div v-if="it.type == 1">载具:LX001</div>
<div v-if="it.type == 1">物料:包装袋</div>
<div v-if="it.type == 1">数量:10</div>
</div>
</div>
</div>
<div class="item-bo">
<div v-for="(it, ind) of filterData(item, '2')" :key="ind" class="item-x"
:class="it.type == 1 ? 'typeOne' : 'typeTwo'">
<div class="lists">
<div>{{ it.location_code }}</div>
<div v-if="it.type == 1">载具:LX001</div>
<div v-if="it.type == 1">物料:包装袋</div>
<div v-if="it.type == 1">数量:10</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'yclView',
data() {
return {
data: [
[
{ type: 1, location_code: 'YCL-A02-1', layer: '1' },
{ type: 2, location_code: 'YCL-A03-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A02-1', layer: '2' },
{ type: 2, location_code: 'YCL-A03-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
],
[
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A02-1', layer: '2' },
{ type: 2, location_code: 'YCL-A03-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
],
[
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A02-1', layer: '2' },
{ type: 2, location_code: 'YCL-A03-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
],
[
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A02-1', layer: '2' },
{ type: 2, location_code: 'YCL-A03-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
],
[
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A02-1', layer: '2' },
{ type: 2, location_code: 'YCL-A03-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
],
[
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A02-1', layer: '2' },
{ type: 2, location_code: 'YCL-A03-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
],
// [
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A02-1', layer: '2' },
// { type: 2, location_code: 'YCL-A03-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// ]
// ,
// [
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A02-1', layer: '2' },
// { type: 2, location_code: 'YCL-A03-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// ],
// [
// { type: 1, location_code: 'YCL-A02-1',layer:'1' },
// { type: 2, location_code: 'YCL-A03-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 1, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 1, location_code: 'YCL-A02-1',layer:'2' },
// { type: 2, location_code: 'YCL-A03-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 1, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 1, location_code: 'YCL-A01-1',layer:'2' },
// { type: 1, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 1, location_code: 'YCL-A01-1',layer:'2' },
// { type: 1, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// ],
// [
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// ],
// [
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// ],
// [
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },]
// ,
],
ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S']
}
},
mounted() {
},
beforeDestroy() {
},
methods: {
filterData(arr, key) {
return arr.filter(item => { return item.layer == key })
}
}
}
</script>
<style lang="scss" scoped>
// $sysColor: rgba(0, 194, 255, 0.9);
$sysColor: rgba(237, 175, 109, 0.7);
.box {
width: 100%;
height: 860px;
margin: 30px;
overflow-y: scroll;
// margin-bottom: 20px;
.box-x {
display: flex;
margin-bottom: 30px;
.index {
display: flex;
align-items: center;
margin-right: 30px;
width: 10px;
}
}
.item-x {
width: 110px;
height: 120px;
margin-right: 5px;
// margin-bottom: 5px;
color: rgba(0, 0, 0, .5);
display: inline-grid;
position: relative;
// div {
// text-align: center;
// line-height: 18px;
// // display: inline-grid;
// }
.lists {
// text-align: center;
line-height: 18px;
width: 100%;
// height: 100%;
// display: flex;
// justify-content: center;
// flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
div {
text-align: center;
}
}
}
.item-top {
border-bottom: 2px solid $sysColor;
border-left: 2px solid $sysColor;
border-right: 2px solid $sysColor;
padding-bottom: 5px;
padding-left: 5px;
// margin-bottom: 5px;
}
.item-bo {
border-left: 2px solid $sysColor;
border-right: 2px solid $sysColor;
padding-top: 5px;
padding-left: 5px;
}
.typeOne {
background-color: #35ff39;
background-image: linear-gradient(#35ff39, darken(#35ff39, 20%));
}
.typeTwo {
background-color: #849384;
background-image: linear-gradient(#849384, darken(#849384, 20%));
}
}
</style>
src/views/zccView/index.vue
+483
View File
@@ -0,0 +1,483 @@
<template>
<div class="box">
<div v-for="(item, index) of data" :key="index" class="box-x">
<div class="index">{{ ab[index] }}</div>
<div>
<div class="item-top">
<div v-for="(it, ind) of filterData(item, '1')" :key="ind" class="item-x "
:class="it.type == 1 ? 'typeOne' : 'typeTwo'">
<div class="lists">
<div>{{ it.location_code }}</div>
<!-- <div>载具:LX001</div>
<div>物料:包装袋</div>
<div>数量:10</div> -->
<div v-if="it.type == 1">载具:LX001</div>
<div v-if="it.type == 1">物料:包装袋</div>
<div v-if="it.type == 1">数量:10</div>
</div>
</div>
</div>
<div class="item-bo">
<div v-for="(it, ind) of filterData(item, '2')" :key="ind" class="item-x"
:class="it.type == 1 ? 'typeOne' : 'typeTwo'">
<div class="lists">
<div>{{ it.location_code }}</div>
<div v-if="it.type == 1">载具:LX001</div>
<div v-if="it.type == 1">物料:包装袋</div>
<div v-if="it.type == 1">数量:10</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'yclView',
data() {
return {
data: [
[
{ type: 1, location_code: 'YCL-A02-1', layer: '1' },
{ type: 2, location_code: 'YCL-A03-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A02-1', layer: '2' },
{ type: 2, location_code: 'YCL-A03-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
],
[
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A02-1', layer: '2' },
{ type: 2, location_code: 'YCL-A03-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
],
[
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A02-1', layer: '2' },
{ type: 2, location_code: 'YCL-A03-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
],
[
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A02-1', layer: '2' },
{ type: 2, location_code: 'YCL-A03-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
],
[
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A02-1', layer: '2' },
{ type: 2, location_code: 'YCL-A03-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
],
[
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 1, location_code: 'YCL-A11-1', layer: '1' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A02-1', layer: '2' },
{ type: 2, location_code: 'YCL-A03-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 1, location_code: 'YCL-A01-1', layer: '2' },
{ type: 0, location_code: 'YCL-A01-1', layer: '2' },
],
// [
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A02-1', layer: '2' },
// { type: 2, location_code: 'YCL-A03-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// ]
// ,
// [
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 1, location_code: 'YCL-A11-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '1' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A02-1', layer: '2' },
// { type: 2, location_code: 'YCL-A03-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 1, location_code: 'YCL-A01-1', layer: '2' },
// { type: 0, location_code: 'YCL-A01-1', layer: '2' },
// ],
// [
// { type: 1, location_code: 'YCL-A02-1',layer:'1' },
// { type: 2, location_code: 'YCL-A03-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 1, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 1, location_code: 'YCL-A02-1',layer:'2' },
// { type: 2, location_code: 'YCL-A03-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 1, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 1, location_code: 'YCL-A01-1',layer:'2' },
// { type: 1, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// { type: 1, location_code: 'YCL-A01-1',layer:'2' },
// { type: 1, location_code: 'YCL-A01-1',layer:'2' },
// { type: 0, location_code: 'YCL-A01-1',layer:'2' },
// ],
// [
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 0, location_code: 'YCL-A01-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// ],
// [
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// ],
// [
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },
// { type: 1, location_code: 'YCL-A11-1',layer:'1' },]
// ,
],
ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S']
}
},
mounted() {
},
beforeDestroy() {
},
methods: {
filterData(arr, key) {
return arr.filter(item => { return item.layer == key })
}
}
}
</script>
<style lang="scss" scoped>
$sysColor: rgba(85, 110, 255, 0.9);
// $sysColor: rgba(237, 175, 109, 0.7);
.box {
width: 100%;
height: 860px;
margin: 30px;
overflow-y: scroll;
// margin-bottom: 20px;
.box-x {
display: flex;
margin-bottom: 30px;
.index {
display: flex;
align-items: center;
margin-right: 30px;
width: 10px;
}
}
.item-x {
width: 110px;
height: 120px;
margin-right: 5px;
// margin-bottom: 5px;
color: rgba(0, 0, 0, .5);
display: inline-grid;
position: relative;
// div {
// text-align: center;
// line-height: 18px;
// // display: inline-grid;
// }
.lists {
// text-align: center;
line-height: 18px;
width: 100%;
// height: 100%;
// display: flex;
// justify-content: center;
// flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
div {
text-align: center;
}
}
}
.item-top {
border-bottom: 2px solid $sysColor;
border-left: 2px solid $sysColor;
border-right: 2px solid $sysColor;
padding-bottom: 5px;
padding-left: 5px;
// margin-bottom: 5px;
}
.item-bo {
border-left: 2px solid $sysColor;
border-right: 2px solid $sysColor;
padding-top: 5px;
padding-left: 5px;
}
.typeOne {
background-color: #35ff39;
background-image: linear-gradient(#35ff39, darken(#35ff39, 20%));
}
.typeTwo {
background-color: #849384;
background-image: linear-gradient(#849384, darken(#849384, 20%));
}
}
</style>
vue.config.js
+20
View File
@@ -8,4 +8,24 @@ module.exports = {
config.resolve.alias config.resolve.alias
.set('_c', resolve('src/components')) // key,value自行定义，比如.set('@@', resolve('src/components')) .set('_c', resolve('src/components')) // key,value自行定义，比如.set('@@', resolve('src/components'))
}, },
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 100, //换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
unitPrecision: 5, //允许REM单位增长到的十进制数字。
propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
propBlackList: [], //黑名单
exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
selectorBlackList: [], //要忽略并保留为px的选择器
ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 2 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
}
}
}
} }
yarn.lock
+7137 -6709
View File
File diff suppressed because it is too large Load Diff