Skip to content

D
donkey
Commit 18292661 authored by caicaicai's avatar caicaicai
Browse files
Options

生产自动化系统编写

parent 360d3db4
Hide whitespace changes
Inline Side-by-side
Showing with 288 additions and 26 deletions
src/router/index.js
View file @ 18292661
......@@ -43,7 +43,6 @@ VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
const routes = [
//登陆页面
{
......@@ -142,6 +141,7 @@ const routes = [
},
]
},
// //懒加载
// {
// path: '/about',
......@@ -151,6 +151,7 @@ const routes = [
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
// },
//路由重定向
{
name: 'default',
......
src/store/index.js
View file @ 18292661
......@@ -2,6 +2,8 @@ import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//矿区监控模块数据
const mineMonitoring = {
state:{
intelligentDispatch:{
......@@ -35,6 +37,59 @@ const mineMonitoring = {
}
}
//生产自动化系统模块
const automation = {
state:{
//系统首页
brieflyMenuBar:{
context:[{name:"破碎机1",context:"正常"},
{name:"破碎机2",context:"正常"},
{name:"通风除尘1",context:"正常"},
{name:"通风除尘2",context:"正常"},
{name:"通风除尘3",context:"正常"},
{name:"通风除尘4",context:"正常"},
],
},
//历史数据
history:{
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
},
mutations:{
},
getters:{
},
actions:{
}
}
//默认vuex
export default new Vuex.Store({
state: {
projectName:"鑫海数字矿山后台管理系统",
......@@ -46,5 +101,6 @@ export default new Vuex.Store({
},
modules: {
a:mineMonitoring,
b:automation,
}
})
src/views/AutomatedNowData.vue
View file @ 18292661
......@@ -10,6 +10,6 @@ export default {
}
</script>
<style>
<style scoped>
</style>
\ No newline at end of file
src/views/AutomationHistory.vue
View file @ 18292661
<template>
<div>
<span>生产自动化历史数据</span>
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<template>
<el-select v-model="feijishebei.value" placeholder="请选择风机设备" @input="daochu()">
<el-option
v-for="item in feijishebei.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-select v-model="jiancexiang.value" placeholder="请选择监测项">
<el-option
v-for="item in jiancexiang.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-date-picker
v-model="selectDate1.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<div style="margin:0px 20px;">
<template>
<el-date-picker
v-model="selectDate2.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<el-button type="primary" icon="el-icon-upload2" @click="daochu()">导出</el-button>
<el-button icon="el-icon-printer" @click="dayin()">打印</el-button>
</div>
</div>
<div class="AuHiBottom">
<template>
<el-table :data="historyData" height="700" border style="width: 100%" :row-style="tableRowStyle">
<el-table-column prop="date" label="产品设备" align="center"></el-table-column>
<el-table-column prop="name" label="指标名称" align="center"></el-table-column>
<el-table-column prop="address" label="数值" align="center"></el-table-column>
<el-table-column prop="address" label="报警级别" align="center"></el-table-column>
<el-table-column prop="address" label="时间" align="center"></el-table-column>
<el-table-column prop="address" label="处理状态" align="center"></el-table-column>
</el-table>
</template>
</div>
</div>
</template>
<script>
export default {
data() {
return {
feijishebei:{
options: [{
value: '1号风机设备',
label: '1号风机设备'
}, {
value: '2号风机设备',
label: '2号风机设备'
}, {
value: '3号风机设备',
label: '3号风机设备'
}, {
value: '4号风机设备',
label: '4号风机设备'
}, {
value: '5号风机设备',
label: '5号风机设备'
}],
value: ''
},
jiancexiang:{
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
},
selectDate1:{
value:""
},
selectDate2:{
value:""
},
historyData:this.$store.state.b.history.tableData,
}
},
methods:{
tableRowStyle({row, rowIndex}) {
if (row.name == "王小虎") {
console.log(rowIndex)
return 'background: rgb(255,232,232);';
}
},
daochu(){
console.log(this.feijishebei.value + "|||" + this.jiancexiang.value)
},
dayin(){
console.log(this.selectDate1.value + "|||" + this.selectDate2.value)
},
}
}
</script>
<style>
<style scoped>
.AuHiViewBody{
width: 100%;
height: 100vh;
background-color: rgb(245,246,251);
padding: 30px;
box-sizing: border-box;
}
.AuHiTop{
height: 110px;
background-color: white;
border-radius: 10px;
padding: 18px 20px 0px ;
box-sizing: border-box;
}
.AuHiBottom{
width: 100%;
background-color: white;
padding: 30px;
box-sizing: border-box;
height: 750px;
margin-top: 20px;
}
.el-table .warning{
background: red !important;
}
.el-table .success-row {
background: blue;
}
</style>
\ No newline at end of file
src/views/AutomationHomepage.vue
View file @ 18292661
<template>
<div>
<span>生产自动化系统首页</span>
<div class="AutomationHomepageViews">
<div class="AutomationBrieflyMenuBar">
<div class="AutomationSpecificItems" v-for="(item,index) in brieflyMenuBarArray" :key="index">
<div style="display: flex;justify-content: space-between;padding: 33px 25px 0px;">
<div style="font-size:20px;"><span style="color:white;">{{item.name}}：</span><span style="color:rgb(9,199,204);">{{item.context}}</span></div>
<div style="font-size:18px;color:rgb(9,199,204);"><span>详情</span><span class="el-icon-arrow-right"></span></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
brieflyMenuBarArray:this.$store.state.b.brieflyMenuBar.context,
}
}
}
</script>
<style>
<style scoped>
*{
margin: 0;
padding: 0;
}
.AutomationHomepageViews{
background-color: rgb(0,20,78);
width: 100%;
height: 100vh;
position: relative;
}
.AutomationBrieflyMenuBar{
position: relative;
top: 8%;
left: 2%;
width: 350px;
}
.AutomationSpecificItems{
width: 100%;
height: 90px;
background-image: url('../imgs/changkuang1.png');
background-size: 100% 100%;
}
</style>
\ No newline at end of file
src/views/PersonnelPositioning.vue
View file @ 18292661
<template>
<div>
<span>人员定位系统</span>
<div class="iframeBody">
</div>
</template>
......@@ -10,6 +11,15 @@ export default {
}
</script>
<style>
<style scoped>
*{
margin: 0;
padding: 0;
}
.iframeBody{
width: 100%;
background-color: antiquewhite;
height: 100%;
}
</style>
\ No newline at end of file
src/views/homepage.vue
View file @ 18292661
......@@ -155,13 +155,15 @@ export default {
}
.mainBody{
min-height: 100vh;
overflow: hidden;
display: flex;
}
.leftMenuBar{
width: 12%;
overflow: hidden;
}
.rightBody{
width: 100%;
height: 100%;
margin-left: -1px;
width: 88%;
overflow: hidden;
}
.leftMenuBar>.tac>.el-col>ul{
width: 240px;
......
src/views/mineMonitoring.vue
View file @ 18292661
......@@ -49,7 +49,7 @@
<div class="locationSystem">
<div class="locationSystemLeft">
<div class="locationSystemLeft_top">
<span style="font-size:18px;font-weight:600;">{{$store.state.a.environmentalMonitoring.name}}</span>
<span style="font-size:18px;font-weight:600;">{{$store.state.a.locationSystem.name}}</span>
<span style="font-size:14px;display: inline-block;margin-top:5px;">详情<span class="el-icon-arrow-right"></span></span>
</div>
<div class="locationSystemLeft_bottom">
......@@ -62,7 +62,7 @@
</div>
<div class="locationSystemRight">
<img src="../imgs/dingweixitong.png" style="margin-left:33px;">
<div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.environmentalMonitoring.name}}</div>
<div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.locationSystem.name}}</div>
<img src="../imgs/juxing2.png" style="margin:10px 0px 0px 80px;">
</div>
</div>
......@@ -129,7 +129,8 @@ export default {
}
</script>
<style>
<style scoped>
*{
margin: 0;
padding: 0;
......
src/views/videoSurveillance.vue
View file @ 18292661
<template>
<div class="viewBody">
<iframe src="https://www.csdn.net/" class="iframeViews"></iframe>
<div class="iframeBody">
<iframe src="http://192.168.0.106:8080/examples/?q=loader#webgl_loader_obj" class="iframeViews"></iframe>
</div>
</template>
......@@ -10,13 +10,16 @@ export default {
}
</script>
<style>
<style scoped>
*{
margin: 0;
padding: 0;
}
.iframeBody{
height: 100%;
}
.iframeViews{
width: 100%;
height: 928px;
height: 100%;
}
</style>
\ No newline at end of file
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