'init'
This commit is contained in:
889
src/views/OperationalOverview/EquipmentOperationCockpit.vue
Normal file
889
src/views/OperationalOverview/EquipmentOperationCockpit.vue
Normal file
@@ -0,0 +1,889 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-06-14 11:23:22
|
||||
* @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">
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" :gutter="9 * beilv">
|
||||
<el-col class="flex-layout flex-col" :span="18">
|
||||
<el-row type="flex" :gutter="12 * beilv">
|
||||
<!-- 能耗 -->
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="8">
|
||||
<!-- <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="8"> -->
|
||||
<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>
|
||||
|
||||
<div style="height: 10vh;">
|
||||
<three-bar-chart
|
||||
v-if="energyRadioModel === 1"
|
||||
:name-list="clNameList"
|
||||
:data-list="clDataList"
|
||||
:height="200"
|
||||
:beilv="beilv"
|
||||
/>
|
||||
<base-table
|
||||
v-if="energyRadioModel === 2"
|
||||
:beilv="beilv"
|
||||
:page="1"
|
||||
:limit="6"
|
||||
:show-index="false"
|
||||
:table-config="energyTableProps"
|
||||
:table-data="energyList"
|
||||
/>
|
||||
</div>
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<!-- 设备报警异常 -->
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="16">
|
||||
<!-- <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="16"> -->
|
||||
<base-container title="设备报警异常" title-icon="eqalarm" :beilv="beilv" :height="256">
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="6"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="qualityYearTableProps"
|
||||
:table-data="qualityYearList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row type="flex" :gutter="12 * beilv">
|
||||
<!-- 设备运行监控（运行时长） -->
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="8">
|
||||
<!-- <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="8"> -->
|
||||
<base-container title="设备运行监控(运行时长)" title-icon="eqruntime" :beilv="beilv" :height="360">
|
||||
<!-- 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="runtime-radio"
|
||||
:class="{ 'runtime-radio-checked': item.value === runtimeRadioModel }"
|
||||
@click="handleRuntimeRadioChange(item.value)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<top-radio-group
|
||||
:date-type="1"
|
||||
:radio-list="[
|
||||
{ value: '1', name: '产线一' },
|
||||
{ value: '2', name: '产线二' },
|
||||
{ value: '3', name: '产线三' },
|
||||
{ value: '4', name: '产线四' },
|
||||
{ value: '5', name: '产线五' },
|
||||
{ value: '6', name: '产线六' }
|
||||
]"
|
||||
/>
|
||||
|
||||
<!-- <top-radio-group
|
||||
:radio-list="[{ value: '0', name: '柱状图' }, { value: '1', name: '表格' }]"
|
||||
style="position: absolute; right: 1em; top: 2em; z-index: 999"
|
||||
@changeChart="changeChart"
|
||||
/> -->
|
||||
<div style="height: 20vh;">
|
||||
<pieChart1
|
||||
v-if="runtimeRadioModel === 1"
|
||||
id="'pie-chart-1'"
|
||||
:series-data="pieData"
|
||||
:beilv="beilv"
|
||||
:height="'190'"
|
||||
/>
|
||||
<base-table
|
||||
v-if="runtimeRadioModel === 2"
|
||||
:page="1"
|
||||
:limit="6"
|
||||
:beilv="beilv"
|
||||
:table-config="eqRunTableProps"
|
||||
:table-data="eqRunList"
|
||||
/>
|
||||
</div>
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<!-- 设备稼动率 -->
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="16">
|
||||
<!-- <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="16"> -->
|
||||
<base-container title="设备稼动率" title-icon="equtil" :beilv="beilv" :height="296">
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="item in eqList" :key="item" :span="12">
|
||||
<el-row
|
||||
style="cursor: pointer;padding-right: 12px;background: rgba(5, 27, 74, 0.19);"
|
||||
:style="{ height: 90 * beilv + 'px', marginBottom: 10 * beilv + 'px' }"
|
||||
class="hover-effect"
|
||||
>
|
||||
<el-col
|
||||
:span="6"
|
||||
:style="{ height: 90 * beilv + 'px' }"
|
||||
style="border-right: 2px solid rgba(7, 16, 34, 1);display: flex;justify-content: center;align-items: center;font-size: 1.2em"
|
||||
>
|
||||
{{ item }}
|
||||
</el-col>
|
||||
<el-col :span="18" :style="{ height: 90 * beilv + 'px' }" style="padding: 1.3em 0">
|
||||
<el-row style="width: 100%; margin: .4em 0">
|
||||
<el-col :span="5" style="text-align: right">
|
||||
OEE
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="18">
|
||||
<util-chart
|
||||
:percent="78"
|
||||
:left-color="'rgba(18, 149, 255, 1)'"
|
||||
:right-color="'rgba(157, 213, 255, 1)'"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="width: 100%; margin: .4em 0">
|
||||
<el-col :span="5" style="text-align: right">
|
||||
MTBR
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="18">
|
||||
<util-chart
|
||||
:percent="78"
|
||||
:left-color="'rgba(46, 198, 180, 1)'"
|
||||
:right-color="'rgba(133, 246, 233, 1)'"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="width: 100%; margin: .4em 0">
|
||||
<el-col :span="5" style="text-align: right">
|
||||
MTBF
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="18">
|
||||
<util-chart
|
||||
:percent="34"
|
||||
:left-color="'rgba(235, 70, 161, 1)'"
|
||||
:right-color="'rgba(255, 139, 195, 1)'"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</base-container>
|
||||
</el-col>
|
||||
<!-- 稼动率 end -->
|
||||
</el-row>
|
||||
|
||||
<el-row type="flex">
|
||||
<!-- 设备保养监控 -->
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0'}">
|
||||
<!-- <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }"> -->
|
||||
<base-container title="设备保养监控" title-icon="eqmaintain" :beilv="beilv" :height="256">
|
||||
<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-table
|
||||
:page="1"
|
||||
:limit="5"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="qualityMonthTableProps"
|
||||
:table-data="qualityMonthList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧栏 -->
|
||||
<el-col class="flex-layout flex-col" :span="6">
|
||||
<el-row class="flex-1" :style="{ margin: 8 * beilv + 'px' }">
|
||||
<!-- 设备维修情况 -->
|
||||
<el-col :style="{ height: '100%' }" :span="24">
|
||||
<!-- <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24"> -->
|
||||
<base-container title="设备维修情况" title-icon="eqrequire" :beilv="beilv" :height="318">
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="12"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="eqRequireTableProps"
|
||||
:table-data="eqRequireList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="flex-1" :style="{ margin: 8 * beilv + 'px' }">
|
||||
<!-- 点检不正常汇总 -->
|
||||
<el-col :style="{ height: '100%' }" :span="24">
|
||||
<!-- <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24"> -->
|
||||
<base-container title="点检不正常汇总" title-icon="eqcheckerror" :beilv="beilv" :height="338">
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="12"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="eqCheckTableProps"
|
||||
:table-data="eqCheckList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- end -->
|
||||
<!-- <el-col :span="12">
|
||||
<el-row>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :height="672">
|
||||
<base-video :video-height="624" :beilv="beilv" />
|
||||
<video-footer :beilv="beilv" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseContainer from './components/baseContainer'
|
||||
import baseTable from './components/baseTable'
|
||||
import { mapGetters } from 'vuex'
|
||||
import screenfull from 'screenfull'
|
||||
import TopRadioGroup from './components/topRadioGroup'
|
||||
import BaseTable from './components/baseTable.vue'
|
||||
// import BaseVideo from './components/baseVideo.vue'
|
||||
import ThreeBarChart from './components/threeBarChart.vue'
|
||||
import pieChart1 from './components/PieChart'
|
||||
// import VideoFooter from './components/videoFooter'
|
||||
import nextDay from './components/nextDay'
|
||||
import alarmLevel from './components/alarmLevel'
|
||||
import utilChart from './components/utilChart'
|
||||
|
||||
const energyTableProps = [
|
||||
{
|
||||
prop: 'line',
|
||||
label: '产线名称',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
prop: 'totalEnergy',
|
||||
label: '总能耗(kW·h)'
|
||||
},
|
||||
{
|
||||
prop: 'dailyEnergy',
|
||||
label: '当天能耗(kW·h)'
|
||||
}
|
||||
]
|
||||
|
||||
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 eqRunTableProps = [
|
||||
{
|
||||
prop: 'eqName',
|
||||
label: '设备名'
|
||||
},
|
||||
{
|
||||
prop: 'time',
|
||||
label: '运行时间(h)'
|
||||
}
|
||||
]
|
||||
|
||||
const eqRunList = [
|
||||
{ eqName: '钢化炉', time: '234' },
|
||||
{ eqName: '磨边机', time: '114' },
|
||||
{ eqName: '镀膜机', time: '452' },
|
||||
{ eqName: '钢化清洗机', time: '123' },
|
||||
{ eqName: '固化机', time: '421' },
|
||||
{ eqName: '成品下片机', time: '523' }
|
||||
]
|
||||
|
||||
const qualityTableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '发生时间'
|
||||
},
|
||||
{
|
||||
prop: 'content',
|
||||
label: '缺陷内容'
|
||||
},
|
||||
{
|
||||
prop: 'productLine',
|
||||
label: '产线'
|
||||
},
|
||||
{
|
||||
prop: 'process',
|
||||
label: '发生工序'
|
||||
}
|
||||
]
|
||||
|
||||
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 eqRequireTableProps = [
|
||||
{
|
||||
prop: 'eqName',
|
||||
label: '设备名称'
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '维修时间'
|
||||
},
|
||||
{
|
||||
prop: 'long',
|
||||
label: '维修时长'
|
||||
},
|
||||
{
|
||||
prop: 'result',
|
||||
label: '维修结果'
|
||||
},
|
||||
{
|
||||
prop: 'person',
|
||||
label: '维修人员'
|
||||
}
|
||||
]
|
||||
|
||||
const eqRequireList = [
|
||||
{ eqName: '钢化炉', createTime: '12:00:01', result: '完成', long: '2', person: '张三、李四' },
|
||||
{ eqName: '固化炉', createTime: '11:20:51', result: '报废', long: '1.5', person: '张三、李四' },
|
||||
{ eqName: '镀膜机', createTime: '11:05:21', result: '维修中', long: '1', person: '张三、李四' },
|
||||
{ eqName: '磨边机', createTime: '11:02:16', result: '维修中', long: '1.2', person: '张三、李四' },
|
||||
{ eqName: '成品下片机', createTime: '10:50:49', result: '完成', long: '3', person: '张三、李四' },
|
||||
{ eqName: '钢化炉', createTime: '12:00:01', result: '完成', long: '2', person: '张三、李四' },
|
||||
{ eqName: '镀膜机', createTime: '11:05:21', result: '维修中', long: '1', person: '张三、李四' },
|
||||
{ eqName: '磨边机', createTime: '11:02:16', result: '维修中', long: '1.2', person: '张三、李四' },
|
||||
{ eqName: '成品下片机', createTime: '10:50:49', result: '完成', long: '3', person: '张三、李四' },
|
||||
{ eqName: '钢化炉', createTime: '12:00:01', result: '完成', long: '2', person: '张三、李四' },
|
||||
{ eqName: '固化炉', createTime: '11:20:51', result: '报废', long: '1.5', person: '张三、李四' },
|
||||
{ eqName: '镀膜机', createTime: '11:05:21', result: '维修中', long: '1', person: '张三、李四' },
|
||||
{ eqName: '磨边机', createTime: '11:02:16', result: '维修中', long: '1.2', person: '张三、李四' },
|
||||
{ eqName: '成品下片机', createTime: '10:50:49', result: '完成', long: '3', person: '张三、李四' },
|
||||
{ eqName: '钢化清洗机', createTime: '10:30:35', result: '待维修', long: '4', person: '张三、李四' }
|
||||
]
|
||||
|
||||
const eqCheckTableProps = [
|
||||
{
|
||||
prop: 'eqName',
|
||||
label: '设备名称'
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '点检时间'
|
||||
},
|
||||
{
|
||||
prop: 'person',
|
||||
label: '点检人员'
|
||||
},
|
||||
{
|
||||
prop: 'result',
|
||||
label: '不正常描述'
|
||||
}
|
||||
]
|
||||
|
||||
const eqCheckList = [
|
||||
{ eqName: '钢化炉', createTime: '12:00:01', result: '不正常', long: '2', person: '张三、李四' },
|
||||
{ eqName: '镀膜机', createTime: '11:20:51', result: '真的不正常', long: '1.5', person: '张三、李四' },
|
||||
{ eqName: '磨边机', createTime: '11:05:21', result: '不正常不正常啊啊啊啊', long: '1', person: '张三、李四' },
|
||||
{ eqName: '钢化清洗机', createTime: '11:02:16', result: '正常啊', long: '1.2', person: '张三、李四' },
|
||||
{ eqName: '成品下片机', createTime: '10:50:49', result: '不正常', long: '3', person: '张三、李四' },
|
||||
{ eqName: '钢化炉', createTime: '12:00:01', result: '不正常', long: '2', person: '张三、李四' },
|
||||
{ eqName: '镀膜机', createTime: '11:20:51', result: '真的不正常', long: '1.5', person: '张三、李四' },
|
||||
{ eqName: '磨边机', createTime: '11:05:21', result: '不正常不正常啊啊啊啊', long: '1', person: '张三、李四' },
|
||||
{ eqName: '钢化清洗机', createTime: '11:02:16', result: '正常啊', long: '1.2', person: '张三、李四' },
|
||||
{ eqName: '成品下片机', createTime: '10:50:49', result: '不正常', long: '3', person: '张三、李四' },
|
||||
{ eqName: '钢化炉', createTime: '12:00:01', result: '不正常', long: '2', person: '张三、李四' },
|
||||
{ eqName: '镀膜机', createTime: '11:20:51', result: '真的不正常', long: '1.5', person: '张三、李四' },
|
||||
{ eqName: '磨边机', createTime: '11:05:21', result: '不正常不正常啊啊啊啊', long: '1', person: '张三、李四' },
|
||||
{ eqName: '钢化清洗机', createTime: '11:02:16', result: '正常啊', long: '1.2', person: '张三、李四' },
|
||||
{ eqName: '成品下片机', createTime: '10:50:49', result: '不正常', long: '3', person: '张三、李四' },
|
||||
{ eqName: '固化机', createTime: '10:30:35', result: '不正常', long: '4', person: '张三、李四' }
|
||||
]
|
||||
|
||||
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
|
||||
}
|
||||
]
|
||||
|
||||
const qualityYearTableProps = [
|
||||
{
|
||||
prop: 'eqName',
|
||||
label: '设备名称'
|
||||
},
|
||||
{
|
||||
prop: 'eqCode',
|
||||
label: '设备编码'
|
||||
},
|
||||
{
|
||||
prop: 'level',
|
||||
label: '报警级别',
|
||||
subcomponent: alarmLevel,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'content',
|
||||
label: '报警内容'
|
||||
}
|
||||
]
|
||||
|
||||
const qualityYearList = [
|
||||
{ eqName: '钢化炉', eqCode: '21321312', level: 1, content: '我报警了报警了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
|
||||
{ eqName: '磨边机', eqCode: '32323232', level: 4, content: '我报警了报警了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
|
||||
{ eqName: '镀膜机', eqCode: '32213213', level: 3, content: '我报警了报警了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
|
||||
{ eqName: '钢化清洗机', eqCode: '21321323', level: 1, content: '我报警了报警了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
|
||||
{ eqName: '固化机', eqCode: '21321321', level: 2, content: '我报警了报警了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
|
||||
{ eqName: '测试设备', eqCode: '21321321', level: 2, content: '我报警了报警了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' }
|
||||
]
|
||||
|
||||
const clNameList = ['钢化炉', '磨边机', '镀膜机', '钢化清洗机', '固化机']
|
||||
const clDataList = [
|
||||
{
|
||||
topColor: '#7CB6FF',
|
||||
bottomColor: '#166BD6',
|
||||
name: '运行时间',
|
||||
data: [22, 150, 121, 97, 200]
|
||||
}
|
||||
]
|
||||
const pieData = [
|
||||
{ value: 22, name: '钢化炉' },
|
||||
{ value: 150, name: '磨边机' },
|
||||
{ value: 121, name: '镀膜机' },
|
||||
{ value: 97, name: '钢化清洗机' },
|
||||
{ value: 200, name: '固化机' }
|
||||
]
|
||||
|
||||
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]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'ProductionMonitoringCockpit',
|
||||
components: {
|
||||
baseContainer,
|
||||
baseTable,
|
||||
BaseTable,
|
||||
// BaseVideo,
|
||||
TopRadioGroup,
|
||||
ThreeBarChart,
|
||||
// VideoFooter,
|
||||
utilChart,
|
||||
pieChart1
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
beilv: 1,
|
||||
isFullScreen: false,
|
||||
eqRunTableProps,
|
||||
eqRunList,
|
||||
qualityTableProps,
|
||||
qualityList,
|
||||
eqRequireTableProps,
|
||||
eqRequireList,
|
||||
eqCheckTableProps,
|
||||
eqCheckList,
|
||||
qualityMonthTableProps,
|
||||
qualityMonthList,
|
||||
qualityYearTableProps,
|
||||
eqList: ['钢化炉', '镀膜机', '上片机', '下片机'],
|
||||
qualityYearList,
|
||||
clNameList,
|
||||
clDataList,
|
||||
pieData,
|
||||
cxNameList,
|
||||
cxDataList,
|
||||
modelMonth: '钢1线',
|
||||
modelYear: '2021年',
|
||||
chartType: '0',
|
||||
energyRadioModel: null,
|
||||
runtimeRadioModel: null,
|
||||
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()
|
||||
console.log(this.qualityMonthTableProps)
|
||||
console.log(this.qualityMonthList)
|
||||
},
|
||||
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: {
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen
|
||||
},
|
||||
init() {
|
||||
this.energyRadioModel = 2 // 默认为表格
|
||||
this.runtimeRadioModel = 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)
|
||||
},
|
||||
changeChart(v) {
|
||||
this.chartType = v
|
||||
console.log(this.chartType)
|
||||
},
|
||||
handleEnergyRadioChange(value) {
|
||||
this.energyRadioModel = value
|
||||
},
|
||||
handleRuntimeRadioChange(value) {
|
||||
this.runtimeRadioModel = value
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.visual-select {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 2em;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
.runtime-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;
|
||||
}
|
||||
|
||||
.runtime-radio-checked,
|
||||
.energy-radio-checked {
|
||||
background-color: #3eb0ae;
|
||||
}
|
||||
|
||||
.flex-layout {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1;
|
||||
}
|
||||
|
||||
.hover-effect {
|
||||
box-shadow: inset 0px 0px 17px 0px rgba(22, 107, 11, 0.582);
|
||||
transition: box-shadow 0.3s ease-out;
|
||||
}
|
||||
|
||||
.hover-effect:hover {
|
||||
/* .hoverEffect:hover { */
|
||||
box-shadow: inset 0px 0px 17px 0px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
</style>
|
||||
638
src/views/OperationalOverview/PlantOperation.vue
Normal file
638
src/views/OperationalOverview/PlantOperation.vue
Normal file
@@ -0,0 +1,638 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-01-19 10:33:36
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-06-10 16:04:42
|
||||
* @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 * 31 + '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 flex-col" type="flex">
|
||||
<el-row class="flex-1" type="flex">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' }" :span="8">
|
||||
<base-container title="工单信息" title-icon="workOrderInfo" :beilv="beilv">
|
||||
<el-row>
|
||||
<span style="color: #fcc;margin-left: 12px;">产线名: 产线001</span>
|
||||
</el-row>
|
||||
<el-row class="first-child-height-100" style=" height: 34vh;">
|
||||
<Bar-chart
|
||||
:id="'line-chart'"
|
||||
:legend-data="legendData"
|
||||
:beilv="beilv"
|
||||
:show-legend="true"
|
||||
:height="'100%'"
|
||||
:style="{ margin: 20 * beilv + 'px' + ' 0' }"
|
||||
/>
|
||||
</el-row>
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' }" :span="16">
|
||||
<!-- 用base-container:noPadding:noContentPadding来包裹外层 -->
|
||||
<base-container :no-padding="true" :no-content-padding="true">
|
||||
<el-col :span="14" style="position:relative; padding: 0">
|
||||
<base-container title="产线加工数量" title-icon="productLineInfo" :show-line="false" :beilv="beilv">
|
||||
<el-row style="align-items:center;" type="flex" justify="space-between">
|
||||
<!-- top options： -->
|
||||
<el-col :span="15" style="display: flex; align-items: 'center'">
|
||||
<div class="radios" style="width: 100%;height: 100%;display:flex;">
|
||||
<ul
|
||||
style="margin: 0;list-style: none;padding:0;display:flex;text-align: center;border-radius:4px; overflow: hidden;cursor: pointer"
|
||||
class="flex-1"
|
||||
>
|
||||
<li
|
||||
v-for="item in [
|
||||
{ value: 0, name: '当天' },
|
||||
{ value: 1, name: '本周' },
|
||||
{ value: 2, name: '本月' },
|
||||
{ value: 3, name: '全年' }
|
||||
]"
|
||||
:key="item.value"
|
||||
class="line-radio"
|
||||
:class="{ 'line-radio-checked': item.value === timeRadioModel }"
|
||||
@click="handleTimeRadioChange(item.value)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<!-- time range -->
|
||||
<el-select v-model="model" size="mini">
|
||||
<el-option key="1" value="2021.12.24-2022.12.2" label="2021.12.24-2022.12.2" default />
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- legend -->
|
||||
|
||||
<el-row class="first-child-height-100" style=" height: 32vh;">
|
||||
<!-- data -->
|
||||
<One-chart
|
||||
:id="'line-chart1'"
|
||||
:legend-data="legendData1"
|
||||
:beilv="beilv"
|
||||
:show-legend="true"
|
||||
:height="'100%'"
|
||||
:style="{ margin: 20 * beilv + 'px' + ' 0' }"
|
||||
/>
|
||||
</el-row>
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col class="add-vertical-split-line" :span="10" style="position:relative; padding: 0">
|
||||
<base-container
|
||||
title-left-icon="energy"
|
||||
title="产线数量"
|
||||
title-icon="qualityInfo"
|
||||
:show-line="false"
|
||||
:beilv="beilv"
|
||||
:height="256"
|
||||
>
|
||||
<el-row style="align-items:center;" type="flex" justify="space-between">
|
||||
<!-- top options： -->
|
||||
<el-col :span="15" style="display: flex; align-items: 'center'">
|
||||
<div class="radios" style="width: 100%;height: 100%;display:flex;">
|
||||
<ul
|
||||
style="margin: 0;list-style: none;padding:0;display:flex;text-align: center;border-radius:4px; overflow: hidden;cursor: pointer"
|
||||
class="flex-1"
|
||||
>
|
||||
<li
|
||||
v-for="item in [
|
||||
{ value: 0, name: '当天' },
|
||||
{ value: 1, name: '本周' },
|
||||
{ value: 2, name: '本月' },
|
||||
{ value: 3, name: '全年' }
|
||||
]"
|
||||
:key="item.value"
|
||||
class="line-radio"
|
||||
:class="{ 'line-radio-checked': item.value === timeRadioModel }"
|
||||
@click="handleTimeRadioChange(item.value)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<!-- time range -->
|
||||
<el-select v-model="model" size="mini">
|
||||
<el-option key="1" value="2021.12.24-2022.12.2" label="2021.12.24-2022.12.2" default />
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<base-table
|
||||
:beilv="beilv"
|
||||
:limit="12"
|
||||
style="margin-top:1em"
|
||||
:table-config="productTableProps"
|
||||
:table-data="productList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="flex-1" type="flex">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' }" :span="24">
|
||||
<!-- 用base-container:noPadding:noContentPadding来包裹外层 -->
|
||||
<base-container :no-padding="true" :no-content-padding="true">
|
||||
<el-col :span="14" style="position:relative; padding: 0">
|
||||
<base-container title="设备相关信息" title-icon="eqInfo" :show-line="false" :beilv="beilv">
|
||||
<el-row style="align-items:center;" type="flex" justify="space-between">
|
||||
<!-- top options： -->
|
||||
<el-col :span="3">
|
||||
<span style="color: #fcc;margin-left: 12px;">产线名: 产线001</span>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="3">
|
||||
<el-select size="mini" placeholder="选择产线">
|
||||
<el-option key="1" value="1" label="产线001" default />
|
||||
</el-select>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="10" style="display: flex; align-items: 'center'">
|
||||
<div class="radios" style="width: 100%;height: 100%;display:flex;">
|
||||
<ul
|
||||
style="margin: 0;list-style: none;padding:0;display:flex;text-align: center;border-radius:4px; overflow: hidden;cursor: pointer"
|
||||
class="flex-1"
|
||||
>
|
||||
<li
|
||||
v-for="item in [
|
||||
{ value: 0, name: '当天' },
|
||||
{ value: 1, name: '本周' },
|
||||
{ value: 2, name: '本月' },
|
||||
{ value: 3, name: '全年' }
|
||||
]"
|
||||
:key="item.value"
|
||||
class="line-radio"
|
||||
:class="{ 'line-radio-checked': item.value === timeRadioModel }"
|
||||
@click="handleTimeRadioChange(item.value)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="5">
|
||||
<!-- time range -->
|
||||
<el-select v-model="model" size="mini">
|
||||
<el-option key="1" value="2021.12.24-2022.12.2" label="2021.12.24-2022.12.2" default />
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- legend -->
|
||||
|
||||
<el-row class="first-child-height-100" style=" height: 28vh;">
|
||||
<!-- data -->
|
||||
<One-chart
|
||||
:id="'line-chart2'"
|
||||
:legend-data="legendData1"
|
||||
:beilv="beilv"
|
||||
:show-legend="true"
|
||||
:height="'100%'"
|
||||
:style="{ margin: 20 * beilv + 'px' + ' 0' }"
|
||||
/>
|
||||
</el-row>
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col class="add-vertical-split-line" :span="10" style="position:relative; padding: 0">
|
||||
<base-container
|
||||
title-left-icon="eqWork"
|
||||
title="设备加工监控"
|
||||
title-icon="eqWork"
|
||||
:show-line="false"
|
||||
:beilv="beilv"
|
||||
:height="256"
|
||||
>
|
||||
<el-row style="align-items:center;" type="flex" justify="space-between">
|
||||
<!-- top options： -->
|
||||
<el-col :span="15" style="display: flex; align-items: 'center'">
|
||||
<div class="radios" style="width: 100%;height: 100%;display:flex;">
|
||||
<ul
|
||||
style="margin: 0;list-style: none;padding:0;display:flex;text-align: center;border-radius:4px; overflow: hidden;cursor: pointer"
|
||||
class="flex-1"
|
||||
>
|
||||
<li
|
||||
v-for="item in [
|
||||
{ value: 0, name: '当天' },
|
||||
{ value: 1, name: '本周' },
|
||||
{ value: 2, name: '本月' },
|
||||
{ value: 3, name: '全年' }
|
||||
]"
|
||||
:key="item.value"
|
||||
class="line-radio"
|
||||
:class="{ 'line-radio-checked': item.value === timeRadioModel }"
|
||||
@click="handleTimeRadioChange(item.value)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<!-- time range -->
|
||||
<el-select v-model="model" size="mini">
|
||||
<el-option key="1" value="2021.12.24-2022.12.2" label="2021.12.24-2022.12.2" default />
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<base-table
|
||||
:beilv="beilv"
|
||||
:limit="10"
|
||||
style="margin-top:1em"
|
||||
:table-config="productTableProps"
|
||||
:table-data="productList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
</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/baseTable.vue'
|
||||
// import TopGroup from './components/ProductionAndOperationCenterCockpit/topGroup.vue'
|
||||
import BarChart from './components/ProductionAndOperationCenterCockpit/BarChart.vue'
|
||||
import OneChart from './components/ProductionAndOperationCenterCockpit/BarChartOne.vue'
|
||||
// import topRadioGroup from './components/topRadioGroup.vue'
|
||||
const productTableProps = [
|
||||
{
|
||||
prop: 'Name',
|
||||
label: '产品名称'
|
||||
},
|
||||
{
|
||||
prop: 'number',
|
||||
label: '上片数量'
|
||||
},
|
||||
{
|
||||
prop: 'downNumber',
|
||||
label: '下片数量'
|
||||
},
|
||||
{
|
||||
prop: 'data',
|
||||
label: '报废比'
|
||||
}
|
||||
]
|
||||
const productTopList = [
|
||||
{
|
||||
label: '当天',
|
||||
index: '0'
|
||||
},
|
||||
{
|
||||
label: '本周',
|
||||
index: '1'
|
||||
},
|
||||
{
|
||||
label: '本月',
|
||||
index: '2'
|
||||
},
|
||||
{
|
||||
label: '本年',
|
||||
index: '3'
|
||||
}
|
||||
]
|
||||
const productList = [
|
||||
{ Name: '太阳能光伏发电双玻组件', number: '232', downNumber: '64', data: '57' },
|
||||
{ Name: '丝印玻璃(1600*800*2)', number: '231', downNumber: '23', data: '32' },
|
||||
{ Name: '印玻璃(1700*1000*3.2）', number: '232', downNumber: '43', data: '43' },
|
||||
{ Name: '印玻璃(2500*1400*3.2）', number: '434', downNumber: '34', data: '54' },
|
||||
{ Name: '镀膜钢化玻璃 (1800*1200*2.5）', number: '232', downNumber: '21', data: '54' },
|
||||
{ Name: '太阳能光伏发电双玻组件', number: '232', downNumber: '64', data: '57' },
|
||||
{ Name: '丝印玻璃(1600*800*2)', number: '231', downNumber: '23', data: '32' },
|
||||
{ Name: '印玻璃(1700*1000*3.2）', number: '232', downNumber: '43', data: '43' },
|
||||
{ Name: '印玻璃(2500*1400*3.2）', number: '434', downNumber: '34', data: '54' },
|
||||
{ Name: '镀膜钢化玻璃 (1800*1200*2.5）', number: '232', downNumber: '21', data: '54' },
|
||||
{ Name: '太阳能光伏发电双玻组件', number: '232', downNumber: '64', data: '57' },
|
||||
{ Name: '丝印玻璃(1600*800*2)', number: '231', downNumber: '23', data: '32' },
|
||||
{ Name: '印玻璃(1700*1000*3.2）', number: '232', downNumber: '43', data: '43' },
|
||||
{ Name: '印玻璃(2500*1400*3.2）', number: '434', downNumber: '34', data: '54' },
|
||||
{ Name: '镀膜钢化玻璃 (1800*1200*2.5）', number: '232', downNumber: '21', data: '54' },
|
||||
{ Name: '镀膜钢化玻璃 (1900*1400*2.2）', number: '231', downNumber: '54', data: '65' }
|
||||
]
|
||||
const legendData = [
|
||||
{
|
||||
name: '当前加工',
|
||||
type: 'bar',
|
||||
data: [2, 4, 7, 2, 2, 7],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 这里是重点
|
||||
color: 'rgba(229, 115, 24, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '实际数量',
|
||||
type: 'bar',
|
||||
data: [6, 5, 9, 6, 8, 7],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 这里是重点
|
||||
color: 'rgba(253, 132, 192, 1)'
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: 'average', name: 'Avg' }]
|
||||
}
|
||||
}
|
||||
]
|
||||
const legendData1 = [
|
||||
{
|
||||
name: '上片数量',
|
||||
type: 'bar',
|
||||
data: [2, 4, 7, 2, 2, 7],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 这里是重点
|
||||
color: 'rgba(67, 146, 246, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '下片数量',
|
||||
type: 'bar',
|
||||
data: [6, 5, 9, 6, 8, 7],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 这里是重点
|
||||
color: 'rgba(82, 253, 234, 1)'
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: 'average', name: 'Avg' }]
|
||||
}
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'ProductionMonitoringCockpit',
|
||||
components: {
|
||||
baseContainer,
|
||||
BaseTable,
|
||||
// TopGroup,
|
||||
BarChart,
|
||||
OneChart
|
||||
// topRadioGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
beilv: 1,
|
||||
productTableProps,
|
||||
timeRadioModel: null,
|
||||
isFullScreen: false,
|
||||
productTopList,
|
||||
legendData1,
|
||||
productList,
|
||||
legendData,
|
||||
model: '2021.12.24-2022.12.2',
|
||||
model1: '钢一线',
|
||||
runTopList: [
|
||||
{
|
||||
label: '产品的名称abcd',
|
||||
index: '0'
|
||||
},
|
||||
{
|
||||
label: '产品的名称abcd',
|
||||
index: '1'
|
||||
},
|
||||
{
|
||||
label: '产品的名称abcd',
|
||||
index: '2'
|
||||
},
|
||||
{
|
||||
label: '产品的名称abcd',
|
||||
index: '3'
|
||||
},
|
||||
{
|
||||
label: '产品的名称abcd',
|
||||
index: '4'
|
||||
},
|
||||
{
|
||||
label: '产品的名称abcd',
|
||||
index: '5'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
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: {
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen
|
||||
},
|
||||
init() {
|
||||
this.timeRadioModel = 0
|
||||
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)
|
||||
},
|
||||
handleTimeRadioChange(val) {
|
||||
this.timeRadioModel = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
</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: #133648;
|
||||
border: #133648;
|
||||
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;
|
||||
}
|
||||
|
||||
.line-radio,
|
||||
.energy-radio {
|
||||
display: inline-block;
|
||||
flex: 1 auto;
|
||||
text-align: center;
|
||||
background-color: #133648;
|
||||
color: #fff;
|
||||
padding: 7px 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;
|
||||
}
|
||||
|
||||
.first-child-height-100 div:first-child {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,640 @@
|
||||
<!--
|
||||
* @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">
|
||||
<el-row :style="{padding: '0 ' + 9 * beilv + 'px'}" :gutter="9 * beilv">
|
||||
<el-col :span="6">
|
||||
<el-row>
|
||||
<el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="24">
|
||||
<base-container title="当前班组情况" title-icon="currentGroup" :beilv="beilv" :height="196">
|
||||
<base-table
|
||||
:beilv="beilv"
|
||||
:table-config="gourpTableHeadProps"
|
||||
:table-data="groupList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="24">
|
||||
<base-container title="设备运行信息" title-icon="runInfo" :beilv="beilv" :height="400">
|
||||
<Top-group :label-list="runTopList" />
|
||||
<base-table
|
||||
:beilv="beilv"
|
||||
:limit="10"
|
||||
:table-config="runTableProps"
|
||||
:table-data="runList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="24">
|
||||
<base-container title="各产线生产信息" title-icon="productLine" :beilv="beilv" :height="316">
|
||||
<Top-group :label-list="productTopList" />
|
||||
<base-table
|
||||
:beilv="beilv"
|
||||
:table-config="productTableProps"
|
||||
:table-data="productList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="24">
|
||||
<base-container :beilv="beilv" :height="672">
|
||||
<base-video :video-height="624" :beilv="beilv" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="24" style="position:relative">
|
||||
<base-container title-left-icon="energy" title="订单情况" title-icon="energy" :beilv="beilv" :height="256">
|
||||
<div style="position:absolute;right:16em;top:.2em;">
|
||||
<div style=" width: 100%;color: #52FFF1;font-size: 1.5em;padding: .1em;">
|
||||
<svg-icon icon-class="qualityInfo" style="font-size: 1.5em; position: relative; top: .08em" />
|
||||
质量缺陷信息年度总览
|
||||
</div>
|
||||
<Top-group :label-list="productTopList" style="margin-top:1em" />
|
||||
</div>
|
||||
<el-row :gutter="9 * beilv">
|
||||
<el-col :style="{ margin: 30 * beilv + 'px' + ' 0' }" :span="13">
|
||||
<base-table
|
||||
:beilv="beilv"
|
||||
:table-config="orderTableProps"
|
||||
:table-data="orderList"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 30 * beilv + 'px' + ' 0' }" :span="1">
|
||||
<el-divider direction="vertical" />
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 30 * beilv + 'px' + ' 0' }" :span="10">
|
||||
<base-table
|
||||
:beilv="beilv"
|
||||
:table-config="runTableProps"
|
||||
:table-data="runList"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-row>
|
||||
<el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="24">
|
||||
<base-container title="能耗" title-icon="energy" :beilv="beilv" :height="248">
|
||||
<div style="position:absolute;left:21em;top:1.5em;width:50%">
|
||||
<el-col :span="24"><Top-group :label-list="energyTopList" /></el-col>
|
||||
</div>
|
||||
<base-table
|
||||
:beilv="beilv"
|
||||
:limit="10"
|
||||
:table-config="energyTableProps"
|
||||
:table-data="energyList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="24">
|
||||
<base-container title="仓库信息" title-icon="storehouse" :beilv="beilv" :height="341">
|
||||
<div :style="{margin: 8 * beilv + 'px' + ' 0'}">原片仓</div>
|
||||
<base-table
|
||||
:beilv="beilv"
|
||||
:table-config="pieceTableProps"
|
||||
:table-data="pieceList"
|
||||
/>
|
||||
<div :style="{margin: 8 * beilv + 'px' + ' 0'}">原片仓</div>
|
||||
<base-table
|
||||
:beilv="beilv"
|
||||
:table-config="pieceTableProps"
|
||||
:table-data="pieceList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="24">
|
||||
<base-container title="公用工程" title-icon="publicWork" :beilv="beilv" :height="323">
|
||||
<line-chart
|
||||
:id="'line-chart'"
|
||||
:legend-data="legendData"
|
||||
:beilv="beilv"
|
||||
:show-legend="true"
|
||||
:height="'238'"
|
||||
:style="{margin: 20 * beilv + 'px' + ' 0'}"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <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> -->
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 TopGroup from './components/ProductionAndOperationCenterCockpit/topGroup.vue'
|
||||
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: '产线'
|
||||
},
|
||||
{
|
||||
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: '数量'
|
||||
},
|
||||
{
|
||||
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: '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: '21311232123', dailyEnergy: '26754545' }
|
||||
]
|
||||
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: '05*14*23', number: '413947', meter: '1232', package: '2131321' }
|
||||
]
|
||||
const runList = [
|
||||
{ equipmentName: '磨边机', runTime: '238h', currentState: '正常', colour: 'rgba(12, 255, 30, 1)', downTime: '338h' },
|
||||
{ equipmentName: '磨边后清洗剂', runTime: '338h', currentState: '待机', colour: 'rgba(39, 96, 255, 1)', downTime: '338h' },
|
||||
{ equipmentName: '激光打印机', runTime: '323h', currentState: '故障停机', colour: 'rgba(255, 12, 12, 1)', downTime: '338h' },
|
||||
{ equipmentName: '丝印机', runTime: '12h', currentState: '正常', colour: 'rgba(255, 12, 12, 1)', downTime: '338h' },
|
||||
{ equipmentName: '丝印机后烘干机', runTime: '238h', currentState: '报警', colour: 'rgba(255, 12, 12, 1)', downTime: '338h' },
|
||||
{ equipmentName: '镀膜机', runTime: '228h', currentState: '报警', colour: 'rgba(255, 12, 12, 1)', downTime: '338h' },
|
||||
{ equipmentName: '固化机', runTime: '112h', currentState: '报警', colour: 'rgba(255, 12, 12, 1)', downTime: '338h' },
|
||||
{ equipmentName: '钢化炉', runTime: '231h', currentState: '报警', colour: 'rgba(12, 255, 30, 1)', downTime: '338h' },
|
||||
{ equipmentName: '钢化清洗机', runTime: '145h', currentState: '报警', colour: 'rgba(12, 255, 30, 1)', downTime: '338h' },
|
||||
{ equipmentName: '成品下片机', runTime: '190h', currentState: '报警', colour: 'rgba(12, 255, 30, 1)', 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: '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,
|
||||
lineChart
|
||||
// BaseVideo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
beilv: 1,
|
||||
gourpTableHeadProps,
|
||||
isFullScreen: false,
|
||||
runTableProps,
|
||||
energyTopList,
|
||||
qualityTableProps,
|
||||
pieceList,
|
||||
productTableProps,
|
||||
runList,
|
||||
orderList,
|
||||
pieceTableProps,
|
||||
orderTableProps,
|
||||
legendData,
|
||||
qualityList,
|
||||
groupList,
|
||||
productTopList,
|
||||
productList,
|
||||
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: {
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -0,0 +1,922 @@
|
||||
<!--
|
||||
* @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>
|
||||
@@ -0,0 +1,847 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2022-01-25 16:50:41
|
||||
* @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 * 32 + '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">
|
||||
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
|
||||
<el-col :span="8">
|
||||
<el-row>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container title="当前班组情况" title-icon="nowteam" :beilv="beilv">
|
||||
<!-- <base-container title="当前班组情况" title-icon="nowteam" :beilv="beilv" :height="360"> -->
|
||||
<now-team />
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container title="质量缺陷信息" title-icon="qualitydefect" :beilv="beilv">
|
||||
<!-- <base-container title="质量缺陷信息" title-icon="qualitydefect" :beilv="beilv" :height="296"> -->
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="6"
|
||||
:beilv="beilv"
|
||||
:table-config="qualityTableProps"
|
||||
:table-data="qualityList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
||||
<!-- <el-row>
|
||||
<el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="24">
|
||||
<base-container :beilv="beilv" :height="672">
|
||||
<base-video :video-height="624" :beilv="beilv" />
|
||||
<video-footer :beilv="beilv" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
|
||||
<el-col :span="16">
|
||||
<el-row>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container title="产量情况" title-icon="yield" :beilv="beilv">
|
||||
<!-- <base-container title="产量情况" title-icon="yield" :beilv="beilv" :height="318"> -->
|
||||
<top-radio-group />
|
||||
<three-bar-chart :name-list="clNameList" :data-list="clDataList" :height="192" :beilv="beilv" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container title="产线产量情况" title-icon="yieldline" :beilv="beilv" :height="338">
|
||||
<top-radio-group />
|
||||
<linear-bar-chart
|
||||
:name-list="cxNameList"
|
||||
:data-list="cxDataList"
|
||||
:height="212"
|
||||
:beilv="beilv"
|
||||
:show-legend="true"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="15">
|
||||
<base-container title="质量缺陷信息月度总览" title-icon="qualitydefectmonth" :beilv="beilv" :height="256">
|
||||
<div class="visual-select">
|
||||
选择月(每天平均值)
|
||||
<el-select v-model="modelMonth" size="mini" placeholder="">
|
||||
<el-option key="1" value="12月" label="12月" default />
|
||||
</el-select>
|
||||
</div>
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="5"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="qualityMonthTableProps"
|
||||
:table-data="qualityMonthList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="9">
|
||||
<base-container title="质量缺陷信息年度总览" title-icon="qualitydefectyear" :beilv="beilv" :height="256">
|
||||
<div class="visual-select">
|
||||
选择年(每天平均值)
|
||||
<el-select v-model="modelYear" size="mini" placeholder="">
|
||||
<el-option key="1" value="2021年" label="2021年" default />
|
||||
</el-select>
|
||||
</div>
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="5"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="qualityYearTableProps"
|
||||
:table-data="qualityYearList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv" />
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseContainer from './components/baseContainer'
|
||||
import baseTable from './components/baseTable'
|
||||
import { mapGetters } from 'vuex'
|
||||
import screenfull from 'screenfull'
|
||||
import nowTeam from './components/ProductionLineMonitoringCockpit/nowTeam.vue'
|
||||
import TopRadioGroup from './components/topRadioGroup'
|
||||
import BaseTable from './components/baseTable.vue'
|
||||
// import BaseVideo from './components/baseVideo.vue'
|
||||
import ThreeBarChart from './components/threeBarChart.vue'
|
||||
import LinearBarChart from './components/linearBarChart'
|
||||
// import VideoFooter from './components/videoFooter'
|
||||
|
||||
const qualityTableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '发生时间'
|
||||
},
|
||||
{
|
||||
prop: 'content',
|
||||
label: '缺陷内容'
|
||||
},
|
||||
{
|
||||
prop: 'productLine',
|
||||
label: '产线'
|
||||
},
|
||||
{
|
||||
prop: 'process',
|
||||
label: '发生工序'
|
||||
}
|
||||
]
|
||||
|
||||
const qualityList = [
|
||||
{ createTime: '12:00:01', content: '报废', productLine: '钢一线', process: '磨边' },
|
||||
{ createTime: '11:20:51', content: '报废', productLine: '钢二线', process: '镀膜' },
|
||||
{ createTime: '11:05:21', content: '报废', productLine: '钢三线', process: '钢化' },
|
||||
{ createTime: '11:02:16', content: '报废', productLine: '钢四线', process: '钢化' },
|
||||
{ createTime: '10:50:49', content: '报废', productLine: '钢五线', process: '包装' },
|
||||
{ createTime: '10:30:35', content: '报废', productLine: '钢六线', process: '镀膜' }
|
||||
]
|
||||
|
||||
const qualityMonthTableProps = [
|
||||
{
|
||||
prop: 'teamName',
|
||||
label: '班组名称'
|
||||
},
|
||||
{
|
||||
prop: '1',
|
||||
label: '2021/12/1'
|
||||
},
|
||||
{
|
||||
prop: '2',
|
||||
label: '2号'
|
||||
},
|
||||
{
|
||||
prop: '3',
|
||||
label: '3号'
|
||||
},
|
||||
{
|
||||
prop: '4',
|
||||
label: '4号'
|
||||
},
|
||||
{
|
||||
prop: '5',
|
||||
label: '5号'
|
||||
},
|
||||
{
|
||||
prop: '6',
|
||||
label: '6号'
|
||||
},
|
||||
{
|
||||
prop: '7',
|
||||
label: '7号'
|
||||
},
|
||||
{
|
||||
prop: '8',
|
||||
label: '8号'
|
||||
},
|
||||
{
|
||||
prop: '9',
|
||||
label: '9号'
|
||||
},
|
||||
{
|
||||
prop: '10',
|
||||
label: '10号'
|
||||
},
|
||||
{
|
||||
prop: '11',
|
||||
label: '11号'
|
||||
},
|
||||
{
|
||||
prop: '12',
|
||||
label: '12号'
|
||||
},
|
||||
{
|
||||
prop: '13',
|
||||
label: '13号'
|
||||
},
|
||||
{
|
||||
prop: '14',
|
||||
label: '14号'
|
||||
},
|
||||
{
|
||||
prop: '15',
|
||||
label: '15号'
|
||||
},
|
||||
{
|
||||
prop: '16',
|
||||
label: '16号'
|
||||
},
|
||||
{
|
||||
prop: '17',
|
||||
label: '17号'
|
||||
},
|
||||
{
|
||||
prop: '18',
|
||||
label: '18号'
|
||||
},
|
||||
{
|
||||
prop: '19',
|
||||
label: '19号'
|
||||
},
|
||||
{
|
||||
prop: '20',
|
||||
label: '20号'
|
||||
},
|
||||
{
|
||||
prop: '21',
|
||||
label: '21号'
|
||||
},
|
||||
{
|
||||
prop: '22',
|
||||
label: '22号'
|
||||
},
|
||||
{
|
||||
prop: '23',
|
||||
label: '23号'
|
||||
},
|
||||
{
|
||||
prop: '24',
|
||||
label: '24号'
|
||||
},
|
||||
{
|
||||
prop: '25',
|
||||
label: '25号'
|
||||
},
|
||||
{
|
||||
prop: '26',
|
||||
label: '26号'
|
||||
},
|
||||
{
|
||||
prop: '27',
|
||||
label: '27号'
|
||||
},
|
||||
{
|
||||
prop: '28',
|
||||
label: '28号'
|
||||
},
|
||||
{
|
||||
prop: '29',
|
||||
label: '29号'
|
||||
},
|
||||
{
|
||||
prop: '30',
|
||||
label: '30号'
|
||||
},
|
||||
{
|
||||
prop: '31',
|
||||
label: '31号'
|
||||
}
|
||||
]
|
||||
|
||||
const qualityMonthList = [
|
||||
{
|
||||
teamName: '早班执行一组',
|
||||
'1': '97.2%',
|
||||
'2': '98.3%',
|
||||
'3': '97.3%',
|
||||
'4': '98.5%',
|
||||
'5': '98.67%',
|
||||
'6': '97.54%',
|
||||
'7': '97.43%',
|
||||
'8': '97.65%',
|
||||
'9': '97.34%',
|
||||
'10': '98.34%',
|
||||
'11': '98.76%',
|
||||
'12': '97.43%',
|
||||
'13': '98.65%',
|
||||
'14': '97.86%',
|
||||
'15': '98.77%',
|
||||
'16': '98.54%',
|
||||
'17': '97.59%',
|
||||
'18': '98.76%',
|
||||
'19': '98.55%',
|
||||
'20': '97.87%',
|
||||
'21': '98.76%',
|
||||
'22': '99.11%',
|
||||
'23': '98.12%',
|
||||
'24': '98.86%',
|
||||
'25': '98.34%',
|
||||
'26': '97.34%',
|
||||
'27': '98.54%',
|
||||
'28': '97.65%',
|
||||
'29': '98.76%',
|
||||
'30': '98.45%',
|
||||
'31': '97.65%'
|
||||
},
|
||||
{
|
||||
teamName: '早班执行二组',
|
||||
'1': '97.22%',
|
||||
'2': '98.37%',
|
||||
'3': '97.38%',
|
||||
'4': '98.52%',
|
||||
'5': '98.76%',
|
||||
'6': '97.55%',
|
||||
'7': '97.32%',
|
||||
'8': '97.23%',
|
||||
'9': '97.45%',
|
||||
'10': '98.75%',
|
||||
'11': '98.34%',
|
||||
'12': '97.34%',
|
||||
'13': '98.23%',
|
||||
'14': '97.65%',
|
||||
'15': '98.43%',
|
||||
'16': '98.57%',
|
||||
'17': '97.34%',
|
||||
'18': '98.86%',
|
||||
'19': '98.43%',
|
||||
'20': '97.34%',
|
||||
'21': '98.75%',
|
||||
'22': '99.43%',
|
||||
'23': '98.45%',
|
||||
'24': '98.32%',
|
||||
'25': '98.34%',
|
||||
'26': '97.43%',
|
||||
'27': '98.54%',
|
||||
'28': '97.64%',
|
||||
'29': '98.65%',
|
||||
'30': '98.43%',
|
||||
'31': '97.23%'
|
||||
},
|
||||
{
|
||||
teamName: '中班执行一组',
|
||||
'1': '98.43%',
|
||||
'2': '98.23%',
|
||||
'3': '97.53%',
|
||||
'4': '98.45%',
|
||||
'5': '98.87%',
|
||||
'6': '98.74%',
|
||||
'7': '98.13%',
|
||||
'8': '97.47%',
|
||||
'9': '97.99%',
|
||||
'10': '98.323%',
|
||||
'11': '98.99%',
|
||||
'12': '97.23%',
|
||||
'13': '98.23%',
|
||||
'14': '97.34%',
|
||||
'15': '98.65%',
|
||||
'16': '98.58%',
|
||||
'17': '97.64%',
|
||||
'18': '98.23%',
|
||||
'19': '98.32%',
|
||||
'20': '98.27%',
|
||||
'21': '98.23%',
|
||||
'22': '99%',
|
||||
'23': '98.62%',
|
||||
'24': '98.56%',
|
||||
'25': '98.44%',
|
||||
'26': '97.54%',
|
||||
'27': '98.23%',
|
||||
'28': '98.25%',
|
||||
'29': '98.72%',
|
||||
'30': '98.35%',
|
||||
'31': '97.25%'
|
||||
},
|
||||
{
|
||||
teamName: '中班执行三组',
|
||||
'1': '97.23%',
|
||||
'2': '98.23%',
|
||||
'3': '97.31%',
|
||||
'4': '98.53%',
|
||||
'5': '98.64%',
|
||||
'6': '97.34%',
|
||||
'7': '97.34%',
|
||||
'8': '97.23%',
|
||||
'9': '97.32%',
|
||||
'10': '98.23%',
|
||||
'11': '98.32%',
|
||||
'12': '97.55%',
|
||||
'13': '98.67%',
|
||||
'14': '97.23%',
|
||||
'15': '98.23%',
|
||||
'16': '98.64%',
|
||||
'17': '97.65%',
|
||||
'18': '98.19%',
|
||||
'19': '98.23%',
|
||||
'20': '97.17%',
|
||||
'21': '98.17%',
|
||||
'22': '99.38%',
|
||||
'23': '98.47%',
|
||||
'24': '98.23%',
|
||||
'25': '98.74%',
|
||||
'26': '97.23%',
|
||||
'27': '97.32%',
|
||||
'28': '97.78%',
|
||||
'29': '98.67%',
|
||||
'30': '98.23%',
|
||||
'31': '97.68%'
|
||||
},
|
||||
{
|
||||
teamName: '晚班执行一组',
|
||||
'1': '97.32%',
|
||||
'2': '98.34%',
|
||||
'3': '97.37%',
|
||||
'4': '98.58%',
|
||||
'5': '98.87%',
|
||||
'6': '97.34%',
|
||||
'7': '97.23%',
|
||||
'8': '97.35%',
|
||||
'9': '97.64%',
|
||||
'10': '98.33%',
|
||||
'11': '98.76%',
|
||||
'12': '97.23%',
|
||||
'13': '98.33%',
|
||||
'14': '97.44%',
|
||||
'15': '98.34%',
|
||||
'16': '98.43%',
|
||||
'17': '97.43%',
|
||||
'18': '98.43%',
|
||||
'19': '98.66%',
|
||||
'20': '97.45%',
|
||||
'21': '98.36%',
|
||||
'22': '99.14%',
|
||||
'23': '98.57%',
|
||||
'24': '98.32%',
|
||||
'25': '98.23%',
|
||||
'26': '97.78%',
|
||||
'27': '98.23%',
|
||||
'28': '97.23%',
|
||||
'29': '98.34%',
|
||||
'30': '98.54%',
|
||||
'31': '97.67%'
|
||||
}
|
||||
]
|
||||
|
||||
const qualityYearTableProps = [
|
||||
{
|
||||
prop: 'teamName',
|
||||
label: '班组名称'
|
||||
},
|
||||
{
|
||||
prop: '1',
|
||||
label: '2021/1'
|
||||
},
|
||||
{
|
||||
prop: '2',
|
||||
label: '2月'
|
||||
},
|
||||
{
|
||||
prop: '3',
|
||||
label: '3月'
|
||||
},
|
||||
{
|
||||
prop: '4',
|
||||
label: '4月'
|
||||
},
|
||||
{
|
||||
prop: '5',
|
||||
label: '5月'
|
||||
},
|
||||
{
|
||||
prop: '6',
|
||||
label: '6月'
|
||||
},
|
||||
{
|
||||
prop: '7',
|
||||
label: '7月'
|
||||
},
|
||||
{
|
||||
prop: '8',
|
||||
label: '8月'
|
||||
},
|
||||
{
|
||||
prop: '9',
|
||||
label: '9月'
|
||||
},
|
||||
{
|
||||
prop: '10',
|
||||
label: '10月'
|
||||
},
|
||||
{
|
||||
prop: '11',
|
||||
label: '11月'
|
||||
},
|
||||
{
|
||||
prop: '12',
|
||||
label: '12月'
|
||||
}
|
||||
]
|
||||
|
||||
const qualityYearList = [
|
||||
{
|
||||
teamName: '早班执行一组',
|
||||
'1': '98.2%',
|
||||
'2': '98.23%',
|
||||
'3': '98.23%',
|
||||
'4': '98.23%',
|
||||
'5': '98.67%',
|
||||
'6': '98.65%',
|
||||
'7': '98.43%',
|
||||
'8': '97.43%',
|
||||
'9': '98.43%',
|
||||
'10': '98.66%',
|
||||
'11': '98.45%',
|
||||
'12': '98.32%'
|
||||
},
|
||||
{
|
||||
teamName: '早班执行二组',
|
||||
'1': '98.76%',
|
||||
'2': '98.72%',
|
||||
'3': '98.6%',
|
||||
'4': '99%',
|
||||
'5': '98.4%',
|
||||
'6': '98.3%',
|
||||
'7': '99%',
|
||||
'8': '97.3%',
|
||||
'9': '98.2%',
|
||||
'10': '98.63%',
|
||||
'11': '98.32%',
|
||||
'12': '98.32%'
|
||||
},
|
||||
{
|
||||
teamName: '中班执行一组',
|
||||
'1': '98.5%',
|
||||
'2': '98.34%',
|
||||
'3': '97.65%',
|
||||
'4': '98.37%',
|
||||
'5': '98.53%',
|
||||
'6': '98.38%',
|
||||
'7': '98.32%',
|
||||
'8': '98.34%',
|
||||
'9': '98.58%',
|
||||
'10': '98.45%',
|
||||
'11': '97.45%',
|
||||
'12': '97.34%'
|
||||
},
|
||||
{
|
||||
teamName: '中班执行三组',
|
||||
'1': '97.65%',
|
||||
'2': '97.54%',
|
||||
'3': '98.44%',
|
||||
'4': '98.23%',
|
||||
'5': '97.43%',
|
||||
'6': '98.43%',
|
||||
'7': '98.34%',
|
||||
'8': '97.34%',
|
||||
'9': '98.34%',
|
||||
'10': '98.33%',
|
||||
'11': '98.56%',
|
||||
'12': '98.3%'
|
||||
},
|
||||
{
|
||||
teamName: '晚班执行一组',
|
||||
'1': '98.4%',
|
||||
'2': '98.65%',
|
||||
'3': '98.34%',
|
||||
'4': '98.34%',
|
||||
'5': '98.65%',
|
||||
'6': '98.34%',
|
||||
'7': '98.45%',
|
||||
'8': '98.34%',
|
||||
'9': '98.43%',
|
||||
'10': '98.34%',
|
||||
'11': '98.34%',
|
||||
'12': '97.43%'
|
||||
}
|
||||
]
|
||||
|
||||
const clNameList = [
|
||||
'早班执行一组',
|
||||
'早班执行二组',
|
||||
'早班执行三组',
|
||||
'中班执行一组',
|
||||
'中班执行二组',
|
||||
'中班执行三组',
|
||||
'晚班执行一组',
|
||||
'晚班执行二组',
|
||||
'晚班执行三组'
|
||||
]
|
||||
const clDataList = [
|
||||
{
|
||||
topColor: '#7CB6FF',
|
||||
bottomColor: '#166BD6',
|
||||
name: '产量',
|
||||
data: [100, 150, 121, 97, 140, 180, 11, 180]
|
||||
}
|
||||
]
|
||||
|
||||
const cxNameList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
const cxDataList = [
|
||||
{
|
||||
topColor: '#9DD5FF',
|
||||
bottomColor: '#1295FF',
|
||||
name: '钢一线',
|
||||
data: [100, 150, 121, 97, 140, 111, 127]
|
||||
},
|
||||
{
|
||||
topColor: '#FF8BC3',
|
||||
bottomColor: '#EB46A1',
|
||||
name: '钢二线',
|
||||
data: [110, 110, 151, 77, 110, 98, 22]
|
||||
},
|
||||
{
|
||||
topColor: '#85F6E9',
|
||||
bottomColor: '#2EC6B4',
|
||||
name: '钢三线',
|
||||
data: [110, 120, 171, 287, 40, 160, 127]
|
||||
},
|
||||
{
|
||||
topColor: '#9496FF',
|
||||
bottomColor: '#6567FF',
|
||||
name: '钢四线',
|
||||
data: [140, 157, 122, 27, 240, 112, 21]
|
||||
},
|
||||
{
|
||||
topColor: '#F68E8A',
|
||||
bottomColor: '#E95552',
|
||||
name: '钢五线',
|
||||
data: [170, 180, 127, 17, 340, 111, 98]
|
||||
},
|
||||
{
|
||||
topColor: '#FFE873',
|
||||
bottomColor: '#E7AE2A',
|
||||
name: '钢六线',
|
||||
data: [140, 160, 121, 57, 170, 99, 123]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'ProductionMonitoringCockpit',
|
||||
components: {
|
||||
baseContainer,
|
||||
baseTable,
|
||||
nowTeam,
|
||||
BaseTable,
|
||||
// BaseVideo,
|
||||
TopRadioGroup,
|
||||
ThreeBarChart,
|
||||
LinearBarChart
|
||||
// VideoFooter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
beilv: 1,
|
||||
isFullScreen: false,
|
||||
qualityTableProps,
|
||||
qualityList,
|
||||
qualityMonthTableProps,
|
||||
qualityMonthList,
|
||||
qualityYearTableProps,
|
||||
qualityYearList,
|
||||
clNameList,
|
||||
clDataList,
|
||||
cxNameList,
|
||||
cxDataList,
|
||||
modelMonth: '12月',
|
||||
modelYear: '2021年'
|
||||
}
|
||||
},
|
||||
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()
|
||||
console.log(this.qualityMonthTableProps)
|
||||
console.log(this.qualityMonthList)
|
||||
},
|
||||
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: {
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.visual-select {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 2em;
|
||||
background: rgba($color: #31878c, $alpha: 0.29);
|
||||
padding-left: 1em;
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -0,0 +1,873 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2022-01-25 16:50:41
|
||||
* @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 * 32 + '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">
|
||||
<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="8">
|
||||
<base-container title="当前班组情况" title-icon="nowteam" :beilv="beilv">
|
||||
<!-- <base-container title="当前班组情况" title-icon="nowteam" :beilv="beilv" :height="360"> -->
|
||||
<now-team />
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="16">
|
||||
<base-container title="产量情况" title-icon="yield" :beilv="beilv">
|
||||
<!-- <base-container title="产量情况" title-icon="yield" :beilv="beilv" :height="318"> -->
|
||||
<div style="position: absolute; top: 36px; right: 48px; width: 360px;">
|
||||
<top-radio-group key="radio-group-1" />
|
||||
</div>
|
||||
<three-bar-chart :name-list="clNameList" :data-list="clDataList" :height="192" :beilv="beilv" />
|
||||
</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="8">
|
||||
<base-container title="质量缺陷信息" title-icon="qualitydefect" :beilv="beilv">
|
||||
<!-- <base-container title="质量缺陷信息" title-icon="qualitydefect" :beilv="beilv" :height="296"> -->
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="6"
|
||||
:beilv="beilv"
|
||||
:table-config="qualityTableProps"
|
||||
:table-data="qualityList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="16">
|
||||
<base-container title="产线产量情况" title-icon="yieldline" :beilv="beilv" :height="338">
|
||||
<div style="position: absolute; top: 36px; right: 48px; width: 360px;">
|
||||
<top-radio-group key="radio-group-2" />
|
||||
</div>
|
||||
<linear-bar-chart
|
||||
:name-list="cxNameList"
|
||||
:data-list="cxDataList"
|
||||
:height="212"
|
||||
:beilv="beilv"
|
||||
:show-legend="true"
|
||||
/>
|
||||
</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="15">
|
||||
<base-container title="质量缺陷信息月度总览" title-icon="qualitydefectmonth" :beilv="beilv" :height="256">
|
||||
<div class="visual-select">
|
||||
<span>
|
||||
选择月(每天平均值)
|
||||
</span>
|
||||
<el-select v-model="modelMonth" size="mini" placeholder="">
|
||||
<el-option key="1" value="12月" label="12月" default />
|
||||
</el-select>
|
||||
</div>
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="5"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="qualityMonthTableProps"
|
||||
:table-data="qualityMonthList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="9">
|
||||
<base-container title="质量缺陷信息年度总览" title-icon="qualitydefectyear" :beilv="beilv" :height="256">
|
||||
<div class="visual-select">
|
||||
<span>
|
||||
选择年(每天平均值)
|
||||
</span>
|
||||
<el-select v-model="modelYear" size="mini" placeholder="">
|
||||
<el-option key="1" value="2021年" label="2021年" default />
|
||||
</el-select>
|
||||
</div>
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="5"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="qualityYearTableProps"
|
||||
:table-data="qualityYearList"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- <el-row>
|
||||
<el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="24">
|
||||
<base-container :beilv="beilv" :height="672">
|
||||
<base-video :video-height="624" :beilv="beilv" />
|
||||
<video-footer :beilv="beilv" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseContainer from './components/baseContainer'
|
||||
import baseTable from './components/baseTable'
|
||||
import { mapGetters } from 'vuex'
|
||||
import screenfull from 'screenfull'
|
||||
import nowTeam from './components/ProductionLineMonitoringCockpit/nowTeam.vue'
|
||||
import TopRadioGroup from './components/topRadioGroup'
|
||||
import BaseTable from './components/baseTable.vue'
|
||||
// import BaseVideo from './components/baseVideo.vue'
|
||||
import ThreeBarChart from './components/threeBarChart.vue'
|
||||
import LinearBarChart from './components/linearBarChart'
|
||||
// import VideoFooter from './components/videoFooter'
|
||||
|
||||
const qualityTableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '发生时间'
|
||||
},
|
||||
{
|
||||
prop: 'content',
|
||||
label: '缺陷内容'
|
||||
},
|
||||
{
|
||||
prop: 'productLine',
|
||||
label: '产线'
|
||||
},
|
||||
{
|
||||
prop: 'process',
|
||||
label: '发生工序'
|
||||
}
|
||||
]
|
||||
|
||||
const qualityList = [
|
||||
{ createTime: '12:00:01', content: '报废', productLine: '钢一线', process: '磨边' },
|
||||
{ createTime: '11:20:51', content: '报废', productLine: '钢二线', process: '镀膜' },
|
||||
{ createTime: '11:05:21', content: '报废', productLine: '钢三线', process: '钢化' },
|
||||
{ createTime: '11:02:16', content: '报废', productLine: '钢四线', process: '钢化' },
|
||||
{ createTime: '10:50:49', content: '报废', productLine: '钢五线', process: '包装' },
|
||||
{ createTime: '10:30:35', content: '报废', productLine: '钢六线', process: '镀膜' }
|
||||
]
|
||||
|
||||
const qualityMonthTableProps = [
|
||||
{
|
||||
prop: 'teamName',
|
||||
label: '班组名称'
|
||||
},
|
||||
{
|
||||
prop: '1',
|
||||
label: '2021/12/1'
|
||||
},
|
||||
{
|
||||
prop: '2',
|
||||
label: '2号'
|
||||
},
|
||||
{
|
||||
prop: '3',
|
||||
label: '3号'
|
||||
},
|
||||
{
|
||||
prop: '4',
|
||||
label: '4号'
|
||||
},
|
||||
{
|
||||
prop: '5',
|
||||
label: '5号'
|
||||
},
|
||||
{
|
||||
prop: '6',
|
||||
label: '6号'
|
||||
},
|
||||
{
|
||||
prop: '7',
|
||||
label: '7号'
|
||||
},
|
||||
{
|
||||
prop: '8',
|
||||
label: '8号'
|
||||
},
|
||||
{
|
||||
prop: '9',
|
||||
label: '9号'
|
||||
},
|
||||
{
|
||||
prop: '10',
|
||||
label: '10号'
|
||||
},
|
||||
{
|
||||
prop: '11',
|
||||
label: '11号'
|
||||
},
|
||||
{
|
||||
prop: '12',
|
||||
label: '12号'
|
||||
},
|
||||
{
|
||||
prop: '13',
|
||||
label: '13号'
|
||||
},
|
||||
{
|
||||
prop: '14',
|
||||
label: '14号'
|
||||
},
|
||||
{
|
||||
prop: '15',
|
||||
label: '15号'
|
||||
},
|
||||
{
|
||||
prop: '16',
|
||||
label: '16号'
|
||||
},
|
||||
{
|
||||
prop: '17',
|
||||
label: '17号'
|
||||
},
|
||||
{
|
||||
prop: '18',
|
||||
label: '18号'
|
||||
},
|
||||
{
|
||||
prop: '19',
|
||||
label: '19号'
|
||||
},
|
||||
{
|
||||
prop: '20',
|
||||
label: '20号'
|
||||
},
|
||||
{
|
||||
prop: '21',
|
||||
label: '21号'
|
||||
},
|
||||
{
|
||||
prop: '22',
|
||||
label: '22号'
|
||||
},
|
||||
{
|
||||
prop: '23',
|
||||
label: '23号'
|
||||
},
|
||||
{
|
||||
prop: '24',
|
||||
label: '24号'
|
||||
},
|
||||
{
|
||||
prop: '25',
|
||||
label: '25号'
|
||||
},
|
||||
{
|
||||
prop: '26',
|
||||
label: '26号'
|
||||
},
|
||||
{
|
||||
prop: '27',
|
||||
label: '27号'
|
||||
},
|
||||
{
|
||||
prop: '28',
|
||||
label: '28号'
|
||||
},
|
||||
{
|
||||
prop: '29',
|
||||
label: '29号'
|
||||
},
|
||||
{
|
||||
prop: '30',
|
||||
label: '30号'
|
||||
},
|
||||
{
|
||||
prop: '31',
|
||||
label: '31号'
|
||||
}
|
||||
]
|
||||
|
||||
const qualityMonthList = [
|
||||
{
|
||||
teamName: '早班执行一组',
|
||||
'1': '97.2%',
|
||||
'2': '98.3%',
|
||||
'3': '97.3%',
|
||||
'4': '98.5%',
|
||||
'5': '98.67%',
|
||||
'6': '97.54%',
|
||||
'7': '97.43%',
|
||||
'8': '97.65%',
|
||||
'9': '97.34%',
|
||||
'10': '98.34%',
|
||||
'11': '98.76%',
|
||||
'12': '97.43%',
|
||||
'13': '98.65%',
|
||||
'14': '97.86%',
|
||||
'15': '98.77%',
|
||||
'16': '98.54%',
|
||||
'17': '97.59%',
|
||||
'18': '98.76%',
|
||||
'19': '98.55%',
|
||||
'20': '97.87%',
|
||||
'21': '98.76%',
|
||||
'22': '99.11%',
|
||||
'23': '98.12%',
|
||||
'24': '98.86%',
|
||||
'25': '98.34%',
|
||||
'26': '97.34%',
|
||||
'27': '98.54%',
|
||||
'28': '97.65%',
|
||||
'29': '98.76%',
|
||||
'30': '98.45%',
|
||||
'31': '97.65%'
|
||||
},
|
||||
{
|
||||
teamName: '早班执行二组',
|
||||
'1': '97.22%',
|
||||
'2': '98.37%',
|
||||
'3': '97.38%',
|
||||
'4': '98.52%',
|
||||
'5': '98.76%',
|
||||
'6': '97.55%',
|
||||
'7': '97.32%',
|
||||
'8': '97.23%',
|
||||
'9': '97.45%',
|
||||
'10': '98.75%',
|
||||
'11': '98.34%',
|
||||
'12': '97.34%',
|
||||
'13': '98.23%',
|
||||
'14': '97.65%',
|
||||
'15': '98.43%',
|
||||
'16': '98.57%',
|
||||
'17': '97.34%',
|
||||
'18': '98.86%',
|
||||
'19': '98.43%',
|
||||
'20': '97.34%',
|
||||
'21': '98.75%',
|
||||
'22': '99.43%',
|
||||
'23': '98.45%',
|
||||
'24': '98.32%',
|
||||
'25': '98.34%',
|
||||
'26': '97.43%',
|
||||
'27': '98.54%',
|
||||
'28': '97.64%',
|
||||
'29': '98.65%',
|
||||
'30': '98.43%',
|
||||
'31': '97.23%'
|
||||
},
|
||||
{
|
||||
teamName: '中班执行一组',
|
||||
'1': '98.43%',
|
||||
'2': '98.23%',
|
||||
'3': '97.53%',
|
||||
'4': '98.45%',
|
||||
'5': '98.87%',
|
||||
'6': '98.74%',
|
||||
'7': '98.13%',
|
||||
'8': '97.47%',
|
||||
'9': '97.99%',
|
||||
'10': '98.323%',
|
||||
'11': '98.99%',
|
||||
'12': '97.23%',
|
||||
'13': '98.23%',
|
||||
'14': '97.34%',
|
||||
'15': '98.65%',
|
||||
'16': '98.58%',
|
||||
'17': '97.64%',
|
||||
'18': '98.23%',
|
||||
'19': '98.32%',
|
||||
'20': '98.27%',
|
||||
'21': '98.23%',
|
||||
'22': '99%',
|
||||
'23': '98.62%',
|
||||
'24': '98.56%',
|
||||
'25': '98.44%',
|
||||
'26': '97.54%',
|
||||
'27': '98.23%',
|
||||
'28': '98.25%',
|
||||
'29': '98.72%',
|
||||
'30': '98.35%',
|
||||
'31': '97.25%'
|
||||
},
|
||||
{
|
||||
teamName: '中班执行三组',
|
||||
'1': '97.23%',
|
||||
'2': '98.23%',
|
||||
'3': '97.31%',
|
||||
'4': '98.53%',
|
||||
'5': '98.64%',
|
||||
'6': '97.34%',
|
||||
'7': '97.34%',
|
||||
'8': '97.23%',
|
||||
'9': '97.32%',
|
||||
'10': '98.23%',
|
||||
'11': '98.32%',
|
||||
'12': '97.55%',
|
||||
'13': '98.67%',
|
||||
'14': '97.23%',
|
||||
'15': '98.23%',
|
||||
'16': '98.64%',
|
||||
'17': '97.65%',
|
||||
'18': '98.19%',
|
||||
'19': '98.23%',
|
||||
'20': '97.17%',
|
||||
'21': '98.17%',
|
||||
'22': '99.38%',
|
||||
'23': '98.47%',
|
||||
'24': '98.23%',
|
||||
'25': '98.74%',
|
||||
'26': '97.23%',
|
||||
'27': '97.32%',
|
||||
'28': '97.78%',
|
||||
'29': '98.67%',
|
||||
'30': '98.23%',
|
||||
'31': '97.68%'
|
||||
},
|
||||
{
|
||||
teamName: '晚班执行一组',
|
||||
'1': '97.32%',
|
||||
'2': '98.34%',
|
||||
'3': '97.37%',
|
||||
'4': '98.58%',
|
||||
'5': '98.87%',
|
||||
'6': '97.34%',
|
||||
'7': '97.23%',
|
||||
'8': '97.35%',
|
||||
'9': '97.64%',
|
||||
'10': '98.33%',
|
||||
'11': '98.76%',
|
||||
'12': '97.23%',
|
||||
'13': '98.33%',
|
||||
'14': '97.44%',
|
||||
'15': '98.34%',
|
||||
'16': '98.43%',
|
||||
'17': '97.43%',
|
||||
'18': '98.43%',
|
||||
'19': '98.66%',
|
||||
'20': '97.45%',
|
||||
'21': '98.36%',
|
||||
'22': '99.14%',
|
||||
'23': '98.57%',
|
||||
'24': '98.32%',
|
||||
'25': '98.23%',
|
||||
'26': '97.78%',
|
||||
'27': '98.23%',
|
||||
'28': '97.23%',
|
||||
'29': '98.34%',
|
||||
'30': '98.54%',
|
||||
'31': '97.67%'
|
||||
}
|
||||
]
|
||||
|
||||
const qualityYearTableProps = [
|
||||
{
|
||||
prop: 'teamName',
|
||||
label: '班组名称'
|
||||
},
|
||||
{
|
||||
prop: '1',
|
||||
label: '2021/1'
|
||||
},
|
||||
{
|
||||
prop: '2',
|
||||
label: '2月'
|
||||
},
|
||||
{
|
||||
prop: '3',
|
||||
label: '3月'
|
||||
},
|
||||
{
|
||||
prop: '4',
|
||||
label: '4月'
|
||||
},
|
||||
{
|
||||
prop: '5',
|
||||
label: '5月'
|
||||
},
|
||||
{
|
||||
prop: '6',
|
||||
label: '6月'
|
||||
},
|
||||
{
|
||||
prop: '7',
|
||||
label: '7月'
|
||||
},
|
||||
{
|
||||
prop: '8',
|
||||
label: '8月'
|
||||
},
|
||||
{
|
||||
prop: '9',
|
||||
label: '9月'
|
||||
},
|
||||
{
|
||||
prop: '10',
|
||||
label: '10月'
|
||||
},
|
||||
{
|
||||
prop: '11',
|
||||
label: '11月'
|
||||
},
|
||||
{
|
||||
prop: '12',
|
||||
label: '12月'
|
||||
}
|
||||
]
|
||||
|
||||
const qualityYearList = [
|
||||
{
|
||||
teamName: '早班执行一组',
|
||||
'1': '98.2%',
|
||||
'2': '98.23%',
|
||||
'3': '98.23%',
|
||||
'4': '98.23%',
|
||||
'5': '98.67%',
|
||||
'6': '98.65%',
|
||||
'7': '98.43%',
|
||||
'8': '97.43%',
|
||||
'9': '98.43%',
|
||||
'10': '98.66%',
|
||||
'11': '98.45%',
|
||||
'12': '98.32%'
|
||||
},
|
||||
{
|
||||
teamName: '早班执行二组',
|
||||
'1': '98.76%',
|
||||
'2': '98.72%',
|
||||
'3': '98.6%',
|
||||
'4': '99%',
|
||||
'5': '98.4%',
|
||||
'6': '98.3%',
|
||||
'7': '99%',
|
||||
'8': '97.3%',
|
||||
'9': '98.2%',
|
||||
'10': '98.63%',
|
||||
'11': '98.32%',
|
||||
'12': '98.32%'
|
||||
},
|
||||
{
|
||||
teamName: '中班执行一组',
|
||||
'1': '98.5%',
|
||||
'2': '98.34%',
|
||||
'3': '97.65%',
|
||||
'4': '98.37%',
|
||||
'5': '98.53%',
|
||||
'6': '98.38%',
|
||||
'7': '98.32%',
|
||||
'8': '98.34%',
|
||||
'9': '98.58%',
|
||||
'10': '98.45%',
|
||||
'11': '97.45%',
|
||||
'12': '97.34%'
|
||||
},
|
||||
{
|
||||
teamName: '中班执行三组',
|
||||
'1': '97.65%',
|
||||
'2': '97.54%',
|
||||
'3': '98.44%',
|
||||
'4': '98.23%',
|
||||
'5': '97.43%',
|
||||
'6': '98.43%',
|
||||
'7': '98.34%',
|
||||
'8': '97.34%',
|
||||
'9': '98.34%',
|
||||
'10': '98.33%',
|
||||
'11': '98.56%',
|
||||
'12': '98.3%'
|
||||
},
|
||||
{
|
||||
teamName: '晚班执行一组',
|
||||
'1': '98.4%',
|
||||
'2': '98.65%',
|
||||
'3': '98.34%',
|
||||
'4': '98.34%',
|
||||
'5': '98.65%',
|
||||
'6': '98.34%',
|
||||
'7': '98.45%',
|
||||
'8': '98.34%',
|
||||
'9': '98.43%',
|
||||
'10': '98.34%',
|
||||
'11': '98.34%',
|
||||
'12': '97.43%'
|
||||
}
|
||||
]
|
||||
|
||||
const clNameList = [
|
||||
'早班执行一组',
|
||||
'早班执行二组',
|
||||
'早班执行三组',
|
||||
'中班执行一组',
|
||||
'中班执行二组',
|
||||
'中班执行三组',
|
||||
'晚班执行一组',
|
||||
'晚班执行二组',
|
||||
'晚班执行三组'
|
||||
]
|
||||
const clDataList = [
|
||||
{
|
||||
topColor: '#7CB6FF',
|
||||
bottomColor: '#166BD6',
|
||||
name: '产量',
|
||||
data: [100, 150, 121, 97, 140, 180, 11, 180, 99]
|
||||
}
|
||||
]
|
||||
|
||||
const cxNameList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
const cxDataList = [
|
||||
{
|
||||
topColor: '#9DD5FF',
|
||||
bottomColor: '#1295FF',
|
||||
name: '钢一线',
|
||||
data: [100, 150, 121, 97, 140, 111, 127]
|
||||
},
|
||||
{
|
||||
topColor: '#FF8BC3',
|
||||
bottomColor: '#EB46A1',
|
||||
name: '钢二线',
|
||||
data: [110, 110, 151, 77, 110, 98, 22]
|
||||
},
|
||||
{
|
||||
topColor: '#85F6E9',
|
||||
bottomColor: '#2EC6B4',
|
||||
name: '钢三线',
|
||||
data: [110, 120, 171, 287, 40, 160, 127]
|
||||
},
|
||||
{
|
||||
topColor: '#9496FF',
|
||||
bottomColor: '#6567FF',
|
||||
name: '钢四线',
|
||||
data: [140, 157, 122, 27, 240, 112, 21]
|
||||
},
|
||||
{
|
||||
topColor: '#F68E8A',
|
||||
bottomColor: '#E95552',
|
||||
name: '钢五线',
|
||||
data: [170, 180, 127, 17, 340, 111, 98]
|
||||
},
|
||||
{
|
||||
topColor: '#FFE873',
|
||||
bottomColor: '#E7AE2A',
|
||||
name: '钢六线',
|
||||
data: [140, 160, 121, 57, 170, 99, 123]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'ProductionMonitoringCockpit',
|
||||
components: {
|
||||
baseContainer,
|
||||
baseTable,
|
||||
nowTeam,
|
||||
BaseTable,
|
||||
// BaseVideo,
|
||||
TopRadioGroup,
|
||||
ThreeBarChart,
|
||||
LinearBarChart
|
||||
// VideoFooter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
beilv: 1,
|
||||
isFullScreen: false,
|
||||
qualityTableProps,
|
||||
qualityList,
|
||||
qualityMonthTableProps,
|
||||
qualityMonthList,
|
||||
qualityYearTableProps,
|
||||
qualityYearList,
|
||||
clNameList,
|
||||
clDataList,
|
||||
cxNameList,
|
||||
cxDataList,
|
||||
modelMonth: '12月',
|
||||
modelYear: '2021年'
|
||||
}
|
||||
},
|
||||
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()
|
||||
console.log(this.qualityMonthTableProps)
|
||||
console.log(this.qualityMonthList)
|
||||
},
|
||||
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: {
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.visual-select {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 2em;
|
||||
background: rgba($color: #31878c, $alpha: 0.29);
|
||||
border-radius: 0.2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
padding: 0.5em;
|
||||
flex: 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.visual-select >>> .el-select {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.visual-select >>> .el-input__inner {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
</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 lang="scss" scoped>
|
||||
.flex-1 {
|
||||
flex: 1 auto;
|
||||
}
|
||||
</style>
|
||||
949
src/views/OperationalOverview/ProductionMonitoringCockpit.vue
Normal file
949
src/views/OperationalOverview/ProductionMonitoringCockpit.vue
Normal file
@@ -0,0 +1,949 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2022-01-25 17:20:44
|
||||
* @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 * 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 * 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">
|
||||
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
|
||||
<el-col :span="6">
|
||||
<el-row type="flex" class="h-full flex-col">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :height="360" :title="'设备报警(7天)'" :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="7"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="exceptionAlarm.tableProps"
|
||||
:table-data="exceptionAlarm.list"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<!-- 各产线投入数量和产出 -->
|
||||
<base-container :beilv="beilv" :height="318" :title="'各产线投入数量和产出'" :title-icon="'1_3'">
|
||||
<top-radio-group :data-type="0" @change-time-range="handleChangeChartTable3" />
|
||||
<base-table3
|
||||
:limit="10"
|
||||
:beilv="beilv"
|
||||
:table-config="inAndOutOfEachLine.tableProps"
|
||||
:table-data="inAndOutOfEachLine.list"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<!-- 中间栏 -->
|
||||
<el-row type="flex" class="h-full flex-col">
|
||||
<el-col style="height: 100%; display: flex; flex-direction: column;">
|
||||
<!-- 各产线投入数量折线展示 -->
|
||||
<el-row style="flex-grow: 1; display: flex;">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :title="'各产线投入数量折线展示'" :title-icon="'1_5'">
|
||||
<div style="position:absolute;right:1em;top:3em;width:30em;">
|
||||
<top-radio-group :data-type="0" @change-time-range="handleChangeOptions('投入数量图', $event)" />
|
||||
</div>
|
||||
<simple-line-chart v-if="loadTable" :beilv="beilv" :height="180" :data-list="plInput" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 各产线投入产出折线展示 -->
|
||||
<el-row style="flex-grow: 1; display: flex;">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :title="'各产线产出数量折线展示'" :title-icon="'1_5'">
|
||||
<div style="position:absolute;right:1em;top:3em;width:30em;">
|
||||
<top-radio-group :data-type="0" @change-time-range="handleChangeOptions('产出数量图', $event)" />
|
||||
</div>
|
||||
<simple-line-chart v-if="loadTable" :beilv="beilv" :height="180" :data-list="plOutput" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 成品率折线展示 -->
|
||||
<el-row style="flex-grow: 1; display: flex;">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :title="'投入/产出比率'" :title-icon="'1_5'">
|
||||
<div style="position:absolute;right:1em;top:3em;width:30em;">
|
||||
<top-radio-group :data-type="0" @change-time-range="handleChangeOptions('投入产出比', $event)" />
|
||||
</div>
|
||||
<simple-line-chart v-if="loadTable" :beilv="beilv" :height="180" :data-list="plRate" />
|
||||
</base-container>
|
||||
<!-- <base-container :beilv="beilv" :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="beilv"
|
||||
:height="'200'"
|
||||
/>
|
||||
</base-container> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 成品率条形图展示 -->
|
||||
<!-- <el-row style="flex-grow: 1; display: flex;">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container title="成品率条形图展示" title-icon="yieldline" :beilv="beilv">
|
||||
<linear-bar-chart
|
||||
:name-list="cplNameList"
|
||||
:data-list="cplDataList"
|
||||
:beilv="beilv"
|
||||
:show-legend="true"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<!-- 右边栏 订单详情 -->
|
||||
<el-row type="flex" class="h-full flex-col">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :title="'订单详情'" :title-icon="'1_2'">
|
||||
<div style="width:100%; max-height: 50%; overflow: hidden scroll;">
|
||||
<!-- <el-row style="margin-bottom: 1em">
|
||||
<p class="now-team-title">加工工单进度</p>
|
||||
</el-row> -->
|
||||
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
|
||||
<el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
|
||||
<p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
|
||||
<i class="el-icon-check" />
|
||||
{{ op.name }}
|
||||
</p>
|
||||
<p v-else class="now-secondary-title">{{ op.name }}</p>
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-progress :percentage="100" class="custom-progress-bar" />
|
||||
<p class="now-secondary-title" style="color:#4679FD">
|
||||
<i class="el-icon-check" />
|
||||
成都碲化镉5000一期订单
|
||||
</p>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-progress :percentage="85" class="custom-progress-bar" />
|
||||
<p class="now-secondary-title">成都碲化镉二订单</p>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-progress :percentage="85" class="custom-progress-bar" />
|
||||
<p class="now-secondary-title">长利订单1000</p>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-progress :percentage="85" class="custom-progress-bar" />
|
||||
<p class="now-secondary-title">国际工程20号订单</p>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-progress :percentage="85" class="custom-progress-bar" />
|
||||
<p class="now-secondary-title">铜铟镓硒眉山10万订单</p>
|
||||
</el-row> -->
|
||||
</div>
|
||||
<div style="background:linear-gradient(to left,#071020,#52FFF1,#071020);height:1px;margin:2em 0" />
|
||||
<div style="width:100%">
|
||||
<el-row style="margin: 1em 0">
|
||||
<p class="now-team-title">待加工订单</p>
|
||||
</el-row>
|
||||
</div>
|
||||
<base-table2
|
||||
:page="1"
|
||||
:limit="7"
|
||||
:beilv="beilv"
|
||||
:table-config="qualityTableProps2"
|
||||
:table-data="qualityList2"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="18">
|
||||
<el-row :gutter="9 * beilv">
|
||||
<!-- <el-col :span="16">
|
||||
<el-row>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :height="672">
|
||||
<base-video :video-height="624" :beilv="beilv" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col> -->
|
||||
<el-col :span="16">
|
||||
<el-row />
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-row>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<!-- <base-container :beilv="beilv" :height="318" :title="'各产线投入数量和产出'" :title-icon="'1_3'">
|
||||
<top-radio-group />
|
||||
<base-table3
|
||||
:limit="10"
|
||||
:beilv="beilv"
|
||||
:table-config="qualityTableProps3"
|
||||
:table-data="qualityList3"
|
||||
/>
|
||||
</base-container> -->
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<!-- <base-container :beilv="beilv" :height="338" :title="'班组信息'" :title-icon="'1_4'">
|
||||
<linear-bar-chart
|
||||
:name-list="cxNameList"
|
||||
:data-list="cxDataList"
|
||||
:height="212"
|
||||
:beilv="beilv"
|
||||
:show-legend="true"
|
||||
/>
|
||||
</base-container> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="12">
|
||||
<!-- <base-container :beilv="beilv" :height="256" :title="'各产线投入数量和产出折线展示'" :title-icon="'1_5'">
|
||||
<div style="position:absolute;right:1em;top:3em">
|
||||
<top-radio-group />
|
||||
</div>
|
||||
<line-chart1 :id="'line-chart1'" :beilv="beilv" :legend-data="legendData" :height="'200'" />
|
||||
</base-container> -->
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="12">
|
||||
<!-- <base-container :beilv="beilv" :height="256" :title="'成品率折线展示'" :title-icon="'1_6'">
|
||||
<line-chart2
|
||||
:id="'line-chart2'"
|
||||
:show-legend="true"
|
||||
:legend-position="'right'"
|
||||
:legend-data="legendData"
|
||||
:beilv="beilv"
|
||||
:height="'200'"
|
||||
/>
|
||||
</base-container> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseContainer from './components/baseContainer'
|
||||
import baseTable1 from './components/baseTable'
|
||||
import baseTable2 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 SimpleLineChart from './components/SimpleLineChart.vue'
|
||||
// import BaseVideo from './components/baseVideo.vue'
|
||||
import axios from '@/utils/request'
|
||||
import { timeFormatter } from '@/filters'
|
||||
import moment from 'moment'
|
||||
|
||||
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: '班组1',
|
||||
data: [100, 150, 121, 97, 140]
|
||||
},
|
||||
{
|
||||
topColor: '#FF8BC3',
|
||||
bottomColor: '#EB46A1',
|
||||
name: '班组2',
|
||||
data: [110, 110, 151, 77, 110]
|
||||
},
|
||||
{
|
||||
topColor: '#85F6E9',
|
||||
bottomColor: '#2EC6B4',
|
||||
name: '班组3',
|
||||
data: [110, 120, 171, 287, 40]
|
||||
},
|
||||
{
|
||||
topColor: '#9496FF',
|
||||
bottomColor: '#6567FF',
|
||||
name: '班组4',
|
||||
data: [140, 157, 122, 27, 240]
|
||||
},
|
||||
{
|
||||
topColor: '#F68E8A',
|
||||
bottomColor: '#E95552',
|
||||
name: '班组5',
|
||||
data: [170, 180, 127, 17, 340]
|
||||
},
|
||||
{
|
||||
topColor: '#FFE873',
|
||||
bottomColor: '#E7AE2A',
|
||||
name: '班组6',
|
||||
data: [140, 160, 121, 57, 170]
|
||||
}
|
||||
]
|
||||
|
||||
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]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'ProductionMonitoringCockpit',
|
||||
components: {
|
||||
baseContainer,
|
||||
baseTable1,
|
||||
baseTable2,
|
||||
baseTable3,
|
||||
TopRadioGroup,
|
||||
SimpleLineChart
|
||||
// LineChart1,
|
||||
// LineChart2,
|
||||
// LinearBarChart
|
||||
// BaseVideo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
exceptionAlarm: {
|
||||
tableProps: [
|
||||
{ prop: 'createTime', label: '报警时间', filter: timeFormatter },
|
||||
{ prop: 'alarmContent', label: '报警内容' },
|
||||
{ prop: 'alarmGrade', label: '报警等级' },
|
||||
// { prop: 'count', label: '总数' },
|
||||
{ prop: 'equipmentName', label: '设备名称' }
|
||||
],
|
||||
total: 0,
|
||||
list: []
|
||||
},
|
||||
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: []
|
||||
},
|
||||
orderProcessList: [],
|
||||
beilv: 1,
|
||||
isFullScreen: false,
|
||||
qualityTableProps1,
|
||||
qualityList1,
|
||||
qualityTableProps2,
|
||||
qualityList2,
|
||||
dateType: '0',
|
||||
legendData,
|
||||
cxNameList,
|
||||
cxDataList,
|
||||
cplNameList,
|
||||
cplDataList,
|
||||
plInput: {},
|
||||
plOutput: {},
|
||||
plRate: {},
|
||||
loadTable: false,
|
||||
standardCategory: null
|
||||
}
|
||||
},
|
||||
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.fetchList('exception-alarm')
|
||||
this.fetchList('inAndOutOfEachLine')
|
||||
this.fetchList('order-process')
|
||||
this.fetchList('line-chart-data')
|
||||
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: {
|
||||
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%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.h-full {
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
|
||||
.el-col {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-progress-bar >>> .el-progress-bar__outer {
|
||||
background-color: #1d304b;
|
||||
}
|
||||
</style>
|
||||
551
src/views/OperationalOverview/QualityManagementCockpit.vue
Normal file
551
src/views/OperationalOverview/QualityManagementCockpit.vue
Normal file
@@ -0,0 +1,551 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2022-01-25 17:10:44
|
||||
* @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 * 31 + '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 flex-col" type="flex">
|
||||
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="15 * beilv" type="flex" class="flex-1">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="8">
|
||||
<base-container :beilv="beilv" :title="'缺陷汇总'" :title-icon="'5_1'">
|
||||
<div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div>
|
||||
<!-- 为外部添加一个容器并显式地设置一个高度: -->
|
||||
<div style="height: 300px;">
|
||||
<pie-chart1
|
||||
:id="'pie-chart1'"
|
||||
:show-center-title="true"
|
||||
:legend-config="{ orient: 'horizontal', width: '90%', left: '5%', top: '80%', itemGap: 25 }"
|
||||
:series-config="{ center: ['50%', '40%'], radius: ['40%', '55%'] }"
|
||||
:series-data="legendData1"
|
||||
:beilv="beilv"
|
||||
:height="'100%'"
|
||||
/>
|
||||
</div>
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="8">
|
||||
<base-container :beilv="beilv" :title="'各工序缺陷汇总'" :title-icon="'5_2'">
|
||||
<div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div>
|
||||
|
||||
<!-- 为外部添加一个容器并显式地设置一个高度: -->
|
||||
<div style="height: 300px;">
|
||||
<pie-chart2
|
||||
:id="'pie-chart2'"
|
||||
:show-center-title="true"
|
||||
:legend-config="{ orient: 'horizontal', width: '90%', left: '5%', top: '80%', itemGap: 25 }"
|
||||
:series-config="{ center: ['50%', '40%'], radius: ['40%', '55%'] }"
|
||||
:series-data="legendData2"
|
||||
:beilv="beilv"
|
||||
:height="'100%'"
|
||||
/>
|
||||
</div>
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="8">
|
||||
<base-container :beilv="beilv" :title="'各产线缺陷汇总'" :title-icon="'5_3'">
|
||||
<div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div>
|
||||
|
||||
<!-- 为外部添加一个容器并显式地设置一个高度: -->
|
||||
<div style="height: 300px;">
|
||||
<pie-chart3
|
||||
:id="'pie-chart3'"
|
||||
:show-center-title="true"
|
||||
:legend-config="{ orient: 'horizontal', width: '90%', left: '5%', top: '80%', itemGap: 25 }"
|
||||
:series-config="{ center: ['50%', '40%'], radius: ['40%', '55%'] }"
|
||||
:series-data="legendData3"
|
||||
:beilv="beilv"
|
||||
:height="'100%'"
|
||||
/>
|
||||
</div>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="12">
|
||||
<base-container :beilv="beilv" :height="256" :title="'设质量异常报警列表明细'" :title-icon="'5_5'">
|
||||
<div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div>
|
||||
<el-row :gutter="9 * beilv">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-table2
|
||||
:page="1"
|
||||
:limit="14"
|
||||
:beilv="beilv"
|
||||
:table-config="qualityTableProps2"
|
||||
:table-data="qualityList2"
|
||||
/>
|
||||
</el-col>
|
||||
<!-- <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="12">
|
||||
<base-table3
|
||||
:page="2"
|
||||
:limit="5"
|
||||
:beilv="beilv"
|
||||
:table-config="qualityTableProps2"
|
||||
:table-data="qualityList2"
|
||||
/>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="12">
|
||||
<base-container :beilv="beilv" :height="318 + 338 + 16" :title="'质量异常报警列表明细'" :title-icon="'5_4'">
|
||||
<div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div>
|
||||
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
|
||||
<base-table1
|
||||
:beilv="beilv"
|
||||
:limit="14"
|
||||
:show-overflow="false"
|
||||
:table-config="qualityTableProps1"
|
||||
:table-data="qualityList1"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- end -->
|
||||
<!-- <el-col :span="16">
|
||||
<el-row>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :height="672">
|
||||
<base-video :video-height="624" :beilv="beilv" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
-->
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseContainer from './components/baseContainer'
|
||||
import baseTable1 from './components/baseTable'
|
||||
import baseTable2 from './components/baseTable'
|
||||
// import baseTable3 from './components/baseTable'
|
||||
import TopRadioGroup from './components/topRadioGroup'
|
||||
import pieChart1 from './components/PieChart'
|
||||
import pieChart2 from './components/PieChart'
|
||||
import pieChart3 from './components/PieChart'
|
||||
import { mapGetters } from 'vuex'
|
||||
import screenfull from 'screenfull'
|
||||
// import BaseVideo from './components/baseVideo.vue'
|
||||
|
||||
const qualityTableProps1 = [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '产线名称'
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '发生时间'
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: '质量编码'
|
||||
},
|
||||
{
|
||||
prop: 'content',
|
||||
label: '质量内容'
|
||||
}
|
||||
]
|
||||
const qualityTableProps2 = [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '工序名称'
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '发生时间'
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: '质量编码'
|
||||
},
|
||||
{
|
||||
prop: 'content',
|
||||
label: '质量内容'
|
||||
}
|
||||
]
|
||||
const qualityList1 = [
|
||||
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
|
||||
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
|
||||
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
|
||||
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
|
||||
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
|
||||
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
|
||||
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
|
||||
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
|
||||
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
|
||||
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
|
||||
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
|
||||
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
|
||||
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
|
||||
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
|
||||
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
|
||||
{ name: '钢六线', createTime: '2021.12.11 24:59:59', code: '2132131212', content: '气泡' }
|
||||
]
|
||||
const qualityList2 = [
|
||||
{ name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
|
||||
{ name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
|
||||
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
|
||||
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
|
||||
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
|
||||
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
|
||||
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
|
||||
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
|
||||
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
|
||||
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
|
||||
{ name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
|
||||
{ name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
|
||||
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
|
||||
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
|
||||
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
|
||||
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
|
||||
{ name: '丝网印刷', createTime: '2021.12.21 24:59:59', code: '21321322132', content: '气泡' },
|
||||
{ name: '钢化炉', createTime: '2021.12.20 24:59:59', code: '21321312321', content: '气泡' },
|
||||
{ name: '检测设备', createTime: '2021.12.12 24:59:59', code: '21321322132', content: '气泡' },
|
||||
{ name: '包装设备', createTime: '2021.12.23 24:59:59', code: '39284982931', content: '气泡' }
|
||||
]
|
||||
const legendData1 = [
|
||||
{
|
||||
name: '设备1',
|
||||
icon: 'circle',
|
||||
value: 196
|
||||
},
|
||||
{
|
||||
name: '设备2',
|
||||
icon: 'circle',
|
||||
value: 147
|
||||
},
|
||||
{
|
||||
name: '设备3',
|
||||
icon: 'circle',
|
||||
value: 24
|
||||
},
|
||||
{
|
||||
name: '设备4',
|
||||
icon: 'circle',
|
||||
value: 85
|
||||
},
|
||||
{
|
||||
name: '设备5',
|
||||
icon: 'circle',
|
||||
value: 8
|
||||
},
|
||||
{
|
||||
name: '设备6',
|
||||
icon: 'circle',
|
||||
value: 112
|
||||
},
|
||||
{
|
||||
name: '设备7',
|
||||
icon: 'circle',
|
||||
value: 146
|
||||
},
|
||||
{
|
||||
name: '设备8',
|
||||
icon: 'circle',
|
||||
value: 27
|
||||
},
|
||||
{
|
||||
name: '设备9',
|
||||
icon: 'circle',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: '设备10',
|
||||
icon: 'circle',
|
||||
value: 90
|
||||
}
|
||||
]
|
||||
const legendData2 = [
|
||||
{
|
||||
name: '磨边',
|
||||
icon: 'circle',
|
||||
value: 196
|
||||
},
|
||||
{
|
||||
name: '清洗',
|
||||
icon: 'circle',
|
||||
value: 135
|
||||
},
|
||||
{
|
||||
name: '固化',
|
||||
icon: 'circle',
|
||||
value: 144
|
||||
},
|
||||
{
|
||||
name: '镀膜',
|
||||
icon: 'circle',
|
||||
value: 97
|
||||
},
|
||||
{
|
||||
name: '激光打孔',
|
||||
icon: 'circle',
|
||||
value: 12
|
||||
},
|
||||
{
|
||||
name: '丝网印刷',
|
||||
icon: 'circle',
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
name: '钢化炉',
|
||||
icon: 'circle',
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
const legendData3 = [
|
||||
{
|
||||
name: '钢一线',
|
||||
icon: 'circle',
|
||||
value: 196
|
||||
},
|
||||
{
|
||||
name: '钢二线',
|
||||
icon: 'circle',
|
||||
value: 133
|
||||
},
|
||||
{
|
||||
name: '钢三线',
|
||||
icon: 'circle',
|
||||
value: 24
|
||||
},
|
||||
{
|
||||
name: '钢四线',
|
||||
icon: 'circle',
|
||||
value: 77
|
||||
},
|
||||
{
|
||||
name: '钢五线',
|
||||
icon: 'circle',
|
||||
value: 77
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'ProductionMonitoringCockpit',
|
||||
components: {
|
||||
baseContainer,
|
||||
baseTable1,
|
||||
baseTable2,
|
||||
// baseTable3,
|
||||
TopRadioGroup,
|
||||
pieChart1,
|
||||
pieChart2,
|
||||
pieChart3
|
||||
// BaseVideo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
beilv: 1,
|
||||
isFullScreen: false,
|
||||
qualityTableProps1,
|
||||
qualityList1,
|
||||
qualityTableProps2,
|
||||
qualityList2,
|
||||
dateType: '0',
|
||||
legendData1,
|
||||
legendData2,
|
||||
legendData3
|
||||
}
|
||||
},
|
||||
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: {
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
.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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1;
|
||||
}
|
||||
|
||||
.container-main {
|
||||
min-height: calc(100vh - 10em);
|
||||
}
|
||||
</style>
|
||||
127
src/views/OperationalOverview/components/BarChart.vue
Normal file
127
src/views/OperationalOverview/components/BarChart.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height: height, width:width}" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'OverviewLine'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
legendData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#123341', // 左边线的颜色
|
||||
width: '1'// 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666a74' // 坐标值得具体的颜色
|
||||
|
||||
}
|
||||
},
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#123341', // 左边线的颜色
|
||||
width: '1'// 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666a74' // 坐标值得具体的颜色
|
||||
|
||||
}
|
||||
},
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)'
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
253
src/views/OperationalOverview/components/LineChart.vue
Normal file
253
src/views/OperationalOverview/components/LineChart.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-01-21 14:43:06
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-01-24 13:27:41
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
|
||||
<div :id="id" :class="className" :style="{ paddingTop: '1.25em', height: height * beilv + 'px', width:width}" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'OverviewLine'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
legendPosition: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
legendData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
bottom: '0',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
itemHeight: 10,
|
||||
itemWidth: 10,
|
||||
x: this.legendPosition, // 可设定图例在左、右、居中
|
||||
y: 'top', // 可设定图例在上、下、居中
|
||||
show: this.showLegend,
|
||||
data: this.legendData,
|
||||
top: 28,
|
||||
right: '1%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#ced1d5'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
splitLine: { show: false }, // 去除网格线
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#123341', // 左边线的颜色
|
||||
width: '1'// 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666a74' // 坐标值得具体的颜色
|
||||
|
||||
}
|
||||
},
|
||||
data: ['1', '5', '15', '20', '25', '30']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { show: false }, // 去除网格线
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#123341', // 左边线的颜色
|
||||
width: '1'// 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666a74' // 坐标值得具体的颜色
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.showLegend ? this.legendData[0].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3574a8',
|
||||
lineStyle: {
|
||||
color: '#3574a8'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [120, 32, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: this.showLegend ? this.legendData[1].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#9f3476',
|
||||
lineStyle: {
|
||||
color: '#9f3476'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [270, 182, 191, 234, 290, 230, 210]
|
||||
},
|
||||
{
|
||||
name: this.showLegend ? this.legendData[2].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#30959d',
|
||||
lineStyle: {
|
||||
color: '#30959d'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [160, 32, 301, 154, 190, 330, 210]
|
||||
},
|
||||
{
|
||||
name: this.showLegend ? this.legendData[3].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#5255be',
|
||||
lineStyle: {
|
||||
color: '#5255be'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [150, 132, 21, 234, 190, 130, 320]
|
||||
},
|
||||
{
|
||||
name: this.showLegend ? this.legendData[4].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#8b4449',
|
||||
lineStyle: {
|
||||
color: '#8b4449'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [210, 332, 201, 34, 290, 230, 320]
|
||||
},
|
||||
{
|
||||
name: this.showLegend ? this.legendData[5].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#a29848',
|
||||
lineStyle: {
|
||||
color: '#a29848'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [20, 62, 101, 34, 190, 30, 120]
|
||||
},
|
||||
{
|
||||
name: this.showLegend && this.legendData[6] ? this.legendData[6].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#a29848',
|
||||
lineStyle: {
|
||||
color: '#a29848'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [20, 62, 101, 34, 190, 30, 120]
|
||||
},
|
||||
{
|
||||
name: this.showLegend && this.legendData[7] ? this.legendData[7].name : '',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#a29848',
|
||||
lineStyle: {
|
||||
color: '#a29848'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [20, 62, 101, 34, 190, 30, 120]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart{
|
||||
margin-top: -3em
|
||||
}
|
||||
</style>
|
||||
221
src/views/OperationalOverview/components/PieChart.vue
Normal file
221
src/views/OperationalOverview/components/PieChart.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-01-21 14:43:06
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-01-24 09:12:18
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{ height: computedHeight, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'DefaultPieChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
showCenterTitle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
legendConfig: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
seriesConfig: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
barColor: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
'#5fe1d2',
|
||||
'#ffb2b0',
|
||||
'#8e90ff',
|
||||
'#f058aa',
|
||||
'#8652da',
|
||||
'#87fb84',
|
||||
'#61b9ff',
|
||||
'#fdf6a6',
|
||||
'#ffc465',
|
||||
'#98d9ff'
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const lData = this.seriesData
|
||||
return {
|
||||
chart: null,
|
||||
defaultConfig: {
|
||||
// 默认的legend配置
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: '75%',
|
||||
bottom: 0,
|
||||
itemHeight: 10,
|
||||
itemWidth: 10,
|
||||
formatter: function(name) {
|
||||
let pieLegendVale = {}
|
||||
lData.filter((item, index) => {
|
||||
if (item.name === name) {
|
||||
pieLegendVale = item
|
||||
}
|
||||
})
|
||||
const arr = ['{b|' + pieLegendVale.name + '}', '{a|' + pieLegendVale.value + '}']
|
||||
return arr.join(' ')
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
align: 'center',
|
||||
fontSize: 10,
|
||||
color: '#f988bf',
|
||||
lineHeight: 16
|
||||
},
|
||||
b: {
|
||||
// verticalAlign: 'top',
|
||||
align: 'center',
|
||||
fontSize: 10,
|
||||
color: '#dddfe1'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 默认的series配置
|
||||
series: {
|
||||
center: ['35%', '50%'],
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '20',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
computedHeight: function() {
|
||||
if (/[0-9]+%$/.test(this.height)) {
|
||||
// 如果是百分比
|
||||
return this.height
|
||||
}
|
||||
return this.height * this.beilv + 'px'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
title: this.showCenterTitle
|
||||
? {
|
||||
text: '总共',
|
||||
subtext: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
|
||||
top: '32%',
|
||||
left: '49%',
|
||||
textAlign: 'center',
|
||||
itemGap: 5,
|
||||
textStyle: {
|
||||
color: '#c0c0c0',
|
||||
fontSize: 16,
|
||||
fontWeight: 'lighter',
|
||||
lineHeight: 15
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 24,
|
||||
lineHeight: 20
|
||||
}
|
||||
}
|
||||
: {},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
grid: {
|
||||
top: '0px',
|
||||
right: '0px',
|
||||
bottom: '0px',
|
||||
left: '0px',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
// 默认配置
|
||||
...this.defaultConfig.legend,
|
||||
// 外部传入配置
|
||||
...this.legendConfig
|
||||
},
|
||||
color: this.barColor,
|
||||
series: [
|
||||
{
|
||||
name: 'default name',
|
||||
type: 'pie',
|
||||
// 默认series配置
|
||||
...this.defaultConfig.series,
|
||||
// 外部传入配置
|
||||
...this.seriesConfig,
|
||||
data: this.seriesData
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .chart >>> div:first-child{
|
||||
background-color: red;
|
||||
height: 100% !important;
|
||||
} */
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2022-01-23 16:50:39
|
||||
* @LastEditTime: 2022-01-25 15:43:52
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height: height, width:width}" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from '../mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'OverviewLine'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
legendData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
itemHeight: 10,
|
||||
x: 'right', // 可设定图例在左、右、居中
|
||||
y: 'top', // 可设定图例在上、下、居中
|
||||
itemWidth: 10,
|
||||
show: this.showLegend,
|
||||
data: this.legendData,
|
||||
right: '1%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#ced1d5'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#123341', // 左边线的颜色
|
||||
width: '1'// 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666a74' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
scale: true,
|
||||
max: 12,
|
||||
min: 0,
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259'
|
||||
}
|
||||
},
|
||||
boundaryGap: [0.2, 0.2],
|
||||
axisLabel: {
|
||||
formatter: '{value} h',
|
||||
textStyle: {
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.legendData[0].name,
|
||||
type: 'bar',
|
||||
data: this.legendData[0].data,
|
||||
markLine: {
|
||||
data: [{ type: 'average', name: 'Avg' }]
|
||||
},
|
||||
barWidth: '10%',
|
||||
itemStyle: this.legendData[0].itemStyle
|
||||
},
|
||||
{
|
||||
name: this.legendData[1].name,
|
||||
type: 'bar',
|
||||
data: this.legendData[1].data,
|
||||
barWidth: '10%',
|
||||
itemStyle: this.legendData[1].itemStyle
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,158 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2022-01-23 16:50:39
|
||||
* @LastEditTime: 2022-01-25 15:44:26
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height: height, width:width}" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from '../mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'OverviewLine'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
legendData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
itemHeight: 10,
|
||||
x: 'right', // 可设定图例在左、右、居中
|
||||
y: 'top', // 可设定图例在上、下、居中
|
||||
itemWidth: 10,
|
||||
show: this.showLegend,
|
||||
data: this.legendData,
|
||||
right: '1%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#ced1d5'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#123341', // 左边线的颜色
|
||||
width: '1'// 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666a74' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
scale: true,
|
||||
max: 12,
|
||||
min: 0,
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259'
|
||||
}
|
||||
},
|
||||
boundaryGap: [0.2, 0.2],
|
||||
axisLabel: {
|
||||
formatter: '{value} h',
|
||||
textStyle: {
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.legendData[0].name,
|
||||
type: 'bar',
|
||||
data: this.legendData[0].data,
|
||||
markLine: {
|
||||
data: [{ type: 'average', name: 'Avg' }]
|
||||
},
|
||||
barWidth: '10%',
|
||||
itemStyle: this.legendData[0].itemStyle
|
||||
},
|
||||
{
|
||||
name: this.legendData[1].name,
|
||||
type: 'bar',
|
||||
data: this.legendData[1].data,
|
||||
barWidth: '10%',
|
||||
itemStyle: this.legendData[1].itemStyle
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,144 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2022-01-19 15:58:17
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2022-01-24 09:01:07
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px'}">
|
||||
<div class="line" />
|
||||
<div class="line line-vertical" />
|
||||
<div class="line line-right" />
|
||||
<div class="line line-right-vertical" />
|
||||
<div class="line line-bottom" />
|
||||
<div class="line line-bottom-vertical" />
|
||||
<div class="line line-bottom-right" />
|
||||
<div class="line line-bottom-right-vertical" />
|
||||
<div class="bar-item">
|
||||
<div v-if="title" class="bar-title">
|
||||
<span>
|
||||
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
|
||||
{{ title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="bar-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseContainer',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
titleIcon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
baseSize: {
|
||||
type: Number,
|
||||
default: 12
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curIndex: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
changeTab(num) {
|
||||
this.curIndex = num
|
||||
this.$emit('tabSelect', num)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.base-container {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
background-color: rgba($color: #061027, $alpha: 0.15);
|
||||
position: relative;
|
||||
padding: .5em;
|
||||
border: 2px solid;
|
||||
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
|
||||
.line {
|
||||
position: absolute;
|
||||
border-top: 4px solid #52FFF1;
|
||||
width: 2em;
|
||||
top: -.25em;
|
||||
left: -.25em;
|
||||
&-vertical {
|
||||
top: calc(-5em / 12);
|
||||
left: calc(-1em / 12);
|
||||
transform: rotate(90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
&-right {
|
||||
top: -.25em;
|
||||
right: -.25em;
|
||||
left: inherit;
|
||||
}
|
||||
&-right-vertical {
|
||||
top: calc(-5em / 12);
|
||||
right: calc(-1em / 12);
|
||||
left: inherit;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: right;
|
||||
}
|
||||
&-bottom {
|
||||
top: inherit;
|
||||
left: -.25em;
|
||||
bottom: -.25em;
|
||||
}
|
||||
&-bottom-vertical {
|
||||
top: inherit;
|
||||
left: calc(-1em / 12);
|
||||
bottom: calc(-5em / 12);
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
&-bottom-right {
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
right: -.25em;
|
||||
bottom: -.25em;
|
||||
}
|
||||
&-bottom-right-vertical {
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
right: calc(-1em / 12);
|
||||
bottom: calc(-5em / 12);
|
||||
transform: rotate(90deg);
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
.bar-title {
|
||||
width: 100%;
|
||||
color: #52FFF1;
|
||||
font-size: 1.5em;
|
||||
padding: .1em;
|
||||
}
|
||||
.bar-content{
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,170 @@
|
||||
<!--
|
||||
* @Date: 2020-12-14 09:07:03
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-06-10 16:03:27
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\ProductionAndOperationCenterCockpit\baseTable.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="visual-base-table-container">
|
||||
<el-table
|
||||
v-loading="isLoading"
|
||||
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',padding: 0}"
|
||||
:row-style="setRowStyle"
|
||||
:data="renderData"
|
||||
border
|
||||
style="width: 100%; background: transparent"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="item in renderTableHeadList"
|
||||
:key="item.prop"
|
||||
:show-overflow-tooltip="showOverflow"
|
||||
v-bind="item"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
|
||||
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
|
||||
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<slot name="content" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { isObject, isString } from 'lodash'
|
||||
export default {
|
||||
name: 'BaseTable',
|
||||
filters: {
|
||||
commonFilter: (source, filterType = a => a) => {
|
||||
return filterType(source)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
tableData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: val => val.filter(item => !isObject(item)).length === 0
|
||||
},
|
||||
tableConfig: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 1
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 5
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showOverflow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableConfigBak: [],
|
||||
selectedBox: new Array(20).fill(true)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
renderData() {
|
||||
if (this.tableData && !this.tableData[0]._pageIndex) {
|
||||
this.tableData.forEach((item, index) => {
|
||||
item._pageIndex = (this.page - 1) * this.limit + index + 1
|
||||
})
|
||||
}
|
||||
return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
|
||||
},
|
||||
renderTableHeadList() {
|
||||
return this.tableConfig.filter((item, index) => {
|
||||
return this.selectedBox[index]
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.selectedBox = new Array(20).fill(true)
|
||||
},
|
||||
// mounted() {
|
||||
// this.tableConfigBak = cloneDeep(this.tableConfig).map(item => {
|
||||
// return {
|
||||
// ...item,
|
||||
// selected: true
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
methods: {
|
||||
emitData(val) {
|
||||
this.$emit('emitFun', val)
|
||||
},
|
||||
setRowStyle(v) {
|
||||
if (v.rowIndex % 2 === 0) {
|
||||
return {
|
||||
background: 'rgba(76,97,123,0.2)',
|
||||
color: '#fff',
|
||||
height: 26 * this.beilv + 'px',
|
||||
padding: 0
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
background: 'rgba(79,114,136,0.29)',
|
||||
color: '#fff',
|
||||
height: 26 * this.beilv + 'px',
|
||||
padding: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "~@/styles/index.scss";
|
||||
.visual-base-table-container {
|
||||
.el-table {
|
||||
border: 0;
|
||||
}
|
||||
.el-table::before,.el-table--border::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
.el-table th,td{
|
||||
border-color: #0D1728 !important;
|
||||
padding: 0;
|
||||
}
|
||||
.el-table tr {
|
||||
background: transparent;
|
||||
}
|
||||
.el-table__row:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
|
||||
.el-table__row--striped:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
}
|
||||
.setting {
|
||||
text-align: right;
|
||||
padding: 15px;
|
||||
.setting-box {
|
||||
width: 100px;
|
||||
}
|
||||
i {
|
||||
color: #aaa;
|
||||
@extend .pointer;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2022-01-23 21:02:57
|
||||
* @LastEditTime: 2022-01-23 21:08:21
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div
|
||||
style=" width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 50%;
|
||||
margin:auto"
|
||||
:style="{background:injectData.colour}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitClick() {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2022-01-22 18:05:45
|
||||
* @LastEditTime: 2022-01-23 10:50:29
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div style="width:100%,text-align:center">
|
||||
<div style="text-align:center">
|
||||
<el-radio-group v-model="dateType" size="mini">
|
||||
<el-radio-button v-for="item in labelList" :key="item.index" :label="item.index">
|
||||
{{ item.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TopGroup',
|
||||
props: {
|
||||
dateType: {
|
||||
type: String,
|
||||
default: '0'
|
||||
},
|
||||
labelList: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-radio-button__inner {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: #133648;
|
||||
margin-bottom: 1em;
|
||||
margin-top: -0.5em;
|
||||
color: white;
|
||||
line-height: 14px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
background: #3eb0ae;
|
||||
border: none;
|
||||
color: white;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2022-01-20 14:12:10
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2022-01-25 16:57:00
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\ProductionLineMonitoringCockpit\nowTeam.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="now-team">
|
||||
<el-row style="margin-bottom: 3em">
|
||||
<p class="now-team-title">- 开始时间 -</p>
|
||||
<p class="now-team-content blue">2021.1.26 13:30:21</p>
|
||||
</el-row>
|
||||
<el-row style="margin-bottom: 1em">
|
||||
<el-col :span="8">
|
||||
<p class="now-team-title">- 班组名称 -</p>
|
||||
<p style="font-size:2em" class="now-team-content blue">中班执行一组</p>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<p class="now-team-title">- 原片投入(片) -</p>
|
||||
<p class="now-team-content blue">122</p>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<p class="now-team-title">- 投入面积(㎡) -</p>
|
||||
<p class="now-team-content blue">12000</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<p class="now-team-title">- 产品规格 -</p>
|
||||
<p class="now-team-content blue">110</p>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<p class="now-team-title">- 执行工单 -</p>
|
||||
<p class="now-team-content blue">110</p>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<p class="now-team-title">- 成品率 -</p>
|
||||
<p class="now-team-content blue">98.8%</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'ProductionMonitoringCockpit',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.now-team{
|
||||
width: 100%;
|
||||
.now-team-title{
|
||||
font-size: 1em;
|
||||
line-height: 2em;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.now-team-content{
|
||||
font-size: 2.5em;
|
||||
font-weight: 300;
|
||||
line-height: 1em;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.blue {
|
||||
color: #52FFF1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
228
src/views/OperationalOverview/components/SimpleLineChart.vue
Normal file
228
src/views/OperationalOverview/components/SimpleLineChart.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-01-21 14:43:06
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-01-24 13:27:41
|
||||
* @Description: 简单折线图
|
||||
-->
|
||||
<template>
|
||||
<div ref="SimpleLineChart" :style="{ height: height ? height * beilv + 'px' : '100%', width: '100%' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
const AxisLine = {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#123341',
|
||||
width: '1'
|
||||
}
|
||||
}
|
||||
|
||||
const AxisLabel = {
|
||||
textStyle: {
|
||||
color: '#666a74'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 2022.8.23 TODO:
|
||||
* 1.一份数据三张表
|
||||
* 2.切换选项卡时只更新一张表的数据
|
||||
* 3.注释掉成品率条形图，改为将“投入、产出”拆分图，与“成品率”合计三张
|
||||
*/
|
||||
|
||||
class ChartOption {
|
||||
constructor() {
|
||||
this.color = [
|
||||
'#3574a8',
|
||||
'#9f3476',
|
||||
'#30959d',
|
||||
'#5255be',
|
||||
'#8b4449',
|
||||
'#a29848',
|
||||
'#FF6600',
|
||||
'#FFFF00',
|
||||
'#91cc75',
|
||||
'#fac858',
|
||||
'#ee6666',
|
||||
'#73c0de',
|
||||
'#3ba272',
|
||||
'#fc8452',
|
||||
'#9a60b4',
|
||||
'#ea7ccc'
|
||||
]
|
||||
this.tooltip = { trigger: 'axis' }
|
||||
this.grid = {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '5%',
|
||||
height: '80%',
|
||||
containLabel: true
|
||||
}
|
||||
this.legend = {
|
||||
itemHeight: 10,
|
||||
itemWidth: 10,
|
||||
y: 'top',
|
||||
x: 'center',
|
||||
top: 0,
|
||||
// right: '1%',
|
||||
data: [
|
||||
/** dynamic */
|
||||
],
|
||||
// right: '1%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#ced1d5'
|
||||
}
|
||||
}
|
||||
this.xAxis = {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
splitLine: { show: false },
|
||||
axisLine: AxisLine,
|
||||
axisLabel: { ...AxisLabel, rotate: 20 },
|
||||
data: [
|
||||
/** dynamic */
|
||||
]
|
||||
}
|
||||
this.yAxis = {
|
||||
type: 'value',
|
||||
splitLine: { show: false },
|
||||
axisLine: AxisLine,
|
||||
axisLabel: AxisLabel
|
||||
}
|
||||
this.series = [
|
||||
/** dynmaic */
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {object} rawdata
|
||||
*/
|
||||
setLegend(rawdata) {
|
||||
if (rawdata) {
|
||||
const data = Object.keys(rawdata)
|
||||
this.legend.data = data.map(item => ({ icon: 'roundRect', name: item }))
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {object} rawdata
|
||||
*/
|
||||
setCategory(rawdata) {
|
||||
if (rawdata) {
|
||||
if (Object.keys(rawdata).length > 0) {
|
||||
const first = rawdata[Object.keys(rawdata)[0]]
|
||||
this.xAxis.data = Object.keys(first)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {object} rawdata
|
||||
*/
|
||||
setData(rawdata) {
|
||||
if (rawdata) {
|
||||
this.series = []
|
||||
for (const key in rawdata) {
|
||||
this.series.push({
|
||||
name: key,
|
||||
type: 'line',
|
||||
data: Object.entries(rawdata[key]).map(([subkey, value]) => value)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
clearOptions() {
|
||||
this.legend.data.splice(0)
|
||||
this.xAxis.data.splice(0)
|
||||
this.series.splice(0)
|
||||
}
|
||||
// add more...
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'SimpleLineChart',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: Number
|
||||
},
|
||||
legend: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
caty: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
defaultOpts: new ChartOption()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showLegend() {
|
||||
return this.legend.length > 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataList: {
|
||||
handler: function(val) {
|
||||
this.updateChartOptions()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
if (!this.chart) {
|
||||
this.chart = echarts.init(this.$refs.SimpleLineChart)
|
||||
this.updateChartOptions()
|
||||
}
|
||||
},
|
||||
|
||||
updateChartOptions() {
|
||||
if (!this.chart) return
|
||||
this.defaultOpts.clearOptions()
|
||||
/** set */
|
||||
this.defaultOpts.setLegend(this.dataList)
|
||||
this.defaultOpts.setCategory(this.dataList)
|
||||
this.defaultOpts.setData(this.dataList)
|
||||
/** log */
|
||||
this.chart.setOption({ ...this.defaultOpts })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
margin-top: -3em;
|
||||
}
|
||||
</style>
|
||||
51
src/views/OperationalOverview/components/alarmLevel.vue
Normal file
51
src/views/OperationalOverview/components/alarmLevel.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<!--
|
||||
* @Date: 2020-12-14 09:07:03
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-01-23 00:14:53
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<span class="alarm-level">
|
||||
<span
|
||||
style="display: inline-block; height: .6em;width: .6em; border-radius: .3em; position: relative;"
|
||||
:style="{background: colorList[injectData.level].back, boxShadow: `0px 0px 2px 2px ${colorList[injectData.level].border}`}"
|
||||
/>
|
||||
{{ injectData.level }}级
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'NextDay',
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
colorList: {
|
||||
1: {
|
||||
back: 'rgba(255, 12, 12, 1)',
|
||||
border: 'rgba(255, 12, 12, .5)'
|
||||
},
|
||||
2: {
|
||||
back: 'rgba(255, 183, 12, 1)',
|
||||
border: 'rgba(255, 183, 12, .5)'
|
||||
},
|
||||
3: {
|
||||
back: 'rgba(39, 96, 255, 1)',
|
||||
border: 'rgba(39, 96, 255, .5)'
|
||||
},
|
||||
4: {
|
||||
back: 'rgba(12, 255, 30, 1)',
|
||||
border: 'rgba(12, 255, 30, .5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
183
src/views/OperationalOverview/components/baseContainer/index.vue
Normal file
183
src/views/OperationalOverview/components/baseContainer/index.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2022-01-19 15:58:17
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2022-01-24 09:18:01
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
||||
-->
|
||||
<template>
|
||||
<div
|
||||
class="base-container"
|
||||
:style="{ height: '100%', fontSize: 12 * beilv + 'px', padding: 12 * beilv + 'px' }"
|
||||
:class="{ 'no-padding': noPadding, 'border-none': !showLine }"
|
||||
>
|
||||
<!-- <div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px', padding: 12 * beilv + 'px'}"> -->
|
||||
<template v-if="showLine">
|
||||
<div class="line" />
|
||||
<div class="line line-vertical" />
|
||||
<div class="line line-right" />
|
||||
<div class="line line-right-vertical" />
|
||||
<div class="line line-bottom" />
|
||||
<div class="line line-bottom-vertical" />
|
||||
<div class="line line-bottom-right" />
|
||||
<div class="line line-bottom-right-vertical" />
|
||||
</template>
|
||||
|
||||
<div class="bar-item">
|
||||
<div v-if="title" class="bar-title">
|
||||
<span>
|
||||
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
|
||||
{{ title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="bar-content" :class="{ 'p-0': noContentPadding }">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseContainer',
|
||||
props: {
|
||||
showLine: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
noPadding: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
noContentPadding: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
titleIcon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
baseSize: {
|
||||
type: Number,
|
||||
default: 12
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curIndex: 0
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
changeTab(num) {
|
||||
this.curIndex = num
|
||||
this.$emit('tabSelect', num)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.base-container {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
background-color: rgba($color: #061027, $alpha: 0.15);
|
||||
position: relative;
|
||||
border: 2px solid;
|
||||
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
|
||||
.line {
|
||||
position: absolute;
|
||||
border-top: 4px solid #52fff1;
|
||||
width: 2em;
|
||||
top: -0.25em;
|
||||
left: -0.25em;
|
||||
&-vertical {
|
||||
top: calc(-5em / 12);
|
||||
left: calc(-1em / 12);
|
||||
transform: rotate(90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
&-right {
|
||||
top: -0.25em;
|
||||
right: -0.25em;
|
||||
left: inherit;
|
||||
}
|
||||
&-right-vertical {
|
||||
top: calc(-5em / 12);
|
||||
right: calc(-1em / 12);
|
||||
left: inherit;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: right;
|
||||
}
|
||||
&-bottom {
|
||||
top: inherit;
|
||||
left: -0.25em;
|
||||
bottom: -0.25em;
|
||||
}
|
||||
&-bottom-vertical {
|
||||
top: inherit;
|
||||
left: calc(-1em / 12);
|
||||
bottom: calc(-5em / 12);
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
&-bottom-right {
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
right: -0.25em;
|
||||
bottom: -0.25em;
|
||||
}
|
||||
&-bottom-right-vertical {
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
right: calc(-1em / 12);
|
||||
bottom: calc(-5em / 12);
|
||||
transform: rotate(90deg);
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-item {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bar-title {
|
||||
width: 100%;
|
||||
color: #52fff1;
|
||||
font-size: 1.5em;
|
||||
padding: 0.67em;
|
||||
}
|
||||
|
||||
.bar-content {
|
||||
padding: 1em;
|
||||
flex: 1 auto;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.border-none {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
176
src/views/OperationalOverview/components/baseTable.vue
Normal file
176
src/views/OperationalOverview/components/baseTable.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<!--
|
||||
* @Date: 2020-12-14 09:07:03
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-06-14 11:12:39
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="visual-base-table-container">
|
||||
<el-table
|
||||
v-loading="isLoading"
|
||||
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
|
||||
:row-style="setRowStyle"
|
||||
:data="renderData"
|
||||
border
|
||||
style="width: 100%; background: transparent"
|
||||
>
|
||||
<el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
|
||||
<el-table-column
|
||||
v-for="item in renderTableHeadList"
|
||||
:key="item.prop"
|
||||
:show-overflow-tooltip="showOverflow"
|
||||
v-bind="item"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
|
||||
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
|
||||
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<slot name="content" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { isObject, isString } from 'lodash'
|
||||
export default {
|
||||
name: 'BaseTable',
|
||||
filters: {
|
||||
commonFilter: (source, filterType = a => a) => {
|
||||
return filterType(source)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
tableData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: val => val.filter(item => !isObject(item)).length === 0
|
||||
},
|
||||
tableConfig: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 1
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 5
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showOverflow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showIndex: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableConfigBak: [],
|
||||
selectedBox: new Array(100).fill(true)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
renderData() {
|
||||
if (this.tableData.length && !this.tableData[0]._pageIndex) {
|
||||
this.tableData.forEach((item, index) => {
|
||||
item._pageIndex = (this.page - 1) * this.limit + index + 1
|
||||
})
|
||||
}
|
||||
return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
|
||||
},
|
||||
renderTableHeadList() {
|
||||
return this.tableConfig.filter((item, index) => {
|
||||
return this.selectedBox[index]
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.selectedBox = new Array(100).fill(true)
|
||||
},
|
||||
methods: {
|
||||
emitData(val) {
|
||||
this.$emit('emitFun', val)
|
||||
},
|
||||
setRowStyle(v) {
|
||||
if (v.rowIndex % 2 === 0) {
|
||||
return {
|
||||
background: 'rgba(76,97,123,0.2)',
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
height: 26 * this.beilv + 'px',
|
||||
lineHeight: 26 * this.beilv + 'px',
|
||||
padding: 0,
|
||||
fontSize: 12 * this.beilv + 'px'
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
background: 'rgba(79,114,136,0.29)',
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
height: 26 * this.beilv + 'px',
|
||||
lineHeight: 26 * this.beilv + 'px',
|
||||
padding: 0,
|
||||
fontSize: 12 * this.beilv + 'px'
|
||||
}
|
||||
}
|
||||
},
|
||||
setCellStyle(v) {
|
||||
return {
|
||||
lineHeight: 23 * this.beilv + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "~@/styles/index.scss";
|
||||
.visual-base-table-container {
|
||||
.el-table {
|
||||
border: 0;
|
||||
}
|
||||
.el-table::before,.el-table--border::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
.el-table th,td{
|
||||
border-color: #0D1728 !important;
|
||||
padding: 0;
|
||||
}
|
||||
.el-table tr {
|
||||
background: transparent;
|
||||
}
|
||||
.el-table__row:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
|
||||
.el-table__row--striped:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
}
|
||||
.setting {
|
||||
text-align: right;
|
||||
padding: 15px;
|
||||
.setting-box {
|
||||
width: 100px;
|
||||
}
|
||||
i {
|
||||
color: #aaa;
|
||||
@extend .pointer;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
40
src/views/OperationalOverview/components/baseVideo.vue
Normal file
40
src/views/OperationalOverview/components/baseVideo.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<!--
|
||||
* @Date: 2020-12-14 09:07:03
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-01-23 00:14:53
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="base-video-container">
|
||||
<video id="v1" :style="{height: videoHeight * beilv + 'px'}" :src="require('../../../assets/video/3d.mkv')" autoplay loop muted />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseVideo',
|
||||
props: {
|
||||
videoHeight: {
|
||||
type: Number,
|
||||
default: () => 200
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: () => 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.base-video-container{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
237
src/views/OperationalOverview/components/linearBarChart.vue
Normal file
237
src/views/OperationalOverview/components/linearBarChart.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height: height * beilv + 'px', width: width }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'linearBarChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
borderRadius: {
|
||||
type: Array,
|
||||
default: () => [9, 9, 0, 0]
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
nameList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
series: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('mounted')
|
||||
console.log('borderRadius: ', this.borderRadius)
|
||||
|
||||
this.series = [
|
||||
{
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[0].topColor },
|
||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||
]),
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[0].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[1].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[1].topColor },
|
||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
||||
]),
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[1].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[2].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[2].topColor },
|
||||
{ offset: 1, color: this.dataList[2].bottomColor }
|
||||
]),
|
||||
// borderRadius: [5, 5, 0, 0]
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[2].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[3].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[3].topColor },
|
||||
{ offset: 1, color: this.dataList[3].bottomColor }
|
||||
]),
|
||||
// borderRadius: [5, 5, 0, 0]
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[3].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[4].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[4].topColor },
|
||||
{ offset: 1, color: this.dataList[4].bottomColor }
|
||||
]),
|
||||
// borderRadius: [5, 5, 0, 0]
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[4].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[5].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[5].topColor },
|
||||
{ offset: 1, color: this.dataList[5].bottomColor }
|
||||
]),
|
||||
// borderRadius: [5, 5, 0, 0]
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[5].data,
|
||||
barWidth: 6
|
||||
}
|
||||
]
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
console.log(1)
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 30,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#213259', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259'
|
||||
}
|
||||
},
|
||||
data: this.nameList
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#213259', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259'
|
||||
}
|
||||
},
|
||||
type: 'value'
|
||||
},
|
||||
legend: {
|
||||
itemHeight: 10,
|
||||
itemWidth: 10,
|
||||
x: 'center', // 可设定图例在左、右、居中
|
||||
y: 'top', // 可设定图例在上、下、居中
|
||||
show: this.showLegend,
|
||||
data: this.dataList,
|
||||
right: '1%',
|
||||
textStyle: {
|
||||
fontSize: 12 * this.beilv,
|
||||
color: '#ced1d5'
|
||||
}
|
||||
},
|
||||
series: this.series
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
55
src/views/OperationalOverview/components/mixins/resize.js
Normal file
55
src/views/OperationalOverview/components/mixins/resize.js
Normal file
@@ -0,0 +1,55 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
// to fixed bug when cached by keep-alive
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
activated() {
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
deactivated() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_initResizeEvent() {
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_destroyResizeEvent() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
$_initSidebarResizeEvent() {
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
$_destroySidebarResizeEvent() {
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
40
src/views/OperationalOverview/components/nextDay.vue
Normal file
40
src/views/OperationalOverview/components/nextDay.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<!--
|
||||
* @Date: 2020-12-14 09:07:03
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-01-23 00:14:53
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="next-day" :style="{background: injectData.nextLong < 0 ? 'rgba(255, 84, 76, 0.6)' : injectData.nextLong < 10 ? 'rgba(251, 211, 80, 0.6)' : 'rgba(142, 254, 83, 0.6)'}">
|
||||
{{ injectData.nextLong }}
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'NextDay',
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.next-day{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
237
src/views/OperationalOverview/components/threeBarChart.vue
Normal file
237
src/views/OperationalOverview/components/threeBarChart.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height: height * beilv + 'px', width:width}" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'threeBarChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
nameList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
series: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.dataList.length > 1) {
|
||||
this.series = [
|
||||
{ // 柱体
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[0].topColor },
|
||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||
])
|
||||
},
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{ // 柱顶
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
symbol: 'diamond',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [30, 12],
|
||||
zlevel: 2,
|
||||
itemStyle: { color: this.dataList[0].topColor },
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{ // 柱底
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [30, 15],
|
||||
itemStyle: { color: this.dataList[0].bottomColor },
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{ // 柱体
|
||||
name: this.dataList[1].name,
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[1].topColor },
|
||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
||||
])
|
||||
},
|
||||
data: this.dataList[1].data
|
||||
},
|
||||
{ // 柱顶
|
||||
name: this.dataList[1].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
symbol: 'diamond',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [30, 12],
|
||||
zlevel: 2,
|
||||
itemStyle: { color: this.dataList[1].topColor },
|
||||
data: this.dataList[1].data
|
||||
},
|
||||
{ // 柱底
|
||||
name: this.dataList[1].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [30, 15],
|
||||
itemStyle: { color: this.dataList[1].topColor },
|
||||
data: this.dataList[1].data
|
||||
}
|
||||
]
|
||||
} else {
|
||||
this.series = [
|
||||
{ // 柱体
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[0].topColor },
|
||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||
])
|
||||
},
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{ // 柱顶
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 12,
|
||||
symbol: 'diamond',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [12, 6],
|
||||
zlevel: 2,
|
||||
itemStyle: { color: this.dataList[0].topColor },
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{ // 柱底
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 12,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [12, 6],
|
||||
itemStyle: { color: this.dataList[0].bottomColor },
|
||||
data: this.dataList[0].data
|
||||
}
|
||||
]
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
console.log(this.series)
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#213259', // 左边线的颜色
|
||||
width: '1'// 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
data: this.nameList
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#213259', // 左边线的颜色
|
||||
width: '1'// 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259'
|
||||
}
|
||||
},
|
||||
type: 'value'
|
||||
},
|
||||
series: this.series
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
86
src/views/OperationalOverview/components/topRadioGroup.vue
Normal file
86
src/views/OperationalOverview/components/topRadioGroup.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-01-21 14:27:34
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-01-21 15:55:08
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="top-radio-group" style="width:100%;text-align:center;">
|
||||
<el-radio-group v-model="radioModel" size="mini" @change="handleChange">
|
||||
<el-radio-button v-for="item in radioList" :key="item.value" :label="item.value">
|
||||
{{ item.name }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TopRadioGroup',
|
||||
props: {
|
||||
dateType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
radioList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [{ value: '0', name: '当天' }, { value: '1', name: '本周' }, { value: '2', name: '本月' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
radioModel: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.radioModel = this.dateType
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleChange(v) {
|
||||
this.$emit('change-time-range', v)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-radio-group >>> .el-radio-group {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-radio-group >>> .el-radio-button {
|
||||
flex: 1 1;
|
||||
}
|
||||
|
||||
.top-radio-group >>> .el-radio-button__inner {
|
||||
padding: 4px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-button__inner {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: #133648;
|
||||
padding: 3px 2em;
|
||||
margin-bottom: 1em;
|
||||
margin-top: -0.5em;
|
||||
color: white;
|
||||
line-height: 14px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
background: #3eb0ae;
|
||||
border: none;
|
||||
color: white;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
67
src/views/OperationalOverview/components/utilChart.vue
Normal file
67
src/views/OperationalOverview/components/utilChart.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<!--
|
||||
* @Date: 2020-12-14 09:07:03
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-01-23 00:14:53
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-row class="util-chart">
|
||||
<el-col :span="20" class="chart-main-box">
|
||||
<div class="chart-main">
|
||||
<div class="chart-cover" :style="{width: percent + '%', backgroundImage: `linear-gradient(to right, ${leftColor}, ${rightColor})`}" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3" :offset="1">
|
||||
{{ percent }}%
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'UtilChart',
|
||||
props: {
|
||||
percent: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
leftColor: {
|
||||
type: String,
|
||||
default: () => 'rgba(18, 149, 255, 1)'
|
||||
},
|
||||
rightColor: {
|
||||
type: String,
|
||||
default: () => 'rgba(157, 213, 255, 1)'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.util-chart{
|
||||
width: 100%;
|
||||
.chart-main-box {
|
||||
position: relative;
|
||||
height: 1em;
|
||||
.chart-main {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: rgba(30, 45, 69, 1);
|
||||
border-radius: 1em;
|
||||
.chart-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/views/OperationalOverview/components/videoFooter.vue
Normal file
66
src/views/OperationalOverview/components/videoFooter.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<!--
|
||||
* @Date: 2020-12-14 09:07:03
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-01-23 00:14:53
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-row class="base-footer-container" :style="{height: 36 * beilv + 'px'}">
|
||||
<el-col v-for="item in footerList" :key="item" :span="4" class="base-footer-item" :style="{lineHeight: 36 * beilv + 'px', fontSize: 18 * beilv + 'px'}" :class="check === item ? 'isActive' : ''" @click.native="handleCheck(item)">
|
||||
{{ item }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseFooter',
|
||||
props: {
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: () => 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
footerList: ['钢1线', '钢2线', '钢3线', '钢4线', '钢5线', '钢6线'],
|
||||
check: '钢1线'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCheck(name) {
|
||||
this.check = name
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.base-footer-container{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
.base-footer-item {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: rgba($color: #133648, $alpha: 0.29);
|
||||
}
|
||||
.isActive {
|
||||
background: linear-gradient(to right, rgba($color: #4E8E9B, $alpha: 0.29), #2DA99F, rgba($color: #265562, $alpha: 0.29));
|
||||
position: relative;
|
||||
}
|
||||
.isActive::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
height:0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
transform-origin: 50% 100% 0;
|
||||
transform: perspective(40px) rotateX(45deg);
|
||||
background-image: linear-gradient(to right, rgba($color: #4E8E9B, $alpha: 0.29), #2DA99F, rgba($color: #265562, $alpha: 0.29));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user