初步完成自适应
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
import request from '../utils/request'
|
||||
export function gettaskList() {
|
||||
return request({
|
||||
url: '/api/production/prd-mo/prd-task',
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
@@ -3,6 +3,9 @@ import App from './App.vue';
|
||||
import router from './router';
|
||||
import store from './store';
|
||||
import dataV from '@jiaminghi/data-view';
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import './utils/fontSize';
|
||||
// 引入全局css
|
||||
import './assets/scss/style.scss';
|
||||
// 按需引入vue-awesome图标
|
||||
@@ -25,6 +28,7 @@ Vue.config.productionTip = false;
|
||||
// 全局注册
|
||||
Vue.component('icon', Icon);
|
||||
Vue.use(dataV);
|
||||
Vue.use(ElementUI);
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
|
||||
@@ -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);
|
||||
@@ -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
|
||||
@@ -1,21 +1,8 @@
|
||||
<template>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -29,7 +16,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" class>
|
||||
$box-height: 520px;
|
||||
$box-height: 920px;
|
||||
$box-width: 100%;
|
||||
#bottomRight {
|
||||
padding: 14px 16px;
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
+76
-42
@@ -8,18 +8,10 @@
|
||||
<div class="d-flex jc-center">
|
||||
<dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
|
||||
<div class="title">
|
||||
<span class="title-text">大数据可视化平台</span>
|
||||
<dv-decoration-6
|
||||
class="dv-dec-6"
|
||||
:reverse="true"
|
||||
:color="['#50e3c2', '#67a1e5']"
|
||||
/>
|
||||
<span class="title-text">天益医疗</span>
|
||||
<dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
|
||||
</div>
|
||||
<dv-decoration-8
|
||||
class="dv-dec-8"
|
||||
:reverse="true"
|
||||
:color="decorationColor"
|
||||
/>
|
||||
<dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
|
||||
</div>
|
||||
<dv-decoration-10 class="dv-dec-10-s" />
|
||||
</div>
|
||||
@@ -27,29 +19,43 @@
|
||||
<!-- 第二行 -->
|
||||
<div class="d-flex jc-between px-2">
|
||||
<div class="d-flex aside-width">
|
||||
<div class="react-left ml-4 react-l-s">
|
||||
<span class="react-left"></span>
|
||||
<span class="text">数据分析1</span>
|
||||
<div class="react-left ml-4 react-l-s" @click="type = 1"
|
||||
:style="type == 1 ? 'background-color: #1a5cd7' : 'background-color: #0f1325'">
|
||||
<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 class="react-left ml-3">
|
||||
<span class="text">数据分析2</span>
|
||||
<div class="react-left ml-3" @click="type = 2"
|
||||
: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 class="d-flex aside-width">
|
||||
<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 class="react-right mr-4 react-l-s">
|
||||
<span class="react-after"></span>
|
||||
<span class="text"
|
||||
>{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
|
||||
>
|
||||
<span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body-box">
|
||||
<!-- 第三行数据 -->
|
||||
<!-- <div class="body-box" v-if="false">
|
||||
第三行数据
|
||||
<div class="content-box">
|
||||
<div>
|
||||
<dv-border-box-12>
|
||||
@@ -61,11 +67,11 @@
|
||||
<centerLeft2 />
|
||||
</dv-border-box-12>
|
||||
</div>
|
||||
<!-- 中间 -->
|
||||
中间
|
||||
<div>
|
||||
<center />
|
||||
</div>
|
||||
<!-- 中间 -->
|
||||
中间
|
||||
<div>
|
||||
<centerRight2 />
|
||||
</div>
|
||||
@@ -76,7 +82,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第四行数据 -->
|
||||
第四行数据
|
||||
<div class="bottom-box">
|
||||
<dv-border-box-13>
|
||||
<bottomLeft />
|
||||
@@ -85,6 +91,23 @@
|
||||
<bottomRight />
|
||||
</dv-border-box-12>
|
||||
</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>
|
||||
@@ -94,16 +117,21 @@
|
||||
<script>
|
||||
import drawMixin from "../utils/drawMixin";
|
||||
import { formatTime } from '../utils/index.js'
|
||||
import centerLeft1 from './centerLeft1'
|
||||
import centerLeft2 from './centerLeft2'
|
||||
import centerRight1 from './centerRight1'
|
||||
import centerRight2 from './centerRight2'
|
||||
import center from './center'
|
||||
import bottomLeft from './bottomLeft'
|
||||
import bottomRight from './bottomRight'
|
||||
// import centerLeft1 from './centerLeft1'
|
||||
// import centerLeft2 from './centerLeft2'
|
||||
// import centerRight1 from './centerRight1'
|
||||
// import centerRight2 from './centerRight2'
|
||||
// import center from './center'
|
||||
// import bottomLeft from './bottomLeft'
|
||||
// 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 {
|
||||
mixins: [ drawMixin ],
|
||||
mixins: [drawMixin],
|
||||
data() {
|
||||
return {
|
||||
timing: null,
|
||||
@@ -112,23 +140,29 @@ export default {
|
||||
dateYear: null,
|
||||
dateWeek: null,
|
||||
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
||||
decorationColor: ['#568aea', '#000000']
|
||||
decorationColor: ['#568aea', '#000000'],
|
||||
type: 1,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
centerLeft1,
|
||||
centerLeft2,
|
||||
centerRight1,
|
||||
centerRight2,
|
||||
center,
|
||||
bottomLeft,
|
||||
bottomRight
|
||||
// centerLeft1,
|
||||
// centerLeft2,
|
||||
// centerRight1,
|
||||
// centerRight2,
|
||||
// center,
|
||||
// bottomLeft,
|
||||
// bottomRight,
|
||||
eqpView,
|
||||
taskView,
|
||||
cpcView,
|
||||
yclView,
|
||||
zccView,
|
||||
},
|
||||
mounted() {
|
||||
this.timeFn()
|
||||
this.cancelLoading()
|
||||
},
|
||||
beforeDestroy () {
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timing)
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user