zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'v2' of https://e.coding.net/ctcdevteam/ehs/ehs_web into v2

This commit is contained in:
caoqianming 2024-01-23 10:54:49 +08:00
parent 47d11d82db e0dcddfec6
commit 9ea6c53725
5 changed files with 1018 additions and 931 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

392
src/components/scScrollTable.vue
View File

@ -2,229 +2,239 @@
<el-container>
<el-main>
<div class="boxmain">
<div class="wrapper" :id="'scrollWrapper'+refValue" @mouseover="mouseOver" @mouseout="mouseOut">
<table class="totall">
<div class="wrapper" :id="'scrollWrapper' + refValue" @mouseover="mouseOver" @mouseout="mouseOut">
<table class="totall">
<tr class="title">
<th v-for="itemx in titleData" :key="itemx">{{ itemx }}</th>
<th v-for="itemx in titleData" :key="itemx">{{ itemx }}</th>
</tr>
</table>
<div :id="refValue" :ref="`${refValue}`" style="overflow:scroll">
<div>
<table :class="{ marquee_top: animate }">
<tr v-for="(itemy,index) in rowData" class="rollData" ref="con1" :key="itemy">
<td>{{ index+1 }}</td>
</table>
<div :id="refValue" :ref="`${refValue}`" style="overflow:scroll">
<div>
<table :class="{ marquee_top: animate }">
<tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy">
<td>{{ index + 1 }}</td>
<td v-for="itemz in itemy" :key="itemz">
<el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value"
:status="getStatus(itemz.value)"/>
<el-tag v-else-if="itemz.elType=='tag'" :type="getTagType(itemz.value)">{{ stateOption[itemz.value] }}</el-tag>
<el-progress v-if="itemz.elType == 'progress'" :text-inside="true"
:stroke-width="14" :percentage="itemz.value" :status="getStatus(itemz.value)" />
<el-tag v-else-if="itemz.elType == 'tag'" :type="getTagType(itemz.value)">{{
stateOption[itemz.value] }}</el-tag>
<span v-else>{{ itemz.value }}</span>
</td>
</tr>
</table>
<table :class="{ marquee_top: animate }" v-show="scrollVivible">
<tr v-for="(itemy,index) in rowData" class="rollData" ref="con1" :key="itemy">
<td>{{ index+1 }}</td>
</td>
</tr>
</table>
<table :class="{ marquee_top: animate }" v-show="scrollVivible">
<tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy">
<td>{{ index + 1 }}</td>
<td v-for="itemz in itemy" :key="itemz">
<!-- <el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value"
:status="getStatus(itemz.value)"/> -->
<el-progress
v-if="itemz.elType=='progress'"
:text-inside="true"
:stroke-width="16"
:percentage="itemz.value"
:status="getStatus(itemz.value)"
>
<span>{{itemz.value}}</span>
</el-progress>
<el-tag v-else-if="itemz.elType=='tag'" :type="getTagType(itemz.value)">{{ stateOption[itemz.value] }}</el-tag>
<el-progress v-if="itemz.elType == 'progress'" :text-inside="true"
:stroke-width="16" :percentage="itemz.value" :status="getStatus(itemz.value)">
<span>{{ itemz.value }}</span>
</el-progress>
<el-tag v-else-if="itemz.elType == 'tag'" :type="getTagType(itemz.value)">{{
stateOption[itemz.value] }}</el-tag>
<span v-else>{{ itemz.value }}</span>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</el-main>
</el-container>
</template>
<script>
export default {
props: {
rowData: {
type:Array,
default () {
return []
}
},
titleData:{
type:Array,
default () {
return []
}
},
tableHeight:{
type:Number,
default () {
return 100
}
},
refValue:{
type:String,
default(){
return ''
}
export default {
props: {
rowData: {
type: Array,
default() {
return []
}
},
data() {
return {
speed: 2000,
myScroll: null,
iliHeight: 30,
time: null,
delay: 20,
scrollVivible:true,
stateOption:{
10: "创建中",
14: "已分解",
20: "已下达",
30:'生产中',
40:'已完成',
'normal':'正常',
'late':'迟到',
'未到岗':'未到岗',
},
titleData: {
type: Array,
default() {
return []
}
},
mounted() {
let that = this;
let Container =that.tableHeight;
let tableHeight = Container-40;
let idName = 'scrollWrapper'+that.refValue;
let idName2 = that.refValue;
document.getElementById(idName).style.height = Container+'px';
document.getElementById(idName2).style.height = tableHeight+'px';
// console.log(this.$refs[`${this.refValue}`])
let scrollHeight = that.$refs[`${that.refValue}`].scrollHeight/2;
if(tableHeight>scrollHeight){
that.scrollVivible = false;
}else{
that.scrollVivible = true;
that.myScroll = setInterval(() => {
that.scrollUp();
}, that.speed);
tableHeight: {
type: Number,
default() {
return 100
}
},
methods: {
getTagType(type){
if(type==30||type==10||type==14||type==20){
return ""
}else if(type==40){
return "success"
}else if(type=='normal'){
return "success"
}else if(type=='late'){
return "warning"
}else if(type=='未到岗'){
return "danger"
}
refValue: {
type: String,
default() {
return ''
}
}
},
data() {
return {
speed: 2000,
myScroll: null,
iliHeight: 30,
time: null,
delay: 20,
scrollVivible: true,
stateOption: {
10: "创建中",
14: "已分解",
20: "已下达",
30: '生产中',
40: '已完成',
'normal': '正常',
'late': '迟到',
'未到岗': '未到岗',
},
getStatus(status){
if(status==100){
return "success"
}else if(status>=80){
return "primary"
}else if(status>=60){
return "warning"
}else{
return "exception"
}
},
scrollUp(){
}
},
mounted() {
let that = this;
let Container = that.tableHeight;
let tableHeight = Container - 40;
let idName = 'scrollWrapper' + that.refValue;
let idName2 = that.refValue;
document.getElementById(idName).style.height = Container + 'px';
document.getElementById(idName2).style.height = tableHeight + 'px';
// console.log(this.$refs[`${this.refValue}`])
let scrollHeight = that.$refs[`${that.refValue}`].scrollHeight / 2;
if (tableHeight > scrollHeight) {
that.scrollVivible = false;
} else {
that.scrollVivible = true;
that.myScroll = setInterval(() => {
that.scrollUp();
}, that.speed);
}
},
methods: {
getTagType(type) {
if (type == 30 || type == 10 || type == 14 || type == 20) {
return ""
} else if (type == 40) {
return "success"
} else if (type == 'normal') {
return "success"
} else if (type == 'late') {
return "warning"
} else if (type == '未到岗') {
return "danger"
}
},
getStatus(status) {
if (status == 100) {
return "success"
} else if (status >= 80) {
return "primary"
} else if (status >= 60) {
return "warning"
} else {
return "exception"
}
},
scrollUp() {
if (this.$refs[`${this.refValue}`] && this.$refs[`${this.refValue}`].scrollTop) {
let scrollTop = this.$refs[`${this.refValue}`].scrollTop;
let scrollHeight = this.$refs[`${this.refValue}`].scrollHeight;
if (scrollTop >=scrollHeight/2) {
if (scrollTop >= scrollHeight / 2) {
//判断条件是否达到临界
this.$refs[`${this.refValue}`].scrollTop = 0;
} else {
this.$refs[`${this.refValue}`].scrollTop=scrollTop+40;
this.$refs[`${this.refValue}`].scrollTop = scrollTop + 40;
}
}
},
// 鼠标滑过暂停滚动
mouseOver() {
clearInterval(this.myScroll);
},
//鼠标移开重新滚动
mouseOut() {
this.myScroll = setInterval(() => {
this.scrollUp();
},
// 鼠标滑过暂停滚动
mouseOver() {
clearInterval(this.myScroll);
},
//鼠标移开重新滚动
mouseOut() {
this.myScroll = setInterval(() => {
this.scrollUp();
},
this.speed);
},
},
beforeUnmount() {
let that = this;
clearInterval(that.myScroll1);
that.myScroll1 = null;
},
beforeDestoryed() {
let that = this;
clearInterval(that.myScroll1);
that.myScroll1 = null;
},
}
},
beforeUnmount() {
let that = this;
clearInterval(that.myScroll1);
that.myScroll1 = null;
},
beforeDestoryed() {
let that = this;
clearInterval(that.myScroll1);
that.myScroll1 = null;
},
}
</script>
<style scoped>
.boxmain {
height: calc(100% - 40px);
}
.boxmain {
height: calc(100% - 40px);
}
@media screen and (max-width: 800px) {
.boxmain {
height: 200px;
}
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
width: 100%;
}
.title{
height: 40px;
line-height: 40px;
text-align: center;
}
table th {
font-size: 14px;
background: rgba(0, 0, 0, .1);
}
table td {
font-size: 14px;
height: 40px;
text-align: center;
color: rgba(255, 255, 255, .8);
}
table th,table td{
padding: .1rem 0;
border-bottom: none !important;
background:none !important;
}
.marquee_top{
transition: all 0.5s ease-in-out;
margin-top: -26px;
}
.totall{
color: #fff;
background-color: rgb(10, 63, 68);
}
.rollData{
background-color: rgb(10, 39, 50);
}
.rollData:nth-of-type(2n+1){
background-color: rgb(0, 59, 81);
@media screen and (max-width: 800px) {
.boxmain {
height: 200px;
}
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
width: 100%;
}
.title {
height: 40px;
line-height: 40px;
text-align: center;
}
table th {
font-size: 14px;
background: rgba(0, 0, 0, .1);
}
table td {
font-size: 14px;
height: 40px;
text-align: center;
color: rgba(255, 255, 255, .8);
}
table th,
table td {
padding: .1rem 0;
border-bottom: none !important;
background: none !important;
}
.marquee_top {
transition: all 0.5s ease-in-out;
margin-top: -26px;
}
.totall {
color: #fff;
background-color: rgb(10, 63, 68);
}
.rollData {
background-color: rgb(10, 39, 50);
}
.rollData:nth-of-type(2n+1) {
background-color: rgb(0, 59, 81);
}
</style>

474
src/views/bigScreen/index_10dept.vue
View File

@ -2,7 +2,7 @@
<el-container class="dashboard">
<el-header class="header">
<div style="font-weight: bold; font-family:'myfont';font-size:32px">10车间生产数据看板</div>
<div style="font-size: 14px;margin-top:18px">{{currentDay}} {{ currentTime }}</div>
<div style="font-size: 14px;margin-top:18px">{{ currentDay }} {{ currentTime }}</div>
</el-header>
<el-main>
<el-row style="height: 60%" :gutter="10">
@ -15,10 +15,12 @@
</div>
<div style="height: 4px;"></div>
<div class="boxmain bigdata border" style="overflow:scroll">
<div v-for="item in todayMtask" :key="item.id" style="height: 40px;">
<span style="font-size:12px">{{item.material_out_.name}}|{{ item.material_out_.specification }}|{{ item.material_out_.model }}</span>
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
{{item.count}}
<div v-for="item in todayMtask" :key="item.id"
style="height: 40px;line-height: 40px;padding: 0 20px;display: flex;justify-content: space-between;">
<span style="font-size:12px">{{ item.material_out_name }}</span>
<span
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
{{ item.count }}
</span>
</div>
</div>
@ -31,8 +33,10 @@
</div>
<div style="height: 4px;"></div>
<div class="boxmain flex_center bigdata border">
<span>{{yesterdayObjet.物料名}}</span>
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">{{yesterdayObjet.合格数}}</span>
<span>{{ yesterdayObjet.物料名 }}</span>
<span
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">{{
yesterdayObjet.合格数 }}</span>
</div>
</div>
</el-col>
@ -44,9 +48,10 @@
<div style="height: 4px;"></div>
<div class="boxmain bigdata border" style="overflow:scroll">
<div v-for="item in monthobjList" :key="item.id" style="height: 40px;">
<span style="font-size:12px">{{item.物料名}}</span>
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
{{item.合格数}}
<span style="font-size:12px">{{ item.物料名 }}</span>
<span
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
{{ item.合格数 }}
</span>
</div>
</div>
@ -56,17 +61,16 @@
<div style="height:2%"></div>
<el-row style="height:60%">
<div class="box">
<div class="boxtitle">
<div class="boxlabel">人员到岗
</div>
</div>
<div style="height: 2px;"></div>
<div class="boxmain" id="scrollContainer1">
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
:rowData="attendanceData" :titleData="liData1" :refValue="refValue1"
></scScrollTavle>
<div class="boxtitle">
<div class="boxlabel">人员到岗
</div>
</div>
<div style="height: 2px;"></div>
<div class="boxmain" id="scrollContainer1">
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
:rowData="attendanceData" :titleData="liData1" :refValue="refValue1"></scScrollTavle>
</div>
</div>
</el-row>
</el-col>
<el-col :xs="24" :md="14" style="height: 100%;">
@ -76,8 +80,8 @@
</div>
<div style="height: 2px;"></div>
<div class="boxmain" id="scrollContainer2">
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2"
:rowData="processData" :titleData="liData2" :refValue="refValue2"></scScrollTavle>
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2" :rowData="processData"
:titleData="liData2" :refValue="refValue2"></scScrollTavle>
</div>
</div>
</el-col>
@ -119,12 +123,12 @@
<script>
import * as echarts from "echarts";
import scScrollTavle from '@/components/scScrollTable.vue';
const xAxisData1 = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
const xAxisData1 = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
export default {
components: {scScrollTavle},
components: { scScrollTavle },
data() {
return {
basicOption: {
@ -149,7 +153,7 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(250,205,0)'
color: 'rgb(250,205,0)'
},
{
offset: 1,
@ -225,7 +229,7 @@ export default {
label: {
show: true,
position: 'insideTop',
color:'#000'
color: '#000'
},
itemStyle: {
borderRadius: [5, 5, 0, 0],
@ -244,13 +248,13 @@ export default {
},
]
},
chart3Option:{
chart3Option: {
backgroundColor: '',
tooltip: {
trigger: 'item'
},
legend: {
top:'bottom',
top: 'bottom',
},
series: {
name: '完成率',
@ -263,46 +267,46 @@ export default {
data: [],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
},
containerHeight1:100,
containerHeight2:100,
table1Visible:false,
table2Visible:false,
refValue1:'moocBox1',
refValue2:'moocBox2',
liData1: ['序号','姓名', '岗位', '班次', '状态'],
attendanceData:[],
liData2: ['序号','产品名称', '型号', '计划开始时间', '计划结束时间','完成进度', '产量','状态'],
containerHeight1: 100,
containerHeight2: 100,
table1Visible: false,
table2Visible: false,
refValue1: 'moocBox1',
refValue2: 'moocBox2',
liData1: ['序号', '姓名', '岗位', '班次', '状态'],
attendanceData: [],
liData2: ['序号', '产品名称', '型号', '计划开始时间', '计划结束时间', '完成进度', '产量', '状态'],
processData: [],
todayMtask:[],
speed: 2000,
todayMtask: [],
speed: 2000,
myScroll: null,
iliHeight: 30,
time: null,
iliHeight: 30,
time: null,
delay: 20,
start_date:'',
end_date:'',
yesterday:'',
dayInterval:null,
start_date: '',
end_date: '',
yesterday: '',
dayInterval: null,
chartInterval1: null,
chartInterval2: null,
chartInterval3: null,
stateOption:{
30:'生产中',
40:'已完成'
stateOption: {
30: '生产中',
40: '已完成'
},
currentTime:'',
currentDay:'',
today:'',
todayObjet:{},
yesterdayObjet:{},
monthobjList:[],
currentTime: '',
currentDay: '',
today: '',
todayObjet: {},
yesterdayObjet: {},
monthobjList: [],
}
},
mounted() {
@ -312,32 +316,32 @@ export default {
//表格table2的显示
this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight;
this.table2Visible = true;
this.showTime()
this.dayInterval = setInterval(()=>{
this.dayInterval = setInterval(() => {
this.showTime()
},1000)
}, 1000)
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
let month = date.getMonth() + 1;
let day = date.getDate();
let days = new Date(year, month, 0).getDate();
this.days = days;
this.currentYear = year;
this.currentMonth = month;
this.currentDay = day;
this.start_date =year+'-'+month+'-01';
this.end_date = year+'-'+month+'-'+new Date(year, month, 0).getDate();
this.today = year+'-'+month+'-'+day;
let yesterday = new Date(date.getTime()-24*60*60*1000);
this.yesterday = yesterday.getFullYear()+"-" + (yesterday.getMonth()+1) + "-" + yesterday.getDate();
this.start_date = year + '-' + month + '-01';
this.end_date = year + '-' + month + '-' + new Date(year, month, 0).getDate();
this.today = year + '-' + month + '-' + day;
let yesterday = new Date(date.getTime() - 24 * 60 * 60 * 1000);
this.yesterday = yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate();
this.getMtask();
this.getAttendance();
this.getProductLine();
this.getTodayMtask();
},
methods: {
showTime(){
showTime() {
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
},
@ -359,17 +363,17 @@ export default {
return myChart
},
//到岗记录
getAttendance(){
getAttendance() {
let that = this;
let obj ={};
obj.work_date = this.currentYear+'-'+this.currentMonth+'-'+this.currentDay;
let obj = {};
obj.work_date = this.currentYear + '-' + this.currentMonth + '-' + this.currentDay;
// obj.work_date = '2023-11-24';
obj.page=0;
obj.page = 0;
that.$API.hrm.attendance.list.req(obj).then((res) => {
console.log('到岗记录:',res);
console.log('到岗记录:', res);
let attendanceData = [];
res.forEach(item => {
let arr = [],obj1 = {},obj2 = {},obj3 = {},obj4 = {};
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {};
obj1.elType = 'primary';
obj1.value = item.user_name;
obj2.elType = 'primary';
@ -384,24 +388,24 @@ export default {
arr.push(obj4);
attendanceData.push(arr);
});
this.attendanceData = attendanceData;
debugger;
});
},
//任务进度
getMtask(){
getMtask() {
let that = this;
let obj ={};
let obj = {};
obj.start_date__gte = this.start_date;
obj.end_date__lte = this.end_date;
obj.belong_dept__name='10车间';
obj.page=0;
obj.belong_dept__name = '10车间';
obj.page = 0;
that.$API.pm.utask.list.req(obj).then((res) => {
console.log('任务进度:',res);
console.log('任务进度:', res);
let processData = [];
res.forEach(item => {
let arr = [],obj1 = {},obj2 = {},obj3 = {},obj4 = {},obj5 = {},obj6 = {},obj7 = {};
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {};
obj1.elType = 'primary';
obj1.value = item.material_.name;
obj2.elType = 'primary';
@ -411,7 +415,7 @@ export default {
obj4.elType = 'primary';
obj4.value = item.end_date;
obj5.elType = 'progress';
let process = Math.round((item.count_ok/item.count)*100)
let process = Math.round((item.count_ok / item.count) * 100)
obj5.value = process;
obj6.elType = 'primary';
obj6.value = item.count_ok;
@ -426,33 +430,33 @@ export default {
arr.push(obj7);
processData.push(arr);
});
this.processData = processData;
debugger;
});
},
//生产线
getProductLine(){
getProductLine() {
let that = this;
//全年生产统计 1月1号-----12月1号
let obj1 ={
query: {start_date:that.currentYear+'-01-01',end_date:that.currentYear+'-12-31',dept_name: "10车间"},
let obj1 = {
query: { start_date: that.currentYear + '-01-01', end_date: that.currentYear + '-12-31', dept_name: "10车间" },
};
that.$API.bi.dataset.exec.req('lineMonth', obj1).then((res1) => {
console.log('全年生产统计:',res1);
console.log('全年生产统计:', res1);
let list1 = res1.data2.ds0;
let seriesData1 = [],xAxisData1=[];
let seriesData1 = [], xAxisData1 = [];
for (let i = 0; i < 12; i++) {
let day = i+1;
let text = day+'月';
xAxisData1[i]=text;
let day = i + 1;
let text = day + '月';
xAxisData1[i] = text;
seriesData1[i] = 0;
}
if(list1.length>0){
list1.forEach(item1=>{
let index1 = item1.月-1;
if (list1.length > 0) {
list1.forEach(item1 => {
let index1 = item1.月 - 1;
seriesData1[index1] = item1.合格数;
})
})
}
let chart1Option = deepCopy(this.basicOption)
chart1Option.xAxis.data = xAxisData1;
@ -471,34 +475,34 @@ export default {
}
}, 3000);
});
let obj ={
query: {start_date:that.start_date,end_date:that.end_date,dept_name: "10车间"},
let obj = {
query: { start_date: that.start_date, end_date: that.end_date, dept_name: "10车间" },
};
that.$API.bi.dataset.exec.req('lineMonth', obj).then((res) => {
console.log('本月生产统计:',res);
console.log('本月生产统计:', res);
that.monthobjList = res.data2.ds0;
});
//本月合格率统计///11月1号-----11月30号
let obj2 ={
query: {start_date:that.start_date,end_date:that.end_date,dept_name: "10车间"},
let obj2 = {
query: { start_date: that.start_date, end_date: that.end_date, dept_name: "10车间" },
};
that.$API.bi.dataset.exec.req('lineDay', obj2).then((res2) => {
console.log('本月合格率统计:',res2);
console.log('本月合格率统计:', res2);
let list2 = res2.data2.ds0;
let seriesData2 = [],xAxisData2=[];
let seriesData2 = [], xAxisData2 = [];
for (let i = 0; i < that.days; i++) {
let day = i+1;
let text = day+'日';
xAxisData2[i]=text;
let day = i + 1;
let text = day + '日';
xAxisData2[i] = text;
seriesData2[i] = 0;
}
if(list2.length>0){
list2.forEach(item2=>{
let index2 = item2.日-1;
seriesData2[index2] =Math.round(item2.合格率) ;
})
if (list2.length > 0) {
list2.forEach(item2 => {
let index2 = item2.日 - 1;
seriesData2[index2] = Math.round(item2.合格率);
})
}
console.log('xAxisData2',xAxisData2)
console.log('xAxisData2', xAxisData2)
let chart2Option = deepCopy(this.basicOption);
chart2Option.xAxis.data = xAxisData2;
// chart2Option.yAxis.name='合格率';
@ -525,7 +529,7 @@ export default {
}
}],
};
let series2=[{
let series2 = [{
name: '合格率',
type: 'line',
smooth: true,
@ -552,24 +556,24 @@ export default {
label: {
show: true,
position: 'top',
color:'#fff'
color: '#fff'
},
itemStyle: {
borderRadius: [2, 2, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(250,205,0)'
},
{
offset: 1,
color: 'rgb(254,129,0)'
}
])
},
data: seriesData2
borderRadius: [2, 2, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(250,205,0)'
},
{
offset: 1,
color: 'rgb(254,129,0)'
}
])
},
data: seriesData2
}];
chart2Option.series=series2;
chart2Option.series = series2;
let chart2 = this.setChart("chart2", chart2Option);
let index2 = 0
this.chartInterval2 = setInterval(function () {
@ -585,30 +589,30 @@ export default {
});
//车间生产昨日统计 12月1号
let obj3 ={
query: {start_date:that.yesterday,end_date:that.yesterday,dept_name: "10车间"},
let obj3 = {
query: { start_date: that.yesterday, end_date: that.yesterday, dept_name: "10车间" },
};
that.$API.bi.dataset.exec.req('lineDay', obj3).then((res3) => {
console.log('车间生产昨日统计:',res3);
console.log('车间生产昨日统计:', res3);
let seriesData3 = [
{ value: 0, name: '椭圆弯曲' },
{ value: 0, name: '大小头' },
{ value: 0, name: '偏壁' },
{ value: 0, name: '结石' },
{ value: 0, name: '气线' },
{ value: 0, name: '合格' },
]
if(res3.data2.ds0.length>0){
{ value: 0, name: '椭圆弯曲' },
{ value: 0, name: '大小头' },
{ value: 0, name: '偏壁' },
{ value: 0, name: '结石' },
{ value: 0, name: '气线' },
{ value: 0, name: '合格' },
]
if (res3.data2.ds0.length > 0) {
let item3 = res3.data2.ds0[0];
that.yesterdayObjet = item3;
seriesData3[0].value=item3.弯曲;
seriesData3[1].value=item3.大小头;
seriesData3[2].value=item3.偏壁;
seriesData3[3].value=item3.结石;
seriesData3[4].value=item3.气线;
seriesData3[5].value=item3.合格数;
seriesData3[0].value = item3.弯曲;
seriesData3[1].value = item3.大小头;
seriesData3[2].value = item3.偏壁;
seriesData3[3].value = item3.结石;
seriesData3[4].value = item3.气线;
seriesData3[5].value = item3.合格数;
}
that.chart3Option.series.data = seriesData3;
that.chart3Option.series.data = seriesData3;
let chart3 = this.setChart("chart3", that.chart3Option);
let index3 = 0
this.chartInterval3 = setInterval(function () {
@ -623,19 +627,19 @@ export default {
}, 3000);
debugger;
});
},
//今日任务
getTodayMtask(){
getTodayMtask() {
let that = this;
let obj ={};
let obj = {};
obj.start_date = this.today;
obj.end_date = this.today;
obj.belong_dept__name='10车间';
obj.page=0;
obj.mgroup__belong_dept__name = '10车间';
obj.page = 0;
that.$API.pm.mtask.list.req(obj).then((res) => {
that.todayMtask=res;
console.log('今日任务:',res);
that.todayMtask = res;
console.log('今日任务:', res);
});
},
//累计合计
@ -643,88 +647,102 @@ export default {
}
</script>
<style scoped>
@font-face {
font-family: 'myfont'; /* 字体名称 */
src: url('../../utils/youShe.ttf'); /* 字体文件相对路径 */
}
.dashboard {
background-image: url("/public/img/photon_bg.png");
color: #fff;
font-family: "Microsoft Yahei" !important;
background-size: cover;
}
.header {
background: url("/public/img/photon_header.png");
border-bottom: none;
background-size: 100% 100%;
font-size: 26px;
display: block;
height: 80px;
color: rgb(149, 255, 255);
font-family: 'Microsoft Yahei';
text-align: center;
padding: 12px 0px;
}
.box {
background: rgba(10, 63, 68, 0.5);
height: 100%;
}
.boxtitle {
color: #fff;
font-size: 16px;
display: flex;
height: 36px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
}
.bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
background-size: 140% 100%;
}
.boxlabel {
margin-left: 6px;
font-size: 18px;
margin-top: 6px
}
@font-face {
font-family: 'myfont';
/* 字体名称 */
src: url('../../utils/youShe.ttf');
/* 字体文件相对路径 */
}
.dashboard {
background-image: url("/public/img/photon_bg.png");
color: #fff;
font-family: "Microsoft Yahei" !important;
background-size: cover;
}
.header {
background: url("/public/img/photon_header.png");
border-bottom: none;
background-size: 100% 100%;
font-size: 26px;
display: block;
height: 80px;
color: rgb(149, 255, 255);
font-family: 'Microsoft Yahei';
text-align: center;
padding: 12px 0px;
}
.box {
background: rgba(10, 63, 68, 0.5);
height: 100%;
}
.boxtitle {
color: #fff;
font-size: 16px;
display: flex;
height: 36px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
}
.bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
background-size: 140% 100%;
}
.boxlabel {
margin-left: 6px;
font-size: 18px;
margin-top: 6px
}
.boxmain {
height: calc(100% - 40px);
}
@media screen and (max-width: 800px) {
.boxmain {
height: calc(100% - 40px);
height: 200px;
}
}
@media screen and (max-width: 800px) {
.boxmain {
height: 200px;
}
}
.flex_center {
display: flex;
align-items: center;
justify-content: center
}
.border {
border: 1px dashed #49bcf7;
}
.flex_center {
display: flex;
align-items: center;
justify-content: center
}
.bigdata {
font-size: 24px;
}
.border {
border: 1px dashed #49bcf7;
}
.title{
height: 40px;
line-height: 40px;
text-align: center;
}
.marquee_top{
transition: all 0.5s ease-in-out;
margin-top: -26px;
}
.totall{
color: #fff;
background-color: rgb(10, 63, 68);
}
.rollData{
background-color: rgb(10, 39, 50);
}
.rollData:nth-of-type(2n+1){
background-color: rgb(0, 59, 81);
}
.bigdata {
font-size: 24px;
}
.title {
height: 40px;
line-height: 40px;
text-align: center;
}
.marquee_top {
transition: all 0.5s ease-in-out;
margin-top: -26px;
}
.totall {
color: #fff;
background-color: rgb(10, 63, 68);
}
.rollData {
background-color: rgb(10, 39, 50);
}
.rollData:nth-of-type(2n+1) {
background-color: rgb(0, 59, 81);
}
</style>

557
src/views/bigScreen/index_6dept.vue
View File

@ -2,7 +2,7 @@
<el-container class="dashboard">
<el-header class="header">
<div style="font-weight: bold; font-family:'myfont';font-size:32px">6车间生产数据大看板</div>
<div style="font-size: 14px;margin-top:18px">{{currentDay}} {{ currentTime }}</div>
<div style="font-size: 14px;margin-top:18px">{{ currentDay }} {{ currentTime }}</div>
</el-header>
<el-main>
<el-row style="height: 60%" :gutter="10">
@ -14,11 +14,17 @@
</div>
<div style="height: 4px;"></div>
<div class="boxmain bigdata border" style="overflow:scroll">
<div v-for="item in todayUtask" :key="item.id" style="width:50%;display:inline-block; height: 40px;">
<span style="font-size:12px">{{item.number}}</span>
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
{{item.count}}
</span>
<div v-for="item in todayMtask" :key="item.id"
style="width:50%;display:inline-block;height: 40px;line-height:40px;padding:0 20px;">
<div
style="display:flex;justify-content:space-between;border-bottom:1px dashed #eeeeee">
<span style="font-size:12px">{{ item.material_out_name }}</span>
<span
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
{{ item.count }}
</span>
</div>
</div>
</div>
</div>
@ -32,9 +38,8 @@
</div>
<div style="height: 4px;"></div>
<div class="boxmain" id="scrollContainer1">
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
:rowData="saleOutData" :titleData="liData1" :refValue="refValue1"
></scScrollTavle>
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
:rowData="saleOutData" :titleData="liData1" :refValue="refValue1"></scScrollTavle>
</div>
</div>
</el-col>
@ -47,9 +52,8 @@
</div>
<div style="height: 4px;"></div>
<div class="boxmain" id="scrollContainer2">
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2"
:rowData="processData" :titleData="liData2" :refValue="refValue2"
></scScrollTavle>
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2" :rowData="processData"
:titleData="liData2" :refValue="refValue2"></scScrollTavle>
</div>
</div>
</el-col>
@ -85,7 +89,7 @@ function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
export default {
components: {scScrollTavle},
components: { scScrollTavle },
data() {
return {
basicOption: {
@ -153,7 +157,7 @@ export default {
xAxis: {
type: 'category',
boundaryGap: true,
data: ['1日','2日', '3日', '4日', '5日', '6日', '7日', '8日','9日','10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日','19日','20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
nameTextStyle: {
color: '#ffffff'
},
@ -222,7 +226,7 @@ export default {
label: {
show: true,
position: 'insideTop',
color:'#666'
color: '#666'
},
data: []
},
@ -267,35 +271,40 @@ export default {
label: {
show: true,
position: 'insideTop',
color:'#666',
font:'10'
color: '#666',
font: '10'
},
data:[]
data: []
},
]
},
containerHeight1:100,
containerHeight2:100,
table1Visible:false,
table2Visible:false,
refValue1:'moocBox1',
refValue2:'moocBox2',
liData1: ['序号','日期','名称', '型号', '规格', '发货数量'],
liData2: ['序号','工序','产品名称', '型号', '计划数量', '合格数量', '完成进度', '合格率'],
todayUtask:[],
saleOutData:[],
processData:[],
time: null,
start_date:'',
end_date:'',
scrollVivible:true,
dayInterval:null,
chartInterval1:null,
chartInterval2:null,
currentTime:'',
currentDay:'',
weekFirst:'',
weekLast:'',
containerHeight1: 100,
containerHeight2: 100,
table1Visible: false,
table2Visible: false,
refValue1: 'moocBox1',
refValue2: 'moocBox2',
liData1: ['序号', '日期', '名称', '型号', '规格', '发货数量'],
liData2: ['序号', '工序', '产品名称', '型号', '计划数量', '合格数量', '完成进度', '合格率'],
todayMtask: [
{ material_out_name: '光纤预制棒|33*470|ZJ2|棒料成型', count: 300 },
{ material_out_name: '光纤预制棒|33*470|ZJ2|棒料成型', count: 300 },
{ material_out_name: '光纤预制棒|33*470|ZJ2|棒料成型', count: 300 },
{ material_out_name: '光纤预制棒|33*470|ZJ2|棒料成型', count: 300 },
],
saleOutData: [],
processData: [],
time: null,
start_date: '',
end_date: '',
scrollVivible: true,
dayInterval: null,
chartInterval1: null,
chartInterval2: null,
currentTime: '',
currentDay: '',
weekFirst: '',
weekLast: '',
}
},
mounted() {
@ -305,42 +314,50 @@ export default {
//表格table2的显示
this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight;
this.table2Visible = true;
const ondDayTime = 86400000;
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
let month = date.getMonth() + 1;
let day = date.getDate();
let days = new Date(year, month, 0).getDate();
this.days = days;
let start_date = year+'-'+month+'-01';
let start_date = year + '-' + month + '-01';
let lastDay = new Date(year, month, 0).getDate();
let end_date = year+'-'+month+'-'+lastDay;
let end_date = year + '-' + month + '-' + lastDay;
this.start_date = start_date;
this.end_date = end_date;
this.today = year+'-'+month+'-'+day;
// let yesterday = new Date(date.getTime()-24*60*60*1000);
// this.yesterday = yesterday.getFullYear()+"-" + (yesterday.getMonth()+1) + "-" + yesterday.getDate();
let week = date.getDay();//当前时间的week数
this.today = year + '-' + month + '-' + day;
let yesterday = new Date(date.getTime() - 24 * 60 * 60 * 1000);
this.yesterday = yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate();
let week = yesterday.getDay();//当前时间的week数
console.log(week);
let weekFirst = week - 1;//第一天对应的天数
let weekLast = 7 - week;//最后一天对应的天数
if (week == 0) {
weekFirst = 6;
weekLast = 0;//周日特殊处理
} else {
weekFirst = week - 1;
weekLast = 7 - week;
}
let first = new Date(new Date(date.getTime() - (weekFirst * ondDayTime)));//本周周一
let last = new Date(new Date(date.getTime() + (weekLast * ondDayTime)));//本周周日
this.weekFirst = first.getFullYear() + '-' + (first.getMonth() + 1) + '-' + first.getDate();
this.weekLast = last.getFullYear() + '-' + (last.getMonth() + 1) + '-' + last.getDate();
this.getsaleOut();
this.getMioItem();//发货情况
this.getTodayUtask();//今日任务
// this.getTodayMtask();//今日任务
//昨日工序进度
this.getMtask();
//时间
this.showTime()
this.dayInterval = setInterval(()=>{
this.dayInterval = setInterval(() => {
this.showTime()
},1000)
}, 1000)
},
methods: {
showTime(){
showTime() {
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
},
@ -360,31 +377,37 @@ export default {
}, 500)
},
//今日任务
getTodayUtask(){
getTodayMtask() {
let that = this;
let obj ={};
let obj = {};
obj.start_date = this.today;
obj.end_date = this.today;
obj.belong_dept__name='6车间';
obj.page=0;
that.$API.pm.utask.list.req(obj).then((res) => {
that.todayUtask=res;
console.log('今日任务:',res);
obj.is_count_utask = true;
obj.mgroup__belong_dept__name = '6车间';
obj.page = 0;
that.$API.pm.mtask.list.req(obj).then((res) => {
that.todayMtask = res;
console.log('今日任务:', res);
});
// that.$API.pm.utask.list.req(obj).then((res) => {
// that.todayMtask = res;
// console.log('今日任务:', res);
// });
},
//发货情况
getMioItem(){
getMioItem() {
let that = this;
let obj ={};
let obj = {};
obj.mio__type = 'sale_out';
obj.mio__inout_date__gte = that.start_date;
obj.mio__inout_date__lte = that.end_date;
obj.page=0;
obj.page = 0;
that.$API.inm.mioitem.list.req(obj).then((res) => {
console.log(res);
let saleOutData = [];
res.forEach(item => {
let arr = [],obj1 = {},obj2 = {},obj3 = {},obj4 = {},obj5 = {};
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {};
obj1.elType = 'primary';
obj1.value = item.inout_date;
obj2.elType = 'primary';
@ -406,39 +429,33 @@ export default {
});
},
//本周工序进展
getMtask(){
getMtask() {
let that = this;
let obj ={};
obj.start_date = this.weekFirst;
obj.end_date = this.weekLast;
obj.mgroup__belong_dept__name='6车间';
obj.page=0;
that.$API.pm.mtask.list.req(obj).then((res) => {
console.log(res);
if(res.length>0){
let obj = {
query: { start_date: this.start_date, end_date: this.end_date, dept_name: "6车间" },
};
//生产车间按日统计
that.$API.bi.dataset.exec.req('mgroupWeek', obj).then((res) => {
let data = res.data2.ds0;
if (data.length > 0) {
let processData = [];
res.forEach(item => {
let arr = [],obj1 = {},obj2 = {},obj3 = {},obj4 = {},obj5 = {},obj6 = {},obj7 = {},obj8 = {};
data.forEach(item => {
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {}, obj8 = {};
obj1.elType = 'primary';
obj1.value = item.mgroup_name;//工序
obj1.value = item.工段;//工序
obj2.elType = 'primary';
obj2.value = item.material_out_.name;
obj2.value = item.物料名称;
obj3.elType = 'primary';
obj3.value = item.material_out_.specification;
obj3.value = item.型号;
obj4.elType = 'primary';
obj4.value = item.count;
obj4.value = item.计划数;
obj5.elType = 'primary';
obj5.value = item.count_ok;
obj5.value = item.合格数;
obj6.elType = 'progress';
let jindu = Math.round((item.count_ok/item.count)*100);
let jindu = Math.round((item.完成进度) * 100);
obj6.value = jindu;
obj7.elType = 'primary';
let rate = 0;
if(item.count_real!=0){
rate = Math.round((item.count_ok/item.count_real)*100);
}else{
rate = 0;
}
let rate = Math.round((item.合格率) * 100);
obj7.value = rate;
arr.push(obj1);
arr.push(obj2);
@ -448,105 +465,140 @@ export default {
arr.push(obj6);
arr.push(obj7);
processData.push(arr);
});
console.log('processData',processData)
console.log('processData', processData)
this.processData = processData;
}
debugger;
});
})
// let obj = {};
// obj.start_date = this.weekFirst;
// obj.end_date = this.weekLast;
// obj.mgroup__belong_dept__name = '6车间';
// obj.page = 0;
// that.$API.pm.mtask.list.req(obj).then((res) => {
// console.log(res);
// if (res.length > 0) {
// let processData = [];
// res.forEach(item => {
// let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {}, obj8 = {};
// obj1.elType = 'primary';
// obj1.value = item.mgroup_name;//工序
// obj2.elType = 'primary';
// obj2.value = item.material_out_.name;
// obj3.elType = 'primary';
// obj3.value = item.material_out_.specification;
// obj4.elType = 'primary';
// obj4.value = item.count;
// obj5.elType = 'primary';
// obj5.value = item.count_ok;
// obj6.elType = 'progress';
// let jindu = Math.round((item.count_ok / item.count) * 100);
// obj6.value = jindu;
// obj7.elType = 'primary';
// let rate = 0;
// if (item.count_real != 0) {
// rate = Math.round((item.count_ok / item.count_real) * 100);
// } else {
// rate = 0;
// }
// obj7.value = rate;
// arr.push(obj1);
// arr.push(obj2);
// arr.push(obj3);
// arr.push(obj4);
// arr.push(obj5);
// arr.push(obj6);
// arr.push(obj7);
// processData.push(arr);
// });
// console.log('processData', processData)
// this.processData = processData;
// }
// debugger;
// });
},
//本月生产统计&本月交付统计
getsaleOut(){
getsaleOut() {
let that = this;
let obj ={
query: {start_date:this.start_date,end_date:this.end_date,dept_name: "6车间"},
let obj = {
query: { start_date: this.start_date, end_date: this.end_date, dept_name: "6车间" },
};
let obj2 ={
query: {start_date:this.start_date,end_date:this.end_date,mio_type: 'sale_out',material_id:''},
let obj2 = {
query: { start_date: this.start_date, end_date: this.end_date, mio_type: 'sale_out', material_id: '' },
};
//生产车间按日统计
that.$API.bi.dataset.exec.req('productStatistic', obj).then((res1) => {
console.log('生产车间按日统计:',res1);
console.log('生产车间按日统计:', res1);
let list1 = res1.data2.ds0;
let seriesData11 = [],seriesData12 = [],xAxisData1=[],bangArr=[],guanArr=[];
let seriesData11 = [], seriesData12 = [], xAxisData1 = [], bangArr = [], guanArr = [];
for (let i = 0; i < that.days; i++) {
let day = i+1;
let text = day+'日';
xAxisData1[i]=text;
let day = i + 1;
let text = day + '日';
xAxisData1[i] = text;
seriesData11.push(0);
seriesData12.push(0);
}
if(list1.length>0){
list1.forEach(item1=>{
if(item1.name=='光纤预制管'){
if (list1.length > 0) {
list1.forEach(item1 => {
if (item1.name == '光纤预制管') {
guanArr.push(item1)
}else{
} else {
bangArr.push(item1)
}
})
})
}
if(bangArr.length>0){
bangArr.forEach(item11=>{
let index11 = item11.日-1;
if (bangArr.length > 0) {
bangArr.forEach(item11 => {
let index11 = item11.日 - 1;
seriesData11[index11] = item11.生产数;
})
}
if(guanArr.length>0){
guanArr.forEach(item12=>{
let index12 = item12.日-1;
if (guanArr.length > 0) {
guanArr.forEach(item12 => {
let index12 = item12.日 - 1;
seriesData12[index12] = item12.生产数;
})
}
let chart1Option = deepCopy(this.basicOption)
chart1Option.xAxis.data = xAxisData1;
chart1Option.series[0].data=seriesData11;
chart1Option.series[1].data=seriesData12;
let chart1 = this.setChart("chart1", chart1Option);
// let index1 = 0
// this.chartInterval1 = setInterval(function () {
// if (index1 < chart1Option.series[0].data.length) {
// chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 });
// chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 });
// chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 });
// index1++;
// } else {
// index1 = 0;
// }
// }, 3000);
// debugger;
chart1Option.series[0].data = seriesData11;
chart1Option.series[1].data = seriesData12;
this.setChart("chart1", chart1Option);
});
//本月交付统计
that.$API.bi.dataset.exec.req('saleOutDay', obj2).then((saleOutRes) => {
console.log('本月交付统计:',saleOutRes);
let seriesData21 = [],seriesData22 = [],xAxisData2=[],bangArr2=[],guanArr2=[];
console.log('本月交付统计:', saleOutRes);
let seriesData21 = [], seriesData22 = [], xAxisData2 = [], bangArr2 = [], guanArr2 = [];
let list2 = saleOutRes.data2.ds0;
for (let i = 0; i < that.days; i++) {
let day = i+1;
let text = day+'日';
xAxisData2[i]=text;
let day = i + 1;
let text = day + '日';
xAxisData2[i] = text;
seriesData21.push(0);
seriesData22.push(0);
}
if(list2.length>0){
list2.forEach(item2=>{
if(item2.name=='光纤预制管'){
if (list2.length > 0) {
list2.forEach(item2 => {
if (item2.name == '光纤预制管') {
guanArr2.push(item2)
}else{
} else {
bangArr2.push(item2)
}
})
})
}
if(bangArr2.length>0){
bangArr2.forEach(item21=>{
let index21 = item21.日-1;
if (bangArr2.length > 0) {
bangArr2.forEach(item21 => {
let index21 = item21.日 - 1;
seriesData21[index21] = item21.生产数;
})
}
if(guanArr2.length>0){
guanArr2.forEach(item22=>{
let index22 = item22.日-1;
if (guanArr2.length > 0) {
guanArr2.forEach(item22 => {
let index22 = item22.日 - 1;
seriesData22[index22] = item22.生产数;
})
}
@ -554,120 +606,127 @@ export default {
chart2Option.series[0].type = 'line';
chart2Option.series[1].type = 'line';
chart2Option.xAxis.data = xAxisData2;
chart2Option.series[0].data=seriesData21;
chart2Option.series[0].label.position='top';
chart2Option.series[1].data=seriesData22;
chart2Option.series[1].label.position='top';
let chart2 = this.setChart("chart2", chart2Option);
// let index2 = 0
// this.chartInterval2 = setInterval(function () {
// if (index2 < chart2Option.series[0].data.length) {
// chart2.dispatchAction({ type: 'downplay', seriesIndex: 0 });
// chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 });
// chart2.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 });
// index2++;
// } else {
// index2 = 0;
// }
// }, 3000);
// debugger;
chart2Option.series[0].data = seriesData21;
chart2Option.series[0].label.position = 'top';
chart2Option.series[1].data = seriesData22;
chart2Option.series[1].label.position = 'top';
this.setChart("chart2", chart2Option);
});
},
},
}
</script>
<style scoped>
@font-face {
font-family: 'myfont'; /* 字体名称 */
src: url('../../utils/youShe.ttf'); /* 字体文件相对路径 */
}
.dashboard {
background-image: url("/public/img/photon_bg.png");
color: #fff;
background-size:cover;
font-family: "Microsoft Yahei" !important;
}
.header {
background: url("/public/img/photon_header.png");
border-bottom: none;
background-size: 100% 100%;
font-size: 26px;
display: block;
height: 80px;
color: rgb(149, 255, 255);
font-family: 'Microsoft Yahei';
text-align: center;
padding: 12px 0px;
}
.box {
background: rgba(10, 63, 68, 0.5);
height: 100%;
}
.boxtitle {
color: #fff;
font-size: 16px;
display: flex;
height: 36px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
}
.bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
background-size: 140% 100%;
}
.boxlabel {
margin-left: 6px;
font-size: 18px;
margin-top: 6px
}
.boxmain {
height: calc(100% - 40px);
}
@media screen and (max-width: 800px) {
.boxmain {
height: 200px;
}
}
.flex_center {
display: flex;
align-items: center;
justify-content: center
}
.border{
border: 1px dashed #49bcf7;
}
.bigdata {
font-size: 24px;
}
.wrapper{
overflow: hidden;
height: 220px;
}
@font-face {
font-family: 'myfont';
/* 字体名称 */
src: url('../../utils/youShe.ttf');
/* 字体文件相对路径 */
}
.title{
height: 40px;
line-height: 40px;
text-align: center;
}
table th{
font-size: 14px;
background: rgba(0, 0, 0, .1);
}
.marquee_top{
transition: all 0.5s ease-in-out;
margin-top: -26px;
}
.totall{
color: #fff;
background-color: rgb(10, 63, 68);
}
.rollData{
background-color: rgb(10, 39, 50);
}
.rollData:nth-of-type(2n+1){
background-color: rgb(0, 59, 81);
.dashboard {
background-image: url("/public/img/photon_bg.png");
color: #fff;
background-size: cover;
font-family: "Microsoft Yahei" !important;
}
.header {
background: url("/public/img/photon_header.png");
border-bottom: none;
background-size: 100% 100%;
font-size: 26px;
display: block;
height: 80px;
color: rgb(149, 255, 255);
font-family: 'Microsoft Yahei';
text-align: center;
padding: 12px 0px;
}
.box {
background: rgba(10, 63, 68, 0.5);
height: 100%;
}
.boxtitle {
color: #fff;
font-size: 16px;
display: flex;
height: 36px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
}
.bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
background-size: 140% 100%;
}
.boxlabel {
margin-left: 6px;
font-size: 18px;
margin-top: 6px
}
.boxmain {
height: calc(100% - 40px);
}
@media screen and (max-width: 800px) {
.boxmain {
height: 200px;
}
}
.flex_center {
display: flex;
align-items: center;
justify-content: center
}
.border {
border: 1px dashed #49bcf7;
}
.bigdata {
font-size: 24px;
}
.wrapper {
overflow: hidden;
height: 220px;
}
.title {
height: 40px;
line-height: 40px;
text-align: center;
}
table th {
font-size: 14px;
background: rgba(0, 0, 0, .1);
}
.marquee_top {
transition: all 0.5s ease-in-out;
margin-top: -26px;
}
.totall {
color: #fff;
background-color: rgb(10, 63, 68);
}
.rollData {
background-color: rgb(10, 39, 50);
}
.rollData:nth-of-type(2n+1) {
background-color: rgb(0, 59, 81);
}
</style>

489
src/views/bigScreen/index_7dept.vue
View File

@ -2,24 +2,28 @@
<el-container class="dashboard">
<el-header class="header">
<div style="font-weight: bold; font-family:'myfont';font-size:32px">7车间生产数据大看板</div>
<div style="font-size: 14px;margin-top:18px">{{currentDay}}{{ currentTime }}</div>
<div style="font-size: 14px;margin-top:18px">{{ currentDay }}{{ currentTime }}</div>
</el-header>
<el-main>
<el-row style="height: 60%" :gutter="10">
<el-col :xs="24" :md="10" style="height: 100%;">
<div class="box" style="height: 29%">
<div class="box" style="height: 29%">
<div class="boxtitle">
<div class="boxlabel">今日任务</div>
</div>
<div style="height: 4px;"></div>
<div class="boxmain bigdata border" style="overflow:scroll">
<div v-for="item in todayMtask" :key="item.id" style="width:50%;display:inline-block; height: 40px;">
<span style="font-size:12px">{{item.material_out_name}}</span>
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
{{item.count}}
</span>
<div class="boxmain bigdata border" style="overflow:scroll;padding:5px;">
<div v-for="item in todayMtask" :key="item.id"
style="width:50%;display:inline-block;height: 40px;line-height:40px;padding:0 20px;">
<div style="display:flex;justify-content:space-between;border-bottom:1px dashed #eeeeee">
<span style="font-size:12px">{{ item.material_out_name }}</span>
<span
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
{{ item.count }}
</span>
</div>
</div>
</div>
</div>
<div style="height: 1%;"></div>
@ -31,7 +35,7 @@
</div>
<div style="height: 4px;"></div>
<div class="boxmain" id="scrollContainer1">
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
:rowData="processData" :titleData="liData1" :refValue="refValue1"></scScrollTavle>
</div>
</div>
@ -45,8 +49,8 @@
</div>
<div style="height: 4px;"></div>
<div class="boxmain" id="scrollContainer2">
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2"
:rowData="lineData" :titleData="liData2" :refValue="refValue2"></scScrollTavle>
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2" :rowData="lineData"
:titleData="liData2" :refValue="refValue2"></scScrollTavle>
</div>
</div>
</el-col>
@ -92,12 +96,12 @@ function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
export default {
components: {scScrollTavle},
components: { scScrollTavle },
data() {
return {
basicOption: {
backgroundColor: '',
tooltip: {
trigger: 'axis',
axisPointer: {
@ -118,7 +122,7 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(250,205,0)'
color: 'rgb(250,205,0)'
},
{
offset: 1,
@ -139,7 +143,7 @@ export default {
xAxis: {
type: 'category',
boundaryGap: true,
data: ['1号炉','2号炉', '3号炉', '4号炉', '5号炉', '6号炉', '7号炉', '8号炉'],
data: ['1号炉', '2号炉', '3号炉', '4号炉', '5号炉', '6号炉', '7号炉', '8号炉'],
nameTextStyle: {
color: '#ffffff'
},
@ -169,7 +173,7 @@ export default {
lineStyle: {
width: 1, color: 'rgb(1,235,239)'
},
barWidth:30,
barWidth: 30,
showSymbol: false,
areaStyle: {
opacity: 0.8,
@ -190,7 +194,7 @@ export default {
label: {
show: true,
position: 'top',
color:'#fff'
color: '#fff'
},
itemStyle: {
borderRadius: [2, 2, 0, 0],
@ -205,16 +209,16 @@ export default {
}
])
},
data: [140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250, 340, 250]
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 340, 250]
}]
},
chart3Option:{
chart3Option: {
backgroundColor: '',
tooltip: {
trigger: 'item'
},
legend: {
top:'bottom',
top: 'bottom',
},
series: {
name: '完成率',
@ -234,34 +238,34 @@ export default {
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
},
containerHeight1:100,
containerHeight2:100,
table1Visible:false,
table2Visible:false,
refValue1:'moocBox1',
refValue2:'moocBox2',
liData1: ['序号', '型号', '完成进度', '产量', '状态'],
processData:[],
liData2: ['序号', '炉号','产品名称', '型号', '规格', '最近产量','锅数','设备状态'],
lineData:[],
todayMtask:[],
time: null,
containerHeight1: 100,
containerHeight2: 100,
table1Visible: false,
table2Visible: false,
refValue1: 'moocBox1',
refValue2: 'moocBox2',
liData1: ['序号', '型号', '完成进度', '产量', '状态'],
processData: [],
liData2: ['序号', '炉号', '产品名称', '型号', '规格', '最近产量', '锅数', '设备状态'],
lineData: [],
todayMtask: [],
time: null,
delay: 20,
dayInterval:null,
days:30,
today:'',
start_date:'',
end_date:'',
currentTime:'',
currentDay:'',
yesterday:'',
dayInterval: null,
days: 30,
today: '',
start_date: '',
end_date: '',
currentTime: '',
currentDay: '',
yesterday: '',
chartInterval1: null,
chartInterval2: null,
chartInterval3: null,
@ -276,30 +280,30 @@ export default {
this.table2Visible = true;
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
let month = date.getMonth() + 1;
let day = date.getDate();
let days = new Date(year, month, 0).getDate();
this.days = days;
let start_date = year+'-'+month+'-01';
let start_date = year + '-' + month + '-01';
let lastDay = new Date(year, month, 0).getDate();
let end_date = year+'-'+month+'-'+lastDay;
let end_date = year + '-' + month + '-' + lastDay;
this.start_date = start_date;
this.end_date = end_date;
this.today = year+'-'+month+'-'+day;
let yesterday = new Date(date.getTime()-24*60*60*1000);
this.yesterday = yesterday.getFullYear()+"-" + (yesterday.getMonth()+1) + "-" + yesterday.getDate();
this.today = year + '-' + month + '-' + day;
let yesterday = new Date(date.getTime() - 24 * 60 * 60 * 1000);
this.yesterday = yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate();
this.getProductLine();
this.getUtask();
this.getTodayMtask();
this.getLineData();
//时间
this.showTime()
this.dayInterval = setInterval(()=>{
this.dayInterval = setInterval(() => {
this.showTime()
},1000)
}, 1000)
},
methods: {
showTime(){
showTime() {
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
},
@ -319,22 +323,22 @@ export default {
}, 500)
},
//任务进度
getUtask(){
getUtask() {
let that = this;
let obj ={};
let obj = {};
obj.start_date__gte = this.start_date;
obj.end_date__lte = this.end_date;
obj.belong_dept__name='7车间';
obj.page=0;
obj.belong_dept__name = '7车间';
obj.page = 0;
that.$API.pm.utask.list.req(obj).then((res) => {
console.log('任务进度:',res);
console.log('任务进度:', res);
let processData = [];
res.forEach(item => {
let arr = [],obj1 = {},obj2 = {},obj3 = {},obj4 = {};
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {};
obj1.elType = 'primary';
obj1.value = item.material_.specification;
obj2.elType = 'progress';
let process = Math.round((item.count_ok/item.count)*100)
let process = Math.round((item.count_ok / item.count) * 100)
obj2.value = process;
obj3.elType = 'primary';
obj3.value = item.count_ok;
@ -350,17 +354,17 @@ export default {
});
},
//7车间生产按炉进度
getLineData(){
getLineData() {
let that = this;
that.$API.bi.dataset.exec.req('linedept7', {}).then((res) => {
console.log('7车间生产线:',res);
console.log('7车间生产线:', res);
let list = res.data2.ds0;
if(list.length>0){
if (list.length > 0) {
let lineData = [];
list.forEach(item => {
let arr = [],obj1 = {},obj2 = {},obj3 = {},obj4 = {},obj5 = {},obj6 = {},obj7 = {};
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {};
obj1.elType = 'primary';
obj1.value = item.equip_name;//炉号
obj1.value = item.equip_name + '|' + item.equip_number;//炉号
obj2.elType = 'primary';
obj2.value = item.material_name;
obj3.elType = 'primary';
@ -388,62 +392,50 @@ export default {
});
},
//生产线
getProductLine(){
getProductLine() {
let that = this;
//本月生产统计
let obj1 ={
query: {start_date:that.start_date,end_date:that.end_date},
let obj1 = {
query: { start_date: that.start_date, end_date: that.end_date },
};
that.$API.bi.dataset.exec.req('stoveStatics', obj1).then((res1) => {
console.log('本月生产统计:',res1);
console.log('本月生产统计:', res1);
let list1 = res1.data2.ds0;
let seriesData1 = [],xAxisData1=[];
if(list1.length>0){
list1.forEach(item1=>{
xAxisData1.push(item1.equip_name);
let seriesData1 = [], xAxisData1 = [];
if (list1.length > 0) {
list1.forEach(item1 => {
xAxisData1.push(item1.equip_number);
seriesData1.push(item1.count_real);
})
})
}
let chart1Option = deepCopy(this.basicOption)
chart1Option.xAxis.data = xAxisData1;
chart1Option.series[0].data = seriesData1;
// chart1Option.yAxis.name='生产数';
let chart1 = that.setChart("chart1", chart1Option);
// let index1 = 0
// this.chartInterval1 = setInterval(function () {
// if (index1 < seriesData1.length) {
// chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 });
// chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index1 });
// chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index1 });
// index1++;
// } else {
// index1 = 0;
// }
// }, 3000);
});
//本月合格率统计
let obj2 ={
query: {start_date:that.start_date,end_date:that.end_date,dept_name: "7车间"},
let obj2 = {
query: { start_date: that.start_date, end_date: that.end_date, dept_name: "7车间" },
};
that.$API.bi.dataset.exec.req('lineDay', obj2).then((res2) => {
console.log('本月合格率统计:',res2);
console.log('本月合格率统计:', res2);
let list2 = res2.data2.ds0;
let seriesData2 = [],xAxisData2=[];
let seriesData2 = [], xAxisData2 = [];
for (let i = 0; i < that.days; i++) {
let day = i+1;
let text = day+'日';
xAxisData2[i]=text;
seriesData2[i]=0;
let day = i + 1;
let text = day + '日';
xAxisData2[i] = text;
seriesData2[i] = 0;
}
if(list2.length>0){
list2.forEach(item2=>{
let index2 = item2.日-1;
seriesData2[index2] =Math.round(item2.合格率);
})
if (list2.length > 0) {
list2.forEach(item2 => {
let index2 = item2.日 - 1;
seriesData2[index2] = Math.round(item2.合格率);
})
}
let chart2Option = deepCopy(this.basicOption);
chart2Option.xAxis.data = xAxisData2;
chart2Option.yAxis.name='合格率';
chart2Option.yAxis.name = '合格率';
chart2Option.legend = {
icon: "stack",
right: 0,
@ -467,7 +459,7 @@ export default {
}
}],
};
let series2=[{
let series2 = [{
name: '合格率',
type: 'line',
smooth: true,
@ -494,183 +486,180 @@ export default {
label: {
show: true,
position: 'top',
color:'#fff'
color: '#fff'
},
itemStyle: {
borderRadius: [2, 2, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(250,205,0)'
},
{
offset: 1,
color: 'rgb(254,129,0)'
}
])
},
data: seriesData2
borderRadius: [2, 2, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(250,205,0)'
},
{
offset: 1,
color: 'rgb(254,129,0)'
}
])
},
data: seriesData2
}];
chart2Option.series=series2;
chart2Option.series = series2;
let chart2 = that.setChart("chart2", chart2Option);
// let index2 = 0
// this.chartInterval2 = setInterval(function () {
// if (index2 < seriesData2.length) {
// chart2.dispatchAction({ type: 'downplay', seriesIndex: 0 });
// chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 });
// chart2.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 });
// index2++;
// } else {
// index2 = 0;
// }
// }, 3000);
});
//车间生产昨日统计 12月1号
let obj3 ={
query: {start_date:that.yesterday,end_date:that.yesterday,dept_name: "7车间"},
let obj3 = {
query: { start_date: that.yesterday, end_date: that.yesterday, dept_name: "7车间" },
};
that.$API.bi.dataset.exec.req('lineDay', obj3).then((res3) => {
console.log('车间生产昨日统计:',res3);
console.log('车间生产昨日统计:', res3);
let seriesData3 = [
{ value: 0, name: '炸纹' },
{ value: 0, name: '条纹' },
{ value: 0, name: '气泡' },
{ value: 0, name: '弯曲' },
{ value: 0, name: '其他' },
{ value: 0, name: '合格' },
]
if(res3.data2.ds0.length>0){
{ value: 0, name: '炸纹' },
{ value: 0, name: '条纹' },
{ value: 0, name: '气泡' },
{ value: 0, name: '弯曲' },
{ value: 0, name: '其他' },
{ value: 0, name: '合格' },
]
if (res3.data2.ds0.length > 0) {
let item3 = res3.data2.ds0[0];
that.yesterdayObjet = item3;
seriesData3[0].value=item3.炸纹;
seriesData3[1].value=item3.条纹;
seriesData3[2].value=item3.气泡;
seriesData3[3].value=item3.弯曲;
seriesData3[4].value=item3.其他;
seriesData3[5].value=item3.合格数;
seriesData3[0].value = item3.炸纹;
seriesData3[1].value = item3.条纹;
seriesData3[2].value = item3.气泡;
seriesData3[3].value = item3.弯曲;
seriesData3[4].value = item3.其他;
seriesData3[5].value = item3.合格数;
}
that.chart3Option.series.data = seriesData3;
that.chart3Option.series.data = seriesData3;
let chart3 = that.setChart("chart3", that.chart3Option);
// let index3 = 0
// this.chartInterval3 = setInterval(function () {
// if (index3 < seriesData3.length) {
// chart3.dispatchAction({ type: 'downplay', seriesIndex: 0 });
// chart3.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index3 });
// chart3.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index3 });
// index3++;
// } else {
// index3 = 0;
// }
// }, 3000);
});
},
//今日任务
getTodayMtask(){
getTodayMtask() {
let that = this;
let obj ={};
let obj = {};
obj.start_date = this.today;
obj.end_date = this.today;
obj.belong_dept__name='7车间';
obj.page=0;
obj.mgroup__belong_dept__name = '7车间';
obj.page = 0;
that.$API.pm.mtask.list.req(obj).then((res) => {
that.todayMtask=res;
console.log('今日任务:',res);
that.todayMtask = res;
console.log('今日任务:', res);
});
},
},
}
</script>
<style scoped>
@font-face {
font-family: 'myfont'; /* 字体名称 */
src: url('../../utils/youShe.ttf'); /* 字体文件相对路径 */
}
.dashboard {
background-image: url("/public/img/photon_bg.png");
color: #fff;
font-family: "Microsoft Yahei" !important;
background-size: cover;
}
.header {
background: url("/public/img/photon_header.png");
border-bottom: none;
background-size: 100% 100%;
font-size: 26px;
display: block;
height: 80px;
color: rgb(149, 255, 255);
font-family: 'Microsoft Yahei';
text-align: center;
padding: 12px 0px;
}.box {
background: rgba(10, 63, 68, 0.5);
height: 100%;
}
.boxtitle {
color: #fff;
font-size: 16px;
display: flex;
height: 36px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
}
.bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
background-size: 140% 100%;
}
@font-face {
font-family: 'myfont';
/* 字体名称 */
src: url('../../utils/youShe.ttf');
/* 字体文件相对路径 */
}
.dashboard {
background-image: url("/public/img/photon_bg.png");
color: #fff;
font-family: "Microsoft Yahei" !important;
background-size: cover;
}
.header {
background: url("/public/img/photon_header.png");
border-bottom: none;
background-size: 100% 100%;
font-size: 26px;
display: block;
height: 80px;
color: rgb(149, 255, 255);
font-family: 'Microsoft Yahei';
text-align: center;
padding: 12px 0px;
}
.box {
background: rgba(10, 63, 68, 0.5);
height: 100%;
}
.boxtitle {
color: #fff;
font-size: 16px;
display: flex;
height: 36px;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
}
.bgimg {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
background-size: 140% 100%;
}
.boxmain {
height: calc(100% - 40px);
}
@media screen and (max-width: 800px) {
.boxmain {
height: calc(100% - 40px);
}
@media screen and (max-width: 800px) {
.boxmain {
height: 200px;
}
}
.flex_center {
display: flex;
align-items: center;
justify-content: center
height: 200px;
}
}
.border {
border: 1px dashed #49bcf7;
}
.flex_center {
display: flex;
align-items: center;
justify-content: center
}
.bigdata {
font-size: 24px;
}
.boxlabel {
margin-left: 6px;
font-size: 18px;
margin-top: 6px
}
.wrapper{
overflow: hidden;
height: 220px;
}
.wrapper2{
height: 180px;
overflow: hidden;
}
.title{
height: 40px;
line-height: 40px;
text-align: center;
}
.marquee_top{
transition: all 0.5s ease-in-out;
margin-top: -26px;
}
.totall{
color: #fff;
background-color: rgb(10, 63, 68);
}
.rollData{
background-color: rgb(10, 39, 50);
}
.rollData:nth-of-type(2n+1){
background-color: rgb(0, 59, 81);
}
.border {
border: 1px dashed #49bcf7;
}
.bigdata {
font-size: 24px;
box-sizing: border-box;
}
.boxlabel {
margin-left: 6px;
font-size: 18px;
margin-top: 6px
}
.wrapper {
overflow: hidden;
height: 220px;
}
.wrapper2 {
height: 180px;
overflow: hidden;
}
.title {
height: 40px;
line-height: 40px;
text-align: center;
}
.marquee_top {
transition: all 0.5s ease-in-out;
margin-top: -26px;
}
.totall {
color: #fff;
background-color: rgb(10, 63, 68);
}
.rollData {
background-color: rgb(10, 39, 50);
}
.rollData:nth-of-type(2n+1) {
background-color: rgb(0, 59, 81);
}
</style>

37
src/views/bigScreen/index_photon.vue
View File

@ -120,7 +120,10 @@
<div class="border_corner border_right_bottom"></div>
<p class="title">{{ dialogData.deptName }}</p>
<div class="infoCantier">
<div class="leftBlock">
<div class="leftBlock" v-if="dialogData.deptName == '办公楼'">
<img src="img/gz_logo.png" alt="" style="width:100%">
</div>
<div class="leftBlock" v-else>
<el-progress :width="70" type="circle" color="rgba(54, 217, 187, 1)" :percentage="dialogData.percentage"
id="dashbordProcess">
<span class="percentage-value" style="font-size: 16px">{{ dialogData.percentage }}%</span>
@ -129,8 +132,7 @@
</div>
<div class="rightBlock">
<div>
<p>昨日产量</p>
<!-- <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p> -->
<p v-if="dialogData.deptName !== '办公楼'">昨日产量</p>
</div>
<div class="countWrap">
<div v-if="dialogData.deptName == '光纤预制管生产车间' || dialogData.deptName == '光学精密加工车间'">
@ -148,6 +150,10 @@
<p> <span class="numberFont">{{ dialogData.count }}</span><span class="numberUnit">kg</span>
</p>
</div>
<div v-if="dialogData.deptName == '办公楼'">
<p style="font-size:12px">
公司秉承“善用资源，服务建设”的核心理念，践行“材料创造美好世界”的企业使命，坚持“创新、绩效、和谐、责任”的核心价值观，努力成长为具有创新精神和全球视野的光子材料领先企业。</p>
</div>
</div>
</div>
</div>
@ -160,7 +166,10 @@
<div class="border_corner border_right_bottom"></div>
<p class="title">{{ currentData.deptName }}</p>
<div class="infoCantier">
<div class="leftBlock">
<div class="leftBlock" v-if="currentData.deptName == '办公楼'">
<img src="img/gz_logo.png" alt="" style="margin-top:10px">
</div>
<div class="leftBlock" v-else>
<el-progress :width="100" type="circle" color="rgba(54, 217, 187, 1)"
:percentage="currentData.percentage" id="dashbordProcess">
<span class="percentage-value" style="font-size: 16px">{{ currentData.percentage }}%</span>
@ -169,8 +178,7 @@
</div>
<div class="rightBlock">
<div>
<p>昨日产量</p>
<!-- <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p> -->
<p v-if="currentData.deptName !== '办公楼'">昨日产量</p>
</div>
<div class="countWrap">
<div v-if="currentData.deptName == '光纤预制管生产车间' || currentData.deptName == '光学精密加工车间'">
@ -190,6 +198,9 @@
<p> <span class="numberFont">{{ currentData.count }}</span><span class="numberUnit">kg</span>
</p>
</div>
<div v-if="currentData.deptName == '办公楼'">
<p>公司秉承“善用资源，服务建设”的核心理念，践行“材料创造美好世界”的企业使命，坚持“创新、绩效、和谐、责任”的核心价值观，努力成长为具有创新精神和全球视野的光子材料领先企业。</p>
</div>
</div>
</div>
<CircleClose class="circleClose" @click="circleClose" />
@ -416,7 +427,7 @@ export default {
let cDate = new Date();
let yesterday = new Date(cDate.getTime() - ondDayTime);
let week = yesterday.getDay();//当前时间的week数
console.log(week);
// console.log(week);
let weekFirst = week - 1;//第一天对应的天数
let weekLast = 7 - week;//最后一天对应的天数
if (week == 0) {
@ -686,7 +697,7 @@ export default {
let countOkDept10 = [0, 0, 0, 0, 0, 0, 0], countRateDept10 = [0, 0, 0, 0, 0, 0, 0];
let countOk_dept10 = 0;
if (list.length > 0) {
console.log(this.weekDateList)
// console.log(this.weekDateList)
list.forEach(item => {
let index = that.weekDateList.indexOf(item.日);
countOkDept10[index] = item.合格数;
@ -861,7 +872,7 @@ export default {
});
}
that.taskBoard.data = data;
console.log('getMaterialList', data)
// console.log('getMaterialList', data)
})
},
showTime() {
@ -1074,7 +1085,7 @@ export default {
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.hit) {
const mesh = pickResult.pickedMesh;
console.log('mesh', mesh)
// console.log('mesh', mesh)
if (that.nodesLists[mesh.name]) {
that.getDeptClickData(that.nodesLists[mesh.name])
hl1Click.removeAllMeshes();
@ -1119,7 +1130,7 @@ export default {
},
getDeptData(name) {
this.infoVisibel = true;
console.log('hoverName', name)
// console.log('hoverName', name)
if (name == '光学精密加工车间') { //6
this.dialogData = this.dept6Obj;
} else if (name == '光纤预制棒生产车间') {//7
@ -1131,7 +1142,7 @@ export default {
}
},
getDeptClickData(name) {
console.log('clickName', name)
// console.log('clickName', name)
if (name == '光学精密加工车间') { //6
this.currentData = this.dept6Obj;
} else if (name == '光纤预制棒生产车间') {//7
@ -1849,7 +1860,7 @@ export default {
.inforBlock.clickBlock {
left: 50%;
width: 630px;
width: 520px;
height: 225px;
padding: 40px;
font-size: 16px;