Commit 2432df21 authored by caicaicai's avatar caicaicai

各个接口链接

parent 1e3236b4
...@@ -3,3 +3,5 @@ export const login = 'auth/login'; //登录 ...@@ -3,3 +3,5 @@ export const login = 'auth/login'; //登录
export const code = 'auth/code'; export const code = 'auth/code';
export const mainCamera = 'camera/list'; //视频监控分区表 export const mainCamera = 'camera/list'; //视频监控分区表
export const mainCameraDetail = 'cameraDetail/list'; //视频监控分区摄像头详情表 export const mainCameraDetail = 'cameraDetail/list'; //视频监控分区摄像头详情表
export const deviceRegister = 'device/list'; //车辆登记详情表
export const personRegister = 'person/list'; //车辆登记详情表
...@@ -26,7 +26,7 @@ const mineMonitoring = { ...@@ -26,7 +26,7 @@ const mineMonitoring = {
name:"生产自动化", name:"生产自动化",
context:[{name:"发货车辆",num:"36辆"},{name:"发货量",num:"36辆"}], context:[{name:"发货车辆",num:"36辆"},{name:"发货量",num:"36辆"}],
}, },
user:"", user:"管理员",
}, },
mutations:{ mutations:{
changeUser(userName){ changeUser(userName){
...@@ -57,12 +57,6 @@ const automation = { ...@@ -57,12 +57,6 @@ const automation = {
} }
//默认vuex //默认vuex
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
......
<template> <template>
<div> <div class="AuHiViewBody">
<span>门禁系统首页</span>
<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 style="margin-right:20px;">
<template>
<el-date-picker
v-model="dateDate1.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<el-input v-model="search" placeholder="请输入内容" style="margin-right:20px;"></el-input>
<el-button type="primary" @click="dayin()">确认</el-button>
</div>
</div>
<div class="AuHiBottom">
<!-- 将获取到的数据进行计算 -->
<el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" border style="width: 100%" height="650">
<el-table-column prop="id" label="序号" align="center"></el-table-column>
<el-table-column prop="name" label="企业名称" align="center"></el-table-column>
<el-table-column prop="carNumber" label="车牌号码" align="center"></el-table-column>
<el-table-column prop="carImg" label="车牌照片" align="center"></el-table-column>
<el-table-column prop="enterTime" label="进厂时间" align="center"></el-table-column>
<el-table-column prop="outTime" label="出厂时间" align="center"></el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() {
return {
dateDate1:{
value:""
},
tableData:[],
// 默认显示第几页
currentPage:1,
// 总条数
totalCount:1,
// 个数选择器
pageSizes:[2,4,6,8,10],
// 默认每页显示的条数
PageSize:10,
search:"",
}
},
methods:{
getTabData(){
//此处直接赋值代替发Ajax获取数据
this.tableData=[{
id:"1",
name: '晶合1',
carNumber:"鲁A11111",
carImg:"aaaaa",
enterTime: '2021-05-02',
outTime: '2021-05-05'
},{
id:"2",
name: '晶合1',
carNumber:"鲁A11111",
carImg:"aaaaa",
enterTime: '2021-05-02',
outTime: '2021-05-05'
},{
id:"3",
name: '晶合1',
carNumber:"鲁A11111",
carImg:"aaaaa",
enterTime: '2021-05-02',
outTime: '2021-05-05'
},{
id:"4",
name: '晶合1',
carNumber:"鲁A11111",
carImg:"aaaaa",
enterTime: '2021-05-02',
outTime: '2021-05-05'
},{
id:"5",
name: '晶合1',
carNumber:"鲁A11111",
carImg:"aaaaa",
enterTime: '2021-05-02',
outTime: '2021-05-05'
},{
id:"6",
name: '晶合1',
carNumber:"鲁A11111",
carImg:"aaaaa",
enterTime: '2021-05-02',
outTime: '2021-05-05'
},{
id:"7",
name: '晶合1',
carNumber:"鲁A11111",
carImg:"aaaaa",
enterTime: '2021-05-02',
outTime: '2021-05-05'
}]
this.totalCount=this.tableData.length
},
// 分页
// 每页显示的条数
handleSizeChange(val) {
// 改变每页显示的条数
this.PageSize=val
// 在改变每页显示的条数时,要将页码显示到第一页
this.currentPage=1
},
// 显示第几页
handleCurrentChange(val) {
// 改变默认的页数
this.currentPage=val
},
},
created:function(){
this.getTabData()
}
} }
</script> </script>
<style> <style scoped>
.el-pagination{
float: right;
}
.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> </style>
\ No newline at end of file
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
<div class="AuHiBottom"> <div class="AuHiBottom">
<template> <template>
<el-table :data="carRegistrationData" height="700" border style="width: 100%"> <el-table :data="carRegistrationData" height="700" border style="width: 100%">
<el-table-column prop="car_id" label="车牌号" align="center"></el-table-column> <el-table-column prop="carId" label="车牌号" align="center"></el-table-column>
<el-table-column prop="type" label="车类型" align="center"></el-table-column> <el-table-column prop="type" label="车类型" align="center"></el-table-column>
<el-table-column prop="name" label="负责人" align="center"></el-table-column> <el-table-column prop="name" label="负责人" align="center"></el-table-column>
<el-table-column prop="gnss_id" label="gnss编号" align="center"></el-table-column> <el-table-column prop="gnssId" label="gnss编号" align="center"></el-table-column>
<el-table-column prop="note" label="备注" align="center"></el-table-column> <el-table-column prop="note" label="备注" align="center"></el-table-column>
<el-table-column label="操作" width="150" align="center"> <el-table-column label="操作" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<el-dialog :title="formTitle" :visible.sync="formVisible" width="30%"> <el-dialog :title="formTitle" :visible.sync="formVisible" width="30%">
<el-form ref="form" :model="formData" label-width="80px"> <el-form ref="form" :model="formData" label-width="80px">
<el-form-item label="车牌号"> <el-form-item label="车牌号">
<el-input v-model="formData.car_id" :disabled="inpDisable"></el-input> <el-input v-model="formData.carId" :disabled="inpDisable"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="车类型"> <el-form-item label="车类型">
<el-input v-model="formData.type"></el-input> <el-input v-model="formData.type"></el-input>
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<el-input v-model="formData.name"></el-input> <el-input v-model="formData.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="gnss编号"> <el-form-item label="gnss编号">
<el-input v-model="formData.gnss_id"></el-input> <el-input v-model="formData.gnssId"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="备注"> <el-form-item label="备注">
<el-input v-model="formData.note"></el-input> <el-input v-model="formData.note"></el-input>
...@@ -55,63 +55,31 @@ ...@@ -55,63 +55,31 @@
</template> </template>
<script> <script>
import { httpGet, httpPost,httpPostForJson } from "@/common/httpBean.js"
import {deviceRegister} from "@/axios/api.js"
export default { export default {
created(){
this.getCode()
},
data() { data() {
return { return {
carRegistrationData:[],
formTitle:"", formTitle:"",
formType:"", formType:"",
carRegistrationData:[{
car_id: '鲁A45454',
type: '马自达',
name: '王一',
gnss_id: '19919191919',
note: '',
},{
car_id: '鲁A48888',
type: '马自达',
name: '王一',
gnss_id: '19919191919',
note: '',
},{
car_id: '鲁A66666',
type: '马自达',
name: '王一',
gnss_id: '19919191919',
note: '',
},{
car_id: '鲁A11111',
type: '马自达',
name: '王一',
gnss_id: '19919191919',
note: '',
},{
car_id: '鲁A77777',
type: '马自达',
name: '王一',
gnss_id: '19919191919',
note: '',
},{
car_id: '鲁A0000',
type: '马自达',
name: '王一',
gnss_id: '19919191919',
note: '',
},],
formVisible:false, formVisible:false,
formData: { formData: {carId: '',type: '',name: '',gnssId: '',note: '',},
car_id: '',
type: '',
name: '',
gnss_id: '',
note: '',
},
inpDisable:false, inpDisable:false,
deleteVisible:false, deleteVisible:false,
} }
}, },
methods:{ methods:{
getCode() {
httpGet(deviceRegister).then(res => {
this.carRegistrationData = res.content;
});
},
formOpen(type,row){ formOpen(type,row){
this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',}; this.formData = {carId: '',type: '',name: '',gnssId: '',note: '',};
this.formVisible = true; this.formVisible = true;
this.formType = type; this.formType = type;
if(this.formType === "add"){ if(this.formType === "add"){
...@@ -131,12 +99,12 @@ export default { ...@@ -131,12 +99,12 @@ export default {
} }
this.carRegistrationData.unshift(this.formData); this.carRegistrationData.unshift(this.formData);
this.formVisible = false; this.formVisible = false;
this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',}; this.formData = {carId: '',type: '',name: '',gnssId: '',note: '',};
}else if(this.formType === "change"){ }else if(this.formType === "change"){
const that = this; const that = this;
const newData = []; const newData = [];
this.carRegistrationData.forEach(function(item){ this.carRegistrationData.forEach(function(item){
if(item.car_id === that.formData.car_id){ if(item.carId === that.formData.carId){
newData.push(that.formData); newData.push(that.formData);
}else{ }else{
newData.push(item); newData.push(item);
...@@ -144,12 +112,12 @@ export default { ...@@ -144,12 +112,12 @@ export default {
}) })
this.carRegistrationData = newData; this.carRegistrationData = newData;
this.formVisible = false; this.formVisible = false;
this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',}; this.formData = {carId: '',type: '',name: '',gnssId: '',note: '',};
} }
}, },
formcancel(){ formcancel(){
this.formVisible = false; this.formVisible = false;
this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',}; this.formData = {carId: '',type: '',name: '',gnssId: '',note: '',};
}, },
deleteFormOpen(row){ deleteFormOpen(row){
console.log(row); console.log(row);
...@@ -160,7 +128,7 @@ export default { ...@@ -160,7 +128,7 @@ export default {
const that = this; const that = this;
const newData = []; const newData = [];
this.carRegistrationData = that.carRegistrationData.forEach(function(item){ this.carRegistrationData = that.carRegistrationData.forEach(function(item){
if(item.car_id === that.formData.car_id){ if(item.carId === that.formData.carId){
return; return;
}else{ }else{
newData.push(item); newData.push(item);
...@@ -168,11 +136,11 @@ export default { ...@@ -168,11 +136,11 @@ export default {
}) })
this.carRegistrationData = newData; this.carRegistrationData = newData;
this.deleteVisible = false; this.deleteVisible = false;
this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',}; this.formData = {carId: '',type: '',name: '',gnssId: '',note: '',};
}, },
cancelDelete(){ cancelDelete(){
this.deleteVisible = false; this.deleteVisible = false;
this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',}; this.formData = {carId: '',type: '',name: '',gnssId: '',note: '',};
} }
} }
} }
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<span>{{ $store.state.platformName }}</span> <span>{{ $store.state.platformName }}</span>
<div class="userInformationBar"> <div class="userInformationBar">
<div style="margin-right:10px;"> <div style="margin-right:10px;">
<span>{{userName}}</span> <span>{{ $store.state.a.user }}</span>
<span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span> <span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span>
</div> </div>
<el-button type="primary" circle @click="handleFullScreen()" size="small" style="margin-right:10px;"><span :class="quanping"></span></el-button> <el-button type="primary" circle @click="handleFullScreen()" size="small" style="margin-right:10px;"><span :class="quanping"></span></el-button>
......
...@@ -7,13 +7,13 @@ ...@@ -7,13 +7,13 @@
<div class="AuHiBottom"> <div class="AuHiBottom">
<template> <template>
<el-table :data="PersonRegistrationData" height="700" border style="width: 100%"> <el-table :data="PersonRegistrationData" height="700" border style="width: 100%">
<el-table-column prop="employee_id" label="员工编号" align="center"></el-table-column> <el-table-column prop="employeeId" label="员工编号" align="center"></el-table-column>
<el-table-column prop="name" label="员工名" align="center"></el-table-column> <el-table-column prop="name" label="员工名" align="center"></el-table-column>
<el-table-column prop="sex" label="性别" align="center"></el-table-column> <el-table-column prop="sex" label="性别" align="center"></el-table-column>
<el-table-column prop="age" label="年龄" align="center"></el-table-column> <el-table-column prop="age" label="年龄" align="center"></el-table-column>
<el-table-column prop="phone" label="电话" align="center"></el-table-column> <el-table-column prop="phone" label="电话" align="center"></el-table-column>
<el-table-column prop="dept" label="部门" align="center"></el-table-column> <el-table-column prop="dept" label="部门" align="center"></el-table-column>
<el-table-column prop="hat_number" label="帽子编号" align="center"></el-table-column> <el-table-column prop="hatNumber" label="帽子编号" align="center"></el-table-column>
<el-table-column label="操作" width="150" align="center"> <el-table-column label="操作" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="formOpen('change',scope.row)" type="text">编辑</el-button> <el-button @click="formOpen('change',scope.row)" type="text">编辑</el-button>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<el-dialog :title="formTitle" :visible.sync="formVisible" width="30%"> <el-dialog :title="formTitle" :visible.sync="formVisible" width="30%">
<el-form ref="form" :model="formData" label-width="80px"> <el-form ref="form" :model="formData" label-width="80px">
<el-form-item label="员工编号"> <el-form-item label="员工编号">
<el-input v-model="formData.employee_id"></el-input> <el-input v-model="formData.employeeId"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="员工名"> <el-form-item label="员工名">
<el-input v-model="formData.name" :disabled="inpDisable"></el-input> <el-input v-model="formData.name" :disabled="inpDisable"></el-input>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<el-input v-model="formData.dept"></el-input> <el-input v-model="formData.dept"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="帽子编号"> <el-form-item label="帽子编号">
<el-input v-model="formData.hat_number"></el-input> <el-input v-model="formData.hatNumber"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -66,93 +66,31 @@ ...@@ -66,93 +66,31 @@
</template> </template>
<script> <script>
import { httpGet, httpPost,httpPostForJson } from "@/common/httpBean.js"
import {personRegister} from "@/axios/api.js"
export default { export default {
created(){
this.getCode()
},
data() { data() {
return { return {
formTitle:"", formTitle:"",
formType:"", formType:"",
PersonRegistrationData:[{ PersonRegistrationData:[],
employee_id: '20210901',
name: '王一',
sex: '',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王二',
sex: '',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王三',
sex: '',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王四',
sex: '',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王五',
sex: '',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王六',
sex: '',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王七',
sex: '',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王八',
sex: '',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
}],
formVisible:false, formVisible:false,
formData: { formData: {employeeId: '',name: '',sex: '',age: '',phone: '',dept: '',hatNumber: ''},
employee_id: '',
name: '',
sex: '',
age: '',
phone: '',
dept: '',
hat_number: ''
},
inpDisable:false, inpDisable:false,
deleteVisible:false, deleteVisible:false,
} }
}, },
methods:{ methods:{
getCode() {
httpGet(personRegister).then(res => {
this.PersonRegistrationData = res.content;
});
},
formOpen(type,row){ formOpen(type,row){
this.formData = {employee_id: '',name: '',sex: '',age: '',phone: '',dept: '',hat_number: ''}; this.formData = {employeeId: '',name: '',sex: '',age: '',phone: '',dept: '',hatNumber: ''};
this.formVisible = true; this.formVisible = true;
this.formType = type; this.formType = type;
if(this.formType === "add"){ if(this.formType === "add"){
...@@ -172,7 +110,7 @@ export default { ...@@ -172,7 +110,7 @@ export default {
} }
this.PersonRegistrationData.unshift(this.formData); this.PersonRegistrationData.unshift(this.formData);
this.formVisible = false; this.formVisible = false;
this.formData = {employee_id: '',name: '',sex: '',age: '',phone: '',dept: '',hat_number: ''}; this.formData = {employeeId: '',name: '',sex: '',age: '',phone: '',dept: '',hatNumber: ''};
}else if(this.formType === "change"){ }else if(this.formType === "change"){
const that = this; const that = this;
const newData = []; const newData = [];
...@@ -185,12 +123,12 @@ export default { ...@@ -185,12 +123,12 @@ export default {
}) })
this.PersonRegistrationData = newData; this.PersonRegistrationData = newData;
this.formVisible = false; this.formVisible = false;
this.formData = {employee_id: '',name: '',sex: '',age: '',phone: '',dept: '',hat_number: ''}; this.formData = {employeeId: '',name: '',sex: '',age: '',phone: '',dept: '',hatNumber: ''};
} }
}, },
formcancel(){ formcancel(){
this.formVisible = false; this.formVisible = false;
this.formData = {employee_id: '',name: '',sex: '',age: '',phone: '',dept: '',hat_number: ''}; this.formData = {employeeId: '',name: '',sex: '',age: '',phone: '',dept: '',hatNumber: ''};
}, },
deleteFormOpen(row){ deleteFormOpen(row){
console.log(row); console.log(row);
...@@ -209,11 +147,11 @@ export default { ...@@ -209,11 +147,11 @@ export default {
}) })
this.PersonRegistrationData = newData; this.PersonRegistrationData = newData;
this.deleteVisible = false; this.deleteVisible = false;
this.formData = {employee_id: '',name: '',sex: '',age: '',phone: '',dept: '',hat_number: ''}; this.formData = {employeeId: '',name: '',sex: '',age: '',phone: '',dept: '',hatNumber: ''};
}, },
cancelDelete(){ cancelDelete(){
this.deleteVisible = false; this.deleteVisible = false;
this.formData = {employee_id: '',name: '',sex: '',age: '',phone: '',dept: '',hat_number: ''}; this.formData = {employeeId: '',name: '',sex: '',age: '',phone: '',dept: '',hatNumber: ''};
} }
} }
} }
......
...@@ -21,15 +21,20 @@ ...@@ -21,15 +21,20 @@
</div> </div>
<div class="AuHiBottom"> <div class="AuHiBottom">
<template> <el-table :data="unmanTableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" border style="width: 100%" height="650">
<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="id" label="序号" align="center"></el-table-column>
<el-table-column prop="type" 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="carNumber" label="车牌号" align="center"></el-table-column>
<el-table-column prop="other" label="看不清" align="center"></el-table-column> <el-table-column prop="weight" label="重量" align="center"></el-table-column>
<el-table-column prop="time" label="时间" align="center"></el-table-column> <el-table-column prop="time" label="时间" align="center"></el-table-column>
</el-table> </el-table>
</template> <el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div> </div>
</div> </div>
...@@ -42,51 +47,72 @@ export default { ...@@ -42,51 +47,72 @@ export default {
dateDate1:{ dateDate1:{
value:"" value:""
}, },
unmanTableData:[{ unmanTableData:[],
// 默认显示第几页
currentPage:1,
// 总条数
totalCount:1,
// 个数选择器
pageSizes:[2,4,6,8,10],
// 默认每页显示的条数
PageSize:10,
}
},
methods:{
getTabData(){
//此处直接赋值代替发Ajax获取数据
this.unmanTableData=[{
id: '1', id: '1',
type: '无人', type: '无人',
carNumber: '123456', carNumber: '123456',
other: '看不清', weight: '25kg',
time: '2021-9-6', time: '2021-9-6',
},{ },{
id: '2', id: '2',
type: '无人', type: '无人',
carNumber: '123456', carNumber: '123456',
other: '看不清', weight: '25kg',
time: '2021-9-6', time: '2021-9-6',
},{ },{
id: '3', id: '3',
type: '无人', type: '无人',
carNumber: '123456', carNumber: '123456',
other: '看不清', weight: '25kg',
time: '2021-9-6', time: '2021-9-6',
},{ },{
id: '4', id: '4',
type: '无人', type: '无人',
carNumber: '123456', carNumber: '123456',
other: '看不清', weight: '25kg',
time: '2021-9-6', time: '2021-9-6',
},{ },{
id: '5', id: '5',
type: '无人', type: '无人',
carNumber: '123456', carNumber: '123456',
other: '看不清', weight: '25kg',
time: '2021-9-6', time: '2021-9-6',
},{ },{
id: '6', id: '6',
type: '无人', type: '无人',
carNumber: '123456', carNumber: '123456',
other: '看不清', weight: '25kg',
time: '2021-9-6', time: '2021-9-6',
}], }]
this.totalCount=this.unmanTableData.length
}
}, },
methods:{ // 分页
tableRowStyle({row, rowIndex}) { // 每页显示的条数
// if (row.name == "王小虎") { handleSizeChange(val) {
// return 'background: rgb(255,232,232);'; // 改变每页显示的条数
// } this.PageSize=val
// 在改变每页显示的条数时,要将页码显示到第一页
this.currentPage=1
},
// 显示第几页
handleCurrentChange(val) {
// 改变默认的页数
this.currentPage=val
}, },
daochu(){ daochu(){
//获取表格 //获取表格
...@@ -115,11 +141,17 @@ export default { ...@@ -115,11 +141,17 @@ export default {
newWin.print();//打印 newWin.print();//打印
newWin.close();//关闭窗口 newWin.close();//关闭窗口
}, },
},
created:function(){
this.getTabData()
} }
} }
</script> </script>
<style scoped> <style scoped>
.el-pagination{
float: right;
}
.AuHiViewBody{ .AuHiViewBody{
width: 100%; width: 100%;
height:100%; height:100%;
......
...@@ -46,12 +46,11 @@ ...@@ -46,12 +46,11 @@
<el-button type="primary" @click="cameraDetaileEdit('add')">增加摄像头</el-button> <el-button type="primary" @click="cameraDetaileEdit('add')">增加摄像头</el-button>
<template> <template>
<el-table :data="cameraDetail" height="750" border style="width: 100%;margin-top:12px"> <el-table :data="cameraDetail" height="750" border style="width: 100%;margin-top:12px">
<el-table-column prop="camera_id" label="摄像头ID" align="center"></el-table-column> <el-table-column prop="cameraId" label="摄像头ID" align="center"></el-table-column>
<el-table-column prop="camera_name" label="摄像头名称" align="center"></el-table-column> <el-table-column prop="cameraName" label="摄像头名称" align="center"></el-table-column>
<el-table-column prop="camera_ip" label="摄像头IP" align="center"></el-table-column> <el-table-column prop="cameraIp" label="摄像头IP" align="center"></el-table-column>
<el-table-column prop="camera_port" label="摄像头端口" align="center"></el-table-column> <el-table-column prop="cameraPort" label="摄像头端口" align="center"></el-table-column>
<el-table-column prop="video_url" label="视频URL" align="center"></el-table-column> <el-table-column prop="cameraWay" label="通道" align="center"></el-table-column>
<el-table-column prop="camera_way" label="通道" align="center"></el-table-column>
<el-table-column label="操作" width="150" align="center"> <el-table-column label="操作" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="cameraDetaileEdit('change',scope.row)" type="text">编辑</el-button> <el-button @click="cameraDetaileEdit('change',scope.row)" type="text">编辑</el-button>
...@@ -64,22 +63,19 @@ ...@@ -64,22 +63,19 @@
<el-dialog :title="cameraDetailTitle" :visible.sync="cameraDetailVisible" width="30%"> <el-dialog :title="cameraDetailTitle" :visible.sync="cameraDetailVisible" width="30%">
<el-form ref="form" :model="cameraDetailData" label-width="80px"> <el-form ref="form" :model="cameraDetailData" label-width="80px">
<el-form-item label="摄像头ID"> <el-form-item label="摄像头ID">
<el-input v-model="cameraDetailData.camera_id" :disabled="disabledInp"></el-input> <el-input v-model="cameraDetailData.cameraId" :disabled="disabledInp"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="摄像头名称"> <el-form-item label="摄像头名称">
<el-input v-model="cameraDetailData.camera_name"></el-input> <el-input v-model="cameraDetailData.cameraName"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="摄像头IP"> <el-form-item label="摄像头IP">
<el-input v-model="cameraDetailData.camera_ip"></el-input> <el-input v-model="cameraDetailData.cameraIp"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="摄像头端口"> <el-form-item label="摄像头端口">
<el-input v-model="cameraDetailData.camera_port"></el-input> <el-input v-model="cameraDetailData.cameraPort"></el-input>
</el-form-item>
<el-form-item label="视频URL">
<el-input v-model="cameraDetailData.video_url"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="通道"> <el-form-item label="通道">
<el-input v-model="cameraDetailData.camera_way"></el-input> <el-input v-model="cameraDetailData.cameraWay"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -93,7 +89,6 @@ ...@@ -93,7 +89,6 @@
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
...@@ -102,240 +97,192 @@ import {mainCamera,mainCameraDetail} from "@/axios/api.js" ...@@ -102,240 +97,192 @@ import {mainCamera,mainCameraDetail} from "@/axios/api.js"
export default { export default {
created(){ created(){
this.getCode() this.getCode()
this.getCode1()
}, },
data(){ data(){
return{ return{
//分区部分 //分区部分
main_camera:[{ main_camera:[
id:1, // {
name:"采区监控", // id:1,
cnt:4, // name:"采区监控",
main_cameraDetail:[{ // cnt:4,
id:1, // main_cameraDetail:[{
camera_id:1, // id:1,
camera_name:"采区1", // cameraId:1,
camera_ip:"192.102", // cameraName:"采区1",
camera_port:1001, // cameraIp:"192.102",
video_url:"1221212", // cameraPort:1001,
camera_way:"通道1" // cameraWay:"通道1"
},{ // },{
id:2, // id:2,
camera_id:1, // cameraId:1,
camera_name:"采区2", // cameraName:"采区2",
camera_ip:"192.102", // cameraIp:"192.102",
camera_port:1002, // cameraPort:1002,
video_url:"1221212", // cameraWay:"通道2"
camera_way:"通道2" // },{
},{ // id:3,
id:3, // cameraId:1,
camera_id:1, // cameraName:"采区3",
camera_name:"采区3", // cameraIp:"192.102",
camera_ip:"192.102", // cameraPort:1003,
camera_port:1003, // cameraWay:"通道3"
video_url:"1221212", // },{
camera_way:"通道3" // id:4,
},{ // cameraId:1,
id:4, // cameraName:"采区4",
camera_id:1, // cameraIp:"192.102",
camera_name:"采区4", // cameraPort:1003,
camera_ip:"192.102", // cameraWay:"通道4"
camera_port:1003, // }]
video_url:"1221212", // },{
camera_way:"通道4" // id:2,
}] // name:"厂区监控",
},{ // cnt:4,
id:2, // main_cameraDetail:[{
name:"厂区监控", // id:1,
cnt:4, // cameraId:2,
main_cameraDetail:[{ // cameraName:"厂区监控1",
id:1, // cameraIp:"192.230",
camera_id:2, // cameraPort:1001,
camera_name:"厂区监控1", // cameraWay:"通道1"
camera_ip:"192.230", // },{
camera_port:1001, // id:2,
video_url:"1221212", // cameraId:2,
camera_way:"通道1" // cameraName:"厂区监控2",
},{ // cameraIp:"192.230",
id:2, // cameraPort:1002,
camera_id:2, // cameraWay:"通道2"
camera_name:"厂区监控2", // },{
camera_ip:"192.230", // id:3,
camera_port:1002, // cameraId:2,
video_url:"1221212", // cameraName:"厂区监控3",
camera_way:"通道2" // cameraIp:"192.230",
},{ // cameraPort:1003,
id:3, // cameraWay:"通道3"
camera_id:2, // },{
camera_name:"厂区监控3", // id:4,
camera_ip:"192.230", // cameraId:2,
camera_port:1003, // cameraName:"厂区监控4",
video_url:"1221212", // cameraIp:"192.230",
camera_way:"通道3" // cameraPort:1003,
},{ // cameraWay:"通道4"
id:4, // }]
camera_id:2, // },{
camera_name:"厂区监控4", // id:3,
camera_ip:"192.230", // name:"办公室监控",
camera_port:1003, // cnt:4,
video_url:"1221212", // main_cameraDetail:[{
camera_way:"通道4" // id:1,
}] // cameraId:3,
},{ // cameraName:"办公室监控_1",
id:3, // cameraIp:"192.523",
name:"办公室监控", // cameraPort:1001,
cnt:4, // cameraWay:"通道1"
main_cameraDetail:[{ // },{
id:1, // id:2,
camera_id:3, // cameraId:3,
camera_name:"办公室监控_1", // cameraName:"办公室监控_2",
camera_ip:"192.523", // cameraIp:"192.523",
camera_port:1001, // cameraPort:1002,
video_url:"1221212", // cameraWay:"通道2"
camera_way:"通道1" // },{
},{ // id:3,
id:2, // cameraId:3,
camera_id:3, // cameraName:"办公室监控_3",
camera_name:"办公室监控_2", // cameraIp:"192.523",
camera_ip:"192.523", // cameraPort:1003,
camera_port:1002, // cameraWay:"通道3"
video_url:"1221212", // },{
camera_way:"通道2" // id:4,
},{ // cameraId:3,
id:3, // cameraName:"办公室监控_4",
camera_id:3, // cameraIp:"192.523",
camera_name:"办公室监控_3", // cameraPort:1003,
camera_ip:"192.523", // cameraWay:"通道4"
camera_port:1003, // }]
video_url:"1221212", // },{
camera_way:"通道3" // id:4,
},{ // name:"办公室监控1",
id:4, // cnt:4,
camera_id:3, // main_cameraDetail:[{
camera_name:"办公室监控_4", // id:1,
camera_ip:"192.523", // cameraId:4,
camera_port:1003, // cameraName:"办公室监控1_1",
video_url:"1221212", // cameraIp:"192.155",
camera_way:"通道4" // cameraPort:1001,
}] // cameraWay:"通道1"
},{ // },{
id:4, // id:2,
name:"办公室监控1", // cameraId:4,
cnt:4, // cameraName:"办公室监控1_2",
main_cameraDetail:[{ // cameraIp:"192.155",
id:1, // cameraPort:1002,
camera_id:4, // cameraWay:"通道2"
camera_name:"办公室监控1_1", // },{
camera_ip:"192.155", // id:3,
camera_port:1001, // cameraId:4,
video_url:"1221212", // cameraName:"办公室监控1_3",
camera_way:"通道1" // cameraIp:"192.155",
},{ // cameraPort:1003,
id:2, // cameraWay:"通道3"
camera_id:4, // },{
camera_name:"办公室监控1_2", // id:4,
camera_ip:"192.155", // cameraId:4,
camera_port:1002, // cameraName:"办公室监控1_4",
video_url:"1221212", // cameraIp:"192.155",
camera_way:"通道2" // cameraPort:1003,
},{ // cameraWay:"通道4"
id:3, // }]
camera_id:4, // },{
camera_name:"办公室监控1_3", // id:5,
camera_ip:"192.155", // name:"办公室监控2",
camera_port:1003, // cnt:4,
video_url:"1221212", // main_cameraDetail:[{
camera_way:"通道3" // id:1,
},{ // cameraId:5,
id:4, // cameraName:"办公室监控2_1",
camera_id:4, // cameraIp:"192.125",
camera_name:"办公室监控1_4", // cameraPort:1001,
camera_ip:"192.155", // cameraWay:"通道1"
camera_port:1003, // },{
video_url:"1221212", // id:2,
camera_way:"通道4" // cameraId:5,
}] // cameraName:"办公室监控2_2",
},{ // cameraIp:"192.125",
id:5, // cameraPort:1002,
name:"办公室监控2", // cameraWay:"通道2"
cnt:4, // },{
main_cameraDetail:[{ // id:3,
id:1, // cameraId:5,
camera_id:5, // cameraName:"办公室监控2_3",
camera_name:"办公室监控2_1", // cameraIp:"192.125",
camera_ip:"192.125", // cameraPort:1003,
camera_port:1001, // cameraWay:"通道3"
video_url:"1221212", // },{
camera_way:"通道1" // id:4,
},{ // cameraId:5,
id:2, // cameraName:"办公室监控2_4",
camera_id:5, // cameraIp:"192.125",
camera_name:"办公室监控2_2", // cameraPort:1003,
camera_ip:"192.125", // cameraWay:"通道4"
camera_port:1002, // }]
video_url:"1221212", // }
camera_way:"通道2" ],
},{
id:3,
camera_id:5,
camera_name:"办公室监控2_3",
camera_ip:"192.125",
camera_port:1003,
video_url:"1221212",
camera_way:"通道3"
},{
id:4,
camera_id:5,
camera_name:"办公室监控2_4",
camera_ip:"192.125",
camera_port:1003,
video_url:"1221212",
camera_way:"通道4"
}]
}],
zoneTitle:"", zoneTitle:"",
zoneVisible:false, zoneVisible:false,
zoneType:"", zoneType:"",
zoneData:{ name:"",cnt:"",}, zoneData:{ name:"",cnt:"",},
zoneDeleteVisible:false, zoneDeleteVisible:false,
//详情部分 //详情部分
cameraDetail:[{ cameraDetailAll:[],
id:1, cameraDetail:[],
camera_id:1, cameraDetailName:"",
camera_name:"采区1",
camera_ip:"192.102",
camera_port:1001,
video_url:"1221212",
camera_way:"通道1"
},{
id:2,
camera_id:1,
camera_name:"采区2",
camera_ip:"192.102",
camera_port:1002,
video_url:"1221212",
camera_way:"通道2"
},{
id:3,
camera_id:1,
camera_name:"采区3",
camera_ip:"192.102",
camera_port:1003,
video_url:"1221212",
camera_way:"通道3"
},{
id:4,
camera_id:1,
camera_name:"采区4",
camera_ip:"192.102",
camera_port:1003,
video_url:"1221212",
camera_way:"通道4"
}],
cameraDetailName:"采区监控分区详情表",
cameraDetailTitle:"", cameraDetailTitle:"",
cameraDetailVisible:false, cameraDetailVisible:false,
cameraDetailType:"", cameraDetailType:"",
cameraDetailData:{id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""}, cameraDetailData:{id:"",cameraId:"",cameraName:"",cameraIp:"",cameraPort:"",cameraWay:""},
cameraDetaileDeleteVisible:false, cameraDetaileDeleteVisible:false,
disabledInp:false, disabledInp:false,
} }
...@@ -343,45 +290,63 @@ export default { ...@@ -343,45 +290,63 @@ export default {
methods:{ methods:{
getCode() { getCode() {
httpGet(mainCamera).then(res => { httpGet(mainCamera).then(res => {
console.log(res); this.main_camera = res.content;
this.cameraDetailName = res.content[0].name + "分区详情表";
//console.log(this.main_camera);
});
},
getCode1() {
httpGet(mainCameraDetail).then(res => {
//console.log(res);
this.cameraDetailAll = res.content;
let newData = [];
this.cameraDetailAll.forEach(function(item){
if(item.cameraId == 1){
newData.push(item)
}
})
this.cameraDetail = newData
}); });
}, },
//分区部分 //分区部分
zonechecked(row){ zonechecked(row){
let that = this; //console.log(row);
console.log(row.id); let newData = [];
this.main_camera.forEach(function(item){ this.cameraDetailName = row.name + "分区详情表";
if(item.id == row.id){ this.cameraDetailAll.forEach(function(item){
that.cameraDetailName = item.name + "分区详情表"; if(item.cameraId == row.id){
that.cameraDetail = item.main_cameraDetail newData.push(item);
}else{
return;
} }
}) })
this.cameraDetail = newData;
}, },
zoneEdit(type,row){ zoneEdit(type,row){
this.zoneData = {id:'',name: '',cnt:''}; this.zoneData = {id:'',name: '',cnt:''};
this.zoneVisible = true; this.zoneVisible = true;
this.zoneType = type; this.zoneType = type;
if(this.zoneType === "add"){ if(this.zoneType == "add"){
this.zoneTitle = "增加分区"; this.zoneTitle = "增加分区";
}else if(this.zoneType === "change"){ }else if(this.zoneType == "change"){
this.zoneTitle = "修改分区"; this.zoneTitle = "修改分区";
this.zoneData = {...row}; this.zoneData = {...row};
} }
}, },
zoneSave(){ zoneSave(){
if(this.zoneType === "add"){ if(this.zoneType == "add"){
if(this.zoneData.name === ""){ if(this.zoneData.name == ""){
alert("分区名不得为空!"); alert("分区名不得为空!");
return; return;
} }
this.main_camera.unshift(this.zoneData); this.main_camera.unshift(this.zoneData);
this.zoneVisible = false; this.zoneVisible = false;
this.zoneData = {id:'',name: '',cnt:''}; this.zoneData = {id:'',name: '',cnt:''};
}else if(this.zoneType === "change"){ }else if(this.zoneType == "change"){
let that = this; let that = this;
let newData = []; let newData = [];
this.main_camera.forEach(function(item){ this.main_camera.forEach(function(item){
if(item.id === that.zoneData.id){ if(item.id == that.zoneData.id){
newData.push(that.zoneData); newData.push(that.zoneData);
}else{ }else{
newData.push(item); newData.push(item);
...@@ -405,8 +370,8 @@ export default { ...@@ -405,8 +370,8 @@ export default {
let that = this; let that = this;
let newData = []; let newData = [];
this.main_camera.forEach(function(item){ this.main_camera.forEach(function(item){
if(item.id === that.zoneData.id){ if(item.id == that.zoneData.id){
if(that.zoneData.id == that.cameraDetail[0].camera_id){ if(that.zoneData.id == that.cameraDetail[0].cameraId){
that.cameraDetail = []; that.cameraDetail = [];
} }
return; return;
...@@ -424,32 +389,32 @@ export default { ...@@ -424,32 +389,32 @@ export default {
}, },
//详情部分 //详情部分
cameraDetaileEdit(type,row){ cameraDetaileEdit(type,row){
this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""}; this.cameraDetailData = {id:"",cameraId:"",cameraName:"",cameraIp:"",cameraPort:"",cameraWay:""};
this.cameraDetailVisible = true; this.cameraDetailVisible = true;
this.cameraDetailType = type; this.cameraDetailType = type;
if(this.cameraDetailType === "add"){ if(this.cameraDetailType == "add"){
this.cameraDetailTitle = "增加摄像头"; this.cameraDetailTitle = "增加摄像头";
this.disabledInp = false; this.disabledInp = false;
}else if(this.cameraDetailType === "change"){ }else if(this.cameraDetailType == "change"){
this.cameraDetailTitle = "修改摄像头"; this.cameraDetailTitle = "修改摄像头";
this.cameraDetailData = {...row}; this.cameraDetailData = {...row};
this.disabledInp = true; this.disabledInp = true;
} }
}, },
cameraDetaileSave(){ cameraDetaileSave(){
if(this.cameraDetailType === "add"){ if(this.cameraDetailType == "add"){
if(this.cameraDetailData.camera_id === ""){ if(this.cameraDetailData.cameraId == ""){
alert("分区名不得为空!"); alert("分区名不得为空!");
return; return;
} }
this.cameraDetail.unshift(this.cameraDetailData); this.cameraDetail.unshift(this.cameraDetailData);
this.cameraDetailVisible = false; this.cameraDetailVisible = false;
this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""}; this.cameraDetailData = {id:"",cameraId:"",cameraName:"",cameraIp:"",cameraPort:"",cameraWay:""};
}else if(this.cameraDetailType === "change"){ }else if(this.cameraDetailType == "change"){
let that = this; let that = this;
let newData = []; let newData = [];
this.cameraDetail.forEach(function(item){ this.cameraDetail.forEach(function(item){
if(item.id === that.cameraDetailData.id){ if(item.id == that.cameraDetailData.id){
newData.push(that.cameraDetailData); newData.push(that.cameraDetailData);
}else{ }else{
newData.push(item); newData.push(item);
...@@ -457,15 +422,15 @@ export default { ...@@ -457,15 +422,15 @@ export default {
}) })
this.cameraDetail = newData; this.cameraDetail = newData;
this.cameraDetailVisible = false; this.cameraDetailVisible = false;
this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""}; this.cameraDetailData = {id:"",cameraId:"",cameraName:"",cameraIp:"",cameraPort:"",cameraWay:""};
} }
}, },
cameraDetaileCancel(){ cameraDetaileCancel(){
this.cameraDetailVisible = false; this.cameraDetailVisible = false;
this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""}; this.cameraDetailData = {id:"",cameraId:"",cameraName:"",cameraIp:"",cameraPort:"",cameraWay:""};
}, },
cameraDetaileDelete(row){ cameraDetaileDelete(row){
//console.log(row); console.log(row);
this.cameraDetaileDeleteVisible = true; this.cameraDetaileDeleteVisible = true;
this.cameraDetailData = {...row}; this.cameraDetailData = {...row};
}, },
...@@ -473,7 +438,7 @@ export default { ...@@ -473,7 +438,7 @@ export default {
let that = this; let that = this;
let newData = []; let newData = [];
that.cameraDetail.forEach(function(item){ that.cameraDetail.forEach(function(item){
if(item.id === that.cameraDetailData.id){ if(item.id == that.cameraDetailData.id){
return; return;
}else{ }else{
newData.push(item); newData.push(item);
...@@ -481,15 +446,14 @@ export default { ...@@ -481,15 +446,14 @@ export default {
}) })
this.cameraDetail = newData; this.cameraDetail = newData;
this.cameraDetaileDeleteVisible = false; this.cameraDetaileDeleteVisible = false;
this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""}; this.cameraDetailData = {id:"",cameraId:"",cameraName:"",cameraIp:"",cameraPort:"",cameraWay:""};
}, },
cancelDeleteCameraDetaile(){ cancelDeleteCameraDetaile(){
this.cameraDetaileDeleteVisible = false; this.cameraDetaileDeleteVisible = false;
this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""}; this.cameraDetailData = {id:"",cameraId:"",cameraName:"",cameraIp:"",cameraPort:"",cameraWay:""};
}, },
}, },
} }
</script> </script>
......
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