生产自动化系统编写

src/router/index.js

@@ -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

@@ -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

@@ -10,6 +10,6 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 
 </style>
\ No newline at end of file

src/views/AutomationHistory.vue

 <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

 <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

 <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

@@ -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

@@ -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

 <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