删除车辆定位，增加系统管理和3D跳转页面

src/router/index.js

@@ -19,8 +19,6 @@ import ReportNowData from '../views/ReportNowData.vue'
 import ReportHistory from '../views/ReportHistory.vue'
 //人员定位系统
 import PersonnelPositioning from '../views/PersonnelPositioning.vue'
-//车辆定位系统
-import CarPositioning from '../views/CarPositioning.vue'
 //边坡在线监测
 import SlopeHomePage from '../views/SlopeHomePage.vue'
 import SlopeNowData from '../views/SlopeNowData.vue'
@@ -35,6 +33,9 @@ import EnvironmentAlarm from '../views/EnvironmentAlarm.vue'
 import reservesHomepage from '../views/reservesHomepage.vue'
 //门禁系统
 import AccessHomepage from '../views/AccessHomepage.vue'
+//系统管理
+import PersonManagement from '../views/PersonManagement.vue'
+import carManagement from '../views/carManagement.vue'
 
 Vue.use(VueRouter)
 //解决vue中路由冗余导航报错
@@ -96,11 +97,6 @@ const routes = [
         path: '/homepage/PersonnelPositioning',
         component: PersonnelPositioning
       },
-      //车辆定位系统
-      {
-        path: '/homepage/CarPositioning',
-        component: CarPositioning
-      },
       //边坡在线监测
       {
         path: '/homepage/SlopeHomePage',
@@ -139,6 +135,15 @@ const routes = [
         path: '/homepage/AccessHomepage',
         component: AccessHomepage
       },
+      //系统管理
+      {
+        path: '/homepage/PersonManagement',
+        component: PersonManagement
+      },
+      {
+        path: '/homepage/carManagement',
+        component: carManagement
+      }
     ]
   },
 

src/views/AutomatedNowData.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="请选择风机设备">
+              <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="equipment" label="产品设备" align="center"></el-table-column>
+          <el-table-column prop="name" label="指标名称" align="center"></el-table-column>
+          <el-table-column prop="numerical" label="数值" align="center"></el-table-column>
+          <el-table-column prop="alarmLevel" label="报警级别" align="center"></el-table-column>
+          <el-table-column prop="time" label="时间" align="center"></el-table-column>
+          <el-table-column prop="status" 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: '111'
+        }, {
+          value: '选项2',
+          label: '222'
+        }, {
+          value: '选项3',
+          label: '333'
+        }, {
+          value: '选项4',
+          label: '444'
+        }, {
+          value: '选项5',
+          label: '555'
+        }],
+        value: ''
+      },
+      selectDate1:{
+        value:""
+      },
+      selectDate2:{
+        value:""
+      },
+      historyData:this.$store.state.b.now.tableData,
+    }
+  },
+  methods:{
+    tableRowStyle({row, rowIndex}) {
+      // if (row.name == "王小虎") {
+      //   return 'background: rgb(255,232,232);';
+      // }
+    },
+    daochu(){
+      //获取表格
+      var exportFileContent = document.querySelector(".el-table").outerHTML;           
+      //设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
+      //exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
+      //var link = "data:"+MIMEType+";base64," + exportFileContent;
+      //使用Blob
+      var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"});     	//解决中文乱码问题
+      blob =  new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
+      //设置链接
+      var link = window.URL.createObjectURL(blob); 
+      var a = document.createElement("a");    //创建a标签
+      a.download = "生产自动化系统实时数据表.xls";  //设置被下载的超链接目标（文件名）
+      a.href = link;                            //设置a标签的链接
+      document.body.appendChild(a);            //a标签添加到页面
+      a.click();                                //设置a标签触发单击事件
+      document.body.removeChild(a);            //移除a标签
+    },
+    dayin(){
+      var tableToPrint = document.querySelector(".el-table");//将要被打印的表格
+      var newWin= window.open("");//新打开一个空窗口
+      newWin.document.write(tableToPrint.outerHTML);//将表格添加进新的窗口
+      newWin.document.close();//在IE浏览器中使用必须添加这一句
+      newWin.focus();//在IE浏览器中使用必须添加这一句
+      newWin.print();//打印
+      newWin.close();//关闭窗口
+    },
+    
+  }
 }
 </script>
 
 <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/AutomationHistory.vue

@@ -2,11 +2,11 @@
   <div class="AuHiViewBody">
 
     <div class="AuHiTop">
-      <div style="font-size:20px;font-weight:600;">查询搜索</div>
+      <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-select v-model="feijishebei.value" placeholder="请选择风机设备">
               <el-option
                 v-for="item in feijishebei.options"
                 :key="item.value"
