520 lines
16 KiB
Vue
520 lines
16 KiB
Vue
<template>
|
|
<div class="videoManage manage-page deviceManage">
|
|
<div class="flex-view flex-title">
|
|
<div class="table-title">
|
|
<img src="../../assets/manageImg/deviceManage.png" alt="" />{{$t('deviceManage.title')}}
|
|
</div>
|
|
<div class="table-title-btn blue" @click="openAddModel1">
|
|
<img src="../../assets/manageImg/add-btn.png" alt="" />{{$t('text.add')}}
|
|
</div>
|
|
</div>
|
|
<div class="flex-view">
|
|
<div class="manage-input w-180">
|
|
<span class="input-title">{{$t('deviceManage.search.username')}}</span>
|
|
<input
|
|
class="search-input"
|
|
type="text"
|
|
v-model="searchName"
|
|
placeholder=""
|
|
/>
|
|
</div>
|
|
<div class="manage-input w-180">
|
|
<span class="input-title">{{$t('deviceManage.search.deviceCode')}}</span>
|
|
<input
|
|
class="search-input"
|
|
type="text"
|
|
v-model="searchID"
|
|
placeholder=""
|
|
/>
|
|
</div>
|
|
<div class="table-title-btn blue" @click="dataInit">{{$t('text.search')}}</div>
|
|
</div>
|
|
<div class="table-view">
|
|
<el-table
|
|
:data="tableData"
|
|
:row-class-name="tableRowClassName"
|
|
height="540"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column prop="deviceId" :label="$t('text.deviceCode')"> </el-table-column>
|
|
<el-table-column prop="deviceTypeName" :label="$t('text.deviceName')">
|
|
</el-table-column>
|
|
<el-table-column prop="cameraSerialNumber" :label="$t('deviceManage.tableHeaders.cameraName')">
|
|
</el-table-column>
|
|
<el-table-column prop="cameraChannelNumber" :label="$t('deviceManage.tableHeaders.cameraChannel')">
|
|
</el-table-column>
|
|
<el-table-column prop="userName" :label="$t('deviceManage.tableHeaders.username')">
|
|
</el-table-column>
|
|
<el-table-column :label="$t('text.operations')">
|
|
<template slot-scope="scope">
|
|
<div class="table-flex">
|
|
<div
|
|
class="table-operate blue"
|
|
@click="openRoleModel(scope.row.deviceId)"
|
|
v-if="scope.row.deviceName == 10"
|
|
>
|
|
<img src="../../assets/manageImg/table-edit.png" alt="" />{{$t('deviceManage.tableHeaders.permission')}}
|
|
</div>
|
|
<el-popconfirm
|
|
@confirm="confirmDel(scope.row)"
|
|
:title="$t('text.deleteContent')"
|
|
icon-color="red"
|
|
>
|
|
<div class="table-operate red" slot="reference">
|
|
<img
|
|
src="../../assets/manageImg/table-delete.png"
|
|
alt=""
|
|
/>{{$t('text.delete')}}
|
|
</div>
|
|
</el-popconfirm>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[10, 20, 50, 100, 200, 500, 1000, 1500]"
|
|
:page-size="pageSize"
|
|
layout="->,total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
:title="$t('deviceManage.dialogs.permissionManagement')"
|
|
:append-to-body="true"
|
|
:visible.sync="roleModel"
|
|
width="70%"
|
|
>
|
|
<div class="model-title">{{$t('deviceManage.dialogs.permissionManagement')}}</div>
|
|
<div class="model-sel scroll">
|
|
<div v-for="(item, index) in selDevicestatus" :key="index">
|
|
<div
|
|
@click="selClick(item)"
|
|
:class="item.select ? 'sel' : 'no-sel'"
|
|
></div>
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<div class="vrcode-btn blue-btn" @click="addpermissionall">
|
|
{{$t('deviceManage.dialogs.addStandardController')}}
|
|
</div>
|
|
<div class="vrcode-btn cancle-btn w-100" @click="roleModel = false">
|
|
{{$t('index.confirm')}}
|
|
</div>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
title="提示"
|
|
top="10vh"
|
|
:visible.sync="addModel1"
|
|
width="564px"
|
|
class="vrcode-model manage-model"
|
|
:append-to-body="true"
|
|
>
|
|
<div class="vrcode-model-title">{{$t('realTime.addDevice')}}</div>
|
|
<div class="vrcode-content">
|
|
<div class="manage-left">
|
|
<div class="manage-input">
|
|
<div class="input-title">{{$t('text.deviceCode')}}</div>
|
|
<input
|
|
type="text"
|
|
v-model="nowData1.deviceId"
|
|
:placeholder="$t('placeholder.deviceCodePlaceholder')"
|
|
/>
|
|
</div>
|
|
<div class="manage-input-sel" style="margin-right: 0">
|
|
<div class="input-title">{{$t('text.deviceType')}}</div>
|
|
<el-dropdown @command="handleCommand1">
|
|
<div class="el-dropdown-link">
|
|
<input
|
|
v-model="deviceType"
|
|
type="text"
|
|
class="input-input"
|
|
:placeholder="$t('placeholder.deviceTypePlaceholder')"
|
|
/>
|
|
<div class="arrow">
|
|
<img src="../../assets/image/arrow.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown" class="manage-dropdown">
|
|
<el-dropdown-item
|
|
v-for="(item, index) in deviceSel"
|
|
:key="index"
|
|
:command="item.label"
|
|
>{{ item.label }}</el-dropdown-item
|
|
>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
<div class="manage-input">
|
|
<div class="input-title">{{$t('deviceManage.dialogs.cameraName')}}</div>
|
|
<input
|
|
type="number"
|
|
v-model="nowData1.cameraSerialNumber"
|
|
:placeholder="$t('placeholder.cameraNamePlaceholder')"
|
|
/>
|
|
</div>
|
|
<div class="manage-img-small">
|
|
<label for="sel-img">
|
|
<img class="" :src="nowData1.hls" alt="" />
|
|
</label>
|
|
<input
|
|
ref="fileInput1"
|
|
type="file"
|
|
:multiple="false"
|
|
id="sel-img"
|
|
accept="image/*"
|
|
@change="handleImageChange($event, 1)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="manage-right">
|
|
<div class="manage-input">
|
|
<div class="input-title">{{$t('text.deviceName')}}</div>
|
|
<input
|
|
type="text"
|
|
v-model="nowData1.deviceTypeName"
|
|
:placeholder="$t('placeholder.deviceNamePlaceholder')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="manage-input">
|
|
<div class="input-title"> {{$t('deviceManage.dialogs.cameraChannel')}}</div>
|
|
<input
|
|
type="number"
|
|
v-model="nowData1.cameraChannelNumber"
|
|
:placeholder="$t('placeholder.cameraChannelPlaceholder')"
|
|
/>
|
|
</div>
|
|
<div class="manage-input">
|
|
<div class="input-title">摄像头右侧控制面板(1为显示)</div>
|
|
<input
|
|
type="number"
|
|
v-model="nowData1.cameraName"
|
|
placeholder="1为显示其他不显示"
|
|
/>
|
|
</div>
|
|
|
|
<div class="manage-text">
|
|
{{$t('deviceManagement.dialogs.noteText')}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<div class="vrcode-btn blue-btn w-100" @click="addDevice">{{$t('index.confirm')}}</div>
|
|
<div class="vrcode-btn cancle-btn w-100" @click="addModel1 = false">
|
|
{{$t('index.cancel')}}
|
|
</div>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tableData: [],
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
searchName: "",
|
|
searchID: "",
|
|
total: 0,
|
|
roleModel: false,
|
|
selDevicestatus: [],
|
|
allDevicestatus: [],
|
|
nowDevicestatus: [],
|
|
nowDeviceId: "",
|
|
|
|
//添加设备
|
|
addModel1: false,
|
|
nowData1: {
|
|
deviceState: 0,
|
|
cameraName:1,
|
|
},
|
|
|
|
deviceType: "",
|
|
|
|
};
|
|
},
|
|
computed:{
|
|
deviceSel(){
|
|
var device=[
|
|
{ label: this.$t('deviceManage.deviceTypes.controller'), value: 10 },
|
|
{ label: this.$t('deviceManage.deviceTypes.fertilizer'), value: 1 },
|
|
{ label: this.$t('deviceManage.deviceTypes.weatherStation'), value: 30 },
|
|
{ label: this.$t('deviceManage.deviceTypes.smartController'), value: 20 },
|
|
{ label: this.$t('deviceManage.deviceTypes.dataCollector'), value: 40 },
|
|
]
|
|
|
|
return device
|
|
},
|
|
},
|
|
mounted() {
|
|
this.dataInit();
|
|
},
|
|
methods: {
|
|
dataInit() {
|
|
// var user = JSON.parse(localStorage.getItem('userInfo'))
|
|
// this.api.selUserbyid(user.userid).then(res => {
|
|
// if (res.data.code == 200) {
|
|
// this.deviceList = res.data.data.devices
|
|
// }
|
|
// })
|
|
this.pageSize = 10;
|
|
this.currentPage = 1;
|
|
setTimeout(() => {
|
|
this.getData();
|
|
}, 0);
|
|
},
|
|
getDeviceType(e) {
|
|
if (e == this.$t('deviceManage.deviceTypes.controller')) {
|
|
return 10;
|
|
} else if (e == this.$t('deviceManage.deviceTypes.fertilizer')) {
|
|
return 1;
|
|
} else if (e == this.$t('deviceManage.deviceTypes.weatherStation')) {
|
|
return 30;
|
|
} else if (e == this.$t('deviceManage.deviceTypes.smartController')) {
|
|
return 20;
|
|
} else if (e == this.$t('deviceManage.deviceTypes.dataCollector')) {
|
|
return 40;
|
|
}
|
|
},
|
|
handleCommand1(e) {
|
|
this.nowData1.deviceName = this.getDeviceType(e);
|
|
this.nowData1.deviceTypeName = e
|
|
this.deviceType = e;
|
|
},
|
|
|
|
openRoleModel(deviceId) {
|
|
this.loading = this.$loading({
|
|
lock: true,
|
|
text: this.$t('message.loading'),
|
|
spinner: "el-icon-loading",
|
|
background: "rgba(0, 0, 0, 0.7)",
|
|
});
|
|
this.selDevicestatus = [];
|
|
this.nowDeviceId = deviceId;
|
|
var data = { deviceId: deviceId };
|
|
// 线调取全部权限
|
|
this.api.selectallPermissions().then((res) => {
|
|
if (res.data.code == 200) {
|
|
this.allDevicestatus = res.data.data;
|
|
// this.roleModel=true
|
|
// 再根据deviceId调取单个设备权限 并且查询共同name
|
|
this.getcontrol_cpermission();
|
|
} else {
|
|
this.loading.close();
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
});
|
|
},
|
|
openAddModel1() {
|
|
this.nowData1 = {
|
|
deviceState: 0,
|
|
cameraName:1,
|
|
};
|
|
this.deviceType=''
|
|
this.addModel1 = true;
|
|
},
|
|
addDevice() {
|
|
if (!this.nowData1.deviceId) {
|
|
this.$message.error(this.$t('message.deviceCodeRequired'));
|
|
return;
|
|
}
|
|
if (!this.nowData1.deviceName) {
|
|
this.$message.error(this.$t('message.deviceTypeRequired'));
|
|
return;
|
|
}
|
|
if (!this.nowData1.deviceTypeName) {
|
|
this.$message.error(this.$t('message.deviceNameRequired'));
|
|
return;
|
|
}
|
|
|
|
var data = {
|
|
...this.nowData1,
|
|
stationName: this.nowData1.deviceTypeName,
|
|
};
|
|
this.api.addDevice(data).then((res) => {
|
|
if (res.data.code == 200) {
|
|
this.$message.success(res.data.msg);
|
|
this.dataInit();
|
|
this.addModel1 = false;
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
});
|
|
},
|
|
handleImageChange(event) {
|
|
this.loading = this.$loading({
|
|
lock: true,
|
|
text:this.$t('message.uploading'),
|
|
spinner: "el-icon-loading",
|
|
background: "rgba(0, 0, 0, 0.7)",
|
|
});
|
|
const file = event.target.files[0];
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
const imageData = e.target.result;
|
|
const convertedFile = new File([imageData], file.name, {
|
|
type: file.type,
|
|
});
|
|
// 处理转换后的文件...
|
|
|
|
var data = { file: convertedFile };
|
|
this.api.manageUploadImage(data).then((res) => {
|
|
this.loading.close();
|
|
if (res.data.code == 200) {
|
|
this.nowData1.hls = res.data.msg;
|
|
this.$refs.fileInput1.value = "";
|
|
} else {
|
|
this.$refs.fileInput1.value = "";
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
}).catch((err) => {
|
|
this.loading.close()
|
|
this.$refs.fileInput1.value = "";
|
|
this.$message.error("插入图片失败");
|
|
});
|
|
};
|
|
reader.readAsArrayBuffer(file);
|
|
},
|
|
addpermissionall() {
|
|
this.api.addpermissionall(this.nowDeviceId).then((res) => {
|
|
if (res.data.code == 200) {
|
|
this.$message.success(res.data.msg);
|
|
this.getcontrol_cpermission();
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
});
|
|
},
|
|
getcontrol_cpermission() {
|
|
this.api.getcontrol_cpermission(this.nowDeviceId).then((res1) => {
|
|
this.loading.close();
|
|
if (res1.data.code == 200) {
|
|
this.nowDevicestatus = res1.data.data;
|
|
var list1 = this.allDevicestatus;
|
|
var list2 = this.nowDevicestatus;
|
|
var resultArray = [];
|
|
// 遍历 list1
|
|
for (const item1 of list1) {
|
|
// 查找在 list2 中是否有相同 id 的对象
|
|
const matchingItem = list2.find((item2) => item2.id === item1.id);
|
|
// 如果找到匹配的对象，则在 list1 对应的对象中添加 select 属性
|
|
if (matchingItem) {
|
|
item1.select = true;
|
|
} else {
|
|
// 如果没找到匹配的对象，则添加 select 属性并设置为 false
|
|
item1.select = false;
|
|
}
|
|
// 将处理后的对象添加到结果数组中
|
|
resultArray.push(item1);
|
|
}
|
|
this.selDevicestatus = resultArray;
|
|
this.roleModel = true;
|
|
} else {
|
|
this.$message.error(res1.data.msg);
|
|
}
|
|
});
|
|
},
|
|
selClick(item) {
|
|
var store = this.$store.state;
|
|
var deviceId = this.nowDeviceId;
|
|
var statusId = item.id;
|
|
if (item.select) {
|
|
item.select = false;
|
|
this.$forceUpdate();
|
|
this.api.delpermission(deviceId, statusId).then((res) => {
|
|
if (res.data.code == 200) {
|
|
this.$message({
|
|
message:this.$t('message.change') ,
|
|
type: "success",
|
|
});
|
|
this.getcontrol_cpermission();
|
|
} else {
|
|
this.$message({
|
|
message: res.data.msg,
|
|
type: "warning",
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
item.select = true;
|
|
this.$forceUpdate();
|
|
this.api.addpermission(deviceId, statusId).then((res) => {
|
|
if (res.data.code == 200) {
|
|
this.$message({
|
|
message:this.$t('message.change'),
|
|
type: "success",
|
|
});
|
|
this.getcontrol_cpermission();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
confirmDel(item) {
|
|
var data = { id: item.deviceId };
|
|
this.api.deldevice(data).then((res) => {
|
|
if (res.data.code == 200) {
|
|
this.dataInit();
|
|
this.$message.success(res.data.msg);
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
});
|
|
},
|
|
getData() {
|
|
var data = {
|
|
page: this.currentPage,
|
|
pageSize: this.pageSize,
|
|
userName: this.searchName,
|
|
deviceId: this.searchID,
|
|
};
|
|
this.loading = this.$loading({
|
|
lock: true,
|
|
text: this.$t('message.loading'),
|
|
spinner: "el-icon-loading",
|
|
background: "rgba(0, 0, 0, 0.7)",
|
|
});
|
|
this.api.seldevice(data).then((res) => {
|
|
this.loading.close();
|
|
if (res.data.code == 200) {
|
|
this.tableData = res.data.data.data;
|
|
this.total = res.data.data.total;
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
});
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
setTimeout(() => {
|
|
this.getData();
|
|
}, 0);
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val;
|
|
setTimeout(() => {
|
|
this.getData();
|
|
}, 0);
|
|
},
|
|
tableRowClassName({ row, rowIndex }) {
|
|
if (rowIndex % 2 == 1) {
|
|
return "warning-row";
|
|
} else if (rowIndex % 2 == 0) {
|
|
return "success-row";
|
|
}
|
|
return "";
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss"></style> |