923 lines
25 KiB
Vue
923 lines
25 KiB
Vue
|
<!--
|
||
|
|
* @Author: zwq
|
||
|
|
* @Date: 2022-01-19 10:33:36
|
||
|
|
* @LastEditors: zhp
|
||
|
|
* @LastEditTime: 2022-01-25 17:12:14
|
||
|
|
* @Description:
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div id="container" ref="container" class="visual-container">
|
||
|
|
<el-row
|
||
|
|
class="container-title"
|
||
|
|
:style="{ height: beilv * 88 + 'px', lineHeight: beilv * 88 + 'px', fontSize: beilv * 28 + 'px' }"
|
||
|
|
>
|
||
|
|
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
|
||
|
|
合肥新能源数智工厂生产运营中心驾驶舱
|
||
|
|
<el-button
|
||
|
|
type="text"
|
||
|
|
class="title-button"
|
||
|
|
:style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
|
||
|
|
@click="changeFullScreen"
|
||
|
|
>
|
||
|
|
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
|
||
|
|
<svg-icon v-else icon-class="fullScreenView" />
|
||
|
|
</el-button>
|
||
|
|
</el-row>
|
||
|
|
<el-row class="container-main" style="height: 100vh;">
|
||
|
|
<!-- <el-row :style="{ height: '100%', padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv"> -->
|
||
|
|
<el-col style="display: flex; flex-direction: column;">
|
||
|
|
<el-row type="flex" class="flex-1" :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
|
||
|
|
<!-- 当前班组情况 -->
|
||
|
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="6">
|
||
|
|
<base-container title="当前班组情况" title-icon="currentGroup" :beilv="beilv">
|
||
|
|
<base-table
|
||
|
|
:page="1"
|
||
|
|
:limit="6"
|
||
|
|
:show-index="false"
|
||
|
|
:beilv="beilv"
|
||
|
|
:table-config="gourpTableHeadProps"
|
||
|
|
:table-data="groupList"
|
||
|
|
/>
|
||
|
|
</base-container>
|
||
|
|
</el-col>
|
||
|
|
<!-- 公用工程 -->
|
||
|
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="12">
|
||
|
|
<base-container title="公用工程" title-icon="publicWork" :beilv="beilv" :height="323">
|
||
|
|
<div :style="{ height: 180 * beilv + 'px' }">
|
||
|
|
<div style="position: absolute; top: 24px; left: 5%; width: 90%;">
|
||
|
|
<line-chart
|
||
|
|
:id="'line-chart'"
|
||
|
|
:legend-data="legendData"
|
||
|
|
:beilv="beilv"
|
||
|
|
:show-legend="true"
|
||
|
|
:height="'265'"
|
||
|
|
:style="{ margin: 20 * beilv + 'px' + ' 0' }"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</base-container>
|
||
|
|
</el-col>
|
||
|
|
<!-- 各产线生产信息 -->
|
||
|
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="6">
|
||
|
|
<base-container title="各产线生产信息" title-icon="productLine" :beilv="beilv" :height="316">
|
||
|
|
<!-- <Top-group :label-list="productTopList" /> -->
|
||
|
|
<top-radio-group key="radio-group-1" />
|
||
|
|
<base-table
|
||
|
|
:page="1"
|
||
|
|
:limit="5"
|
||
|
|
:show-index="false"
|
||
|
|
:beilv="beilv"
|
||
|
|
:table-config="productTableProps"
|
||
|
|
:table-data="productList"
|
||
|
|
/>
|
||
|
|
</base-container>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row type="flex" class="flex-1" :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
|
||
|
|
<!-- 设备运行信息 -->
|
||
|
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="6">
|
||
|
|
<base-container title="设备运行信息" title-icon="runInfo" :beilv="beilv" :height="400">
|
||
|
|
<!-- radio-group -->
|
||
|
|
<div style="width: 100%;margin: 0 0 8px;border-radius:4px;overflow: hidden;">
|
||
|
|
<ul style="list-style:none;margin: 0;padding:0;display: flex;cursor: pointer;">
|
||
|
|
<li
|
||
|
|
v-for="item in lineRadioList"
|
||
|
|
:key="item.value"
|
||
|
|
class="line-radio"
|
||
|
|
:class="{ 'line-radio-checked': item.value === lineRadioModel }"
|
||
|
|
@click="handleLineRadioChange(item.value)"
|
||
|
|
>
|
||
|
|
{{ item.name }}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<base-table
|
||
|
|
:beilv="beilv"
|
||
|
|
:page="1"
|
||
|
|
:limit="6"
|
||
|
|
:show-index="false"
|
||
|
|
:table-config="runTableProps"
|
||
|
|
:table-data="runList"
|
||
|
|
/>
|
||
|
|
</base-container>
|
||
|
|
</el-col>
|
||
|
|
<!-- 仓库信息 -->
|
||
|
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="12">
|
||
|
|
<base-container title="仓库信息" title-icon="storehouse" :beilv="beilv" :height="341">
|
||
|
|
<el-row type="flex" :gutter="9 * beilv" style="position: relative; top: -12px">
|
||
|
|
<el-col :span="12">
|
||
|
|
<div :style="{ margin: 8 * beilv + 'px' + ' 0' }">原片仓</div>
|
||
|
|
<base-table
|
||
|
|
:beilv="beilv"
|
||
|
|
:page="1"
|
||
|
|
:limit="7"
|
||
|
|
:show-index="false"
|
||
|
|
:table-config="pieceTableProps"
|
||
|
|
:table-data="pieceList"
|
||
|
|
/>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<el-col :span="12">
|
||
|
|
<div :style="{ margin: 8 * beilv + 'px' + ' 0' }">原片仓</div>
|
||
|
|
<base-table
|
||
|
|
:beilv="beilv"
|
||
|
|
:page="1"
|
||
|
|
:limit="7"
|
||
|
|
:show-index="false"
|
||
|
|
:table-config="pieceTableProps"
|
||
|
|
:table-data="pieceList"
|
||
|
|
/>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</base-container>
|
||
|
|
</el-col>
|
||
|
|
<!-- 能耗 -->
|
||
|
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="6">
|
||
|
|
<base-container title="能耗" title-icon="energy" :beilv="beilv" :height="248">
|
||
|
|
<!-- radio-group -->
|
||
|
|
<div style="width: 10em; position: absolute; top: 2em; right: 2em; border-radius:4px; overflow: hidden;">
|
||
|
|
<ul style="list-style:none; margin: 0; padding:0; display: flex; cursor: pointer;">
|
||
|
|
<li
|
||
|
|
v-for="item in [{ value: 1, name: '柱状图' }, { value: 2, name: '表格' }]"
|
||
|
|
:key="item.value"
|
||
|
|
class="energy-radio"
|
||
|
|
:class="{ 'energy-radio-checked': item.value === energyRadioModel }"
|
||
|
|
@click="handleEnergyRadioChange(item.value)"
|
||
|
|
>
|
||
|
|
{{ item.name }}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<base-table
|
||
|
|
:beilv="beilv"
|
||
|
|
:page="1"
|
||
|
|
:limit="8"
|
||
|
|
:show-index="false"
|
||
|
|
:table-config="energyTableProps"
|
||
|
|
:table-data="energyList"
|
||
|
|
/>
|
||
|
|
</base-container>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
|
||
|
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||
|
|
<base-container :no-padding="true" :no-content-padding="true">
|
||
|
|
<el-col :span="18" style="position:relative; padding: 0">
|
||
|
|
<base-container
|
||
|
|
:show-line="false"
|
||
|
|
title-left-icon="energy"
|
||
|
|
title="订单情况"
|
||
|
|
title-icon="energy"
|
||
|
|
:beilv="beilv"
|
||
|
|
:height="256"
|
||
|
|
>
|
||
|
|
<base-table
|
||
|
|
:beilv="beilv"
|
||
|
|
:show-index="false"
|
||
|
|
:page="1"
|
||
|
|
:limit="6"
|
||
|
|
:table-config="orderTableProps"
|
||
|
|
:table-data="orderList"
|
||
|
|
/>
|
||
|
|
</base-container>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<el-col class="add-vertical-split-line" :span="6" style="position:relative; padding: 0">
|
||
|
|
<base-container
|
||
|
|
:show-line="false"
|
||
|
|
title-left-icon="energy"
|
||
|
|
title="质量缺陷信息年度总览"
|
||
|
|
title-icon="qualityInfo"
|
||
|
|
:beilv="beilv"
|
||
|
|
:height="256"
|
||
|
|
>
|
||
|
|
<top-radio-group key="radio-group-2" />
|
||
|
|
<base-table
|
||
|
|
:beilv="beilv"
|
||
|
|
:show-index="false"
|
||
|
|
:page="1"
|
||
|
|
:limit="5"
|
||
|
|
:table-config="runTableProps"
|
||
|
|
:table-data="runList"
|
||
|
|
/>
|
||
|
|
</base-container>
|
||
|
|
</el-col>
|
||
|
|
</base-container>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
<!-- <el-row :style="{padding: '0 ' + 9 * beilv + 'px'}" :gutter="9 * beilv">
|
||
|
|
<el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="12">
|
||
|
|
<base-container title="质量缺陷信息年度总览" title-icon="qualitydefectyear" :beilv="beilv" :height="256" />
|
||
|
|
</el-col>
|
||
|
|
<el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="6">
|
||
|
|
<base-container title="质量缺陷信息年度总览" title-icon="qualitydefectyear" :beilv="beilv" :height="314" />
|
||
|
|
</el-col>
|
||
|
|
</el-row> -->
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import baseContainer from './components/baseContainer'
|
||
|
|
// import baseContainer from './components/ProductionAndOperationCenterCockpit/baseContainer'
|
||
|
|
import { mapGetters } from 'vuex'
|
||
|
|
import screenfull from 'screenfull'
|
||
|
|
// import nowTeam from './components/ProductionAndOperationCenterCockpit/nowTeam.vue'
|
||
|
|
// import BaseTable from './components/ProductionAndOperationCenterCockpit/baseTable.vue'
|
||
|
|
import BaseTable from './components/baseTable.vue'
|
||
|
|
// import TopGroup from './components/ProductionAndOperationCenterCockpit/topGroup.vue'
|
||
|
|
import TopRadioGroup from './components/topRadioGroup'
|
||
|
|
import lineChart from './components/LineChart.vue'
|
||
|
|
import colorDiv from './components/ProductionAndOperationCenterCockpit/colorDiv.vue'
|
||
|
|
// import BaseVideo from './components/baseVideo.vue'
|
||
|
|
const gourpTableHeadProps = [
|
||
|
|
{
|
||
|
|
prop: 'currentGroup',
|
||
|
|
label: '当前班组'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'groupLeader',
|
||
|
|
label: '班组长'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'totalPeople',
|
||
|
|
label: '总人数'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'number',
|
||
|
|
label: '到岗人数'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
const qualityTableProps = [
|
||
|
|
{
|
||
|
|
prop: 'createTime',
|
||
|
|
label: '发生时间'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'content',
|
||
|
|
label: '缺陷内容'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'productLine',
|
||
|
|
label: '产线'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'process',
|
||
|
|
label: '发生工序'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
const energyTableProps = [
|
||
|
|
{
|
||
|
|
prop: 'line',
|
||
|
|
label: '产线名称',
|
||
|
|
width: 100
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'totalEnergy',
|
||
|
|
label: '总能耗(kW·h)'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'dailyEnergy',
|
||
|
|
label: '当天能耗(kW·h)'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
const pieceTableProps = [
|
||
|
|
{
|
||
|
|
prop: 'name',
|
||
|
|
label: '仓库名称'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'product',
|
||
|
|
label: '产品规格'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'number',
|
||
|
|
label: '数量'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'meter',
|
||
|
|
label: '平方米'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'package',
|
||
|
|
label: '包装数量'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
const runTableProps = [
|
||
|
|
{
|
||
|
|
prop: 'equipmentName',
|
||
|
|
label: '设备名称'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'runTime',
|
||
|
|
label: '运行时长'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'currentState',
|
||
|
|
label: '当前状态',
|
||
|
|
align: 'center'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'colour',
|
||
|
|
label: '状态颜色',
|
||
|
|
subcomponent: colorDiv
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'downTime',
|
||
|
|
label: '停机时长'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
const productTableProps = [
|
||
|
|
{
|
||
|
|
prop: 'lineName',
|
||
|
|
label: '产线名称'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'number',
|
||
|
|
label: '上片数量'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'downNumber',
|
||
|
|
label: '下片数量'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'wasteNumber',
|
||
|
|
label: '下废数量'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'scrapRatio',
|
||
|
|
label: '报废比'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'packageNumber',
|
||
|
|
label: '报废比'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
const orderTableProps = [
|
||
|
|
{
|
||
|
|
prop: 'orderNo',
|
||
|
|
label: '订单编码'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'status',
|
||
|
|
label: '执行状态'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'orderTime',
|
||
|
|
label: '下单时间'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'startTime',
|
||
|
|
label: '开始时间'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'number',
|
||
|
|
label: '数量'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'meter',
|
||
|
|
label: '平方米'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'specification',
|
||
|
|
label: '产品规格'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'successNumber',
|
||
|
|
label: '完成数量'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'proportion',
|
||
|
|
label: '完成比例'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'damage',
|
||
|
|
label: '损坏数量'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'damageRadio',
|
||
|
|
label: '损坏比例'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
const productTopList = [
|
||
|
|
{
|
||
|
|
label: '当天',
|
||
|
|
index: '0'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '本周',
|
||
|
|
index: '1'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '当月',
|
||
|
|
index: '2'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
const energyTopList = [
|
||
|
|
{
|
||
|
|
label: '柱状图',
|
||
|
|
index: '0'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '表格',
|
||
|
|
index: '1'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
const qualityList = [
|
||
|
|
{ createTime: '12:00:01', content: '报废', productLine: '钢1线', process: '磨边' },
|
||
|
|
{ createTime: '11:20:51', content: '报废', productLine: '钢1线', process: '镀膜' },
|
||
|
|
{ createTime: '11:05:21', content: '报废', productLine: '钢1线', process: '钢化' },
|
||
|
|
{ createTime: '11:02:16', content: '报废', productLine: '钢1线', process: '钢化' },
|
||
|
|
{ createTime: '10:50:49', content: '报废', productLine: '钢1线', process: '包装' },
|
||
|
|
{ createTime: '10:30:35', content: '报废', productLine: '钢1线', process: '镀膜' }
|
||
|
|
]
|
||
|
|
|
||
|
|
const groupList = [
|
||
|
|
{ currentGroup: '早班执行一组', groupLeader: '张三', totalPeople: '233', number: '22' },
|
||
|
|
{ currentGroup: '早班执行二组', groupLeader: '张四', totalPeople: '233', number: '22' },
|
||
|
|
{ currentGroup: '中班执行一组', groupLeader: '李三', totalPeople: '222', number: '25' },
|
||
|
|
{ currentGroup: '中班执行二组', groupLeader: '李四', totalPeople: '222', number: '25' },
|
||
|
|
{ currentGroup: '晚班执行一组', groupLeader: '小红', totalPeople: '111', number: '29' },
|
||
|
|
{ currentGroup: '早班执行一组', groupLeader: '张三', totalPeople: '233', number: '22' },
|
||
|
|
{ currentGroup: '早班执行二组', groupLeader: '张四', totalPeople: '233', number: '22' },
|
||
|
|
{ currentGroup: '中班执行一组', groupLeader: '李三', totalPeople: '222', number: '25' },
|
||
|
|
{ currentGroup: '中班执行二组', groupLeader: '李四', totalPeople: '222', number: '25' },
|
||
|
|
{ currentGroup: '晚班执行一组', groupLeader: '小红', totalPeople: '111', number: '29' },
|
||
|
|
{ currentGroup: '晚班执行二组', groupLeader: '小张', totalPeople: '223', number: '27' }
|
||
|
|
]
|
||
|
|
const energyList = [
|
||
|
|
{ line: '钢一线', totalEnergy: '21321311232', dailyEnergy: '23213122' },
|
||
|
|
{ line: '钢二线', totalEnergy: '32443234334', dailyEnergy: '23232322' },
|
||
|
|
{ line: '钢三线', totalEnergy: '21321312213', dailyEnergy: '43434344' },
|
||
|
|
{ line: '钢四线', totalEnergy: '21321321312', dailyEnergy: '23232155' },
|
||
|
|
{ line: '钢五线', totalEnergy: '23312232132', dailyEnergy: '26343431' },
|
||
|
|
{ line: '钢六线', totalEnergy: '23312232132', dailyEnergy: '26343431' },
|
||
|
|
{ line: '钢七线', totalEnergy: '23312232132', dailyEnergy: '26343431' },
|
||
|
|
{ line: '钢八线', totalEnergy: '23312232132', dailyEnergy: '26343431' },
|
||
|
|
{ line: '钢九线', totalEnergy: '23312232132', dailyEnergy: '26343431' },
|
||
|
|
{ line: '钢十线', totalEnergy: '21311232123', dailyEnergy: '26754545' }
|
||
|
|
]
|
||
|
|
|
||
|
|
const lineRadioList = [
|
||
|
|
{ value: 1, name: '钢一线' },
|
||
|
|
{ value: 2, name: '钢二线' },
|
||
|
|
{ value: 3, name: '钢三线' },
|
||
|
|
{ value: 4, name: '钢四线' },
|
||
|
|
{ value: 5, name: '钢五线' },
|
||
|
|
{ value: 6, name: '钢六线' }
|
||
|
|
]
|
||
|
|
|
||
|
|
const pieceList = [
|
||
|
|
{ name: '原片A区', product: '08*14*23', number: '413947', meter: '2323', package: '2132132' },
|
||
|
|
{ name: '原片B区', product: '07*14*23', number: '413947', meter: '2131', package: '2132123' },
|
||
|
|
{ name: '原片C区', product: '08*14*23', number: '413947', meter: '2323', package: '2132132' },
|
||
|
|
{ name: '原片D区', product: '07*14*23', number: '413947', meter: '2131', package: '2132123' },
|
||
|
|
{ name: '原片E区', product: '08*14*23', number: '413947', meter: '2323', package: '2132132' },
|
||
|
|
{ name: '原片F区', product: '07*14*23', number: '413947', meter: '2131', package: '2132123' },
|
||
|
|
{ name: '原片G区', product: '05*14*23', number: '413947', meter: '1232', package: '2131321' }
|
||
|
|
]
|
||
|
|
const runList = [
|
||
|
|
{ equipmentName: '磨边机', runTime: '238h', currentState: '正常', colour: 'rgba(12, 255, 30, .6)', downTime: '338h' },
|
||
|
|
{
|
||
|
|
equipmentName: '磨边后清洗剂',
|
||
|
|
runTime: '338h',
|
||
|
|
currentState: '待机',
|
||
|
|
colour: 'rgba(39, 96, 255, .6)',
|
||
|
|
downTime: '338h'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
equipmentName: '激光打印机',
|
||
|
|
runTime: '323h',
|
||
|
|
currentState: '故障停机',
|
||
|
|
colour: 'rgba(255, 12, 12, .6)',
|
||
|
|
downTime: '338h'
|
||
|
|
},
|
||
|
|
{ equipmentName: '丝印机', runTime: '12h', currentState: '正常', colour: 'rgba(255, 12, 12, .6)', downTime: '338h' },
|
||
|
|
{
|
||
|
|
equipmentName: '丝印机后烘干机',
|
||
|
|
runTime: '238h',
|
||
|
|
currentState: '报警',
|
||
|
|
colour: 'rgba(255, 12, 12, .6)',
|
||
|
|
downTime: '338h'
|
||
|
|
},
|
||
|
|
{ equipmentName: '镀膜机', runTime: '228h', currentState: '报警', colour: 'rgba(255, 12, 12, .6)', downTime: '338h' },
|
||
|
|
{ equipmentName: '固化机', runTime: '112h', currentState: '报警', colour: 'rgba(255, 12, 12, .6)', downTime: '338h' },
|
||
|
|
{ equipmentName: '钢化炉', runTime: '231h', currentState: '报警', colour: 'rgba(12, 255, 30, .6)', downTime: '338h' },
|
||
|
|
{
|
||
|
|
equipmentName: '钢化清洗机',
|
||
|
|
runTime: '145h',
|
||
|
|
currentState: '报警',
|
||
|
|
colour: 'rgba(12, 255, 30, .6)',
|
||
|
|
downTime: '338h'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
equipmentName: '成品下片机',
|
||
|
|
runTime: '190h',
|
||
|
|
currentState: '报警',
|
||
|
|
colour: 'rgba(12, 255, 30, .6)',
|
||
|
|
downTime: '338h'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
const productList = [
|
||
|
|
{
|
||
|
|
lineName: '钢一线',
|
||
|
|
number: '156',
|
||
|
|
downNumber: '23',
|
||
|
|
wasteNumber: '222',
|
||
|
|
scrapRatio: '338:1',
|
||
|
|
packageNumber: '111'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
lineName: '钢二线',
|
||
|
|
number: '233',
|
||
|
|
downNumber: '38',
|
||
|
|
wasteNumber: '222',
|
||
|
|
scrapRatio: '338:1',
|
||
|
|
packageNumber: '111'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
lineName: '钢三线',
|
||
|
|
number: '323',
|
||
|
|
downNumber: '38',
|
||
|
|
wasteNumber: '222',
|
||
|
|
scrapRatio: '338:1',
|
||
|
|
packageNumber: '111'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
lineName: '钢四线',
|
||
|
|
number: '160',
|
||
|
|
downNumber: '18',
|
||
|
|
wasteNumber: '222',
|
||
|
|
scrapRatio: '338:1',
|
||
|
|
packageNumber: '111'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
lineName: '钢五线',
|
||
|
|
number: '112',
|
||
|
|
downNumber: '68',
|
||
|
|
wasteNumber: '222',
|
||
|
|
scrapRatio: '338:1',
|
||
|
|
packageNumber: '111'
|
||
|
|
},
|
||
|
|
{ lineName: '钢六线', number: '232', downNumber: '45', wasteNumber: '222', scrapRatio: '338:1', packageNumber: '111' }
|
||
|
|
]
|
||
|
|
const orderList = [
|
||
|
|
{
|
||
|
|
orderNo: 'DB-1.12 13:24:42',
|
||
|
|
status: '正在执行',
|
||
|
|
orderTime: '04.21 13:24:42',
|
||
|
|
startTime: '10.12 13:24:42',
|
||
|
|
number: '38:1',
|
||
|
|
meter: '121',
|
||
|
|
specification: '11*32*55',
|
||
|
|
successNumber: '1211',
|
||
|
|
proportion: '45%',
|
||
|
|
damage: '212121',
|
||
|
|
damageRadio: '212:565'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
orderNo: 'DB-1.12 13:24:42',
|
||
|
|
status: '正在执行',
|
||
|
|
orderTime: '04.21 13:24:42',
|
||
|
|
startTime: '10.12 13:24:42',
|
||
|
|
number: '38:1',
|
||
|
|
meter: '121',
|
||
|
|
specification: '11*32*55',
|
||
|
|
successNumber: '1211',
|
||
|
|
proportion: '45%',
|
||
|
|
damage: '212121',
|
||
|
|
damageRadio: '212:565'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
orderNo: 'DC-1.22 13:24:42',
|
||
|
|
status: '正在执行',
|
||
|
|
orderTime: '10.22 10:24:42',
|
||
|
|
startTime: '11.02 13:24:42',
|
||
|
|
number: '138:1',
|
||
|
|
meter: '11',
|
||
|
|
specification: '10*23*55',
|
||
|
|
successNumber: '111',
|
||
|
|
proportion: '48%',
|
||
|
|
damage: '212121',
|
||
|
|
damageRadio: '32:565'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
orderNo: 'AD-1.22 13:34:42',
|
||
|
|
status: '正在执行',
|
||
|
|
orderTime: '11.22 13:24:42',
|
||
|
|
startTime: '09.12 13:24:42',
|
||
|
|
number: '238:1',
|
||
|
|
meter: '211',
|
||
|
|
specification: '09*34*55',
|
||
|
|
successNumber: '11221',
|
||
|
|
proportion: '60%',
|
||
|
|
damage: '212121',
|
||
|
|
damageRadio: '23:565'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
orderNo: 'QC-1.22 13:24:42',
|
||
|
|
status: '正在执行',
|
||
|
|
orderTime: '12.22 13:24:42',
|
||
|
|
startTime: '07.16 13:24:42',
|
||
|
|
number: '48:1',
|
||
|
|
meter: '221',
|
||
|
|
specification: '22*34*55',
|
||
|
|
successNumber: '22',
|
||
|
|
proportion: '56%',
|
||
|
|
damage: '212121',
|
||
|
|
damageRadio: '53:565'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
orderNo: 'AC-1.22 13:24:42',
|
||
|
|
status: '正在执行',
|
||
|
|
orderTime: '10.22 13:24:42',
|
||
|
|
startTime: '12.22 13:24:42',
|
||
|
|
number: '68:1',
|
||
|
|
meter: '181',
|
||
|
|
specification: '32*34*55',
|
||
|
|
successNumber: '61',
|
||
|
|
proportion: '50%',
|
||
|
|
damage: '212121',
|
||
|
|
damageRadio: '33:565'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
const legendData = [
|
||
|
|
{
|
||
|
|
name: '天燃气用量(m³)',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '用电',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '水流量',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: [150, 232, 201, 154, 190, 330, 410]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '电压',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: [320, 332, 301, 334, 390, 330, 320]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '氧气用量(m³)',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '电流',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '余热发电',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '用电',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
export default {
|
||
|
|
name: 'ProductionMonitoringCockpit',
|
||
|
|
components: {
|
||
|
|
baseContainer,
|
||
|
|
BaseTable,
|
||
|
|
// TopGroup,
|
||
|
|
TopRadioGroup,
|
||
|
|
lineChart
|
||
|
|
// BaseVideo
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
lineRadioModel: null,
|
||
|
|
energyRadioModel: null,
|
||
|
|
beilv: 1,
|
||
|
|
gourpTableHeadProps,
|
||
|
|
isFullScreen: false,
|
||
|
|
runTableProps,
|
||
|
|
energyTopList,
|
||
|
|
qualityTableProps,
|
||
|
|
pieceList,
|
||
|
|
productTableProps,
|
||
|
|
runList,
|
||
|
|
orderList,
|
||
|
|
pieceTableProps,
|
||
|
|
orderTableProps,
|
||
|
|
legendData,
|
||
|
|
qualityList,
|
||
|
|
groupList,
|
||
|
|
productTopList,
|
||
|
|
productList,
|
||
|
|
lineRadioList,
|
||
|
|
runTopList: [
|
||
|
|
{
|
||
|
|
label: '钢一线',
|
||
|
|
index: '0'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '钢一线',
|
||
|
|
index: '1'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '钢一线',
|
||
|
|
index: '2'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
energyList,
|
||
|
|
energyTableProps
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapGetters(['sidebar'])
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
isFullScreen: function(val) {
|
||
|
|
if (val) {
|
||
|
|
this.beilv = document.body.offsetWidth / 1920
|
||
|
|
} else {
|
||
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'sidebar.opened': function(val) {
|
||
|
|
console.log(val)
|
||
|
|
if (!this.isFullScreen) {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920
|
||
|
|
}, 300)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.init()
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
if (this.isFullScreen) {
|
||
|
|
this.beilv = document.body.offsetWidth / 1920
|
||
|
|
} else {
|
||
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleLineRadioChange(value) {
|
||
|
|
this.lineRadioModel = value
|
||
|
|
},
|
||
|
|
handleEnergyRadioChange(value) {
|
||
|
|
this.energyRadioModel = value
|
||
|
|
},
|
||
|
|
change() {
|
||
|
|
this.isFullScreen = screenfull.isFullscreen
|
||
|
|
},
|
||
|
|
init() {
|
||
|
|
this.lineRadioModel = 1
|
||
|
|
this.energyRadioModel = 1
|
||
|
|
if (screenfull.enabled) {
|
||
|
|
screenfull.on('change', this.change)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
destroy() {
|
||
|
|
if (screenfull.enabled) {
|
||
|
|
screenfull.off('change', this.change)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
changeFullScreen() {
|
||
|
|
if (!screenfull.enabled) {
|
||
|
|
this.$message({
|
||
|
|
message: 'you browser can not work',
|
||
|
|
type: 'warning'
|
||
|
|
})
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
screenfull.toggle(this.$refs.container)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.visual-container {
|
||
|
|
width: 100%;
|
||
|
|
min-width: 960px;
|
||
|
|
background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
.container-title {
|
||
|
|
width: 100%;
|
||
|
|
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
color: #00fff0;
|
||
|
|
text-align: center;
|
||
|
|
.title-button {
|
||
|
|
color: #00fff0;
|
||
|
|
font-size: 20px;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.container-main {
|
||
|
|
padding: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-divider--vertical {
|
||
|
|
height: 174px;
|
||
|
|
width: 1px;
|
||
|
|
border: rgba(255, 255, 255, 0.15);
|
||
|
|
color: rgba(255, 255, 255, 0.15);
|
||
|
|
}
|
||
|
|
</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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.line-radio,
|
||
|
|
.energy-radio {
|
||
|
|
display: inline-block;
|
||
|
|
flex: 1 auto;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #133648;
|
||
|
|
color: #fff;
|
||
|
|
padding: 8px 0;
|
||
|
|
transition: background-color 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.line-radio-checked,
|
||
|
|
.energy-radio-checked {
|
||
|
|
background-color: #3eb0ae;
|
||
|
|
}
|
||
|
|
|
||
|
|
.add-vertical-split-line {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.add-vertical-split-line:before {
|
||
|
|
content: '';
|
||
|
|
display: inline-block;
|
||
|
|
width: 1px;
|
||
|
|
height: 60%;
|
||
|
|
background-color: red;
|
||
|
|
background: linear-gradient(to bottom, #071020, #52fff1, #071020);
|
||
|
|
position: absolute;
|
||
|
|
top: 25%;
|
||
|
|
left: 0px;
|
||
|
|
}
|
||
|
|
</style>
|