@@ -124,16 +124,36 @@ export default {
   },
   methods:{
     tableRowStyle({row, rowIndex}) {
-      if (row.name == "王小虎") {
-        //console.log(rowIndex)
-        return 'background: rgb(255,232,232);';
-      }
+      // if (row.name == "王小虎") {
+      //   return 'background: rgb(255,232,232);';
+      // }
     },
     daochu(){
-      console.log(this.feijishebei.value + "|||" + this.jiancexiang.value)
+      //获取表格
+      var exportFileContent = document.querySelector(".el-table").outerHTML;           
+      //设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
+      //exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
+      //var link = "data:"+MIMEType+";base64," + exportFileContent;
+      //使用Blob
+      var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"});     	//解决中文乱码问题
+      blob =  new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
+      //设置链接
+      var link = window.URL.createObjectURL(blob); 
+      var a = document.createElement("a");    //创建a标签
+      a.download = "生产自动化系统历史数据表.xls";  //设置被下载的超链接目标（文件名）
+      a.href = link;                            //设置a标签的链接
+      document.body.appendChild(a);            //a标签添加到页面
+      a.click();                                //设置a标签触发单击事件
+      document.body.removeChild(a);            //移除a标签
     },
     dayin(){
-      console.log(this.selectDate1.value + "|||" + this.selectDate2.value)
+      var tableToPrint = document.querySelector(".el-table");//将要被打印的表格
+      var newWin= window.open("");//新打开一个空窗口
+      newWin.document.write(tableToPrint.outerHTML);//将表格添加进新的窗口
+      newWin.document.close();//在IE浏览器中使用必须添加这一句
+      newWin.focus();//在IE浏览器中使用必须添加这一句
+      newWin.print();//打印
+      newWin.close();//关闭窗口
     },
     
   }

src/views/CarPositioning.vue → src/views/PersonManagement.vue

 <template>
   <div>
-      <span>车辆定位系统</span>
+      <span>车辆系统管理</span>
   </div>
 </template>
 

src/views/carManagement.vue

+<template>
+  <div>
+      <span>人员系统管理</span>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/homepage.vue

@@ -52,11 +52,7 @@
                   <i class="iconfont icon-dingwei" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span slot="title">人员定位系统</span>
               </el-menu-item>
-              <el-menu-item index="/homepage/CarPositioning">
-                  <i class="iconfont icon-car-fill" style="margin-right:10px;color:rgb(3,156,205);"></i>
-                  <span slot="title">车辆定位系统</span>
-              </el-menu-item>
-              <el-submenu index="7">
+              <el-submenu index="6">
                 <template slot="title">
                   <i class="iconfont icon-bianpo" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span>边坡在线监测</span>
@@ -66,7 +62,7 @@
                 <el-menu-item index="/homepage/SlopeHistory">历史数据</el-menu-item>
                 <el-menu-item index="/homepage/SlopeAlarm">报警记录</el-menu-item>
               </el-submenu>
-              <el-submenu index="8">
+              <el-submenu index="7">
                 <template slot="title">
                   <i class="iconfont icon-yezi" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span>环境在线监测</span>
@@ -84,6 +80,20 @@
                   <i class="iconfont icon-IOTtubiao_huabanfuben" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span slot="title">门禁系统</span>
               </el-menu-item>
+              <el-submenu index="10">
+                <template slot="title">
+                  <i class="iconfont icon-yezi" style="margin-right:10px;color:rgb(3,156,205);"></i>
+                  <span>系统管理</span>
+                </template>
+                <el-menu-item index="/homepage/PersonManagement">人员系统管理</el-menu-item>
+                <el-menu-item index="/homepage/carManagement">车辆系统管理</el-menu-item>
+              </el-submenu>
+              <el-menu-item>
+                  <a href="http://www.baidu.com" style="color:rgb(3,156,205);text-decoration: none;-webkit-tap-highlight-color: rgba(3,156,205);">
+                    <i class="iconfont icon-car-fill" style="margin-right:10px;color:rgb(3,156,205);"></i>
+                    <span slot="title">3D切换</span>
+                  </a>
+              </el-menu-item>
             </el-menu>
           </el-col>
         </el-row>

src/views/videoSurveillance.vue

 <template>
   <div class="iframeBody">
-    <iframe src="http://192.168.0.106:8080/examples/?q=loader#webgl_loader_obj" class="iframeViews"></iframe>
+    <!-- <iframe src="http://192.168.0.106:8080/examples/?q=loader#webgl_loader_obj" class="iframeViews"></iframe> -->
   </div>
 </template>
 
@@ -17,6 +17,7 @@ export default {
 }
 .iframeBody{
   height: 100%;
+  background-color: aquamarine;
 }
 .iframeViews{
   width: 100%;