703 lines
24 KiB
Vue
703 lines
24 KiB
Vue
<!--
|
||
* @Author: zwq
|
||
* @Date: 2021-07-19 15:18:30
|
||
* @LastEditors: zhp
|
||
* @LastEditTime: 2024-04-03 10:54:53
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<div id="container" ref="container" class="visual-container" :style="styles">
|
||
<el-row class="container-title" :style="{
|
||
height: 88 + 'px',
|
||
lineHeight: 88 + 'px',
|
||
fontSize: 31 + 'px'
|
||
}">
|
||
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
|
||
许昌安彩AGV原片周转看板
|
||
<h3 class="unit">单位：河南汇融数字科技有限公司</h3>
|
||
<h3 class="time">{{ times }}</h3>
|
||
<!-- <el-button type="text" class="title-button" :style="{ right: 18 + 'px', top: 26 + 'px', fontSize: '32px' }"
|
||
@click="changeFullScreen">
|
||
<svg-icon width="32" height="32" v-if="isFullScreen" icon-class="unFullScreenView" />
|
||
<svg-icon width="32" height="32" v-else icon-class="fullScreenView" />
|
||
</el-button> -->
|
||
</el-row>
|
||
<el-row class="container-main flex-col" type="flex">
|
||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15 * beilv" type="flex" class="flex-1">
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||
<base-container :beilv="1" :size="'eqStatus'" :title="'搬运任务'" :title-icon="'task'" :back="'energy'">
|
||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
|
||
:table-data="qualityYearList" /> -->
|
||
<dv-scroll-board :config="taskConfig" style="width:100%;height:350px" ref='taskScrollBoard' />
|
||
</base-container>
|
||
</el-col>
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||
<base-container :beilv="1" :size="'eqStatus'" :title="'周转进度'" :title-icon="'order'" :back="'energy'">
|
||
<div class="order" style="width:100%; overflow: hidden scroll;height: 350px;">
|
||
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: .5em">
|
||
<!-- <p v-if="op.outRate === 1" class="now-secondary-title"
|
||
style="font-size: 14px; opacity: calc(.6);color:#4679FD">
|
||
<i class="el-icon-check" />
|
||
{{ op.name }}
|
||
</p> -->
|
||
<!-- <p class="now-secondary-title">{{ op.name }}</p> -->
|
||
<p class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</p>
|
||
<el-progress style="width: 935px;" text-color="rgba(255, 255, 255, .6)" :stroke-width="10"
|
||
define-back-color="rgba(32, 57, 96, 1)" :percentage="op.outRate * 100" class="custom-progress-bar" />
|
||
</el-row>
|
||
</div>
|
||
</base-container>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1">
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||
<base-container :beilv="1" :height="280" :size="'eqStatus'" :title="'库存管理'" :title-icon="'productLine'"
|
||
:back="'energy'">
|
||
<!-- <base-table :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
|
||
:table-data="inventoryList" /> -->
|
||
<dv-scroll-board :config="inventoryConfig" style="width:100%;height:380px" ref='inventoryScrollBoard' />
|
||
</base-container>
|
||
</el-col>
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||
<base-container :beilv="1" :height="318 + 338 + 16" :size="'eqStatus'" :title="'库位信息'" :title-icon="'info'"
|
||
:back="'energy'">
|
||
<!-- <base-table2 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="locationTableProps"
|
||
:table-data="locationList" /> -->
|
||
<dv-scroll-board :config="locationConfig" style="width:100%;height:380px" ref='locationScrollBoard' />
|
||
</base-container>
|
||
</el-col>
|
||
</el-row>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import baseContainer from './components/baseContainer'
|
||
import baseTable1 from './components/baseTable'
|
||
import baseTable from './components/baseTable'
|
||
import baseTable2 from './components/baseTable'
|
||
import screenfull from 'screenfull'
|
||
const locationTableProps = [
|
||
{
|
||
prop: 'eqName',
|
||
label: '库位名称'
|
||
},
|
||
{
|
||
prop: 'eqCode',
|
||
label: '存放物件名称'
|
||
},
|
||
{
|
||
prop: 'productCode',
|
||
label: '编码'
|
||
},
|
||
{
|
||
prop: 'level',
|
||
label: '存放位置',
|
||
// subcomponent: alarmLevel,
|
||
// align: 'center'
|
||
},
|
||
{
|
||
prop: 'unit',
|
||
label: '单位',
|
||
// subcomponent: alarmLevel,
|
||
// align: 'center'
|
||
},
|
||
{
|
||
prop: 'product',
|
||
label: '数量'
|
||
},
|
||
{
|
||
prop: 'time',
|
||
label: '入库时间'
|
||
}
|
||
]
|
||
|
||
const locationList = [
|
||
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
||
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
|
||
{
|
||
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
|
||
},
|
||
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
||
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
|
||
{
|
||
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
|
||
},
|
||
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
||
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
|
||
{
|
||
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
|
||
},
|
||
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
||
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
|
||
{
|
||
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
|
||
},
|
||
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
||
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
|
||
{
|
||
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
|
||
}
|
||
]
|
||
const inventoryTableProps = [
|
||
{
|
||
prop: 'eqName',
|
||
label: '物件名称'
|
||
},
|
||
{
|
||
prop: 'eqCode',
|
||
label: '存放区域'
|
||
},
|
||
{
|
||
prop: 'productCode',
|
||
label: '编码'
|
||
},
|
||
{
|
||
prop: 'level',
|
||
label: '规格',
|
||
// subcomponent: alarmLevel,
|
||
// align: 'center'
|
||
},
|
||
{
|
||
prop: 'unit',
|
||
label: '单位',
|
||
// subcomponent: alarmLevel,
|
||
// align: 'center'
|
||
},
|
||
{
|
||
prop: 'product',
|
||
label: '数量'
|
||
},
|
||
{
|
||
prop: 'time',
|
||
label: '入库时间'
|
||
}
|
||
]
|
||
|
||
const inventoryList = [
|
||
{ eqName: '原片', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
||
{ eqName: '磨轮', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000158', unit: '片', time: '2023年9月10日' },
|
||
{
|
||
eqName: ' 包装辅材', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000157', unit: '片', time: '2023年9月10日' },
|
||
{
|
||
eqName: ' 螺丝刀', eqCode: '备件库', level: '', product: ' 123', productCode: 'WLXX20220919000147', unit: '个', time: '2023年9月10日' },
|
||
{
|
||
eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日' },
|
||
{ eqName: '原片', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
||
{ eqName: '磨轮', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000158', unit: '片', time: '2023年9月10日' },
|
||
{
|
||
eqName: ' 包装辅材', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000157', unit: '片', time: '2023年9月10日'
|
||
},
|
||
{
|
||
eqName: ' 螺丝刀', eqCode: '备件库', level: '', product: ' 123', productCode: 'WLXX20220919000147', unit: '个', time: '2023年9月10日'
|
||
},
|
||
{
|
||
eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
|
||
},
|
||
{
|
||
eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
|
||
},
|
||
{
|
||
eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
|
||
},
|
||
{
|
||
eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
|
||
}
|
||
]
|
||
const qualityYearTableProps = [
|
||
{
|
||
prop: 'eqName',
|
||
label: '作业号'
|
||
},
|
||
{
|
||
prop: 'eqCode',
|
||
label: '执行叉车'
|
||
},
|
||
{
|
||
prop: 'level',
|
||
label: '库位',
|
||
// subcomponent: alarmLevel,
|
||
// align: 'center'
|
||
},
|
||
{
|
||
prop: 'product',
|
||
label: '成品规格'
|
||
},
|
||
{
|
||
prop: 'productCode',
|
||
label: '成品编码'
|
||
},
|
||
{
|
||
prop: 'time',
|
||
label: '时间'
|
||
}
|
||
]
|
||
|
||
const qualityYearList = [
|
||
{ eqName: 'RQ20230910', eqCode: '1-01', level: '成品库D-D区-14', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月10日' },
|
||
{ eqName: 'RQ20230911', eqCode: '1-02', level: '成品库A-A区-1', product: ' 3.2-1033*2089', productCode: 'CP563232323', time: '2023年9月11日' },
|
||
{ eqName: 'RQ20230912', eqCode: '2-01', level: '成品库D-D区-1', product: ' 1.2-1033*2089', productCode: 'CP5651696321', time: '2023年9月12日' },
|
||
{ eqName: 'RQ20230913', eqCode: '1-03', level: '成品库A-B区-1', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月13日' },
|
||
{ eqName: 'RQ20230914', eqCode: '2-02', level: '成品库D-D区-2', product: ' 3.2-1033*2089', productCode: 'CP565169322', time: '2023年9月14日' },
|
||
{ eqName: 'RQ20230915', eqCode: '1-01', level: '成品库B-A区-4', product: ' 1.2-1033*2089', productCode: 'CP56516962323', time: '2023年9月15日' },
|
||
{ eqName: 'RQ20230916', eqCode: '1-03', level: '成品库A-A区-2', product: ' 2.2-1033*2089', productCode: 'CP5651694343', time: '2023年9月16日' },
|
||
{ eqName: 'RQ20230917', eqCode: '1-02', level: '成品库C-D区-12', product: '4.2-1033*2089', productCode: 'CP5651692323', time: '2023年9月17日' },
|
||
{ eqName: 'RQ20230918', eqCode: '2-01', level: '成品库A-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696232', time: '2023年9月18日' },
|
||
{ eqName: 'RQ20230919', eqCode: '2-02', level: '成品库C-D区-9', product: ' 1.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月19日' },
|
||
{ eqName: 'RQ20230920', eqCode: '2-03', level: '成品库D-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
|
||
{ eqName: 'RQ20230920', eqCode: '2-04', level: '成品库D-D区-4', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
|
||
{ eqName: 'RQ20230920', eqCode: '2-05', level: '成品库A-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
|
||
{ eqName: 'RQ20230920', eqCode: '3-03', level: '成品库B-D区-4', product: ' 3.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
|
||
{ eqName: 'RQ20230920', eqCode: '1-03', level: '成品库C-D区-4', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' }
|
||
]
|
||
export default {
|
||
name: 'ProductionMonitoringCockpit',
|
||
components: {
|
||
baseContainer,
|
||
baseTable1,
|
||
baseTable,
|
||
baseTable2
|
||
// TopRadioGroup,
|
||
// doubleYChart
|
||
// LinearBarChart
|
||
// pieChart1,
|
||
// pieChart2
|
||
// pieChart3
|
||
// BaseVideo
|
||
},
|
||
data() {
|
||
return {
|
||
beilv: 1,
|
||
beilv2: 1,
|
||
clientWidth: 0,
|
||
times:undefined,
|
||
value: 100,
|
||
qualityYearTableProps,
|
||
inventoryTableProps,
|
||
inventoryList,
|
||
locationList,
|
||
taskConfig: {
|
||
header: ['序号', '作业号', '执行叉车', '库位', '成品规格', '成品编码', '时间'],
|
||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||
columnWidth: [80, 120, 90, 140, 140, 150,130],
|
||
align: ['center'],
|
||
data: [],
|
||
// index:true,
|
||
rowNum: 10
|
||
},
|
||
inventoryConfig: {
|
||
header: ['序号', '物件名称', '存放区域', '规格', '数量', '单位', '编码', '入库时间'],
|
||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||
columnWidth: [80, 100, 90, 140, 80, 70, 180, 120],
|
||
align: ['center'],
|
||
data: [],
|
||
// index:true,
|
||
rowNum: 10
|
||
},
|
||
locationConfig: {
|
||
header: ['序号', '库位名称', '存放物件名称', '数量', '存放位置', '编码', '单位', '入库时间'],
|
||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||
columnWidth: [80, 100, 120, 80, 100, 180, 70, 120],
|
||
align: ['center'],
|
||
data: [],
|
||
// index:true,
|
||
rowNum: 10
|
||
},
|
||
locationTableProps,
|
||
qualityYearList,
|
||
isFullScreen: false,
|
||
orderProcessList: [
|
||
{
|
||
name: '作业号RQ232323',
|
||
outRate: '0.8'
|
||
},
|
||
{
|
||
name: '作业号RQ2232232',
|
||
outRate: '0.7'
|
||
},
|
||
{
|
||
name: '作业号RQ2232232',
|
||
outRate: '1'
|
||
},
|
||
{
|
||
name: '作业号RQ2545444',
|
||
outRate: '0.6'
|
||
},
|
||
{
|
||
name: '作业号RQ232322',
|
||
outRate: '0.5'
|
||
},
|
||
{
|
||
name: '作业号RQ20230911',
|
||
outRate: '0.4'
|
||
},
|
||
{
|
||
name: '作业号RQ20230911',
|
||
outRate: '0.4'
|
||
},
|
||
{
|
||
name: '作业号RQ20230911',
|
||
outRate: '0.4'
|
||
}, {
|
||
name: '作业号RQ20230911',
|
||
outRate: '0.4'
|
||
}, {
|
||
name: '作业号RQ20230911',
|
||
outRate: '0.4'
|
||
}
|
||
],
|
||
// qualityTableProps1,
|
||
modelMonth: '',
|
||
// logoutTime: 43200000,
|
||
// qualityTableProps2,
|
||
// qualityList2,
|
||
dateType: '0',
|
||
}
|
||
},
|
||
computed: {
|
||
// ...mapGetters(['sidebar']),
|
||
styles() {
|
||
const v = Math.floor(this.value * this.beilv2 * 100) / 10000
|
||
return {
|
||
transform: `scale(${v})`,
|
||
transformOrigin: 'top left'
|
||
}
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
isFullScreen: function (val) {
|
||
if (val) {
|
||
const _this = this;
|
||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||
console.log(_this.beilv2);
|
||
} else {
|
||
const _this = this;
|
||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||
}
|
||
},
|
||
clientWidth(val) {
|
||
if (!this.timer) {
|
||
this.clientWidth = val
|
||
this.beilv2 = this.clientWidth / 1920
|
||
this.timer = true
|
||
let _this = this
|
||
setTimeout(function () {
|
||
_this.timer = false
|
||
}, 500)
|
||
}
|
||
// 这里可以添加修改时的方法
|
||
this.windowWidth(val);
|
||
}
|
||
},
|
||
created() {
|
||
// this.fetchList('exception-alarm')
|
||
// this.fetchList('inAndOutOfEachLine')
|
||
// this.fetchList('order-process')
|
||
// this.fetchList('line-chart-data')
|
||
this.init()
|
||
this.getTimes()
|
||
this.windowWidth(document.documentElement.clientWidth)
|
||
setTimeout(() => {
|
||
window.location.reload()
|
||
}, 86400000)
|
||
},
|
||
mounted() {
|
||
this.getTask()
|
||
this.getInventoryData()
|
||
this.getLocationData()
|
||
const _this = this;
|
||
window.onresize = () => {
|
||
return (() => {
|
||
_this.clientWidth = `${document.documentElement.clientWidth}`
|
||
this.beilv2 = _this.clientWidth / 1920
|
||
})()
|
||
}
|
||
},
|
||
methods: {
|
||
getTimes() {
|
||
setInterval(this.getTimesInterval, 1000);
|
||
},
|
||
getTask() {
|
||
let eqArr = this.qualityYearList.map((item, index) => [
|
||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||
</span>`,
|
||
// formatDate(item.planStartTime) || '',
|
||
`
|
||
<span style="color:rgba(255,255,255,0.5)" >${item.eqName || ''}
|
||
</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.eqCode || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.level || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.product || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.productCode || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
|
||
|
||
])
|
||
this.taskConfig.data = eqArr
|
||
this.$refs['taskScrollBoard'].updateRows(eqArr)
|
||
},
|
||
getInventoryData() {
|
||
let eqArr = this.inventoryList.map((item, index) => [
|
||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||
</span>`,
|
||
// formatDate(item.planStartTime) || '',
|
||
`
|
||
<span style="color:rgba(255,255,255,0.5)" >${item.eqName || ''}
|
||
</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.eqCode || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.level || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.product || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.unit || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.productCode || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
|
||
])
|
||
this.inventoryConfig.data = eqArr
|
||
this.$refs['inventoryScrollBoard'].updateRows(eqArr)
|
||
},
|
||
getLocationData() {
|
||
let eqArr = this.locationList.map((item, index) => [
|
||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||
</span>`,
|
||
// formatDate(item.planStartTime) || '',
|
||
`
|
||
<span style="color:rgba(255,255,255,0.5)" >${item.eqName || ''}
|
||
</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.eqCode || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.product || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.level || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.productCode || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.unit || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
|
||
])
|
||
this.locationConfig.data = eqArr
|
||
this.$refs['locationScrollBoard'].updateRows(eqArr)
|
||
},
|
||
getTimesInterval: function () {
|
||
let _this = this;
|
||
let year = new Date().getFullYear(); //获取当前时间的年份
|
||
let month = new Date().getMonth() + 1; //获取当前时间的月份
|
||
let day = new Date().getDate(); //获取当前时间的天数
|
||
let hours = new Date().getHours(); //获取当前时间的小时
|
||
let minutes = new Date().getMinutes(); //获取当前时间的分数
|
||
let seconds = new Date().getSeconds(); //获取当前时间的秒数
|
||
//当小于 10 的是时候，在前面加 0
|
||
if (hours < 10) {
|
||
hours = "0" + hours;
|
||
}
|
||
if (minutes < 10) {
|
||
minutes = "0" + minutes;
|
||
}
|
||
if (seconds < 10) {
|
||
seconds = "0" + seconds;
|
||
}
|
||
//拼接格式化当前时间
|
||
this.times = year + "." + month + "." + day + " " + hours + ":" + minutes + ":" + seconds;
|
||
},
|
||
windowWidth(value) {
|
||
this.clientWidth = value
|
||
},
|
||
change() {
|
||
this.isFullScreen = screenfull.isFullscreen
|
||
},
|
||
init() {
|
||
if (screenfull.isEnabled) {
|
||
screenfull.on('change', this.change)
|
||
}
|
||
},
|
||
destroy() {
|
||
if (screenfull.isEnabled) {
|
||
screenfull.off('change', this.change)
|
||
}
|
||
},
|
||
changeFullScreen() {
|
||
console.log(this.beilv);
|
||
if (!screenfull.isEnabled) {
|
||
this.$message({
|
||
message: 'you browser can not work',
|
||
type: 'warning'
|
||
})
|
||
return false
|
||
}
|
||
screenfull.toggle()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.visual-container {
|
||
width: 1920px;
|
||
height: 1080px;
|
||
background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
|
||
background-size: cover;
|
||
// opacity: .8;
|
||
.container-title {
|
||
width: 100%;
|
||
background: url('../../assets/img/OperationalOverview/AGV.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #00fff0;
|
||
text-align: center;
|
||
letter-spacing: 8px;
|
||
// word-spacing: 8px;
|
||
position: relative;
|
||
.unit {
|
||
position: absolute;
|
||
left: 240px;
|
||
top: 25px;
|
||
color: rgba(255, 255, 255, 0.80);
|
||
font-size: 20px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.time {
|
||
position: absolute;
|
||
left: 1400px;
|
||
top: 25px;
|
||
color: rgba(255, 255, 255, 0.80);
|
||
font-size: 20px;
|
||
letter-spacing: .72px;
|
||
}
|
||
.title-button {
|
||
color: #00fff0;
|
||
font-size: 20px;
|
||
position: absolute;
|
||
}
|
||
}
|
||
|
||
.container-main {
|
||
padding: 10px;
|
||
}
|
||
}
|
||
|
||
.now-team-title {
|
||
margin: 0;
|
||
margin-top: -1em;
|
||
font-size: 1.2em;
|
||
line-height: 2em;
|
||
color: #fff;
|
||
}
|
||
|
||
.main-title {
|
||
text-align: center;
|
||
}
|
||
|
||
.now-secondary-title {
|
||
margin: 0;
|
||
font-size: 1em;
|
||
line-height: 2em;
|
||
color: #fff;
|
||
}
|
||
|
||
.now-team-content {
|
||
font-size: 3em;
|
||
line-height: 1em;
|
||
color: #52fff1;
|
||
text-align: center;
|
||
}
|
||
|
||
::v-deep .el-progress-bar__inner {
|
||
background-color: unset;
|
||
background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
||
}
|
||
::v-deep .el-progress__text {
|
||
width: 50px;
|
||
margin-top: -70px;
|
||
margin-left: 834px;
|
||
text-align: right;
|
||
// background-color: unset;
|
||
// background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
||
}
|
||
.visual-select {
|
||
position: absolute;
|
||
right: 1em;
|
||
top: 2em;
|
||
}
|
||
|
||
// .container-main {
|
||
// padding: 5px;
|
||
// }
|
||
.order::-webkit-scrollbar{
|
||
display: none
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" >
|
||
.visual-container {
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
background-color: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-track-piece {
|
||
background: #1b2b3d;
|
||
}
|
||
|
||
::-webkit-scrollbar-corner {
|
||
background: #1b2b3d;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
width: 6px;
|
||
background: #1b2b3d;
|
||
-webkit-border-radius: 2em;
|
||
-moz-border-radius: 2em;
|
||
border-radius: 2em;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgba($color: #5bc4be, $alpha: 0.7);
|
||
background-clip: padding-box;
|
||
min-height: 28px;
|
||
-webkit-border-radius: 2em;
|
||
-moz-border-radius: 2em;
|
||
border-radius: 2em;
|
||
transition: background-color 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba($color: #5bc4be, $alpha: 1);
|
||
}
|
||
}
|
||
.el-input {
|
||
min-height: 10px;
|
||
}
|
||
|
||
// .el-input__inner {
|
||
// background-color: rgba($color: #31878c, $alpha: 0.29);
|
||
// border: rgba($color: #31878c, $alpha: 0.29);
|
||
// color: aliceblue;
|
||
// }
|
||
|
||
.el-divider--vertical {
|
||
height: 174px;
|
||
width: 1px;
|
||
border: rgba(255, 255, 255, 0.15);
|
||
color: rgba(255, 255, 255, 0.15);
|
||
margin-left: 3em;
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
.flex-col {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.flex-1 {
|
||
flex: 1 1;
|
||
}
|
||
.h-full {
|
||
height: calc(100vh - 150px);
|
||
}
|
||
/* .container-main {
|
||
min-height: calc(100vh - 10em);
|
||
} */
|
||
</style>
|