<template>
|
<el-dialog
|
:visible.sync="dialogVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
title="设备管理"
|
center
|
width="75%"
|
>
|
<el-button
|
type="primary"
|
style="margin-bottom: 20px"
|
@click="openAdd('新增设备', {})"
|
>绑定设备</el-button
|
>
|
<el-table
|
:data="deviceList"
|
border
|
:stripe="false"
|
style="width: 100%;"
|
>
|
<el-table-column
|
label="序号"
|
type="index"
|
align="center"
|
></el-table-column>
|
<el-table-column
|
label="设备名称"
|
prop="deviceName"
|
align="center"
|
></el-table-column>
|
<el-table-column
|
label="设备ID"
|
prop="deviceId"
|
align="center"
|
></el-table-column>
|
<!-- <el-table-column label="设备类型" prop="deviceId" align="center">
|
<template slot-scope="scope">
|
{{scope.row.deviceType == 1?'温湿度':'摄像头'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="分组ID" prop="groupId" align="center"></el-table-column> -->
|
<el-table-column
|
label="操作"
|
align="center"
|
width="180"
|
class-name="small-padding fixed-width"
|
>
|
<template slot-scope="scope">
|
<el-button
|
type="text"
|
@click="openAdd('修改设备', scope.row)"
|
>修改</el-button
|
>
|
<el-button
|
type="text"
|
style="color: red"
|
@click="delDevice(scope.row)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="dialogVisible = false"
|
>关 闭</el-button
|
>
|
</span>
|
<el-dialog
|
:visible.sync="addVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
:title="title"
|
center
|
width="50%"
|
@close="reset()"
|
>
|
<el-form
|
ref="form"
|
:rules="formRules"
|
:model="deviceForm"
|
label-width="140px"
|
class="form"
|
>
|
<el-form-item label="设备类型:" prop="deviceType">
|
<el-radio-group v-model="deviceForm.deviceType">
|
<el-radio :label="1">AI盒子</el-radio>
|
<el-radio :label="2">AI摄像头</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="设备名称:" prop="deviceName">
|
<el-input v-model.trim="deviceForm.deviceName" />
|
</el-form-item>
|
<el-form-item label="设备ID:" prop="deviceId">
|
<el-input v-model.trim="deviceForm.deviceId" />
|
</el-form-item>
|
<el-form-item v-if="deviceForm.deviceType == 2" label="云端用户名:" prop="accessKey">
|
<el-input v-model.trim="deviceForm.accessKey" :disabled="title == '修改设备'"/>
|
</el-form-item>
|
<el-form-item v-if="deviceForm.deviceType == 2" label="云端密码:" prop="accessSecret">
|
<el-input v-model.trim="deviceForm.accessSecret" :disabled="title == '修改设备'"/>
|
</el-form-item>
|
<!-- <el-form-item label="类型:" prop="deviceType">
|
<el-select v-model="deviceForm.deviceType" placeholder="请选择类型">
|
<el-option key="1" label="温湿度" :value="1"></el-option>
|
<el-option key="2" label="摄像头" :value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="分组ID:" prop="groupId">
|
<el-input v-model.trim="deviceForm.groupId"/>
|
</el-form-item> -->
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="addVisible = false">取 消</el-button>
|
<el-button type="primary" @click="confirm()">确 认</el-button>
|
</span>
|
</el-dialog>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import { getCityListData, getProvinceListData } from "../../../../api/area";
|
// import {saveReserveInfo, getInfoById, editReserveInfo, delStore} from '../../../api/warehouse'
|
import Cookies from "js-cookie";
|
import { MessageBox } from "_element-ui@2.14.1@element-ui";
|
import {
|
addOrUpdateStoreroomDevice,
|
deleteStoreroomDevice,
|
getDeviceList,
|
getDevicePageList,
|
getStoreroomPage,
|
getStoreroomPageV2
|
} from "../../../../api/monitorAlert";
|
export default {
|
name: "deviceDialog",
|
data() {
|
return {
|
dialogVisible: false,
|
title: "",
|
addVisible: false,
|
deviceQuery: {
|
companyCode: "",
|
storeNum: "",
|
storeroomNum: ""
|
},
|
deviceList: [],
|
deviceForm: {
|
id: "",
|
companyCode: "",
|
deviceId: "",
|
deviceName: "",
|
deviceType: null,
|
groupId: "",
|
storeNum: "",
|
storeroomNum: "",
|
accessKey: "",
|
accessSecret: ""
|
},
|
formRules: {
|
deviceType: [
|
{
|
required: true,
|
message: "请选择设备类型",
|
trigger: "blur"
|
}
|
],
|
deviceName: [
|
{
|
required: true,
|
message: "请输入设备名称",
|
trigger: "blur"
|
}
|
],
|
deviceId: [
|
{
|
required: true,
|
message: "请输入设备id",
|
trigger: "blur"
|
}
|
],
|
accessKey: [
|
{
|
required: true,
|
message: "请输入云端用户名",
|
trigger: "blur"
|
}
|
],
|
accessSecret: [
|
{
|
required: true,
|
message: "请输入云端密码",
|
trigger: "blur"
|
}
|
]
|
}
|
};
|
},
|
created() {
|
const t = this;
|
},
|
computed: {
|
...mapGetters(["userType", "username"])
|
},
|
methods: {
|
open(data) {
|
const { companyCode, storeNum, storeroomNum } = data;
|
this.deviceQuery = { companyCode, storeNum, storeroomNum };
|
this.getDataList();
|
this.dialogVisible = true;
|
},
|
isKey(key, obj) {
|
return key in obj;
|
},
|
async getDataList() {
|
let res = await getDeviceList({
|
filter: this.deviceQuery
|
});
|
if (res.data.code === "200") {
|
if (Array.isArray(res.data.result)) {
|
this.deviceList = res.data.result;
|
} else {
|
this.dataList = [];
|
}
|
} else {
|
this.$message({
|
type: "warning",
|
message: res.data.message
|
});
|
}
|
this.listLoading = false;
|
},
|
|
openAdd(type, data) {
|
this.addVisible = true;
|
this.title = type;
|
this.deviceForm.companyCode = this.deviceQuery.companyCode;
|
this.deviceForm.storeNum = this.deviceQuery.storeNum;
|
this.deviceForm.storeroomNum = this.deviceQuery.storeroomNum;
|
if (type == "修改设备") {
|
for (let i in this.deviceForm) {
|
if (this.isKey(i, data)) {
|
this.deviceForm[i] = data[i];
|
}
|
}
|
}
|
},
|
|
confirm() {
|
this.$refs.form.validate(async valid => {
|
if (valid) {
|
if(this.deviceForm.deviceType == 1){
|
this.deviceForm.accessKey = ''
|
this.deviceForm.accessSecret = ''
|
}
|
const { id, ...data } = this.deviceForm;
|
const res = await addOrUpdateStoreroomDevice(
|
this.title == "新增设备" ? data : this.deviceForm
|
);
|
if (res.data.code == 200) {
|
if (this.title == "新增设备") {
|
this.$message.success("设备新增成功");
|
} else {
|
this.$message.success("设备修改成功");
|
}
|
} else {
|
this.$message.warning(res.data.message);
|
}
|
this.addVisible = false;
|
await this.getDataList();
|
}
|
});
|
},
|
delDevice(data) {
|
const t = this;
|
t.$confirm("此操作将删除该设备, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(async () => {
|
const res = await deleteStoreroomDevice({ id: data.id });
|
console.log(res, "res");
|
if (res.data.code == 200) {
|
t.$message.success("设备删除成功");
|
} else {
|
t.$message.warning(res.data.message);
|
}
|
await this.getDataList();
|
});
|
},
|
reset() {
|
this.deviceForm = {
|
id: "",
|
companyCode: "",
|
deviceId: "",
|
deviceName: "",
|
deviceType: null,
|
groupId: "",
|
storeNum: "",
|
storeroomNum: "",
|
accessKey: "",
|
accessSecret: ""
|
};
|
this.$refs.form.clearValidate();
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.part-title {
|
font-size: 16px;
|
font-weight: bolder;
|
}
|
.selector {
|
/deep/ .el-form-item__content {
|
margin-left: 0 !important;
|
}
|
}
|
.editForm {
|
.el-form-item {
|
display: flex !important;
|
}
|
/deep/ .el-form-item__content {
|
width: 100%;
|
margin-left: 0 !important;
|
}
|
}
|
|
.numInput {
|
/deep/ .el-input__inner {
|
padding-right: 0;
|
}
|
}
|
tr {
|
display: flex;
|
td {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
padding: 5px;
|
align-items: center;
|
}
|
.w-12 {
|
flex: 0.5;
|
}
|
.w-20 {
|
flex: 2;
|
}
|
}
|
</style>
|
