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-11-07 17:47:40 +08:00
parent efbc6807a0
commit 758abaec1c
12 changed files with 680 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/index.js
+10
View File
@@ -34,4 +34,14 @@ export function getEqpList() {
method: 'post',
})
}
// 注塑车间
export function getZSJList(day) {
return request({
url: '/api/bi/zhu-su-bi-data',
method: 'post',
data:{
day
}
})
}
src/assets/scss/index.scss
+2
View File
@@ -19,6 +19,7 @@
}
.host-body {
height: 100%;
.dv-dec-10,
.dv-dec-10-s {
@@ -132,6 +133,7 @@
}
.body-box {
// height: 100%;
margin-top: 16px;
display: flex;
flex-direction: column;
src/assets/scss/tianyi.scss
+79
View File
@@ -18,18 +18,97 @@
.type0 {
background-image: linear-gradient(#849384, darken(#849384, 20%));
}
.type1 {
background-image: linear-gradient(#6acbf0, darken(#6acbf0, 20%));
}
.type2 {
background-image: linear-gradient(#35ff39, darken(#35ff39, 20%));
}
.type3 {
background-image: linear-gradient(#d3ff33, darken(#d3ff33, 20%));
}
.type4 {
background-image: linear-gradient(#ff7db7, darken(#ff7db7, 20%));
}
.type5 {
background-image: linear-gradient(red, darken(red, 20%));
}
// 加载动画
.loadbox {
position: relative;
width: 90px;
height: 50px;
// margin: 50px auto;
position: fixed;
top: 40px;
right: 20px;
}
.loadbox span {
position: absolute;
width: 20px;
height: 20px;
background: #3498db;
opacity: 0.5;
border-radius: 100%;
animation: anim 1s infinite ease-in-out;
}
.loadbox> :nth-child(2) {
left: 20px;
animation-delay: 0.2s;
}
.loadbox> :nth-child(3) {
left: 40px;
animation-delay: 0.4s;
}
.loadbox> :nth-child(4) {
left: 60px;
animation-delay: 0.6s;
}
.loadbox> :nth-child(5) {
left: 80px;
animation-delay: 0.8s;
}
@keyframes anim {
0% {
opacity: 0.3;
transform: translateY(0px);
}
50% {
opacity: 1;
transform: translateY(-10px);
background: #64dbe3;
}
100% {
opacity: 0.3;
transform: translateY(0px);
}
}
.hongyuan {
width: 20px;
height: 20px;
background-color: rgba(255, 0, 0);
border-radius: 50%;
margin-right: 5px;
}
.lvyuan {
width: 20px;
height: 20px;
background-color: rgb(64, 229, 73);
border-radius: 50%;
margin-right: 5px;
}
src/assets/zsj.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

src/components/echart/pieEchart/index.vue
+53
View File
@@ -0,0 +1,53 @@
<template>
<div>
<!-- 通过率/达标率 -->
<Echart :options="options" :id="id" height="500px" width="500px"></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data() {
return {
};
},
components: {
Echart,
},
props: {
id: {
type: String,
required: true,
default: "chartRate"
},
tips: {
type: Number,
required: true,
default: 50
},
options: {
},
colorObj: {
type: Object,
default: function () {
return {
textStyle: "#3fc0fb",
series: {
color: ["#00bcd44a", "transparent"],
dataColor: {
normal: "#03a9f4",
shadowColor: "#97e2f5"
}
}
};
}
}
},
};
</script>
<style lang="scss" scoped></style>
src/views/cpcView/index.vue
+1 -1
View File
@@ -28,7 +28,7 @@
import { getCpcList } from '@/api/index'
export default {
name: 'yclView',
name: 'cpcView',
data() {
return {
data: [],
src/views/eqpView/index.vue
+1 -1
View File
@@ -22,7 +22,7 @@
import { getEqpList } from '@/api/index'
export default {
name: 'yclView',
name: 'eqpView',
data() {
return {
data: []
src/views/index.vue
+15 -6
View File
@@ -35,19 +35,23 @@
<div class="react-left ml-3" @click="type = 2"
:style="type == 2 ? 'background-color: #1a5cd7' : 'background-color: #0f1325'">
<span class="text">中储仓</span>
</div>
</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"
<!-- <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"
</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="react-left ml-3" @click="type = 6"
:style="type == 6 ? '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">
@@ -118,6 +122,9 @@
<dv-border-box-11 v-if="type == 5">
<taskView />
</dv-border-box-11>
<dv-border-box-1 v-if="type == 6">
<zscjView />
</dv-border-box-1>
</div>
</div>
</div>
@@ -139,6 +146,7 @@ import taskView from './taskView'
import cpcView from './cpcView'
import yclView from './yclView'
import zccView from './zccView'
import zscjView from './zscjView'
export default {
mixins: [drawMixin],
@@ -151,7 +159,7 @@ export default {
dateWeek: null,
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
decorationColor: ['#568aea', '#000000'],
type: 1,
type: 6,
}
},
components: {
@@ -167,6 +175,7 @@ export default {
cpcView,
yclView,
zccView,
zscjView,
},
mounted() {
this.timeFn()
src/views/taskView/index.vue
+22 -1
View File
@@ -1,5 +1,12 @@
<template>
<div class="box">
<div class="loadbox" v-if="loadboxV">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<el-table :data="data" style="width: 100%" height="640" v-loading="loadingShow">
<el-table-column prop="mo_code" label="任务单编号">
</el-table-column>
@@ -28,15 +35,18 @@
<script>
import { gettaskList } from '@/api/index'
export default {
name: 'yclView',
name: 'taskView',
data() {
return {
data: [],
loadingShow: false,
loadboxV: false,
}
},
created() {
this.gettaskList()
this.timer = setInterval(this.getYclListLoad, 30000);
},
mounted() {
},
@@ -49,13 +59,21 @@ export default {
gettaskList().then(res => {
this.data = res.data.data || []
}).finally(e => { this.loadingShow = false })
},
getYclListLoad() {
this.loadboxV = true
gettaskList().then(res => {
this.data = res.data.data || []
}).finally(e => { this.loadboxV = false })
}
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/tianyi.scss';
.box {
width: 100%;
height: 860px;
@@ -123,4 +141,7 @@ export default {
::v-deep .el-loading-mask {
background-color: transparent !important;
}
</style>
src/views/yclView/index.vue
+1 -1
View File
@@ -31,8 +31,8 @@
@mouseleave="mouseleave(it, $event)">
<div class="lists">
<div>{{ it.location_code }}</div>
<div v-if="it.type == 2">{{ it.material_code }}</div>
<div v-if="it.type == 2">{{ it.material_name }}</div>
<div v-if="it.type == 2">{{ it.material_specification }}</div>
<div v-if="it.type == 2">{{ it.code_batch }}</div>
<div v-if="it.type == 2">数量:{{ it.num }}</div>
</div>
src/views/zccView/index.vue
+86 -2
View File
@@ -1,10 +1,17 @@
<template>
<div class="box">
<div class="loadbox" v-if="loadboxV">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div v-for="(item, index) of data" :key="index" class="box-x">
<!-- <div class="index">{{ ab[index] }}</div> -->
<div class="index">{{ index + 1 }}</div>
<div>
<div class="item-top" v-for="i of 6" :key="i">
<div class="item-top" v-for="i of [6, 5, 4, 3, 2, 1]" :key="i">
<!-- <div class="item-x" v-if="item.type == 0"> </div> -->
<div v-for="(it, ind) of filterData(item, i)" :key="ind" class="item-x"
:class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
@@ -36,16 +43,18 @@
<script>
import { getZccList } from '@/api/index'
export default {
name: 'yclView',
name: 'zccView',
data() {
return {
data: [],
loadboxV:false,
// ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S']
}
},
created() {
this.getZccList()
this.timer = setInterval(this.getYclListLoad, 30000);
},
mounted() {
},
@@ -76,6 +85,23 @@ export default {
}
})
}).finally(e => { loading.close(); })
},
// 定时器重复加载
getYclListLoad() {
this.loadboxV = true
getZccList().then(res => {
this.data = res.data.data || []
this.data.forEach((item, index) => {
const arr = [6, 7, 8, 9, 10, 24, 25, 26, 27, 28, 29, 40, 41, 42, 43, 44]
// const obj = { type: 1, location_code: '', layer: '1' }
if (arr.some(it => { return it == index + 1 })) {
for (let i = 1; i < 7; i++) {
item.splice(42, 0, { type: 4, location_code: '', layers: i })
item.splice(42, 0, { type: 4, location_code: '', layers: i })
}
}
})
}).finally(e => { this.loadboxV = false })
}
}
}
@@ -140,5 +166,63 @@ $sysColor: rgba(85, 110, 255, 0.9);
.item-top:last-child {
border-bottom: 0px;
}
// 加载动画
.loadbox {
position: relative;
width: 90px;
height: 50px;
// margin: 50px auto;
position: fixed;
top: 40px;
right: 20px;
}
.loadbox span {
position: absolute;
width: 20px;
height: 20px;
background: #3498db;
opacity: 0.5;
border-radius: 100%;
animation: anim 1s infinite ease-in-out;
}
.loadbox> :nth-child(2) {
left: 20px;
animation-delay: 0.2s;
}
.loadbox> :nth-child(3) {
left: 40px;
animation-delay: 0.4s;
}
.loadbox> :nth-child(4) {
left: 60px;
animation-delay: 0.6s;
}
.loadbox> :nth-child(5) {
left: 80px;
animation-delay: 0.8s;
}
@keyframes anim {
0% {
opacity: 0.3;
transform: translateY(0px);
}
50% {
opacity: 1;
transform: translateY(-10px);
background: #64dbe3;
}
100% {
opacity: 0.3;
transform: translateY(0px);
}
}
}
</style>
src/views/zscjView/index.vue
+410
View File
@@ -0,0 +1,410 @@
<template>
<div class="box">
<div class="loadbox" v-if="loadboxV">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="top">
<div class="left">
<div class="top_le">
<div class="leftView">
<dv-border-box-13>
<div class="text">
<div>
本月产量
</div>
<div class="qty">
{{ data.day_month_yield.month_qty }}
</div>
</div>
</dv-border-box-13>
</div>
<div class="leftView">
<dv-border-box-13>
<div class="text">
<div>
当日产量
</div>
<div class="qty">
{{ data.day_month_yield.day_qty }}
</div>
</div>
</dv-border-box-13>
</div>
<div class="leftView">
<dv-border-box-13>
<div class="text">
<div>
本月合格
</div>
<div class="qty">
{{ data.day_month_yield.month_qualified_percent }}%
</div>
</div>
</dv-border-box-13>
</div>
<div class="leftView">
<dv-border-box-13>
<div class="text">
<div>
当日合格率
</div>
<div class="qty">
{{ data.day_month_yield.day_qualified_percent }}%
</div>
</div>
</dv-border-box-13>
</div>
</div>
<div class="bom_le">
<el-table :data="data.report_record_list" style="width: 100%" height="320" v-loading="loadingShow">
<el-table-column prop="mo_task_code" 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="qty" label="已排产数量">
</el-table-column>
<el-table-column prop="remain_plan_qty" label="待排产数量">
</el-table-column>
<!-- <el-table-column prop="report_time" label="提报时间">
</el-table-column>
<el-table-column prop="report_type" label="提报结论">
</el-table-column>
<el-table-column prop="repoter_name" 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>
</div>
<div class="right">
<div class="leftView">
<dv-border-box-13>
<div class="text">
<pieEchart :options="options" />
</div>
</dv-border-box-13>
</div>
</div>
</div>
<div class="bom">
<dv-border-box-13>
<div class="item">
<div v-for="(item, index) in data.equip_info_list " :key="index"
style="display: flex;margin-bottom: 10px;">
<div class="item_pp" v-for="(it, ind) in item " :key="ind">
<div style="display: flex;">
<div :class="statusFn(it.status) ? 'lvyuan' : 'hongyuan'"></div>
<div>{{ it.name }}</div>
</div>
<img src="@/assets/zsj.png" alt="" srcset="" style="height: 30px;">
</div>
</div>
</div>
</dv-border-box-13>
</div>
</div>
</template>
<script>
import { gettaskList, getZSJList } from '@/api/index'
import pieEchart from '@/components/echart/pieEchart'
export default {
name: 'zscjView',
data() {
return {
data: [],
loadingShow: false,
loadboxV: false,
imgsrc: require("../../assets/zsj.png"),
options: {}
}
},
created() {
this.gettaskList()
},
mounted() {
},
beforeDestroy() {
},
components: {
pieEchart
},
methods: {
gettaskList() {
this.loadingShow = true
getZSJList().then(res => {
let arr1 = []
let arr2 = []
let arr3 = []
let arr4 = []
res.data.data.equip_info_list.forEach((item, index) => {
if (index + 1 > 0 && index < 10) {
arr1.push(item)
} else if (index + 1 > 10 && index < 24) {
arr2.push(item)
} else if (index + 1 > 24 && index < 38) {
arr3.push(item)
} else if (index + 1 > 38 && index < 52) {
arr4.push(item)
}
})
this.data = res.data.data
this.data.equip_info_list = [arr1, arr2, arr3, arr4]
console.log(res.data.data.equip_info_list, 77777);
this.options = {
title: {
text: '设备利用率',
// subtext: '设备利用率',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
// top: 'middle',
// bottom: 10,
left: 10,
data: res.data.data.equip_pie_list.map(item => item.name)
},
series: [
{
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: res.data.data.equip_pie_list,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
}).finally(e => { this.loadingShow = false })
},
getYclListLoad() {
this.loadboxV = true
getZSJList().then(res => {
let arr1 = []
let arr2 = []
let arr3 = []
let arr4 = []
res.data.data.equip_info_list.forEach((item, index) => {
if (index + 1 > 0 && index < 10) {
arr1.push(item)
} else if (index + 1 > 10 && index < 24) {
arr2.push(item)
} else if (index + 1 > 24 && index < 38) {
arr3.push(item)
} else if (index + 1 > 38 && index < 52) {
arr4.push(item)
}
})
this.data = res.data.data
this.data.equip_info_list = [arr1, arr2, arr3, arr4]
console.log(res.data.data.equip_info_list, 77777);
this.options = {
title: {
text: '设备利用率',
// subtext: '设备利用率',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
// top: 'middle',
// bottom: 10,
left: 10,
data: res.data.data.equip_pie_list.map(item => item.name)
},
series: [
{
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: res.data.data.equip_pie_list,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
}).finally(e => { this.loadingShow = false })
},
statusFn(val) {
if (val == null) return 0
let newval = val.split(/[\t\r\f\n\s]*/g).join('')
if (newval == "0U000") {
return 0
} else if (newval == "0M000" || newval == "0A000") {
return 1
}
},
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/tianyi.scss';
.box {
width: 100%;
height: 860px;
.top {
display: flex;
padding: 20px;
}
// // justify-content: space-evenly;
// flex-wrap: wrap;
.left {
width: 70%;
.top_le {
display: flex;
}
.leftView {
width: 300px;
height: 150px;
margin-right: 20px;
.text {
padding: 30px 0 0 20px;
font-size: 25px;
.qty {
padding: 30px 0 0 100px;
font-size: 35px;
}
}
}
}
.right {
// background-color: #eaeaea;
flex: 1;
.leftView {
width: 99%;
height: 500px;
.text {
padding: 30px 0 0 20px;
font-size: 25px;
}
}
}
.bom {
width: 99%;
height: 310px;
.item {
padding: 30px 0px 0 20px;
// display: flex;
// flex-wrap: wrap;
.item_pp {
margin-right: 13px;
}
}
}
}
// 滚动条隐藏
::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;
color: #9a9a9a;
}
/* 表格内背景颜色 */
::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;
}
::v-deep .el-table thead {
// background-color: transparent !important;
color: #eaeaea;
}
</style>