无人值守明细页面

src/axios/api.js

 //-----------------登录--------------------
 export const login = 'auth/login'; //登录
 export const code = 'auth/code'; 
-export const mainCamera = 'camera/mainCamera'; //视频监控分区表
-export const mainCameraDetail = 'camera/list'; //视频监控分区摄像头详情表
\ No newline at end of file
+export const mainCamera = 'camera/list'; //视频监控分区表
+export const mainCameraDetail = 'cameraDetail/list'; //视频监控分区摄像头详情表
\ No newline at end of file

src/config.js

@@ -2,8 +2,8 @@
 const config = {
     // BASE_URL: 'http://localhost:8013/', //mock地址
     // REAL_URL: 'http://localhost:8013/', //mock地址
-    BASE_URL: 'http://192.168.0.108:8013/', //mock地址
-    REAL_URL: 'http://192.168.0.108:8013/', //mock地址
+    BASE_URL: 'http://192.168.0.108:8001/', //mock地址
+    REAL_URL: 'http://192.168.0.108:8001/', //mock地址
     TOKEN_KEY: 'token',
     USER_KEY: 'userInfo',
     URL_KEY: 'urlInfo'

src/router/index.js

@@ -48,7 +48,8 @@ import reservesList from '../views/reserves/list.vue'
 //门禁系统
 import AccessHomepage from '../views/AccessHomepage.vue'
 //无人值守
-import unman from '../views/unman.vue'
+import unmanTable from '../views/unman/unmanTable.vue'
+import unmanChart from '../views/unman/unmanChart.vue'
 //系统管理
 import personManagement from '../views/management/person.vue'
 import carManagement from '../views/management/car.vue'
@@ -217,8 +218,12 @@ const routes = [
       },
       //无人值守
       {
-        path: '/homepage/unman',
-        component: unman
+        path: '/homepage/unmanTable',
+        component: unmanTable
+      },
+      {
+        path: '/homepage/unmanChart',
+        component: unmanChart
       },
       //系统管理
       {

src/views/homepage.vue

@@ -101,10 +101,14 @@
                   <i class="iconfont icon-a-ziyuan50" style="margin-right:10px;color:rgb(3,156,205);"></i>
                   <span slot="title">门禁系统</span>
               </el-menu-item>
-              <el-menu-item index="/homepage/unman">
+              <el-submenu index="wuren">
+                <template slot="title">
                   <i class="iconfont icon-ren-jianshao" style="margin-right:10px;color:rgb(3,156,205);"></i>
-                  <span slot="title">无人值守</span>
-              </el-menu-item>
+                  <span>无人值守</span>
+                </template>
+                <el-menu-item index="/homepage/unmanTable">无人明细</el-menu-item>
+                <el-menu-item index="/homepage/unmanChart">无人图示</el-menu-item>
+              </el-submenu>
               <el-menu-item index="jiankongdaping">
                   <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-diannao" style="margin-right:10px;color:rgb(3,156,205);"></i>

src/views/login.vue

@@ -189,9 +189,9 @@ export default {
   color: rgb(47,213,255);
   letter-spacing: 2px;
 }
-.el-input input::-webkit-input-placeholder {
+/* .el-input input::-webkit-input-placeholder {
   color:rgb(47,213,255);
-}
+} */
 .passWordInpBody{
   display: flex;
   padding: 2px;

src/views/unman/unmanTable.vue

+<template>
+  <div class="AuHiViewBody">
+
+    <div class="AuHiTop">
+      <div style="font-size:25px;font-weight:600;text-align:center">无人值守数据明细</div>
+      <div style="margin-top:10px;display:flex;float: right;">
+        <div>
+          <template>
+              <el-date-picker
+                v-model="dateDate1.value"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+              </el-date-picker>
+          </template>
+        </div>
+        <el-button type="primary" icon="el-icon-upload2" @click="daochu()" style="margin-left:20px;">导出</el-button>
+        <el-button icon="el-icon-printer" @click="dayin()">打印</el-button>
+      </div>
+    </div>
+
+    <div class="AuHiBottom">
+      <template>
+        <el-table :data="unmanTableData" height="700" border style="width: 100%" :row-style="tableRowStyle">
+          <el-table-column prop="id" label="序号" align="center"></el-table-column>
+          <el-table-column prop="type" label="品种" align="center"></el-table-column>
+          <el-table-column prop="carNumber" label="车牌号" align="center"></el-table-column>
+          <el-table-column prop="other" label="看不清" align="center"></el-table-column>
+          <el-table-column prop="time" label="时间" align="center"></el-table-column>
+        </el-table>
+      </template>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateDate1:{
+        value:""
+      },
+      unmanTableData:[{
+        id: '1',
+        type: '无人',
+        carNumber: '123456',
+        other: '看不清',
+        time: '2021-9-6',
+      },{
+        id: '2',
+        type: '无人',
+        carNumber: '123456',
+        other: '看不清',
+        time: '2021-9-6',
+      },{
+        id: '3',
+        type: '无人',
+        carNumber: '123456',
+        other: '看不清',
+        time: '2021-9-6',
+      },{
+        id: '4',
+        type: '无人',
+        carNumber: '123456',
+        other: '看不清',
+        time: '2021-9-6',
+      },{
+        id: '5',
+        type: '无人',
+        carNumber: '123456',
+        other: '看不清',
+        time: '2021-9-6',
+      },{
+        id: '6',
+        type: '无人',
+        carNumber: '123456',
+        other: '看不清',
+        time: '2021-9-6',
+      }],
+
+    }
+  },
+  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:100%;
+  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/videoSurveillance/videoSetting.vue

@@ -98,7 +98,6 @@
 
 <script>
 import { httpGet, httpPost,httpPostForJson } from "@/common/httpBean.js"
-import axios from "axios"
 import {mainCamera,mainCameraDetail} from "@/axios/api.js"
 export default {
   created(){
@@ -342,9 +341,8 @@ export default {
     }
   },
   methods:{
-    
     getCode() {
-      httpGet(mainCameraDetail).then(res => {
+      httpGet(mainCamera).then(res => {
           console.log(res);
       });
     },