Skip to content

N
najiu-skynet-admin
Commit 566251ff authored by 朱松文's avatar 朱松文
Browse files
Options

1.架构部分代码优化 2.系统设置增删查改功能实现

parent 8ad0bc8d
Hide whitespace changes
Inline Side-by-side
Showing with 310 additions and 57 deletions
src/assets/iconfont/iconfont.css
View file @ 566251ff
......@@ -36,3 +36,7 @@
.icon-bofang:before {
content: "\e635";
}
.icon-jinggao:before {
content: "\e636";
}
src/components/DogInfo/index.vue
View file @ 566251ff
......@@ -114,6 +114,7 @@ export default class DogInfo extends BaseVue {
}
td {
vertical-align: middle;
div {
height: 20px;
line-height: 20px;
......
src/configs/apiConfig.ts
View file @ 566251ff
const API = {
'development': {
skyNet: 'http://10.2.60.59:48021/'
skyNet: 'http://skynet-test.inajiu.com:7011/sn-web/'
},
'production': {
skyNet: 'http://10.2.60.59:48021/'
......
src/main.ts
View file @ 566251ff
......@@ -3,13 +3,19 @@ import App from "./App.vue";
import router from "./router";
import store from "./store";
import "@/utils/rem";
import { Message, Table, TableColumn, Button } from 'element-ui';
import { Message, Table, TableColumn, Button, Dialog, Form, FormItem, Input, InputNumber, Pagination } from 'element-ui';
Vue.config.productionTip = false;
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Pagination)
Vue.prototype.$message = Message;
router.beforeEach((to, from, next): void => {
......
src/service/CameraService.ts
View file @ 566251ff
......@@ -3,4 +3,16 @@ import NetUtil from '@/utils/http'
export function getCamera(pageData: any): Promise<responseData> {
return NetUtil.fetch_request('camera/paging', 'POST', pageData)
}
export function updCamera(data: any) {
return NetUtil.fetch_request('camera/updCamera', 'POST', data)
}
export function addCamera(data: any) {
return NetUtil.fetch_request('camera/addCamera', 'POST', data)
}
export function delCamera(id: string) {
return NetUtil.fetch_request('camera/delCamera/' + id, 'POST')
}
\ No newline at end of file
src/views/sysSetting/data.d.ts
View file @ 566251ff
export interface CameraData {
id: number;
name: string;
id?: string;
name?: string;
groupName?: string;
longitude?: string;
latitude?: string;
createTime?: string;
}
\ No newline at end of file
src/views/sysSetting/index.vue
View file @ 566251ff
......@@ -4,78 +4,250 @@
<div class="main-container">
<div class="search">
<div class="item">摄像头名称</div>
<div class="item">摄像头名称</div>
<div class="item">
<el-input size="mini" v-model="queryData.name"></el-input>
</div>
<div class="item">分组</div>
<div class="item">摄像头名称</div>
<div class="item">
<el-button type="primary" class="btn">搜索</el-button>
<el-input size="mini" v-model="queryData.groupName"></el-input>
</div>
<div class="item">
<el-button type="primary" class="btn" @click="handleQuery" :loading="isDisabled">搜索</el-button>
</div>
<div class="item">
<el-button type="info" class="btn btn-white">清空</el-button>
<el-button type="info" class="btn btn-white" @click="handleClean">清空</el-button>
</div>
</div>
<div class="add">
<el-button type="primary" class="btn" icon="el-icon-plus">新增</el-button>
<el-button type="primary" class="btn" icon="el-icon-plus" @click="addCamera">新增</el-button>
</div>
<table>
<thead>
<tr class="odd-row">
<td>
<div>摄像头名称</div>
</td>
<td>
<div>分组</div>
</td>
<td>
<div>经纬度</div>
</td>
<td>
<div>视频路径</div>
</td>
<td>
<div>创建时间</div>
</td>
<td>
<div>操作</div>
</td>
</tr>
</thead>
<tbody>
<tr
v-for="(item,i) in cameraData"
:key="item.id"
:class="{'odd-row':i % 2 === 1,'even-row':i % 2 === 0}"
>
<td>
<div>{{item.name}}</div>
</td>
<td>
<div>{{item.groupName}}</div>
</td>
<td>
<div>{{item.longitude}}</div>
</td>
<td>
<div>{{item.latitude}}</div>
</td>
<td>
<div>{{item.createTime}}</div>
</td>
<td>
<div>
<el-button type="text" @click="handleEdit(item)">编辑</el-button>
<el-button type="text" @click="handleDel(item.id)">删除</el-button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="pageing">
<el-pagination
background
layout="total,prev, pager, next,jumper"
@current-change="handleCurrentChange"
:total="total"
></el-pagination>
</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>
<el-dialog title="新增/编辑摄像头" :visible.sync="dialogVisible" width="500px">
<el-form ref="form" :rules="formRules" :model="form" label-width="120px">
<el-form-item label="摄像头名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<el-form ref="form" :rules="formRules" :model="form" label-width="120px">
<el-form-item label="分组" prop="groupName">
<el-input v-model="form.groupName"></el-input>
</el-form-item>
</el-form>
<el-form ref="form" :rules="formRules" :model="form" label-width="120px">
<el-form-item label="经纬度" prop="longitude">
<el-input v-model="form.longitude"></el-input>
</el-form-item>
</el-form>
<el-form ref="form" :rules="formRules" :model="form" label-width="120px">
<el-form-item label="视频路径" prop="latitude">
<el-input v-model="form.latitude"></el-input>
</el-form-item>
<el-form-item class="form-footer">
<el-button class="btn" type="info" @click="dialogVisible = false">取消</el-button>
<el-button
class="btn"
type="primary"
@click="submitForm('form')"
:disabled="isDisabled"
:loading="isDisabled"
>确 定</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog title="提示信息" :visible.sync="dialogDelVisible" width="500px">
<div>
<div class="confirm-del">
<Icon name="jinggao" iconClass />
<span>确定删除接口吗？</span>
</div>
<div>确认后此接口将被彻底删除。</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="btn" type="info" @click="dialogDelVisible = false">取 消</el-button>
<el-button class="btn" type="primary" @click="handleConfirmDel">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script lang="ts">
import { Component } from "vue-property-decorator";
import { getCamera } from "@/service/CameraService";
import {
getCamera,
updCamera,
addCamera,
delCamera,
} from "@/service/CameraService";
import BaseVue from "@/types/baseVue";
import { CameraData } from "./data";
import Icon from "@/components/Icon/index.vue";
@Component({})
@Component({ components: { Icon } })
export default class SysSetting extends BaseVue {
cameraData = [];
dialogVisible = false;
isDisabled = false;
dialogDelVisible = false;
currentId = "";
total = 0;
form: CameraData = {};
formRules = {
name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
groupName: [{ required: true, message: "请输入分组", trigger: "blur" }],
longitude: [{ required: true, message: "请输入经纬度", trigger: "blur" }],
latitude: [{ required: true, message: "请输入视频路径", trigger: "blur" }],
};
queryData = {
current: 1,
groupName: "",
name: "",
size: 10,
};
created(): void {
getCamera({
current: 1,
groupName: "",
name: "",
size: 20,
}).then((rp) => {
this.queryCamera();
}
async submitForm(formName) {
this.isDisabled = true;
//@ts-ignore
this.$refs[formName].validate(async (valid) => {
if (!valid) {
this.$message.error("录入信息不正确");
this.isDisabled = false;
return false;
}
console.log("form", valid, this.form);
const rp = this.form.id
? await updCamera(this.form)
: await addCamera(this.form);
if (rp.code === 0) {
this.cameraData = rp.data.records;
this.isDisabled = false;
this.dialogVisible = false;
this.queryCamera();
return true;
} else {
this.$message.error("写入信息异常");
this.isDisabled = false;
return false;
}
});
}
handleRow({ rowIndex }): string {
return rowIndex % 2 === 1 ? "odd-row" : "even-row";
async handleQuery(): Promise<void> {
this.isDisabled = true;
await this.queryCamera();
this.isDisabled = false;
}
handleCellHeader(): string {
console.log("row header");
return "cell-header-border";
async queryCamera(): Promise<void> {
const rp = await getCamera(this.queryData);
if (rp.code !== 0) {
this.$message(rp.msg);
return;
}
this.cameraData = rp.data.records;
this.total = rp.data.total;
}
async addCamera(): Promise<void> {
this.form = {};
this.dialogVisible = true;
}
async handleDel(id: string): Promise<void> {
this.currentId = id;
this.dialogDelVisible = true;
}
handleCell({ columnIndex, column }): string {
return "cell-border";
handleClean(): void {
this.queryData.groupName = "";
this.queryData.name = "";
}
async handleConfirmDel(): Promise<void> {
const rp = await delCamera(this.currentId);
if (rp.code !== 0) {
this.$message("删除数据失败");
return;
}
this.dialogDelVisible = false;
this.queryCamera();
}
handleEdit(row: CameraData): void {
this.dialogVisible = true;
this.form = { ...row };
}
handleCurrentChange(val) {
this.queryData.current = val;
this.queryCamera();
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.#{$prefixCls}-sys-setting {
.title {
height: 40px;
......@@ -87,7 +259,7 @@ export default class SysSetting extends BaseVue {
background-color: $item-background-color;
}
.btn {
padding: 5px 15px;
padding: 8px 15px;
font-size: 12px;
color: white;
}
......@@ -111,8 +283,8 @@ export default class SysSetting extends BaseVue {
}
}
.add {
height: 40px;
line-height: 40px;
height: 50px;
line-height: 50px;
padding-left: 24px;
background-color: $item-background-color;
}
......@@ -122,17 +294,71 @@ export default class SysSetting extends BaseVue {
.even-row {
background-color: #000000;
}
.cell-border {
border-bottom: $border-color;
border-right: $border-color;
table {
width: 100%;
border-collapse: collapse;
}
.cell-header-border {
background-color: #2c3b52;
border-bottom: $border-color !important;
border-right: $border-color;
table,
th,
td {
border: $border-color;
}
tbody tr:hover {
background-color: #333333;
}
.el-table__row .even-row .hover-row {
background-color: red !important;
td {
vertical-align: middle;
line-height: 50px;
div {
padding: 0 10px;
}
}
.confirm-del {
font-size: 16px;
font-weight: 700;
}
.pageing {
display: flex;
justify-content: end;
align-items: flex-end;
height: 100px;
padding: 10px;
background-color: $item-background-color;
}
}
::v-deep {
.el-dialog__header {
background-color: #333e5d;
}
.el-dialog__title {
color: #d7d7d7;
}
.el-dialog__close {
font-size: 20px;
color: #d7d7d7;
}
.el-dialog__body,
.el-dialog__footer {
background-color: $item-background-color;
}
.el-input__inner {
color: #d7d7d7;
background-color: $item-background-color;
}
.el-dialog__body {
padding-right: 70px;
}
}
.confirm-del {
font-size: 16px;
font-weight: 700;
.icon-jinggao {
font-size: 20px;
padding-right: 5px;
color: red;
}
}
}
......
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