<%@ page language="java" import="java.sql.*" contentType="text/html; charset=UTF-8"
|
pageEncoding="UTF-8"%>
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<meta http-equiv="expires" content="0">
|
<meta http-equiv="pragma" content="no-cache">
|
<meta http-equiv="cache-control" content="no-cache">
|
<title>仓储大屏</title>
|
<script src="../js/main.js"></script>
|
</head>
|
<body>
|
<div id="app" @mousemove="onmouseMove" v-loading="loading" element-loading-background="white">
|
<div id="mains" v-show="this.global.pollingIndex==0">
|
<div id="divHead" style="width: 100%;height:19.5%;float: left;margin-bottom: 0.5%;position: relative;">
|
<!-- <el-scrollbar class="page-scroll" style="width: 100%;height: 70%;overflow-y: auto;"> -->
|
<div v-for="(items,index) in storage" style="width:6.9% ;height: 35%;margin-top: 1.5%;margin-left: 1.3%;float: left;">
|
<div
|
class="shelf"
|
:title="items['2_raw_thickness']+items['3_color']+' '+items['4_raw_width']+'*'+items['5_raw_height'] "
|
style="background-color: #909399;width: 100%;height: 40%;float: left;position: relative;">
|
|
<div v-if="index<=23"
|
:style="{
|
width:(items['7_left_pieces']/items['6_pieces']*100)+'%',
|
position: 'absolute',
|
left: 0,
|
height: 100+'%',
|
float: 'left',
|
'background-image':`url('../js/static/imgs/101.png')`
|
}"
|
|
|
>
|
<span style="position: absolute;left: 0;color:white;font-size:small;height: 100%;width: 100%;">{{items['7_left_pieces']+'/'+items['6_pieces']}}</span>
|
</div>
|
|
<!-- <div v-if="index==24"
|
style="background-image:url('../static/imgs/103.png');width: 0%;height: 100%;float: left;position: absolute; left: 0;">
|
<span style="position: absolute;left: 0;color:white;font-size: small;height: 100%;width: 100%;">0/50</span>
|
</div> -->
|
</div>
|
<div>
|
{{items['0_id']}}
|
</div>
|
</div>
|
<!-- <el-progress
|
width="80"
|
percentage="50"
|
:color="customColors"
|
:format="setItemText"
|
></el-progress> -->
|
|
|
<div>
|
|
</div>
|
</div>
|
<div id="left" style="width: 19.5%;height:80%;float: left;padding: 0; margin-right: 0.5%;">
|
<div style="width:100%;height: 20%;">
|
<transition name="el-fade-in">
|
<div v-show="show"
|
style="float: left;width: 100%;height: 20%;margin-top: 4%;">
|
|
<div
|
style="background-image:url('../js/static/imgs/101.png');height: 20px;width: 20px;padding: 0%;float: left;"
|
>
|
</div>
|
<p style="float: left;margin: 0;margin-left: 1.3%;">{{showGlassType}}</p>
|
|
</div>
|
</transition>
|
<!-- <div style="float: left;width: 100%;height: 46%;margin-top: 4%;">
|
|
<el-alert style="width: 80%;margin-left: 10%;background-color: transparent;"
|
title="24号架子空架，吊装空闲"
|
type="warning"
|
:closable="false"
|
show-icon>
|
<el-button @click="show1" type="warning" style="float: left;">调用吊装位</el-button>
|
</el-alert>
|
|
</div> -->
|
|
</div>
|
|
<div id="picture" style="width:100%;height: 70%;">
|
</div>
|
</div>
|
<div id="main" style="width: 80%;height:80%;float: right;padding: 0;background-color: white;">
|
<el-date-picker style="float: left;margin-bottom: 0.3%;"
|
v-model="selectdate"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
>
|
</el-date-picker>
|
|
<el-button type="primary" icon="el-icon-search"
|
style="float: left;margin-left: 0.2%;margin-bottom: 0.3%;"
|
@click="selectSub(1)"
|
>搜索</el-button>
|
|
<el-table
|
:data="tableData"
|
height="92%"
|
|
style="width: 100%">
|
<el-table-column
|
v-for="(item,keys,index) in tableHead[0]"
|
:key="index"
|
:label="item"
|
>
|
<el-table-column
|
:prop="keys"
|
>
|
<template slot="header" slot-scope="scope" >
|
<el-input v-model="selectstorage[index]" @keyup.enter.native="selectSub(1)" type="text" size="mini" />
|
</template>
|
</el-table-column>
|
</el-table-column>
|
|
|
</el-table>
|
|
</div>
|
</div>
|
<screen-photo :id="1" :intime="this.global.timer"
|
v-show="this.global.pollingIndex==1"
|
>
|
</screen-photo>
|
|
</div>
|
</body>
|
|
|
<script >
|
let app =new Vue({
|
el: '#app',
|
mixins:[mixin],
|
data:{
|
storage:null,
|
glassNumGraph:{
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
top: '5%',
|
left: 'center'
|
},
|
series: [
|
{
|
name: '数量',
|
type: 'pie',
|
radius: ['40%', '70%'],
|
avoidLabelOverlap: true,
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: '#fff',
|
borderWidth: 2
|
},
|
label: {
|
formatter:null,
|
fontSize: 20,
|
fontWeight: 'bold',show: true,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
formatter:null,
|
show: true,
|
fontSize: 20,
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: true
|
},
|
data:[
|
{ value: null, name: '未使用',itemStyle: {color:'#409EFF'} },
|
{ value: null, name: '计划中',itemStyle: {color:'#67C23A'} },
|
{ value: null, name: '已使用',itemStyle: {color:'#C0C4CC'} }
|
],
|
|
}
|
]
|
},
|
tableHead:[{}],
|
tableData:null,
|
show:true,
|
showGlassType:'',
|
showGlassIndex:0,
|
storageNum:null,
|
selectstorage:["","","","","","","","","",""],//筛选参数
|
selectdate:["",""],//日期参数
|
loading:true,
|
|
|
},
|
methods: {
|
echarsInit(){
|
let a = this.$echarts.init( document.getElementById('picture'))
|
this.glassNumGraph.series[0].data[0]['value']=this.storageNum[0]['2_weishiyong']
|
this.glassNumGraph.series[0].data[1]['value']=this.storageNum[0]['1_jihuashuliang']
|
this.glassNumGraph.series[0].data[2]['value']=this.storageNum[0]['0_yishiyong']
|
|
this.glassNumGraph.series[0].label.formatter=this.storageNum[0]['2_weishiyong']+'/'
|
+this.storageNum[0]['1_jihuashuliang']+'/'
|
+this.storageNum[0]['0_yishiyong']
|
console.log(this.glassNumGraph.series[0].data);
|
a.setOption(this.glassNumGraph)
|
},
|
|
showGlass(){
|
this.showGlassIndex=this.showGlassIndex<this.storage.length?this.showGlassIndex+1:1
|
this.show=false
|
this.showGlassType=this.storage[this.showGlassIndex-1]['0_id']+
|
'号架：'+
|
this.storage[this.showGlassIndex-1]['2_raw_thickness']+
|
this.storage[this.showGlassIndex-1]['3_color']+' '+
|
this.storage[this.showGlassIndex-1]['4_raw_width']+
|
'*'+
|
this.storage[this.showGlassIndex-1]['5_raw_height']
|
this.show=true
|
|
},
|
async selectSub(type){//输入框筛选
|
let arrObj={}
|
for(let i in this.selectstorage){
|
|
arrObj[i]=this.selectstorage[i]==''?"n*":this.selectstorage[i]
|
}
|
if(this.selectdate!=null){
|
arrObj.starttime=this.selectdate[0]
|
arrObj.endtime=this.selectdate[1]
|
}else{
|
arrObj.starttime=''
|
arrObj.endtime=''
|
}
|
arrObj.types=type
|
let sql="{call AXJ_a_largeScreen_storageLog_select(?,?,?,?,?,?,?,?,?,?,?,?,?,?)}~"+JSON.stringify(arrObj)
|
this.loading=true
|
await this.loadAjxss('订单查询',sql,2,"tableData")
|
|
this.loading=false
|
},
|
|
},
|
|
|
watch:{
|
storageNum(){
|
this.loading=false,
|
this.echarsInit()
|
}
|
},
|
|
async mounted() {
|
|
let sql=""
|
let flag=2
|
sql="{call AXJ_a_largeScreen_storageLog__headselect()}"
|
await this.loadAjxss('大屏显示仓储表头',sql,flag,"tableHead")
|
|
let timer1=await setInterval(()=>{
|
sql="{call AXJ_a_largeScreen_storageRack_select()}"
|
this.interValLoadAjxs('大屏显示仓储架子',sql,flag,"storage",timer1)
|
},3000)
|
let timer2=await setInterval(() => {
|
sql="{call AXJ_a_largeScreen_storageGlassNum_select()}"
|
this.interValLoadAjxs('大屏显示仓储剩余数量',sql,flag,"storageNum",timer2)
|
this.showGlass()
|
}, 3000);
|
await this.selectSub(0)
|
this.onmouseMove()
|
},
|
|
})
|
|
|
</script>
|
</html>
|
