247 lines
8.0 KiB
Vue
247 lines
8.0 KiB
Vue
<template>
|
|
<div class="login" :style="'background-image:url('+ Background +');'">
|
|
<div style="font-size: 42px; color: #f4f4f5; text-align: center; background-color: transparent;padding-top: 20px;">
|
|
{{ $t('task.screen.title') }}
|
|
</div>
|
|
<div>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<div class="grid-content bg-purple-light">
|
|
<h2 style="font-size: 50px; color: #f4f4f5;margin-left: 100px;padding-top: 10px;">
|
|
{{ $t('task.screen.task_screen') }}</h2></div>
|
|
<div class="grid-content bg-purple-light">
|
|
<el-form
|
|
:inline="true"
|
|
label-position="right"
|
|
label-suffix=":"
|
|
>
|
|
<el-form-item class="custom-label" :label="$t('task.screen.device')" style="margin-left: 100px;">
|
|
<el-select
|
|
id="item-size"
|
|
v-model="device"
|
|
clearable
|
|
filterable
|
|
size="small"
|
|
:placeholder="$t('auto.common.please')"
|
|
@change="changeDevice"
|
|
>
|
|
<el-option
|
|
v-for="item in ledList"
|
|
:key="item.device_code"
|
|
:label="item.device_name"
|
|
:value="item.device_code"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<div class="grid-content bg-purple-light">
|
|
<h2 style="font-size: 50px; color: #f4f4f5;text-align:right;margin-right: 140px;">{{ getTime }}</h2>
|
|
</div>
|
|
<div class="grid-content bg-purple-light">
|
|
<p style="font-size: 50px; color: #f4f4f5;text-align:right;margin-right: 110px;"><b>{{ getDate }}</b></p>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<el-form
|
|
v-if="device!=''"
|
|
ref="form"
|
|
style="margin-top: 50px;padding-top: 10px"
|
|
:model="form"
|
|
:rules="rules"
|
|
size="small"
|
|
label-width="200px"
|
|
>
|
|
<el-row>
|
|
<el-col :span="12" style="padding-left: 100px">
|
|
<el-form-item class="custom-label" style="padding-bottom: 50px" prop="task_code" :label="$t('task.screen.task_code')">
|
|
<el-input v-model="form.task_code" class="cpp" />
|
|
</el-form-item>
|
|
<el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.inst_code')" prop="inst_code">
|
|
<el-input v-model="form.inst_code" class="cpp" />
|
|
</el-form-item>
|
|
<el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.start')" prop="start_device_code">
|
|
<el-input v-model="form.start_device_code" class="cpp" />
|
|
</el-form-item>
|
|
<el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.end')" prop="next_device_code">
|
|
<el-input v-model="form.next_device_code" class="cpp" />
|
|
</el-form-item>
|
|
<el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.material')" prop="material_type">
|
|
<el-input v-model="form.material_type" class="cpp" />
|
|
<span style="color: #f4f4f5;margin-left: 10px;" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12" style="padding-left: 100px">
|
|
<el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.material_num')" prop="quantity">
|
|
<el-input v-model="form.quantity" class="cpp" />
|
|
<span style="color: #f4f4f5;margin-left: 10px;" />
|
|
</el-form-item>
|
|
<el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.vehicle_code')" prop="vehicle_code">
|
|
<el-input v-model="form.vehicle_code" class="cpp" />
|
|
<span style="color: #f4f4f5;margin-left: 10px;" />
|
|
</el-form-item>
|
|
<el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.bar')" prop="instruction_status">
|
|
<el-input v-model="form.instruction_status" class="cpp" />
|
|
<span style="color: #f4f4f5;margin-left: 10px;" />
|
|
</el-form-item>
|
|
<el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.create_time')" prop="entry_time">
|
|
<el-input v-model="form.entry_time" class="cpp" />
|
|
<span style="color: #f4f4f5;margin-left: 10px;" />
|
|
</el-form-item>
|
|
<el-form-item class="custom-label" style="padding-bottom: 50px" :label="$t('task.screen.IP')" prop="ip">
|
|
<el-input v-model="form.ip" class="cpp" />
|
|
<span style="color: #f4f4f5;margin-left: 10px;" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div
|
|
v-if="device!=''"
|
|
style="font-size: 30px; color: #f4f4f5; text-align: center; background-color: transparent;padding-top: 50px;"
|
|
>
|
|
<i class="el-icon-lock" />
|
|
http://127.0.0.1:8014/bigScreen/screen
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import crud from '@/mixins/crud'
|
|
import deviceCrud from '@/api/monitor/screen'
|
|
import Background from '@/assets/images/bigScreen.png'
|
|
import BackgroundTwo from '@/assets/images/bigScreenTwo.png'
|
|
|
|
export default {
|
|
mixins: [crud],
|
|
data() {
|
|
return {
|
|
Background: Background,
|
|
BackgroundTwo: BackgroundTwo,
|
|
device_code: '',
|
|
device_id: '',
|
|
device: '',
|
|
vehicle_code: '',
|
|
bar_code: '',
|
|
entry_time: '',
|
|
ip: '',
|
|
form: {
|
|
task_code: '',
|
|
inst_code: '',
|
|
start_device_code: '',
|
|
next_device_code: '',
|
|
material_type: '',
|
|
quantity: '',
|
|
vehicle_code: '',
|
|
instruction_status: '',
|
|
entry_time: '',
|
|
ip: ''
|
|
},
|
|
ledList: [],
|
|
getTime: '',
|
|
getDate: '',
|
|
src: '../images/bigScreen.png'
|
|
}
|
|
},
|
|
mounted() {
|
|
this.init()
|
|
// 定时器
|
|
const timer = setInterval(() => {
|
|
this.settime()// 你所加载数据的方法
|
|
this.getMessage()
|
|
}, 10000)
|
|
// 销毁定时器
|
|
this.$once('hook:beforeDestroy', () => {
|
|
clearInterval(timer)
|
|
})
|
|
},
|
|
beforeDestroy() {
|
|
// js提供的clearInterval方法用来清除定时器
|
|
console.log('定时器销毁')
|
|
clearInterval(this.timer)
|
|
},
|
|
|
|
created() {
|
|
this.$nextTick(() => {
|
|
deviceCrud.selectLedList().then(data => {
|
|
this.ledList = data
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
changeDevice(val) {
|
|
this.device = val
|
|
deviceCrud.getLedMessage(this.device).then(data => {
|
|
this.form = data
|
|
})
|
|
// todo: 定时器
|
|
this.timer = setInterval(() => { // 定时刷新设备的状态信息
|
|
console.log('定时器启动')
|
|
this.initStatus()
|
|
}, 10000)
|
|
},
|
|
getMessage() {
|
|
deviceCrud.getLedMessage(this.device).then(data => {
|
|
this.form = data
|
|
})
|
|
},
|
|
settime() {
|
|
const _this = this
|
|
const yy = new Date().getFullYear()
|
|
const mm = new Date().getMonth() + 1
|
|
const dd = new Date().getDate()
|
|
const hh = new Date().getHours()
|
|
const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
|
|
const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
|
|
_this.getDate = yy + '年' + mm + '月' + dd + '日 ' + '星期' + '日一二三四五六'.charAt(new Date().getDay())
|
|
_this.getTime = hh + ':' + mf + ':' + ss
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.login {
|
|
height: 100%;
|
|
background-size: cover;
|
|
}
|
|
</style>
|
|
<style>
|
|
/*.item .el-form-item__label {*/
|
|
/* color: white;*/
|
|
/* font-size: 34px;*/
|
|
/*}*/
|
|
|
|
.cpp {
|
|
width: 500px;
|
|
font-size: 40px;;
|
|
text-align: center;
|
|
}
|
|
/*.ppd {*/
|
|
/* height: 301%;*/
|
|
/* width: 350px;*/
|
|
/* margin-left: 10px;*/
|
|
/* font-size: 30px;;*/
|
|
/* text-align: center;*/
|
|
/*}*/
|
|
|
|
.custom-label .el-form-item__label {
|
|
font-size: 40px;
|
|
color: white;
|
|
}
|
|
|
|
.custom-label .el-input__inner {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
|
|
#item-size {
|
|
font-size: 37px;
|
|
width: 200px;
|
|
}
|
|
</style>
|
|
|