1132 lines
34 KiB
Vue
1132 lines
34 KiB
Vue
<template>
|
||
<div id="container" ref="container" class="visual-container" :style="styles">
|
||
<el-row class="container-title" :style="{
|
||
height: 88 + 'px',
|
||
lineHeight: 88 + 'px',
|
||
fontSize: 30 + '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 + 'px', top: 37 + '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 flex-col" type="flex">
|
||
<el-row :style="{ padding: '0 ' + 9 + 'px' }">
|
||
<el-col :span="8">
|
||
<el-row >
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
||
<base-container :beilv="1" :height="460" :title="'切割数据'" :title-icon="'1_1'">
|
||
<!-- <div style="width:100%">
|
||
<el-row style="margin-bottom: 1em">
|
||
<p class="now-team-title main-title">- 报警总数 -</p>
|
||
<p class="now-team-content" style="margin:0">{{ exceptionAlarm.total }}</p>
|
||
</el-row>
|
||
</div> -->
|
||
<base-table1 :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="inciseTableProps"
|
||
:table-data="inciseList" />
|
||
</base-container>
|
||
</el-col>
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
||
<!-- 各产线投入数量和产出 -->
|
||
<base-container :beilv="1" :height="180" :title="'缺陷数据'" :title-icon="'1_3'">
|
||
<!-- <top-radio-group :data-type="0" @change-time-range="handleChangeChartTable3" /> -->
|
||
<base-table :page="1" :limit="10" :beilv="1" :table-config="qualityTableProps"
|
||
:table-data="qualityList" />
|
||
</base-container>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
|
||
<el-col :span="16">
|
||
<!-- 中间栏 -->
|
||
<el-row >
|
||
<el-col>
|
||
<!-- 各产线投入数量折线展示 -->
|
||
<el-row>
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
||
<base-container1 :beilv="1" :title="'能源监控'" :title-icon="'1_5'">
|
||
<linear-bar-chart :name-list="cxNameList" :data-list="cxDataList" :height="200" :beilv="1"
|
||
:show-legend="true" />
|
||
</base-container1>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 各产线投入产出折线展示 -->
|
||
<el-row>
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
||
<base-container1 :beilv="1" :title="'设备状态监控'" :title-icon="'1_5'">
|
||
<div class="visual-select">
|
||
<el-select v-model="modelMonth" size="mini" placeholder="">
|
||
<el-option key="1" value="钢1线" label="钢1线" default />
|
||
</el-select>
|
||
</div>
|
||
<base-table1 :page="1" :limit="5" :show-index="false" :beilv="1"
|
||
:table-config="qualityMonthTableProps" :table-data="qualityMonthList" />
|
||
</base-container1>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 成品率折线展示 -->
|
||
<el-row>
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
||
<base-container1 :beilv="1" :title="'下片数量统计'" :title-icon="'1_5'">
|
||
<linear-bar-chart :id=" 'NumCharts' " :name-list="NumList" :data-list="NumDataList" :height="225"
|
||
:beilv="1" :show-legend="true" />
|
||
</base-container1>
|
||
<!-- <base-container :beilv="1" :title="'成品率折线展示'" :title-icon="'1_6'">
|
||
<div style="position:absolute;right:2em;top:3em;width:30em;">
|
||
<top-radio-group />
|
||
</div>
|
||
<line-chart2
|
||
:id="'line-chart2'"
|
||
:show-legend="true"
|
||
:legend-position="'center'"
|
||
:legend-data="legendData"
|
||
:beilv="1"
|
||
:height="'200'"
|
||
/>
|
||
</base-container> -->
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 成品率条形图展示 -->
|
||
<!-- <el-row style="flex-grow: 1; display: flex;">
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
||
<base-container title="成品率条形图展示" title-icon="yieldline" :beilv="1">
|
||
<linear-bar-chart
|
||
:name-list="cplNameList"
|
||
:data-list="cplDataList"
|
||
:beilv="1"
|
||
:show-legend="true"
|
||
/>
|
||
</base-container>
|
||
</el-col>
|
||
</el-row> -->
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import baseContainer from './components/baseContainer'
|
||
import baseContainer1 from './components/baseContainer1'
|
||
import baseTable from './components/baseTable'
|
||
import baseTable1 from './components/baseTable'
|
||
// import baseTable3 from './components/baseTable'
|
||
// import TopRadioGroup from './components/topRadioGroup'
|
||
// import LineChart1 from './components/LineChart'
|
||
// import LineChart2 from './components/LineChart'
|
||
import LinearBarChart from './components/linearBarChart'
|
||
// import { mapGetters } from 'vuex'
|
||
import screenfull from 'screenfull'
|
||
// import ThreeBarChart from './components/threeBarChart.vue'
|
||
// import SimpleLineChart from './components/SimpleLineChart.vue'
|
||
// import BaseVideo from './components/baseVideo.vue'
|
||
// import axios from '@/utils/request'
|
||
// import { timeFormatter } from '@/filters'
|
||
// import moment from 'moment'
|
||
// import elementResizeDetectorMaker from 'element-resize-detector';
|
||
// var erd = elementResizeDetectorMaker(); //创建实例
|
||
const qualityTableProps1 = [
|
||
{
|
||
prop: 'createTime',
|
||
label: '报警时间'
|
||
},
|
||
{
|
||
prop: 'alarmCode',
|
||
label: '报警编码'
|
||
},
|
||
{
|
||
prop: 'alarmContent',
|
||
label: '报警内容'
|
||
}
|
||
]
|
||
const qualityTableProps2 = [
|
||
{
|
||
prop: 'createTime',
|
||
label: '下单时间'
|
||
},
|
||
{
|
||
prop: 'orderCode',
|
||
label: '订单编码'
|
||
},
|
||
{
|
||
prop: 'orderNumber',
|
||
label: '订单数量'
|
||
}
|
||
]
|
||
|
||
const qualityList1 = [
|
||
{ createTime: '2020/01/01', alarmCode: '3928498293', alarmContent: '故障' },
|
||
{ createTime: '2020/01/02', alarmCode: '3928498294', alarmContent: '故障' },
|
||
{ createTime: '2020/01/03', alarmCode: '3928498292', alarmContent: '故障' },
|
||
{ createTime: '2020/01/04', alarmCode: '3928498291', alarmContent: '故障' },
|
||
{ createTime: '2020/01/05', alarmCode: '3928498296', alarmContent: '故障' },
|
||
{ createTime: '2020/01/06', alarmCode: '3928498298', alarmContent: '故障' }
|
||
|
||
]
|
||
const qualityList2 = [
|
||
{ createTime: '2020/01/11', orderCode: '3928498292', orderNumber: '12312' },
|
||
{ createTime: '2020/01/12', orderCode: '3928498291', orderNumber: '21321' },
|
||
{ createTime: '2020/01/13', orderCode: '3928498293', orderNumber: '32121321' },
|
||
{ createTime: '2020/01/14', orderCode: '3928498294', orderNumber: '323213' },
|
||
{ createTime: '2020/01/15', orderCode: '3928498295', orderNumber: '2312312' },
|
||
{ createTime: '2020/01/16', orderCode: '3928498297', orderNumber: '2312312' }
|
||
]
|
||
|
||
const legendData = [
|
||
{
|
||
name: '产线1',
|
||
icon: 'circle'
|
||
},
|
||
{
|
||
name: '产线2',
|
||
icon: 'circle'
|
||
},
|
||
{
|
||
name: '产线3',
|
||
icon: 'circle'
|
||
},
|
||
{
|
||
name: '产线4',
|
||
icon: 'circle'
|
||
},
|
||
{
|
||
name: '产线5',
|
||
icon: 'circle'
|
||
},
|
||
{
|
||
name: '产线6',
|
||
icon: 'circle'
|
||
}
|
||
]
|
||
const cxNameList = ['周一', '周二', '周三', '周四', '周五']
|
||
|
||
const cxDataList = [
|
||
{
|
||
topColor: '#9DD5FF',
|
||
bottomColor: '#1295FF',
|
||
name: '电耗能',
|
||
data: [100, 150, 121, 97, 140]
|
||
},
|
||
{
|
||
topColor: '#FF8BC3',
|
||
bottomColor: '#EB46A1',
|
||
name: '水耗能',
|
||
data: [110, 110, 151, 77, 110]
|
||
},
|
||
{
|
||
topColor: '#85F6E9',
|
||
bottomColor: '#2EC6B4',
|
||
name: '天然气',
|
||
data: [110, 120, 171, 287, 40]
|
||
},
|
||
{
|
||
topColor: '#9496FF',
|
||
bottomColor: '#6567FF',
|
||
name: '焦炉煤气',
|
||
data: [140, 157, 122, 27, 240]
|
||
},
|
||
{
|
||
topColor: '#F68E8A',
|
||
bottomColor: '#E95552',
|
||
name: '余热发电',
|
||
data: [170, 180, 127, 17, 340]
|
||
},
|
||
{
|
||
topColor: '#FFE873',
|
||
bottomColor: '#E7AE2A',
|
||
name: '二氧化硫',
|
||
data: [140, 160, 121, 57, 170]
|
||
}
|
||
]
|
||
|
||
const NumList = ['2023.9.11', '2023.9.12', '2023.9.13', '2023.9.14', '2023.9.15', '2023.9.16', '2023.9.17']
|
||
|
||
const NumDataList = [
|
||
{
|
||
topColor: '#9DD5FF',
|
||
bottomColor: '#1295FF',
|
||
name: '钢一线',
|
||
data: [100, 150, 121, 97, 140, 132, 123]
|
||
},
|
||
{
|
||
topColor: '#FF8BC3',
|
||
bottomColor: '#EB46A1',
|
||
name: '钢二线',
|
||
data: [110, 110, 151, 77, 110, 55, 111]
|
||
},
|
||
{
|
||
topColor: '#85F6E9',
|
||
bottomColor: '#2EC6B4',
|
||
name: '钢三线',
|
||
data: [110, 120, 171, 287, 40, 100, 232]
|
||
},
|
||
{
|
||
topColor: '#9496FF',
|
||
bottomColor: '#6567FF',
|
||
name: '钢四线',
|
||
data: [140, 157, 122, 27, 123, 132, 32]
|
||
},
|
||
{
|
||
topColor: '#9496FF',
|
||
bottomColor: '#6567FF',
|
||
name: '钢五线',
|
||
data: [140, 157, 122, 27, 111, 154, 132]
|
||
},
|
||
{
|
||
topColor: '#9496FF',
|
||
bottomColor: '#6567FF',
|
||
name: '钢六线',
|
||
data: [140, 157, 122, 27, 240, 143, 122]
|
||
}
|
||
]
|
||
|
||
const cplNameList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||
const cplDataList = [
|
||
{
|
||
topColor: '#9DD5FF',
|
||
bottomColor: '#1295FF',
|
||
name: '钢一线',
|
||
data: [100, 150, 121, 97, 140, 180, 127]
|
||
},
|
||
{
|
||
topColor: '#FF8BC3',
|
||
bottomColor: '#EB46A1',
|
||
name: '钢二线',
|
||
data: [110, 110, 151, 77, 110, 151, 77]
|
||
},
|
||
{
|
||
topColor: '#85F6E9',
|
||
bottomColor: '#2EC6B4',
|
||
name: '钢三线',
|
||
data: [110, 120, 171, 287, 40, 160, 127]
|
||
},
|
||
{
|
||
topColor: '#9496FF',
|
||
bottomColor: '#6567FF',
|
||
name: '钢四线',
|
||
data: [140, 157, 122, 27, 240, 180, 127]
|
||
},
|
||
{
|
||
topColor: '#F68E8A',
|
||
bottomColor: '#E95552',
|
||
name: '钢五线',
|
||
data: [170, 180, 127, 17, 340, 180, 255]
|
||
},
|
||
{
|
||
topColor: '#FFE873',
|
||
bottomColor: '#E7AE2A',
|
||
name: '钢六线',
|
||
data: [140, 160, 121, 57, 170, 3, 127]
|
||
}
|
||
]
|
||
const qualityMonthTableProps = [
|
||
{
|
||
prop: 'lineName',
|
||
label: '产线名'
|
||
},
|
||
{
|
||
prop: 'process',
|
||
label: '工序'
|
||
},
|
||
{
|
||
prop: 'eqName',
|
||
label: '设备名'
|
||
},
|
||
{
|
||
prop: 'eqCode',
|
||
label: '设备编码'
|
||
},
|
||
{
|
||
prop: 'long',
|
||
label: '总运行时长(h)'
|
||
},
|
||
// {
|
||
// prop: 'createTime',
|
||
// label: '保养时间'
|
||
// },
|
||
{
|
||
prop: 'status',
|
||
label: '设备状态'
|
||
}
|
||
// {
|
||
// prop: 'nextCreateTime',
|
||
// label: '下次保养时间'
|
||
// }
|
||
// {
|
||
// prop: 'nextLong',
|
||
// label: '距离保养时间(天)',
|
||
// // subcomponent: nextDay,
|
||
// align: 'center'
|
||
// }
|
||
]
|
||
|
||
const qualityMonthList = [
|
||
{
|
||
lineName: '钢一线',
|
||
process: '41',
|
||
eqName: '设备1',
|
||
eqCode: '2312312',
|
||
long: '255',
|
||
// createTime: '2021-02-25 12:00:01',
|
||
status: '报警'
|
||
// nextCreateTime: '2022-12-25 12:00:01',
|
||
// nextLong: 365
|
||
},
|
||
{
|
||
lineName: '钢二线',
|
||
process: '41',
|
||
eqName: '设备2',
|
||
eqCode: '43434',
|
||
long: '255',
|
||
// createTime: '2021-11-25 12:00:01',
|
||
status: '正常'
|
||
// nextCreateTime: '2022-12-25 12:00:01',
|
||
// nextLong: 4
|
||
},
|
||
{
|
||
lineName: '钢三线',
|
||
process: '41',
|
||
eqName: '设备3',
|
||
eqCode: '23213212',
|
||
long: '255',
|
||
// createTime: '2021-10-25 12:00:01',
|
||
status: '故障停机'
|
||
// nextCreateTime: '2022-12-25 12:00:01',
|
||
// nextLong: 24
|
||
},
|
||
{
|
||
lineName: '钢四线',
|
||
process: '41',
|
||
eqName: '设备4',
|
||
eqCode: '23213',
|
||
long: '255',
|
||
// createTime: '2021-02-25 12:00:01',
|
||
status: '故障停机'
|
||
// nextCreateTime: '2022-12-25 12:00:01',
|
||
// nextLong: -36
|
||
},
|
||
{
|
||
lineName: '钢五线',
|
||
process: '41',
|
||
eqName: '设备5',
|
||
eqCode: '23121312',
|
||
long: '255',
|
||
// createTime: '2021-06-25 12:00:01',
|
||
status: '待机'
|
||
// nextCreateTime: '2022-12-25 12:00:01',
|
||
// nextLong: 111
|
||
},
|
||
{
|
||
lineName: '钢五线',
|
||
process: '41',
|
||
eqName: '设备5',
|
||
eqCode: '23121312',
|
||
long: '255',
|
||
// createTime: '2021-06-25 12:00:01',
|
||
status: '待机'
|
||
// nextCreateTime: '2022-12-25 12:00:01',
|
||
// nextLong: 111
|
||
},
|
||
{
|
||
lineName: '钢五线',
|
||
process: '41',
|
||
eqName: '设备5',
|
||
eqCode: '23121312',
|
||
long: '255',
|
||
// createTime: '2021-06-25 12:00:01',
|
||
status: '待机'
|
||
// nextCreateTime: '2022-12-25 12:00:01',
|
||
// nextLong: 111
|
||
},
|
||
{
|
||
lineName: '钢五线',
|
||
process: '41',
|
||
eqName: '设备5',
|
||
eqCode: '23121312',
|
||
long: '255',
|
||
// createTime: '2021-06-25 12:00:01',
|
||
status: '待机'
|
||
// nextCreateTime: '2022-12-25 12:00:01',
|
||
// nextLong: 111
|
||
},
|
||
{
|
||
lineName: '钢五线',
|
||
process: '41',
|
||
eqName: '设备5',
|
||
eqCode: '23121312',
|
||
long: '255',
|
||
// createTime: '2021-06-25 12:00:01',
|
||
status: '待机'
|
||
// nextCreateTime: '2022-12-25 12:00:01',
|
||
// nextLong: 111
|
||
}
|
||
]
|
||
const qualityTableProps = [
|
||
{
|
||
prop: 'createTime',
|
||
label: '发生时间'
|
||
},
|
||
{
|
||
prop: 'content',
|
||
label: '缺陷内容'
|
||
},
|
||
{
|
||
prop: 'productLine',
|
||
label: '产线'
|
||
},
|
||
{
|
||
prop: 'process',
|
||
label: '发生工序'
|
||
}
|
||
]
|
||
|
||
const qualityList = [
|
||
{ createTime: '12:00:01', content: '报废', productLine: '钢一线', process: '磨边' },
|
||
{ createTime: '12:20:51', content: '报废', productLine: '钢二线', process: '镀膜' },
|
||
{ createTime: '11:15:21', content: '报废', productLine: '钢三线', process: '钢化' },
|
||
{ createTime: '11:22:16', content: '报废', productLine: '钢四线', process: '镀膜' },
|
||
{ createTime: '10:30:49', content: '报废', productLine: '钢五线', process: '包装' },
|
||
{ createTime: '10:40:35', content: '报废', productLine: '钢六线', process: '钢化' },
|
||
{ createTime: '10:31:35', content: '报废', productLine: '钢七线', process: '包装' },
|
||
// { createTime: '10:32:35', content: '报废', productLine: '钢八线', process: '钢化' },
|
||
// { createTime: '10:33:35', content: '报废', productLine: '钢一线', process: '磨边' },
|
||
// { createTime: '10:34:35', content: '报废', productLine: '钢二线', process: '镀膜' },
|
||
// { createTime: '10:38:35', content: '报废', productLine: '钢三线', process: '钢化' }
|
||
// { createTime: '10:31:35', content: '报废', productLine: '钢四线', process: '镀膜' },
|
||
// { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
|
||
// { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
|
||
// { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
|
||
// { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
|
||
// { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
|
||
// { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
|
||
// { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
|
||
// { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' },
|
||
// { createTime: '10:43:35', content: '报废', productLine: '钢五线', process: '镀膜' }
|
||
|
||
// { createTime: '10:30:35', content: '报废', productLine: '钢六线', process: '镀膜' },
|
||
// { createTime: '10:30:35', content: '报废', productLine: '钢六线', process: '镀膜' }
|
||
]
|
||
const inciseTableProps = [
|
||
{ prop: 'finishNum', label: '成品数' },
|
||
{ prop: 'scrapNum', label: '废片数' },
|
||
{ prop: 'area', label: '面积' }
|
||
// { prop: 'count', label: '总数' },
|
||
// { prop: 'equipmentName', label: '设备名称' }
|
||
]
|
||
// total: 0,
|
||
const inciseList = [
|
||
{ finishNum: '21312', scrapNum: '23', area: '10576.2' },
|
||
{ finishNum: '12353', scrapNum: '20', area: '10572.04' },
|
||
{ finishNum: '32313', scrapNum: '13', area: '12334.24' },
|
||
{ finishNum: '43434', scrapNum: '14', area: '12344.24' },
|
||
{ finishNum: '34334', scrapNum: '15', area: '12344.24' },
|
||
{ finishNum: '43434', scrapNum: '16', area: '12344.24' },
|
||
{ finishNum: '32353', scrapNum: '17', area: '12344.24' },
|
||
{ finishNum: '43434', scrapNum: '10', area: '12434.24' },
|
||
{ finishNum: '43434', scrapNum: '13', area: '12344.24' },
|
||
{ finishNum: '32353', scrapNum: '14', area: '12337.24' },
|
||
{ finishNum: '43434', scrapNum: '10', area: '12323.24' },
|
||
{ finishNum: '43423', scrapNum: '14', area: '12235.24' },
|
||
{ finishNum: '32343', scrapNum: '15', area: '12345.24' },
|
||
{ finishNum: '43434', scrapNum: '18', area: '12455.24' },
|
||
{ finishNum: '43432', scrapNum: '19', area: '12345.24' }
|
||
]
|
||
export default {
|
||
name: 'ProductionMonitoringCockpit',
|
||
components: {
|
||
baseContainer,
|
||
baseTable,
|
||
baseTable1,
|
||
baseContainer1,
|
||
// baseTable3,
|
||
// TopRadioGroup,
|
||
// ThreeBarChart,
|
||
// SimpleLineChart,
|
||
// LineChart1,
|
||
// LineChart2,
|
||
LinearBarChart
|
||
// BaseVideo
|
||
},
|
||
data() {
|
||
return {
|
||
exceptionAlarm: {
|
||
inciseTableProps: [
|
||
{ prop: 'finishNum', label: '成品数' },
|
||
{ prop: 'scrapNum', label: '废片数' },
|
||
{ prop: 'area', label: '面积' }
|
||
// { prop: 'count', label: '总数' },
|
||
// { prop: 'equipmentName', label: '设备名称' }
|
||
],
|
||
total: 0,
|
||
inciseList: [
|
||
{ finishNum: '21312', scrapNum: '23', area: '10576.2' },
|
||
{ finishNum: '12353', scrapNum: '10', area: '1057.04' },
|
||
{ finishNum: '32353', scrapNum: '10', area: '12333.24' }
|
||
]
|
||
},
|
||
inAndOutOfEachLine: {
|
||
tableProps: [
|
||
{ prop: 'pdName', label: '产线名' },
|
||
{ prop: 'in', label: '上片数量' },
|
||
{ prop: 'out', label: '下片数量' },
|
||
{ prop: 'rate', label: '比率' }
|
||
// {
|
||
// prop: 'rate',
|
||
// label: '比率',
|
||
// filter: val => {
|
||
// if (val !== null && val !== undefined && val.trim() !== '') return `${(val * 100).toFixed(2)}%`
|
||
// else return '-'
|
||
// }
|
||
// }
|
||
],
|
||
total: 0,
|
||
list: []
|
||
},
|
||
qualityMonthTableProps,
|
||
qualityMonthList,
|
||
orderProcessList: [],
|
||
beilv: 1,
|
||
beilv2: 1,
|
||
value: 100,
|
||
isFullScreen: false,
|
||
qualityTableProps1,
|
||
qualityList1,
|
||
qualityList,
|
||
qualityTableProps,
|
||
qualityTableProps2,
|
||
qualityList2,
|
||
dateType: '0',
|
||
inciseTableProps,
|
||
inciseList,
|
||
legendData,
|
||
cxNameList,
|
||
cxDataList,
|
||
NumList,
|
||
NumDataList,
|
||
modelMonth: '',
|
||
cplNameList,
|
||
cplDataList,
|
||
plInput: {},
|
||
plOutput: {},
|
||
plRate: {},
|
||
loadTable: false,
|
||
standardCategory: null
|
||
}
|
||
},
|
||
computed: {
|
||
// ...mapGetters(['sidebar']),
|
||
styles() {
|
||
const v = Math.floor(this.value * this.beilv2 * 100) / 10000
|
||
return {
|
||
transform: `scale(${v})`,
|
||
transformOrigin: 'left top'
|
||
// overflow: hidden;
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
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.windowWidth(document.documentElement.clientWidth)
|
||
},
|
||
mounted() {
|
||
const _this = this;
|
||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||
window.onresize = () => {
|
||
return (() => {
|
||
_this.clientWidth = `${document.documentElement.clientWidth}`
|
||
this.beilv2 = _this.clientWidth / 1920
|
||
})()
|
||
}
|
||
// this.beilv2 = window.innerWidth / 1920
|
||
// addEventListener('resize', resizeFun = () => {
|
||
// this.beilv2 = window.innerWidth / 1920
|
||
// })
|
||
// erd.listenTo(document, (element) => {
|
||
// console.log(element.offsetWidth)
|
||
// this.beilv2 = element.offsetWidth / 1920
|
||
|
||
// // var width = element.offsetWidth;
|
||
// // var height = element.offsetHeight;
|
||
// });
|
||
},
|
||
// beforeDestroy() {
|
||
// //离开页面删除检测器和所有侦听器
|
||
// // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
|
||
// removeEventListener('resize', resizeFun)
|
||
// },
|
||
methods: {
|
||
windowWidth(value) {
|
||
this.clientWidth = value
|
||
},
|
||
// erd.listenTo(document.getElementById("box"), (element) => {
|
||
// var width = element.offsetWidth;
|
||
// var height = element.offsetHeight;
|
||
// })
|
||
// fetchList(type) {
|
||
// switch (type) {
|
||
// case 'exception-alarm': {
|
||
// return axios({
|
||
// url: '/analysis/factory-monitor/alarm',
|
||
// method: 'post'
|
||
// }).then(res => {
|
||
// if (res.data.length) {
|
||
// this.exceptionAlarm.list = res.data
|
||
// res.data.forEach(item => {
|
||
// if (item.count) {
|
||
// this.exceptionAlarm.total = item.count
|
||
// }
|
||
// })
|
||
// } else {
|
||
// this.exceptionAlarm.total = 0
|
||
// this.exceptionAlarm.list.splice(0)
|
||
// }
|
||
// })
|
||
// }
|
||
// case 'inAndOutOfEachLine':
|
||
// return this.handleChangeChartTable3('0')
|
||
// case 'order-process':
|
||
// return axios({
|
||
// url: '/analysis/factory-monitor/order',
|
||
// method: 'post'
|
||
// }).then(res => {
|
||
// if (res.data) {
|
||
// this.orderProcessList = res.data
|
||
// // this.orderProcessList = [
|
||
// // { id: 1, name: '订单1', outRate: 0.5 },
|
||
// // { id: 2, name: '订单2', outRate: 0.54 },
|
||
// // { id: 3, name: '订单3', outRate: 0.45 },
|
||
// // { id: 4, name: '订单4', outRate: 0.65 },
|
||
// // { id: 5, name: '订单5', outRate: 0.35 },
|
||
// // { id: 6, name: '订单6', outRate: 0.15 },
|
||
// // { id: 7, name: '订单7', outRate: 0.5 },
|
||
// // { id: 8, name: '订单8', outRate: 0.5 }
|
||
// // ]
|
||
// } else {
|
||
// this.orderProcessList.splice(0)
|
||
// }
|
||
// })
|
||
// case 'line-chart-data':
|
||
// return this.handleChangeOptions('all', '0')
|
||
// }
|
||
// },
|
||
|
||
change() {
|
||
this.isFullScreen = screenfull.isFullscreen
|
||
},
|
||
|
||
init() {
|
||
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)
|
||
},
|
||
|
||
/**
|
||
* 当切换当天、一周、一个月数据时
|
||
* @param {string} chartId - '投入数量图', '产出数量图', '投入产出比'
|
||
* @param {string} optValue - '0','1','2'
|
||
*/
|
||
// handleChangeOptions(chartId, optValue) {
|
||
// let startTime
|
||
// let endTime
|
||
// const url = '/analysis/factory-monitor/pdlNumTime'
|
||
// const method = 'post'
|
||
// switch (optValue) {
|
||
// case '0': {
|
||
// const baseTime = moment().set({ hour: 0, minute: 0, second: 0 })
|
||
// startTime = baseTime.format('YYYY-MM-DDTHH:mm:ss')
|
||
// endTime = baseTime.set({ hour: 23, minute: 59, second: 59 }).format('YYYY-MM-DDTHH:mm:ss')
|
||
// break
|
||
// }
|
||
// case '1': {
|
||
// startTime = moment()
|
||
// .subtract(1, 'week')
|
||
// .set({ hour: 0, minute: 0, second: 0 })
|
||
// .format('YYYY-MM-DDTHH:mm:ss')
|
||
// endTime = moment().format('YYYY-MM-DDTHH:mm:ss')
|
||
// break
|
||
// }
|
||
// case '2': {
|
||
// startTime = moment()
|
||
// .subtract(1, 'month')
|
||
// .set({ hour: 0, minute: 0, second: 0 })
|
||
// .format('YYYY-MM-DDTHH:mm:ss')
|
||
// endTime = moment().format('YYYY-MM-DDTHH:mm:ss')
|
||
// break
|
||
// }
|
||
// }
|
||
|
||
// return axios({
|
||
// url,
|
||
// method,
|
||
// data: {
|
||
// startTime,
|
||
// endTime
|
||
// }
|
||
// }).then(res => {
|
||
// console.log('res', res)
|
||
// switch (chartId) {
|
||
// case '投入数量图':
|
||
// this.plInput = {}
|
||
// res.data.forEach(item => {
|
||
// if (!this.standardCategory) {
|
||
// this.standardCategory = item.series
|
||
// }
|
||
|
||
// item.data.forEach((category, index) => {
|
||
// if (!isNaN(Number(category.time))) {
|
||
// category.time = +category.time
|
||
// }
|
||
// if (this.plInput[item.pdName]) {
|
||
// this.$set(this.plInput[item.pdName], [category.time], category.in)
|
||
// } else {
|
||
// this.$set(this.plInput, [item.pdName], { [category.time]: category.in })
|
||
// }
|
||
// })
|
||
// })
|
||
// /** 填充 key */
|
||
// this.fillKey(this.plInput, this.standardCategory)
|
||
// this.standardCategory = null
|
||
// break
|
||
// case '产出数量图':
|
||
// this.plOutput = {}
|
||
// res.data.forEach(item => {
|
||
// if (!this.standardCategory) {
|
||
// this.standardCategory = item.series
|
||
// }
|
||
|
||
// item.data.forEach((category, index) => {
|
||
// if (!isNaN(Number(category.time))) {
|
||
// category.time = +category.time
|
||
// }
|
||
// if (this.plOutput[item.pdName]) {
|
||
// this.$set(this.plOutput[item.pdName], [category.time], category.out)
|
||
// } else {
|
||
// this.$set(this.plOutput, [item.pdName], { [category.time]: category.out })
|
||
// }
|
||
// })
|
||
// })
|
||
// /** 填充 key */
|
||
// this.fillKey(this.plOutput, this.standardCategory)
|
||
// this.standardCategory = null
|
||
// break
|
||
// case '投入产出比':
|
||
// this.plRate = {}
|
||
// res.data.forEach(item => {
|
||
// if (!this.standardCategory) {
|
||
// this.standardCategory = item.series
|
||
// }
|
||
|
||
// item.data.forEach((category, index) => {
|
||
// if (!isNaN(Number(category.time))) {
|
||
// category.time = +category.time
|
||
// }
|
||
// if (this.plRate[item.pdName]) {
|
||
// this.$set(this.plRate[item.pdName], [category.time], category.rate)
|
||
// } else {
|
||
// this.$set(this.plRate, [item.pdName], { [category.time]: category.rate })
|
||
// }
|
||
// })
|
||
// })
|
||
// /** 填充 key */
|
||
// this.fillKey(this.plRate, this.standardCategory)
|
||
// this.standardCategory = null
|
||
// break
|
||
// case 'all':
|
||
// res.data.forEach(item => {
|
||
// /** 保存x轴的标准分类，因为数据会有缺失，标准分类用于校验哪些数据缺失 */
|
||
// if (!this.standardCategory) {
|
||
// this.standardCategory = item.series
|
||
// }
|
||
// /** if valid */
|
||
// if (item.data.length) {
|
||
// /** handle data */
|
||
// item.data.forEach((category, index) => {
|
||
// if (!isNaN(Number(category.time))) {
|
||
// category.time = +category.time
|
||
// }
|
||
|
||
// if (this.plInput[item.pdName]) {
|
||
// this.$set(this.plInput[item.pdName], [category.time], category.in)
|
||
// } else {
|
||
// this.$set(this.plInput, [item.pdName], { [category.time]: category.in })
|
||
// }
|
||
|
||
// if (this.plOutput[item.pdName]) {
|
||
// this.$set(this.plOutput[item.pdName], [category.time], category.out)
|
||
// } else {
|
||
// this.$set(this.plOutput, [item.pdName], { [category.time]: category.out })
|
||
// }
|
||
|
||
// if (this.plRate[item.pdName]) {
|
||
// this.$set(this.plRate[item.pdName], [category.time], category.rate)
|
||
// } else {
|
||
// this.$set(this.plRate, [item.pdName], { [category.time]: category.rate })
|
||
// }
|
||
// })
|
||
// }
|
||
// })
|
||
|
||
// /** 填充 key */
|
||
// this.fillKey(this.plInput, this.standardCategory)
|
||
// this.fillKey(this.plOutput, this.standardCategory)
|
||
// this.fillKey(this.plRate, this.standardCategory)
|
||
|
||
// this.loadTable = true
|
||
// this.standardCategory = null
|
||
// break
|
||
// }
|
||
// })
|
||
// },
|
||
|
||
fillKey(obj, keyList) {
|
||
for (const [legend, child] of Object.entries(obj)) {
|
||
/** 数量相等，就不继续执行了 */
|
||
if (Object.keys(child).length === keyList) return
|
||
const newChild = {}
|
||
keyList.forEach(key => {
|
||
if (!isNaN(Number(key))) {
|
||
key = +key
|
||
}
|
||
|
||
if (child[key] === undefined) {
|
||
newChild[key] = null
|
||
} else {
|
||
newChild[key] = child[key]
|
||
}
|
||
})
|
||
obj[legend] = newChild
|
||
}
|
||
},
|
||
|
||
// handleChangeChartTable3(v) {
|
||
// let startTime
|
||
// let endTime
|
||
// switch (v) {
|
||
// case '0': {
|
||
// const baseTime = moment().set({ hour: 0, minute: 0, second: 0 })
|
||
// startTime = baseTime.format('YYYY-MM-DDTHH:mm:ss')
|
||
// endTime = baseTime.add(1, 'd').format('YYYY-MM-DDTHH:mm:ss')
|
||
// break
|
||
// }
|
||
// case '1': {
|
||
// startTime = moment()
|
||
// .startOf('week')
|
||
// .set({ hour: 0, minute: 0, second: 0 })
|
||
// .format('YYYY-MM-DDTHH:mm:ss')
|
||
// endTime = moment(new Date()).format('YYYY-MM-DDTHH:mm:ss')
|
||
// break
|
||
// }
|
||
// case '2': {
|
||
// startTime = moment()
|
||
// .startOf('month')
|
||
// .set({ hour: 0, minute: 0, second: 0 })
|
||
// .format('YYYY-MM-DDTHH:mm:ss')
|
||
// endTime = moment(new Date()).format('YYYY-MM-DDTHH:mm:ss')
|
||
// break
|
||
// }
|
||
// }
|
||
// /** 请求数据 */
|
||
// axios({
|
||
// url: '/analysis/factory-monitor/pdlNum',
|
||
// method: 'post',
|
||
// data: {
|
||
// startTime,
|
||
// endTime
|
||
// }
|
||
// }).then(res => {
|
||
// // inAndOutOfEachLine
|
||
// if (res.data) {
|
||
// this.inAndOutOfEachLine.total = res.data.length
|
||
// this.inAndOutOfEachLine.list = res.data
|
||
// } else {
|
||
// this.inAndOutOfEachLine.total = 0
|
||
// this.inAndOutOfEachLine.list.splice(0)
|
||
// }
|
||
// })
|
||
// }
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.visual-container {
|
||
// width: 100%;
|
||
width: 1920px;
|
||
height: 1080px;
|
||
background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
|
||
background-size: cover;
|
||
// height: 100vh;
|
||
.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;
|
||
}
|
||
}
|
||
.visual-select {
|
||
position: absolute;
|
||
right: 1em;
|
||
top: 2em;
|
||
}
|
||
.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);
|
||
}
|
||
</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>
|