系统设置功能开发

src/assets/scss/variable.scss

 $prefixCls:'najiu';
 $item-background-color:#1A2332;
-$theme-background-color:rgba(51, 51, 51, 1);
\ No newline at end of file
+$theme-background-color:rgba(51, 51, 51, 1);
+$border-color:1px solid #444d56;
\ No newline at end of file

src/components/Camera/index.vue

@@ -43,7 +43,7 @@ export default class Camera extends Vue {
     height: 35px;
     line-height: 35px;
     padding-left: 20px;
-    border-bottom: 1px solid #444d56;
+    border-bottom: $border-color;
     a {
       text-decoration: none;
       cursor: pointer;
@@ -62,7 +62,7 @@ export default class Camera extends Vue {
   .item {
     display: flex;
     justify-content: space-between;
-    border-bottom: 1px solid #444d56;
+    border-bottom: $border-color;
     padding-left: 40px;
     padding-right: 10px;
     .item-name {

src/components/DogInfo/index.vue

@@ -57,7 +57,7 @@ export default class DogInfo extends Vue {
 
 <style lang="scss">
 .dog {
-  border: 1px solid #444d56;
+  border: $border-color;
   margin-bottom: 10px;
   background-color: black;
   font-size: 12px;
@@ -69,23 +69,23 @@ export default class DogInfo extends Vue {
     display: flex;
     .dog-img {
       width: 100px;
-      height: 100px;
       padding: 10px;
-      border-right: 1px solid #444d56;
       img {
         width: 100%;
+        height: 100%;
       }
     }
     .dog-data {
       flex: 1;
       .row {
         display: flex;
-        border-bottom: 1px solid #444d56;
+        border-bottom: $border-color;
         .col-left {
           width: 120px;
           text-align: center;
-          border-right: 1px solid #444d56;
-          height: 19px;
+          border-right: $border-color;
+          border-left: $border-color;
+          height: 20px;
           line-height: 20px;
         }
         .col {
@@ -100,7 +100,7 @@ export default class DogInfo extends Vue {
     line-height: 30px;
     text-align: center;
     color: #0079fe;
-    border-top: 1px solid #444d56;
+    border-top: $border-color;
     a {
       cursor: pointer;
       text-decoration: none;

src/configs/apiConfig.ts

 const API = {
   'development': {
-    skyNet: 'http://10.2.60.59:9110/'
+    skyNet: 'http://10.2.60.59:48021/'
   },
   'production': {
-    skyNet: 'http://10.2.60.59:9110/'
+    skyNet: 'http://10.2.60.59:48021/'
   }
 }
 
-console.log('env', process.env)
-
 export default API[process.env.NODE_ENV]
\ No newline at end of file

src/layout/compoments/menu.vue

@@ -77,7 +77,6 @@ export default class Menu extends Vue {
       font-size: 16px;
       line-height: 60px;
       text-decoration: none;
-      color: white;
     }
   }
   .icon-menu {

src/main.ts

@@ -3,10 +3,13 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import "@/utils/rem";
-import { Message } from 'element-ui';
+import { Message, Table, TableColumn, Button } from 'element-ui';
 
 Vue.config.productionTip = false;
 
+Vue.use(Table)
+Vue.use(TableColumn)
+Vue.use(Button)
 Vue.prototype.$message = Message;
 
 router.beforeEach((to, from, next): void => {

src/types/response.ts

 export interface responseData {
-  code: string,
+  code: number,
   msg: string,
-  data:any
+  data: any
 }
\ No newline at end of file

src/views/dashboard/index.vue

@@ -26,7 +26,6 @@ import Camera from "@/components/Camera/index.vue";
 import { DashBoardData } from "./data";
 import DogInfo from "@/components/DogInfo/index.vue";
 import Search from "@/components/Camera/search.vue";
-import { getCamera } from "@/service/CameraService";
 
 @Component({ components: { Camera, DogInfo, Search } })
 export default class Dashboard extends Vue {
@@ -34,16 +33,6 @@ export default class Dashboard extends Vue {
     return process.env.VUE_APP_PRE_CSS;
   }
 
-  created(): void {
-    getCamera({
-      current: 1,
-      groupName: "",
-      name: "",
-      size: 20,
-    }).then((data) => {
-      console.log("api***", data);
-    });
-  }
   //#region data
   data(): DashBoardData {
     return {
@@ -146,12 +135,12 @@ export default class Dashboard extends Vue {
     line-height: 40px;
     font-size: 15px;
     font-weight: 400;
-    border-bottom: 1px solid #444d56;
+    border-bottom: $border-color;
     margin-bottom: 10px;
   }
   .camera-list {
     width: 335px;
-    border: 1px solid #444d56;
+    border: $border-color;
     background-color: $item-background-color;
     padding: 0 10px;
     padding-bottom: 15px;
@@ -167,12 +156,12 @@ export default class Dashboard extends Vue {
     background-color: $item-background-color;
     margin-left: 5px;
     margin-right: 5px;
-    border: 1px solid #444d56;
+    border: $border-color;
   }
   .video-list {
     width: 440px;
     background-color: $item-background-color;
-    border: 1px solid #444d56;
+    border: $border-color;
     padding: 0 10px;
     padding-bottom: 15px;
 

src/views/sysSetting/data.d.ts

+export interface CameraData {
+  id: number;
+  name: string;
+}
\ No newline at end of file

src/views/sysSetting/index.vue

 <template>
-  <div>sys setting</div>
+  <div :class="`${prefixCls}-sys-setting`">
+    <div class="title">摄像头维护</div>
+    <div class="main-container">
+      <div class="search">
+        <div class="item">摄像头名称</div>
+        <div class="item">摄像头名称</div>
+        <div class="item">分组</div>
+        <div class="item">摄像头名称</div>
+        <div class="item">
+          <el-button type="primary" class="btn">搜索</el-button>
+        </div>
+        <div class="item">
+          <el-button type="info" class="btn btn-white">清空</el-button>
+        </div>
+      </div>
+      <div class="add">
+        <el-button type="primary" class="btn" icon="el-icon-plus">新增</el-button>
+      </div>
+      <el-table
+        :data="cameraData"
+        style="width: 100%"
+        :header-cell-class-name="handleCellHeader"
+        :row-class-name="handleRow"
+        :cell-class-name="handleCell"
+      >
+        <el-table-column prop="name" label="摄像头名称"></el-table-column>
+        <el-table-column prop="groupName" label="分组"></el-table-column>
+        <el-table-column prop="longitude" label="经纬度"></el-table-column>
+        <el-table-column prop="latitude" label="视频路径"></el-table-column>
+        <el-table-column prop="createTime" label="创建时间"></el-table-column>
+        <el-table-column fixed="right" label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" size="small">编辑</el-button>
+            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
 </template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { getCamera } from "@/service/CameraService";
+
+@Component({})
+export default class SysSetting extends Vue {
+  get prefixCls(): string {
+    return process.env.VUE_APP_PRE_CSS;
+  }
+
+  cameraData = [];
+
+  created(): void {
+    getCamera({
+      current: 1,
+      groupName: "",
+      name: "",
+      size: 20,
+    }).then((rp) => {
+      if (rp.code === 0) {
+        this.cameraData = rp.data.records;
+      }
+    });
+  }
+
+  handleRow({ rowIndex }): string {
+    return rowIndex % 2 === 1 ? "odd-row" : "even-row";
+  }
+  handleCellHeader(): string {
+    console.log("row header");
+    return "cell-header-border";
+  }
+  handleCell({ columnIndex, column }): string {
+    return "cell-border";
+  }
+}
+</script>
+
+<style lang="scss">
+.#{$prefixCls}-sys-setting {
+  .title {
+    height: 40px;
+    line-height: 40px;
+    border-top: $border-color;
+    padding-left: 24px;
+    font-size: 15px;
+    font-weight: 400;
+    background-color: $item-background-color;
+  }
+  .btn {
+    padding: 5px 15px;
+    font-size: 12px;
+    color: white;
+  }
+  .btn-white {
+    border: 1px solid #d7d7d7;
+  }
+  .main-container {
+    margin: 0 auto;
+    max-width: 1905px;
+    min-width: 1650px;
+    padding: 10px;
+    .search {
+      display: flex;
+      padding-left: 24px;
+      background-color: $item-background-color;
+      border-bottom: $border-color;
+      .item {
+        height: 40px;
+        line-height: 40px;
+        padding-right: 15px;
+      }
+    }
+    .add {
+      height: 40px;
+      line-height: 40px;
+      padding-left: 24px;
+      background-color: $item-background-color;
+    }
+    .odd-row {
+      background-color: #2c3b52;
+    }
+    .even-row {
+      background-color: #000000;
+    }
+    .cell-border {
+      border-bottom: $border-color;
+      border-right: $border-color;
+    }
+    .cell-header-border {
+      background-color: #2c3b52;
+      border-bottom: $border-color !important;
+      border-right: $border-color;
+    }
+    .el-table__row .even-row .hover-row {
+      background-color: red !important;
+    }
+  }
+}
+</style>