Skip to content

N
NLT-e-cigarette
Commit 4465d0c4 authored by 张伯涛's avatar 张伯涛
Browse files
Options

初步修改诺兰特项目

parent 5756e9de
Hide whitespace changes
Inline Side-by-side
Showing with 450 additions and 17 deletions
src/layout/components/Sidebar/Logo.vue
View file @ 4465d0c4
......@@ -24,8 +24,9 @@ export default {
},
data() {
return {
title: '信息化管理系统',
logo: require('@/assets/image/logo.png')
title: '诺兰特（北京）',
logo: ''
// logo: require('@/assets/image/NLT.png')
}
}
}
......
src/views/homePage.vue 0 → 100644
View file @ 4465d0c4
<template>
<div class="homePageIndex">
<div class="homePageIndex-head">
<el-row :gutter="12">
<el-col :span="8">
<el-card class="box-card">
<div v-for="(item, index) in productionList" :key="index" class="topChild">
<img :src="item.icon" class="sidebar-logo">
<div class="cardLabel">
<div>{{ item.name }}</div>
<div>{{ item.count }}</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card">
<div v-for="(item, index) in productionList" :key="index" class="topChild">
<img :src="item.icon" class="sidebar-logo">
<div class="cardLabel">
<div>{{ item.name }}</div>
<div>{{ item.count }}</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card">
<div class="span_middle">产品缺陷分布统计</div>
<div id="echarts-enter" class="span_1">
<div id="dataCharts_enter" ref="chart_enter" style="height: 18vh" />
</div>
</el-card>
</el-col>
</el-row>
</div>
<div class="homePageIndex-body">
<el-card class="box-card">
<div class="span_middle">生产线监控</div>
<div id="echarts-proLineMonitor" class="span_1">
<div id="dataCharts_proLineMonitor" ref="chart_stay" style="height: 40vh" />
</div>
</el-card>
<el-row :gutter="12" style=" margin-top: 20px;">
<el-col :span="16">
<el-card class="box-card">
<div class="span_middle">生产线监控</div>
<div id="echarts-stay" class="span_1">
<div id="dataCharts_stay" ref="chart_stay" style="height: 40vh" />
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card">
<div class="span_middle">产品合格率统计</div>
<div id="echarts-qualified" class="span_1">
<div id="dataCharts_qualified" ref="chart_stay" style="height: 40vh" />
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'HomePage',
data() {
return {
productionList: [
{ icon: require('@/assets/image/logo.png'), name: '完成订单数', count: '10' },
{ icon: require('@/assets/image/logo.png'), name: '生产工单数', count: '15' },
{ icon: require('@/assets/image/logo.png'), name: '开工工单数', count: '15' },
{ icon: require('@/assets/image/logo.png'), name: '完工工单数', count: '15' }
],
planList: []
}
},
mounted() {
this.genderStatistics()
this.getProLineMonitor()
this.getUserTypeStatistics()
this.getQualified()
// 通过监听内容部分的宽度让图表resize
var elementResizeDetectorMaker = require('element-resize-detector')
var erd = elementResizeDetectorMaker()
var that = this
erd.listenTo(document.getElementById('echarts-enter'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_enter')).resize()
})
})
erd.listenTo(document.getElementById('echarts-proLineMonitor'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_proLineMonitor')).resize()
})
})
erd.listenTo(document.getElementById('echarts-stay'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_stay')).resize()
})
})
erd.listenTo(document.getElementById('echarts-qualified'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_qualified')).resize()
})
})
},
methods: {
/** 产品缺陷分布统计(饼状图)
* */
genderStatistics() {
const myChartGender = echarts.init(document.getElementById('dataCharts_enter'))
var optionEnter = {
// title: {
// text: '性别统计数据',
// left: 'left'
// },
tooltip: {
trigger: 'item'
},
color: ['#46BCF3', '#C760F2', '#008FD2'],
// legend: {
// left: 'center',
// top: 'bottom',
// // 图例之间的间距
// itemGap: 20,
// // 图标高度
// itemHeight: 12,
// textStyle: {
// // 字体大小
// fontSize: 13
// }
// },
series: [
{
// name: '性别',
type: 'pie',
radius: '80%',
data: [
{ value: 300, name: '缺陷1 30%' },
{ value: 200, name: '缺陷2 20%' },
{ value: 100, name: '缺陷3 10%' },
{ value: 200, name: '缺陷4 20%' },
{ value: 200, name: '缺陷5 20%' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChartGender.setOption(optionEnter)
},
/** 生产线监控*/
getProLineMonitor() {
const myChartAge = echarts.init(document.getElementById('dataCharts_proLineMonitor'))
const colors = ['#5470C6', '#91CC75']
var optionArea = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
legend: {
data: ['日产量', '日产量速度']
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
// prettier-ignore
data: ['3/16', '3/17', '3/18', '3/19', '3/20', '3/21', '3/22', '3/23', '3/24', '3/25', '3/26', '3/27']
}
],
yAxis: [
{
type: 'value',
position: 'right',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} %'
}
},
{
type: 'value',
position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value}件'
}
}
],
series: [
{
name: '日产量',
type: 'bar',
data: [
20, 49, 70, 232, 256, 767, 1356, 1622, 326, 200, 64, 33
]
},
{
name: '日产量速度',
type: 'line',
yAxisIndex: 1,
data: [20, 22, 33, 45, 63, 102, 203, 234, 230, 165, 120, 62]
}
]
}
myChartAge.setOption(optionArea)
},
/** 生产线监控2（）*/
getUserTypeStatistics() {
const myChartUserType = echarts.init(document.getElementById('dataCharts_stay'))
var optionUserType = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['产线1', '产线2', '产线3', '产线4']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['工序1', '工序2', '工序3', '工序4', '工序5', '工序6', '工序7']
},
yAxis: {
type: 'value'
},
series: [
{
name: '产线1',
type: 'line',
stack: 'Total',
smooth: true,
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '产线2',
type: 'line',
stack: 'Total',
smooth: true,
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '产线3',
type: 'line',
stack: 'Total',
smooth: true,
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '产线4',
type: 'line',
stack: 'Total',
smooth: true,
data: [320, 332, 301, 334, 390, 330, 320]
}
]
}
myChartUserType.setOption(optionUserType)
},
/** 产品合格率统计*/
getQualified() {
const myChartAge = echarts.init(document.getElementById('dataCharts_qualified'))
var optionQualified = {
tooltip: {
trigger: 'axis'
},
grid: {
right: '20%'
},
xAxis: {
type: 'category',
data: ['产品1', '产品2', '产品3', '产品4', '产品5', '产品6', '产品7']
},
yAxis: {
type: 'value'
},
series: [
{
data: [
{
value: 170,
itemStyle: {
color: '#5470C6'
}
},
{
value: 200,
itemStyle: {
color: '#91CC75'
}
},
{
value: 220,
itemStyle: {
color: '#38BBF6'
}
},
{
value: 260,
itemStyle: {
color: '#EACDBF'
}
},
{
value: 240,
itemStyle: {
color: '#a90000'
}
},
{
value: 210,
itemStyle: {
color: '#0dB4C3'
}
},
{
value: 200,
itemStyle: {
color: '#FE990d'
}
}
],
type: 'bar'
}
]
}
myChartAge.setOption(optionQualified)
}
}
}
</script>
<style lang="scss" >
.homePageIndex{
padding: 20px;
.homePageIndex-head{
.box-card{
height: 25vh;
.el-card__body{
text-align: center!important;
padding: 10px!important;
}
.span_middle{
font-size: 14px;
}
.topChild{
width:160px;
padding: 15px;
display:inline-flex;
.cardLabel{
padding-left: 10px;
text-align: center;
}
}
}
}
.homePageIndex-body{
margin-top: 20px;
}
}
</style>
src/views/login/login.vue
View file @ 4465d0c4
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<div class="companyTitle">诺兰特（北京）移动通信设备有限公司</div>
<!-- <img class="fy-logo" src="../../assets/image/denglu_logo.png">-->
<h3 class="title">信息化管理系统</h3>
<h3 class="title">电子加热器追溯平台系统</h3>
<div class="login-form-content">
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
......@@ -20,20 +21,20 @@
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<!--<div class="login-code">
<img :src="codeUrl" @click="getCode">
</div>-->
</el-form-item>
<!-- <el-form-item prop="code">-->
<!-- <el-input-->
<!-- v-model="loginForm.code"-->
<!-- auto-complete="off"-->
<!-- placeholder="验证码"-->
<!-- style="width: 63%"-->
<!-- @keyup.enter.native="handleLogin"-->
<!-- >-->
<!-- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />-->
<!-- </el-input>-->
<!-- &lt;!&ndash;<div class="login-code">-->
<!-- <img :src="codeUrl" @click="getCode">-->
<!-- </div>&ndash;&gt;-->
<!-- </el-form-item>-->
<el-form-item style="width:80%;margin-bottom: 20px">
<el-button
class="blue-btn"
......@@ -197,6 +198,14 @@ export default {
width: 78vw;
height: 76vh;
padding: 25px 25px 5px 25px;
.companyTitle{
position: absolute;
left: 30px;
top: 30px;
color: white;
font-size: 17px;
font-weight: bold;
}
.login-form-content{
position: absolute;
top: 40%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment