|
|
@@ -0,0 +1,522 @@
|
|
|
+<template>
|
|
|
+ <ele-modal
|
|
|
+ :visible.sync="visible"
|
|
|
+ :title="title"
|
|
|
+ width="1100px"
|
|
|
+ append-to-body
|
|
|
+ @close="cancel"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="form"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="120px"
|
|
|
+ class="create-form"
|
|
|
+ v-loading="loading"
|
|
|
+ >
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="所属场站" prop="stationName">
|
|
|
+ <el-input
|
|
|
+ v-model="form.stationName"
|
|
|
+ placeholder="请输入"
|
|
|
+ :maxlength="20"
|
|
|
+ class="!w-100%"
|
|
|
+ disabled
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="所属区域" prop="areaId">
|
|
|
+ <el-tree-select
|
|
|
+ v-model="form.areaId"
|
|
|
+ :data="areaTree"
|
|
|
+ :props="defaultProps"
|
|
|
+ check-strictly
|
|
|
+ default-expand-all
|
|
|
+ placeholder="请选择"
|
|
|
+ value-key="id"
|
|
|
+ @change="areaIdChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="机器人类型" prop="classifyCode">
|
|
|
+ <DictSelection
|
|
|
+ dictName="机器人类型"
|
|
|
+ v-model="form.classifyCode"
|
|
|
+ @itemChange="classifyCodeChange"
|
|
|
+ ></DictSelection>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="机器人名称" prop="name">
|
|
|
+ <el-input v-model="form.name" placeholder="请输入" :maxlength="20" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="机器人编号" prop="deviceCode">
|
|
|
+ <el-input
|
|
|
+ v-model="form.deviceCode"
|
|
|
+ placeholder="请输入"
|
|
|
+ :maxlength="50"
|
|
|
+ class="!w-100%"
|
|
|
+ disabled
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="品牌" prop="brandCode">
|
|
|
+ <DictSelection
|
|
|
+ dictName="机器人品牌"
|
|
|
+ v-model="form.brandCode"
|
|
|
+ @itemChange="brandCodeChange"
|
|
|
+ ></DictSelection>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="型号" prop="modelName">
|
|
|
+ <el-input
|
|
|
+ v-model="form.modelName"
|
|
|
+ placeholder="请输入"
|
|
|
+ :maxlength="20"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="排序号" prop="deviceSort">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.deviceSort"
|
|
|
+ :min="1"
|
|
|
+ :max="99999"
|
|
|
+ class="!w-100%"
|
|
|
+ controls-position="right"
|
|
|
+ placeholder="请输入"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="状态" prop="activityStatus">
|
|
|
+ <el-radio-group v-model="form.activityStatus" class="ml-4" style="flex-wrap: nowrap">
|
|
|
+ <el-radio :label="1">启用</el-radio>
|
|
|
+ <el-radio :label="0">停用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <div class="tit">连接配置</div>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="IP" prop="extraInfo.ip">
|
|
|
+ <el-input v-model="form.extraInfo.ip" placeholder="请输入" :maxlength="20" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="端口" prop="extraInfo.port">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.extraInfo.port"
|
|
|
+ :min="1"
|
|
|
+ :max="65535"
|
|
|
+ :maxlength="5"
|
|
|
+ controls-position="right"
|
|
|
+ placeholder="请输入"
|
|
|
+ class="!w-100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="账号" prop="extraInfo.account">
|
|
|
+ <el-input v-model="form.extraInfo.account" placeholder="请输入" :maxlength="30" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="密码" prop="extraInfo.password">
|
|
|
+ <el-input v-model="form.extraInfo.password" placeholder="请输入" :maxlength="30" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <div class="tit">固定负载</div>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="可见光摄像机">
|
|
|
+ <el-select
|
|
|
+ v-model="form.kjgLoadDeviceId"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ class="!w-100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in cameraTypeFzKjgList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="红外摄像机">
|
|
|
+ <el-select
|
|
|
+ v-model="form.hwLoadDeviceId"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ class="!w-100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in cameraTypeFzHwList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <div class="tit">其他负载</div>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="①">
|
|
|
+ <el-select
|
|
|
+ v-model="form.loadOtherDevice1"
|
|
|
+ @change="handleDevice($event, 2)"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ class="!w-100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in deviceOtherList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="②">
|
|
|
+ <el-select
|
|
|
+ v-model="form.loadOtherDevice2"
|
|
|
+ @change="handleDevice($event, 3)"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ class="!w-100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in deviceOtherList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="cancel">取消</el-button>
|
|
|
+ <el-button type="primary" @click="save" :loading="saving">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </ele-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import dictMixins from '@/mixins/dictMixins';
|
|
|
+import * as RobotApi from '@/api/ledgerAssets/robot';
|
|
|
+import * as AreaApi from '@/api/basic/area';
|
|
|
+import { getCode } from '@/api/ruleManagement/matter';
|
|
|
+// import { getStationData } from '@/utils/auth';
|
|
|
+
|
|
|
+const defForm = {
|
|
|
+ name: '',
|
|
|
+ deviceCode: '',
|
|
|
+ classifyCode: '',
|
|
|
+ classifyName: '',
|
|
|
+ modelId: '',
|
|
|
+ modelName: '',
|
|
|
+ brandCode: '',
|
|
|
+ brandName: '',
|
|
|
+ stationName: '',
|
|
|
+ stationId: '',
|
|
|
+ areaId: '',
|
|
|
+ areaCode: '',
|
|
|
+ areaName: '',
|
|
|
+ deviceSort: 100,
|
|
|
+ activityStatus: 1,
|
|
|
+ kjgLoadDeviceId: undefined,
|
|
|
+ hwLoadDeviceId: undefined,
|
|
|
+ loadOtherDevice1: undefined,
|
|
|
+ loadOtherDevice2: undefined,
|
|
|
+ delayTime: '',
|
|
|
+ listLoad: [],
|
|
|
+ extraInfo: {
|
|
|
+ ip: '',
|
|
|
+ port: 8080,
|
|
|
+ account: '',
|
|
|
+ password: ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'RobotForm',
|
|
|
+ mixins: [dictMixins],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ title: '',
|
|
|
+ loading: false,
|
|
|
+ saving: false,
|
|
|
+ type: '',
|
|
|
+ areaTree: [],
|
|
|
+ cameraTypeFzKjgList: [],
|
|
|
+ cameraTypeFzHwList: [],
|
|
|
+ deviceOtherList: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'name'
|
|
|
+ },
|
|
|
+ form: { ...defForm },
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '机器人名称不能为空', trigger: 'blur' }],
|
|
|
+ deviceCode: [{ required: true, message: '机器人编号不能为空', trigger: 'blur' }],
|
|
|
+ classifyCode: [{ required: true, message: '机器人类型不能为空', trigger: 'change' }],
|
|
|
+ deviceSort: [{ required: true, message: '排序号不能为空', trigger: 'change' }],
|
|
|
+ stationName: [{ required: true, message: '所属场站不能为空', trigger: 'change' }],
|
|
|
+ areaId: [{ required: true, message: '所属区域不能为空', trigger: 'change' }],
|
|
|
+ extraInfo: {
|
|
|
+ ip: [{ required: true, message: 'IP不能为空', trigger: 'blur' }],
|
|
|
+ port: [{ required: true, message: '端口不能为空', trigger: 'blur' }],
|
|
|
+ account: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
|
|
|
+ password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.requestDict('机器人品牌');
|
|
|
+ this.requestDict('机器人类型');
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ brandCodeChange(e) {
|
|
|
+ this.form.brandName = e.dictValue;
|
|
|
+ },
|
|
|
+ classifyCodeChange(e) {
|
|
|
+ this.form.classifyName = e.dictValue;
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 选择关联设备事件 */
|
|
|
+ handleDevice(val, idx) {
|
|
|
+ if (idx == 2) {
|
|
|
+ if (val == this.form.loadOtherDevice2) {
|
|
|
+ this.form.loadOtherDevice2 = '';
|
|
|
+ }
|
|
|
+ } else if (idx == 3) {
|
|
|
+ if (val == this.form.loadOtherDevice1) {
|
|
|
+ this.form.loadOtherDevice1 = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 根据关联类型查询对应设备 */
|
|
|
+ async loadDeviceData() {
|
|
|
+ this.cameraTypeFzKjgList = [];
|
|
|
+ this.cameraTypeFzHwList = [];
|
|
|
+ this.deviceOtherList = [];
|
|
|
+ const allList = await RobotApi.getNonLoadDeviceList({});
|
|
|
+ if (allList && allList.length > 0) {
|
|
|
+ for (let obj of allList) {
|
|
|
+ if (!obj.loadId) {
|
|
|
+ if (obj.classifyCode == 'camera_type_fz_kjg') {
|
|
|
+ this.cameraTypeFzKjgList.push(obj);
|
|
|
+ } else if (obj.classifyCode == 'camera_type_fz_hw') {
|
|
|
+ this.cameraTypeFzHwList.push(obj);
|
|
|
+ } else {
|
|
|
+ this.deviceOtherList.push(obj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 获得区域树 */
|
|
|
+ async getAreaTree(stationId) {
|
|
|
+ const data = await AreaApi.getAreaList({ stationId: stationId });
|
|
|
+ this.areaTree = this.$util.toTreeData({
|
|
|
+ data: data.list,
|
|
|
+ idField: 'id',
|
|
|
+ parentIdField: 'parentId'
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 区域Change事件 */
|
|
|
+ areaIdChange(e) {
|
|
|
+ this.processingAreaId(e, this.areaTree);
|
|
|
+ },
|
|
|
+
|
|
|
+ processingAreaId(id, data) {
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ if (data[i].id == id) {
|
|
|
+ this.form.areaCode = data[i].areaCode;
|
|
|
+ this.form.areaName = data[i].name;
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ if (data[i].children && data[i].children.length) {
|
|
|
+ this.processingAreaId(id, data[i].children);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 打开弹窗 */
|
|
|
+ async open(type, id, station) {
|
|
|
+ this.type = type;
|
|
|
+ this.title = type === 'create' ? '新增机器人' : '编辑机器人';
|
|
|
+ this.form = { ...defForm };
|
|
|
+ this.areaTree = [];
|
|
|
+
|
|
|
+ // await this.loadDeviceData();
|
|
|
+
|
|
|
+ // if (getStationData()) {
|
|
|
+ // this.form.stationName = getStationData().stationName;
|
|
|
+ // this.form.stationId = getStationData().stationId || getStationData().id;
|
|
|
+ // }
|
|
|
+ if (station) {
|
|
|
+ this.form.stationName = station.stationName;
|
|
|
+ this.form.stationId = station.stationId || station.id;
|
|
|
+ await this.getAreaTree(this.form.stationId);
|
|
|
+ if (station.stationId) {
|
|
|
+ this.form.areaCode = station.areaCode;
|
|
|
+ this.form.areaName = station.areaName;
|
|
|
+ this.form.areaId = station.id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (id) {
|
|
|
+ this.loading = true;
|
|
|
+ try {
|
|
|
+ const res = await RobotApi.getDevice(id);
|
|
|
+ // 排障,避免异常
|
|
|
+ if (!res.extraInfo) {
|
|
|
+ res.extraInfo = { ip: undefined, port: 8080, account: undefined, password: undefined };
|
|
|
+ }
|
|
|
+ // 处理负载设备
|
|
|
+ if (res.listLoad && res.listLoad.length > 0) {
|
|
|
+ for (let device of res.listLoad) {
|
|
|
+ let currLoadDeviceType = device.loadDeviceType,
|
|
|
+ currDeviceId = device.loadDeviceId,
|
|
|
+ loadDeviceName = device.loadDeviceName;
|
|
|
+ let pushObj = { name: loadDeviceName, id: currDeviceId };
|
|
|
+ if (currLoadDeviceType == 'camera_type_fz_kjg') {
|
|
|
+ res.kjgLoadDeviceId = currDeviceId;
|
|
|
+ this.cameraTypeFzKjgList.push(pushObj);
|
|
|
+ } else if (currLoadDeviceType == 'camera_type_fz_hw') {
|
|
|
+ res.hwLoadDeviceId = currDeviceId;
|
|
|
+ this.cameraTypeFzHwList.push(pushObj);
|
|
|
+ } else {
|
|
|
+ if (!res.loadOtherDevice1) {
|
|
|
+ res.loadOtherDevice1 = currDeviceId;
|
|
|
+ } else {
|
|
|
+ res.loadOtherDevice2 = currDeviceId;
|
|
|
+ }
|
|
|
+ this.deviceOtherList.push(pushObj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ res.kjgLoadDeviceId = undefined;
|
|
|
+ res.hwLoadDeviceId = undefined;
|
|
|
+ res.loadOtherDevice1 = undefined;
|
|
|
+ res.loadOtherDevice2 = undefined;
|
|
|
+ res.listLoad = [];
|
|
|
+ }
|
|
|
+ this.form = res;
|
|
|
+ if (this.form.stationId) {
|
|
|
+ await this.getAreaTree(this.form.stationId);
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ this.$message.error(e.message);
|
|
|
+ } finally {
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.form.deviceCode = await getCode('robot_code');
|
|
|
+ }
|
|
|
+
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 取消 */
|
|
|
+ cancel() {
|
|
|
+ this.form = { ...defForm };
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 保存 */
|
|
|
+ save() {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.saving = true;
|
|
|
+ const data = { ...this.form };
|
|
|
+
|
|
|
+ // 构建负载列表
|
|
|
+ data.listLoad = [];
|
|
|
+ if (data.kjgLoadDeviceId) {
|
|
|
+ data.listLoad.push({ loadDeviceId: data.kjgLoadDeviceId });
|
|
|
+ }
|
|
|
+ if (data.hwLoadDeviceId) {
|
|
|
+ data.listLoad.push({ loadDeviceId: data.hwLoadDeviceId });
|
|
|
+ }
|
|
|
+ if (data.loadOtherDevice1) {
|
|
|
+ data.listLoad.push({ loadDeviceId: data.loadOtherDevice1 });
|
|
|
+ }
|
|
|
+ if (data.loadOtherDevice2) {
|
|
|
+ data.listLoad.push({ loadDeviceId: data.loadOtherDevice2 });
|
|
|
+ }
|
|
|
+
|
|
|
+ const action =
|
|
|
+ this.type === 'create' ? RobotApi.createDevice(data) : RobotApi.updateDevice(data);
|
|
|
+
|
|
|
+ action
|
|
|
+ .then(() => {
|
|
|
+ this.$message.success(this.type === 'create' ? '新增成功' : '修改成功');
|
|
|
+ this.cancel();
|
|
|
+ this.$emit('success');
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ this.$message.error(e.message);
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.saving = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.tit {
|
|
|
+ margin-left: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ border-left: 3px solid #9266f9;
|
|
|
+ padding-left: 10px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+}
|
|
|
+</style>
|