root/screen-lnsh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
xiangxy
2023-02-28 14:02:39 +08:00
commit 9b86baa44f
170 changed files with 29943 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

731
src/pages/ProdCount2.vue Normal file
View File

@@ -0,0 +1,731 @@
<template>
<section>
<t-header index='4'></t-header>
<section>
<div class="con1">
<div class="c-title c-left">
<span class="icon1"></span>
<span>今日压制量：</span>
<div class="num">
<div class="bg" v-for="item in showNum1" :key="item" :class="{dot: item === '.'}">{{item}}</div>
</div>
<span>吨</span>
</div>
<div class="c-title c-right">
<span>今日干燥量：</span>
<div class="num">
<div class="bg" v-for="item in showNum2" :key="item" :class="{dot: item === '.'}">{{item}}</div>
</div>
<span>吨</span>
</div>
<div class="c-title c-right" style="marginLeft: 1rem;">
<span>今日成品量：</span>
<div class="num">
<div class="bg" v-for="item in showNum2" :key="item" :class="{dot: item === '.'}">{{item}}</div>
</div>
<span>吨</span>
</div>
</div>
<div style="display:flex">
<div class="con2">
<div class="title">原料计划完成情况</div>
<div class="desc">
<div>计划生产：<span>12</span>吨</div>
<div>已生产：<span>2</span>吨</div>
</div>
<div class="item_content_0">
<div id="echart_d01" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="con3" style="position: relative">
<div class="title">成品计划完成情况</div>
<div class="item_content_1">
<div id="echart_d05" style="width: 100%; height: 100%"></div>
</div>
</div>
</div>
<div class="con4">
<div class="block_h2">
<h2>生产任务</h2>
</div>
<div class="list_scroll_title">
<span>工序</span><span>设备</span><span>物料号</span><span>生产物料</span><span>客户</span><span>计划量</span><span>生产量</span><span>班次类型</span><span>生产状态</span><span>开始时间</span>
<!-- <span>工序</span>
<span>设备</span>
<span>物料号</span>
<span>生产物料</span>
<span>厂家</span>
<span>配方代码</span>
<span>计划量</span>
<span>生产量</span>
<span>班次类型</span>
<span>生产状态</span> -->
</div>
<vue-seamless-scroll :data="taskData" :class-option="classOption" class="content-block-scroll">
<ul class="content-block-scroll-ul">
<li v-for="(e, i) in taskData" :key="i">
<span>{{e.workprocedure_name}}</span><span>{{e.device_name}}</span><span>{{e.material_code}}</span><span>{{e.material_name}}</span><span>{{e.factory_name}}</span><span>{{e.formula_code}}</span><span>{{e.plan_qty}}</span><span>{{e.produce_qty}}</span><span>{{e.shift_type_scode_name}}</span><span>{{e.status_name}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</section>
</section>
</template>
<script>
import THeader from '@components/header.vue'
import * as echarts from 'echarts'
export default {
name: 'ProdCount',
components: {
THeader
},
data () {
return {
interTime: this.$store.getters.setTime,
timer: null,
showNum1: '',
showNum2: '',
showNum3: '',
showNum4: '',
myCharts05: '',
materData: [],
deviceData: [],
taskData: []
}
},
computed: {
classOption () {
// return {
// step: 0.4,
// limitMoveNum: 6
// }
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
},
mounted () {
// this.initData()
// this.refresh()
this.setEchart01()
this.setEchart05()
},
beforeDestroy () {
clearInterval(this.timer)
},
methods: {
refresh () {
this.timer = setInterval(() => {
this.initData()
}, this.interTime)
},
initData () {
let data = {
'_SRVNAME': 'server.jxht.screen',
'_SRVMETHOD': 'queryProduceInfo',
'_DATA': JSON.stringify({
accountId: '-1'
})
}
this
.$post(data)
.then(res => {
if (res.code === '1') {
this.showNum1 = (res.result.form.produce_total_qty + '').split('')
this.showNum2 = (res.result.form.finished_total_qty + '').split('')
this.showNum3 = res.result.form.day_qty
this.showNum4 = res.result.form.shift_qty
this.materData = res.result.material_rows
this.deviceData = res.result.device_rows
this.taskData = res.result.task_rows
this.getEchart1()
this.getEchart2()
} else {
this.toast(res.desc)
}
})
},
setEchart01 () {
let data = [100, 50, 30, 80]
var option = {
legend: {
orient: 'vertical',
right: 0,
data: ['未完成重量', '已经完成重量', '空闲设备', '故障设备'],
textStyle: {
color: '#ffffff',
fontSize: '16'
}
},
color: ['#0966E8', '#07E083', '#00D5FF', '#CC6060'],
series: [
{
type: 'pie',
radius: ['50%', '70%'],
label: {
formatter: ''
},
labelLine: {
show: false
},
data: data
}
]
}
let echart = document.getElementById('echart_d01')
this.myCharts01 = this.$echarts.init(echart)
this.myCharts01.setOption(option)
window.addEventListener('resize', () => {
this.myCharts01.resize()
})
},
setEchart05 () {
let option = {
grid: {
top: 50,
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
legend: {
icon: 'rect',
textStyle: {
color: '#fff',
fontSize: 14,
lineHeight: 14
},
itemGap: 30.86,
itemWidth: 14.16,
itemHeight: 7.38,
data: [{name: '计划生产数量', itemStyle: {color: '#0E90FD'}}, {name: '已完成数量', itemStyle: {color: '#EAAD24'}}]
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: '#8FABBF'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
// data: this.data05_d0
data: ['压制', '干燥', '包装']
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
splitNumber: 2,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
splitLine: {
show: true,
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF',
opacity: 0.2
}
}
},
series: [
{
name: '计划生产数量',
type: 'bar',
barWidth: '28',
barGap: '100%', // 柱图间距
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: 'rgba(96,112,128,0.10)',
opacity: 1
},
{
offset: 0,
color: '#0E90FD',
opacity: 0.1
}
])
}
},
// data: this.data05_d1
data: ['390', '390', '390']
},
{
name: '已完成数量',
type: 'bar',
barWidth: '28',
barGap: '100%', // 柱图间距
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#B68845',
opacity: 1
},
{
offset: 1,
color: 'rgba(134,98,45,0.25)',
opacity: 0.25
}
])
}
},
// data: this.data05_d3
data: ['210', '210', '210']
}
]
}
let echart = document.getElementById('echart_d05')
if (this.myCharts05 !== '') {
this.myCharts05.dispose()
}
if (echart !== null) {
this.myCharts05 = this.$echarts.init(echart)
this.myCharts05.setOption(option)
window.addEventListener('resize', () => {
this.myCharts05.resize()
})
}
},
getEchart1 () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart_d1'))
var finishArr = []
var unFinishArr = []
var materArr = []
this.materData.map(el => {
finishArr.push(el.finished_qty)
unFinishArr.push(el.unfinished_qty)
materArr.push(el.material_code)
})
// 指定图表的配置项和数据
var option = {
legend: {
top: 20,
right: 10,
textStyle: {
color: '#ffffff',
fontSize: 12,
lineHeight: 20
},
itemGap: 20,
itemHeight: 8,
data: ['完成', '未完成']
},
title: {
text: '半成品计划完成率', // 标题
top: '12px',
left: '20px',
textStyle: {
color: '#fff',
fontSize: '16'
}
},
// tooltip: {
// trigger: 'axis'
// },
xAxis: {
// data: ['1号砖', '2号砖', '3号砖', '4号砖'],
data: materArr,
axisLine: {
lineStyle: {
color: '#fff'
}
},
splitLine: {
show: false
}
},
// xAxis: {
// type: 'category',
// axisLine: {
// lineStyle: {
// color: '#fff'
// }
// }
// },
yAxis: {
axisLine: {
lineStyle: {
color: '#fff'
}
},
splitLine: {
show: false
}
},
series: [{
name: '未完成',
type: 'bar',
barWidth: 14,
stack: '完成情况',
// data: [15, 20, 36, 10],
data: unFinishArr,
itemStyle: {
normal: {
color: '#32C5FF'
// label: {
// show: true,
// position: 'inside',
// formatter: function (params) {
// if (params.value !== 0) {
// return params.value
// } else {
// return ''
// }
// }
// }
}
}
}, {
name: '完成',
type: 'bar',
barWidth: 14,
stack: '完成情况',
// data: [40, 57, 18, 20],
data: finishArr,
itemStyle: {
normal: {
color: '#F7B502'
// label: {
// show: true,
// position: 'inside',
// formatter: function (params) {
// if (params.value !== 0) {
// return params.value
// } else {
// return ''
// }
// }
// }
}
}
}]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
window.addEventListener('resize', function () {
myChart.resize()
})
},
getEchart2 () {
// 基于准备好的dom，初始化echarts实例
// var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
// var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
// var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
var lineData = []
var barData = []
var xData = []
this.deviceData.map(el => {
console.log(el.produce_qty)
lineData.push(el.produce_qty)
barData.push(el.produce_num)
xData.push(el.device_name)
})
var myChart = echarts.init(document.getElementById('echarts2'))
var option = {
legend: {
top: 20,
right: 10,
textStyle: {
color: '#ffffff',
fontSize: 12,
lineHeight: 20
},
itemGap: 20,
itemHeight: 8,
data: ['数量', '重量']
},
// tooltip: {
// trigger: 'axis'
// },
xAxis: {
// name: '设备',
type: 'category',
data: xData,
nameGap: 60, // 坐标轴名称与轴线之间的距离。
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
color: '#fff'
}
},
yAxis: [
{
// name: '交易额（亿元）',
type: 'value',
min: 0,
// max: 100000,
max: Math.max.apply(null, barData),
splitNumber: 10,
splitLine: {
show: true,
lineStyle: {
color: ['#315070'],
width: 1,
type: 'dotted'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff'
}
}
},
{
// name: '增长率',
type: 'value',
min: 0,
// max: 10,
max: Math.max.apply(null, lineData),
splitNumber: 10,
// position: 'right',
// formatter: '{value}',
axisLine: {
show: false,
lineStyle: {
color: '#fff'
}
},
itemStyle: {
color: '#F7B502'
}
}
],
series: [
{
name: '数量',
type: 'bar',
data: barData,
barWidth: 10,
itemStyle: {
color: '#32C5FF'
}
},
{
name: '重量',
type: 'line',
symbolSize: 12, // 拐点圆的大小
symbol: 'circle',
data: lineData,
lineStyle: {
color: '#F7B502'
},
itemStyle: {
normal: {
color: '#F7B502'
}
},
yAxisIndex: 1
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
window.addEventListener('resize', function () {
myChart.resize()
})
}
}
}
</script>
<style lang="stylus" scoped>
.con1
width 18.14rem
// height 1.23rem
height 123px
overflow hidden
position relative
background center center / 100% 100% url(../assets/images/sctj_top.png) no-repeat
margin 0 auto
// margin-top 0.32rem
// margin-bottom 0.15rem
margin-top 32px
margin-bottom 15px
text-align center
.c-title
float left
// line-height 1.23rem
line-height 123px
.c-left
margin 0 2.92rem 0 2.51rem
display flex
align-items center
.c-right
// margin 0 2.9rem 0 2.5rem
display flex
align-items center
span
font-size .24rem
color #32C5FF
.icon1
display inline-block
width .19rem
height .19rem
overflow hidden
position relative
background center center / 100% 100% url(../assets/images/sctj_icon.png) no-repeat
margin-right .2rem
.num
display flex
align-items center
.bg
width .44rem
height .6rem
background rgba(50,197,255,0.10)
display flex
align-items center
justify-content center
margin-right .1rem
font-size .5rem
color #F7B502
.dot
background none
width .14rem
.con2
float left
margin-left .49rem
// width 4.45rem
width 40%
// height 4.05rem
height 405px
overflow hidden
position relative
background center center / 100% 100% url(../assets/images/sctj_bg1.png) no-repeat
margin-right .15rem
.title
position absolute
top .3rem
left .25rem
font-size .24rem
.desc
position absolute
top .75rem
left .25rem
display flex
div
font-size .24rem
margin-right .5rem
margin-right 1.2rem
span
font-size .3rem
color #F7B502
margin 0 .25rem
.item_content_0
position absolute
top .3rem
left .25rem
height 375px
width 95%
.con3
float left
// width 13.57rem
width 54%
// height 4.05rem
height 405px
overflow hidden
position relative
background center center / 100% 100% url(../assets/images/sctj_bg2.png) no-repeat
.title
position absolute
top .3rem
left .25rem
font-size .24rem
.item_content_1
position absolute
top .3rem
left .25rem
height 375px
width 95%
.con4
float left
margin-left .49rem
// margin-top .16rem
margin-top 16px
width 18.17rem
// height 3.35rem
height 335px
overflow hidden
position relative
background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
padding 0 .27rem 0 .27rem
.block_h2
h2
font-size .16rem
line-height .22rem
margin .15rem 0 .15rem 0
.list_scroll_title
width 100%
background #262F52
span
display inline-block
width 10%
text-align center
line-height .32rem
// float left
font-size 14px
&:nth-child(1)
width 6%
&:nth-child(4)
width 14%
.content-block-scroll
width 100%
height calc(100% - 0.6rem)
overflow hidden
.content-block-scroll-ul
li
width 100%
&:nth-child(2n)
background rgba(38,47,82,0.50)
span
display inline-block
width 10%
font-size 12px
padding 0 .1rem
text-align center
line-height .38rem
box-sizing border-box
// float left
&:nth-child(1)
width 6%
&:nth-child(4)
width 14%
</style>