Skip to content

Z
zhongtong-avi-web
Commit 1825219c authored by 李志鸣's avatar 李志鸣
Browse files
Options

fea(监控大屏): 静态开发(70%)

parent b04cbcb9
Expand all Show whitespace changes
Inline Side-by-side
Showing with 780 additions and 74770 deletions
package.json
View file @ 1825219c
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
"dependencies": { "dependencies": {
"axios": "^0.18.0", "axios": "^0.18.0",
"connect": "^3.6.6", "connect": "^3.6.6",
"echarts": "^4.2.0-rc.2", "echarts": "^4.4.0",
"el-tree-select": "^2.0.7", "el-tree-select": "^2.0.7",
"element-ui": "^2.8.0", "element-ui": "^2.8.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
......
src/lang/zh/route.js
View file @ 1825219c
...@@ -30,5 +30,8 @@ export default { ...@@ -30,5 +30,8 @@ export default {
MonitorIndex: 'AVI大屏', MonitorIndex: 'AVI大屏',
// Led // Led
Led: 'Led大屏', Led: 'Led大屏',
StationElectrophoresis: 'Led大屏' StationElectrophoresis: 'Led大屏',
// 监控大屏
CenterControl: '监控大屏',
CenterControlIndex: '监控大屏'
} }
src/router/index.js
View file @ 1825219c
...@@ -21,6 +21,8 @@ import deviceRunningTimeRouter from './modules/deviceRunning' ...@@ -21,6 +21,8 @@ import deviceRunningTimeRouter from './modules/deviceRunning'
import basicRouter from './modules/basic' import basicRouter from './modules/basic'
// AVI大屏 // AVI大屏
import monitorRouter from './modules/monitor' import monitorRouter from './modules/monitor'
// 监控大屏
import centerControl from './modules/centerControll'
// 系统管理 // 系统管理
import systemRouter from './modules/system' import systemRouter from './modules/system'
...@@ -66,6 +68,7 @@ export const asyncRouterMap = [ ...@@ -66,6 +68,7 @@ export const asyncRouterMap = [
deviceRunningTimeRouter, deviceRunningTimeRouter,
basicRouter, basicRouter,
monitorRouter, monitorRouter,
centerControl,
systemRouter, systemRouter,
{ {
path: '*', path: '*',
......
src/router/modules/centerControll.js 0 → 100644
View file @ 1825219c
/**
* 监控大屏
*/
export default {
path: '/centerControl',
component: () => import('@/views/Layout/lsd'),
meta: { title: 'CenterControl', icon: 'template', openNewWindow: true },
children: [
{
path: 'index',
component: () => import('@/views/CenterControl/index'),
name: 'CenterControlIndex',
meta: { title: 'CenterControlIndex', icon: 'template' }
}
]
}
src/views/CenterControl/components/MachineFailureRate.vue 0 → 100644
View file @ 1825219c
<template>
<div class="machine-failure-rate">
<div id="failureChart"></div>
<div class="search-pack">
<el-date-picker
style="width: 135px;"
class="date-picker-reset"
v-model="startTime"
type="date"
placeholder="开始时间">
</el-date-picker>
<span class="middle-text">至</span>
<el-date-picker
style="width: 135px;"
class="date-picker-reset"
v-model="endTime"
type="date"
placeholder="结束时间">
</el-date-picker>
<el-button
type="primary"
size="small">
确定
</el-button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
// 开始时间
startTime: '',
// 结束时间
endTime: ''
}
},
methods: {
// 渲染echarts图表
renderEcharts () {
let echart = echarts.init(document.getElementById('failureChart'))
echart.setOption({
toolbox: {
'show': false
},
grid: {
left: 30,
right: 30,
top: 30,
bottom: 30
},
series: [
{
name: '设备利用率',
type: 'gauge',
detail: {formatter: '{value}%'},
axisLabel: { show: false },
splitLine: { show: false },
axisTick: { show: false },
itemStyle: { show: false },
axisLine: {
lineStyle: {
width: 10,
color: [[0, '#b90b38'], [1, '#ee295c']]
}
},
data: [{value: 3, name: ''}]
}
]
})
}
},
mounted () {
setTimeout(() => {
// 渲染echarts图表
this.renderEcharts()
}, 0)
}
}
</script>
<style lang="scss" scoped>
.machine-failure-rate{
position: absolute;
overflow: hidden;
width: 534px;
height: 414px;
top: 633px;
left: 56px;
#failureChart {
width: 534px;
height: 301px;
margin-top: 27px;
}
.search-pack {
width: 534px;
height: 60px;
line-height: 60px;
text-align: center;
.middle-text {
font-size: 18px;
padding: 0 10px;
color: #00b4ff;
}
/deep/ .date-picker-reset {
.el-input__inner {
background-color: #102040;
color: #00b4ff;
border: 1px solid #2563ca;
}
input::-webkit-input-placeholder {
color: #00b4ff;
}
.el-input__prefix {
.el-input__icon.el-icon-date {
color: #00b4ff;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/CenterControl/components/MachineFailureTrend.vue 0 → 100644
View file @ 1825219c
<template>
<div class="machine-failure-trend">
<div class="search-pack">
<el-date-picker
style="width: 135px;"
class="date-picker-reset"
v-model="startTime"
type="date"
placeholder="开始时间">
</el-date-picker>
<span class="middle-text">至</span>
<el-date-picker
style="width: 135px;"
class="date-picker-reset"
v-model="endTime"
type="date"
placeholder="结束时间">
</el-date-picker>
<el-button
type="primary"
size="small">
确定
</el-button>
</div>
<div id="failureTrendChart"></div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
// 开始时间
startTime: '',
// 结束时间
endTime: ''
}
},
methods: {
// 渲染echarts图表
renderEcharts () {
let echart = echarts.init(document.getElementById('failureTrendChart'))
echart.setOption({
grid: {
left: 60,
right: 30,
top: 30,
bottom: 30
},
xAxis: {
type: 'category',
data: ['201705', '201706', '201708', '201709', '201710', '201711', '201712'],
axisLabel: {
color: '#00b4ff'
},
axisLine: {
lineStyle: {
color: '#3569fd'
}
}
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: {
color: '#00b4ff',
formatter: '{value}%'
},
splitLine: {
lineStyle: {
color: '#234eb6'
}
},
axisLine: {
lineStyle: {
color: '#3569fd'
}
}
},
series: [{
data: [1, 8, 1, 3, 5, 6, 9],
type: 'line',
yAxisIndex: 0,
symbolSize: 12,
itemStyle: {
normal: {
color: '#ee295c',
lineStyle: {
width: 2
}
}
}
}]
})
}
},
mounted () {
setTimeout(() => {
// 渲染echarts图表
this.renderEcharts()
}, 0)
}
}
</script>
<style lang="scss" scoped>
.machine-failure-trend {
width: 607px;
height: 414px;
position: absolute;
overflow: hidden;
top: 633px;
left: 642px;
.search-pack {
width: 607px;
height: 60px;
margin-top: 30px;
text-align: center;
line-height: 60px;
.middle-text {
font-size: 18px;
padding: 0 10px;
color: #00b4ff;
}
/deep/ .date-picker-reset {
.el-input__inner {
background-color: #102040;
color: #00b4ff;
border: 1px solid #2563ca;
}
input::-webkit-input-placeholder {
color: #00b4ff;
}
.el-input__prefix {
.el-input__icon.el-icon-date {
color: #00b4ff;
}
}
}
}
#failureTrendChart {
height: 300px;
width: 607px;
}
}
</style>
\ No newline at end of file
src/views/CenterControl/components/MachineOperatingStatus.vue 0 → 100644
View file @ 1825219c
<template>
<div class="machine-operating-status">
<div class="search-pack">
<el-date-picker
style="width: 135px;"
class="date-picker-reset"
v-model="startTime"
type="date"
placeholder="开始时间">
</el-date-picker>
<span class="middle-text">至</span>
<el-date-picker
style="width: 135px;"
class="date-picker-reset"
v-model="endTime"
type="date"
placeholder="结束时间">
</el-date-picker>
<el-button
type="primary"
size="small">
确定
</el-button>
</div>
<div id="operatingStatusChart"></div>
</div>
</template>
<script>
export default {
data () {
return {
// 开始时间
startTime: '',
// 结束时间
endTime: ''
}
},
methods: {
// 渲染echart图表
renderEcharts () {
let echart = echarts.init(document.getElementById('operatingStatusChart'))
echart.setOption({
grid: {
left: 60,
right: 30,
top: 30,
bottom: 30
},
legend: {
orient: 'vertical',
top: 'center',
left: '85%',
data: ['故障', '运行', '待机'],
textStyle: {
color: '#00b4ff',
fontSize: 14
}
},
series: [
{
name: '设备运行状态',
type: 'pie',
color: ['#ee295c', '#15e067', '#7460ee'],
radius: ['50%', '70%'],
label: {
formatter: '{c}%',
fontSize: 18,
fontWeight: 'bold'
},
data: [
{value: 30, name: '故障'},
{value: 65, name: '运行'},
{value: 5, name: '待机'}
]
}
]
})
}
},
mounted () {
setTimeout(() => {
// 渲染echarts图表
this.renderEcharts()
}, 0)
}
}
</script>
<style lang="scss" scoped>
.machine-operating-status {
position: absolute;
overflow: hidden;
width: 608px;
height: 414px;
top: 166px;
left: 1302px;
.search-pack {
width: 607px;
height: 60px;
margin-top: 28px;
text-align: center;
line-height: 60px;
.middle-text {
font-size: 18px;
padding: 0 10px;
color: #00b4ff;
}
/deep/ .date-picker-reset {
.el-input__inner {
background-color: #102040;
color: #00b4ff;
border: 1px solid #2563ca;
}
input::-webkit-input-placeholder {
color: #00b4ff;
}
.el-input__prefix {
.el-input__icon.el-icon-date {
color: #00b4ff;
}
}
}
}
#operatingStatusChart {
height: 325px;
width: 608px;
}
}
</style>
\ No newline at end of file
src/views/CenterControl/components/MachineUtilizationRate.vue 0 → 100644
View file @ 1825219c
<template>
<div class="machine-utilization-rate">
<div id="utilizationChart"></div>
<div class="search-pack">
<el-date-picker
style="width: 135px;"
class="date-picker-reset"
v-model="startTime"
type="date"
placeholder="开始时间">
</el-date-picker>
<span class="middle-text">至</span>
<el-date-picker
style="width: 135px;"
class="date-picker-reset"
v-model="endTime"
type="date"
placeholder="结束时间">
</el-date-picker>
<el-button
type="primary"
size="small">
确定
</el-button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
// 开始时间
startTime: '',
// 结束时间
endTime: ''
}
},
methods: {
// 渲染echarts图表
renderEcharts () {
let echart = echarts.init(document.getElementById('utilizationChart'))
echart.setOption({
toolbox: {
'show': false
},
grid: {
left: 30,
right: 30,
top: 30,
bottom: 30
},
series: [
{
name: '设备利用率',
type: 'gauge',
detail: {formatter: '{value}%'},
axisLabel: { show: false },
splitLine: { show: false },
axisTick: { show: false },
itemStyle: { show: false },
axisLine: {
lineStyle: {
width: 10,
color: [[0, '#0ea418'], [1, '#02fb66']]
}
},
data: [{value: 32, name: ''}]
}
]
})
}
},
mounted () {
setTimeout(() => {
// 渲染echarts图表
this.renderEcharts()
}, 0)
}
}
</script>
<style lang="scss" scoped>
// 设备录用率
.machine-utilization-rate {
position: absolute;
width: 534px;
height: 413px;
top: 166px;
left: 56px;
overflow: hidden;
#utilizationChart {
width: 534px;
height: 300px;
margin-top: 28px;
}
.search-pack {
width: 534px;
height: 60px;
line-height: 60px;
text-align: center;
.middle-text {
font-size: 18px;
padding: 0 10px;
color: #00b4ff;
}
/deep/ .date-picker-reset {
.el-input__inner {
background-color: #102040;
color: #00b4ff;
border: 1px solid #2563ca;
}
input::-webkit-input-placeholder {
color: #00b4ff;
}
.el-input__prefix {
.el-input__icon.el-icon-date {
color: #00b4ff;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/CenterControl/components/MachineUtilizationTrend.vue 0 → 100644
View file @ 1825219c
<template>
<div class="machine-utilization-trend">
<div class="search-pack">
<el-date-picker
style="width: 135px;"
class="date-picker-reset"
v-model="startTime"
type="date"
placeholder="开始时间">
</el-date-picker>
<span class="middle-text">至</span>
<el-date-picker
style="width: 135px;"
class="date-picker-reset"
v-model="endTime"
type="date"
placeholder="结束时间">
</el-date-picker>
<el-button
type="primary"
size="small">
确定
</el-button>
</div>
<div id="utilizationTrendChart"></div>
</div>
</template>
<script>
export default {
data () {
return {
// 开始时间
startTime: '',
// 结束时间
endTime: ''
}
},
methods: {
// 渲染echarts图表
renderEcharts () {
let echart = echarts.init(document.getElementById('utilizationTrendChart'))
echart.setOption({
grid: {
left: 60,
right: 30,
top: 30,
bottom: 30
},
xAxis: {
type: 'category',
data: ['201705', '201706', '201708', '201709', '201710', '201711', '201712'],
axisLabel: {
color: '#00b4ff'
},
axisLine: {
lineStyle: {
color: '#3569fd'
}
}
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: {
color: '#00b4ff',
formatter: '{value}%'
},
splitLine: {
lineStyle: {
color: '#234eb6'
}
},
axisLine: {
lineStyle: {
color: '#3569fd'
}
}
},
series: [{
data: [10, 11, 34, 16, 78, 100, 65],
type: 'line',
yAxisIndex: 0,
symbolSize: 12,
itemStyle: {
normal: {
color: '#14d563',
lineStyle: {
width: 2
}
}
}
}]
})
}
},
mounted () {
setTimeout(() => {
// 渲染echarts图表
this.renderEcharts()
}, 0)
}
}
</script>
<style lang="scss" scoped>
.machine-utilization-trend {
width: 607px;
height: 414px;
position: absolute;
overflow: hidden;
top: 166px;
left: 642px;
.search-pack {
width: 607px;
height: 60px;
margin-top: 30px;
text-align: center;
line-height: 60px;
.middle-text {
font-size: 18px;
padding: 0 10px;
color: #00b4ff;
}
/deep/ .date-picker-reset {
.el-input__inner {
background-color: #102040;
color: #00b4ff;
border: 1px solid #2563ca;
}
input::-webkit-input-placeholder {
color: #00b4ff;
}
.el-input__prefix {
.el-input__icon.el-icon-date {
color: #00b4ff;
}
}
}
}
#utilizationTrendChart {
height: 300px;
width: 607px;
}
}
</style>
\ No newline at end of file
src/views/CenterControl/index.vue 0 → 100644
View file @ 1825219c
<template>
<div class="page-pack">
<div class="container">
<!-- 设备利用率 -->
<MachineUtilizationRate></MachineUtilizationRate>
<!-- 设备故障率 -->
<MachineFailureRate></MachineFailureRate>
<!-- 设备利用率趋势 -->
<MachineUtilizationTrend></MachineUtilizationTrend>
<!-- 设备故障率趋势图 -->
<MachineFailureTrend></MachineFailureTrend>
<!-- 设备运行状态 -->
<MachineOperatingStatus></MachineOperatingStatus>
</div>
</div>
</template>
<script>
import MachineUtilizationRate from './components/MachineUtilizationRate'
import MachineFailureRate from './components/MachineFailureRate'
import MachineUtilizationTrend from './components/MachineUtilizationTrend'
import MachineFailureTrend from './components/MachineFailureTrend'
import MachineOperatingStatus from './components/MachineOperatingStatus'
export default {
components: {
MachineUtilizationRate,
MachineFailureRate,
MachineUtilizationTrend,
MachineFailureTrend,
MachineOperatingStatus
},
data () {
return {}
}
}
</script>
<style lang="scss" scoped>
.page-pack {
height: 100%;
width: 100%;
background-color: #001927;
.container {
margin: 0 auto;
width: 2550px;
height: 1140px;
background: url('../../assets/images/CenterControl/center_control_bg.png') no-repeat;
position: relative;
}
}
</style>
\ No newline at end of file
static/echart/echarts.js
View file @ 1825219c
This diff is collapsed.
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