|
|
@@ -1,49 +1,345 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <DialogCom title="选择报警防区设备" append-to-body :visible.sync="isShow" width="60%">
|
|
|
- <el-transfer
|
|
|
- style="text-align: center; display: inline-block"
|
|
|
- v-model="value4"
|
|
|
- filterable
|
|
|
- :left-default-checked="[2, 3]"
|
|
|
- :right-default-checked="[1]"
|
|
|
- :titles="['设备名称', '设备名称']"
|
|
|
- :button-texts="['移除<<', '添加>>']"
|
|
|
- :format="{
|
|
|
- noChecked: '${total}',
|
|
|
- hasChecked: '${checked}/${total}',
|
|
|
- }"
|
|
|
- @change="handleChange"
|
|
|
- :data="data"
|
|
|
- >
|
|
|
- <span slot-scope="{ option }"
|
|
|
- >{{ option.key }} - {{ option.label }}</span
|
|
|
- >
|
|
|
- </el-transfer>
|
|
|
- </DialogCom>
|
|
|
- </div>
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="visible"
|
|
|
+ width="1000px"
|
|
|
+ top="10vh"
|
|
|
+ append-to-body
|
|
|
+ @opened="open"
|
|
|
+ @closed="closed"
|
|
|
+ >
|
|
|
+ <el-row class="el-row-top">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-card class="box-card leftbox" :body-style="{ height: '100%' }">
|
|
|
+ <el-form
|
|
|
+ ref="formleft"
|
|
|
+ v-model="left.condition"
|
|
|
+ label-width="120px"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ <el-form-item label="组织机构：">
|
|
|
+ <tree-select
|
|
|
+ v-model="left.condition.orgId"
|
|
|
+ :options="deptOptions"
|
|
|
+ :show-count="true"
|
|
|
+ :normalizer="tenantIdnormalizer"
|
|
|
+ :props="{ checkStrictly: true, label: 'name' }"
|
|
|
+ placeholder="请选择归属机构"
|
|
|
+ clearValueText="清除"
|
|
|
+ :noChildrenText="''"
|
|
|
+ @select="leftSearch"
|
|
|
+ noOptionsText="没有数据"
|
|
|
+ noResultsText="没有搜索结果"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="名称：">
|
|
|
+ <el-input
|
|
|
+ v-model="left.condition.deviceName"
|
|
|
+ clearable
|
|
|
+ @input="leftSearch"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">搜索结果</el-col>
|
|
|
+ <el-col :span="12" style="text-align: right"
|
|
|
+ >{{ left.selectedRows.length }}/{{ left.data.length }}</el-col
|
|
|
+ >
|
|
|
+ </el-row>
|
|
|
+ <el-table
|
|
|
+ style="width: 100%"
|
|
|
+ height="calc(100% - 100px)"
|
|
|
+ :data="left.data"
|
|
|
+ @selection-change="handleLeftSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55"> </el-table-column>
|
|
|
+ <el-table-column prop="deviceName" label="设备名称">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="deviceName-column-content">{{
|
|
|
+ scope.row.orgName
|
|
|
+ }}</span>
|
|
|
+ <span class="deviceName-column-content">{{
|
|
|
+ scope.row.deviceName
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="controller">
|
|
|
+ <el-button type="primary" @click="handleAdd">添加 >></el-button>
|
|
|
+ <el-button class="remove" type="primary" @click="handleRemove"
|
|
|
+ >移除 <<</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-card class="box-card" :body-style="{ height: '100%' }">
|
|
|
+ <el-form
|
|
|
+ ref="formRight"
|
|
|
+ v-model="right.condition"
|
|
|
+ label-width="120px"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ <el-form-item label="组织机构：">
|
|
|
+ <tree-select
|
|
|
+ v-model="right.condition.orgId"
|
|
|
+ :options="deptOptions"
|
|
|
+ :show-count="true"
|
|
|
+ :normalizer="tenantIdnormalizer"
|
|
|
+ :props="{ checkStrictly: true, label: 'name' }"
|
|
|
+ placeholder="请选择归属机构"
|
|
|
+ clearValueText="清除"
|
|
|
+ :noChildrenText="''"
|
|
|
+ @select="rightSearch"
|
|
|
+ noOptionsText="没有数据"
|
|
|
+ noResultsText="没有搜索结果"
|
|
|
+ />
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="名称：">
|
|
|
+ <el-input
|
|
|
+ v-model="right.condition.deviceName"
|
|
|
+ clearable
|
|
|
+ @input="rightSearch"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">搜索结果</el-col>
|
|
|
+ <el-col :span="12" style="text-align: right"
|
|
|
+ >{{ right.selectedRows.length }}/{{ right.data.length }}</el-col
|
|
|
+ >
|
|
|
+ </el-row>
|
|
|
+ <el-table
|
|
|
+ height="calc(100% - 100px)"
|
|
|
+ :data="right.data"
|
|
|
+ @selection-change="handleRightSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55"> </el-table-column>
|
|
|
+ <el-table-column prop="deviceName" label="设备名称">
|
|
|
+ <template slot-scope="r">
|
|
|
+ <span class="deviceName-column-content">{{
|
|
|
+ r.row.orgName
|
|
|
+ }}</span>
|
|
|
+ <span class="deviceName-column-content">{{
|
|
|
+ r.row.deviceName
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="visible = false">关闭</el-button>
|
|
|
+ <el-button type="primary" @click="onOK">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
-export default {
|
|
|
- name: "SocWebAddRelvance",
|
|
|
|
|
|
+export default {
|
|
|
+ name: "ruleBindDevice",
|
|
|
+ props: {
|
|
|
+ // boundDevices: {
|
|
|
+ // type: Array,
|
|
|
+ // default: new Array(),
|
|
|
+ // },
|
|
|
+ deviceType: {
|
|
|
+ type: [Number, String],
|
|
|
+ required: false,
|
|
|
+ },
|
|
|
+ typeText: {
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: "报警防区",
|
|
|
+ },
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- isShow:false
|
|
|
+ title: "选择报警防区设备",
|
|
|
+ visible: false,
|
|
|
+ loading: false,
|
|
|
+ left: {
|
|
|
+ condition: {
|
|
|
+ orgId: 0,
|
|
|
+ deviceName: "",
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ selectedCount: 0,
|
|
|
+ selectedRows: [],
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ right: {
|
|
|
+ condition: {
|
|
|
+ orgId: 0,
|
|
|
+ deviceName: "",
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ selectedCount: 0,
|
|
|
+ selectedRows: [],
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.boundDevicesClone = [];
|
|
|
+ },
|
|
|
|
|
|
mounted() {},
|
|
|
-
|
|
|
methods: {
|
|
|
- handleChange(value, direction, movedKeys) {
|
|
|
- console.log(value, direction, movedKeys);
|
|
|
+ open() {
|
|
|
+ // this.left.condition.orgId = this.loginUser.org.id;
|
|
|
+ // this.boundDevicesClone = this.boundDevices
|
|
|
+ // ? this.boundDevices.map((d) => d)
|
|
|
+ // : new Array();
|
|
|
+ // this.boundDeviceIds = this.boundDevicesClone.map((d) => d.deviceId);
|
|
|
+ // this.title = `选择${this.typeText}设备`;
|
|
|
+ // this.leftSearch();
|
|
|
+ // this.rightSearch();
|
|
|
+ },
|
|
|
+ showDialog() {
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ hideDialog() {
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ closed() {
|
|
|
+ this.left.data = [];
|
|
|
+ this.left.condition.deviceName = "";
|
|
|
+ this.left.condition.orgId = 0;
|
|
|
+ this.right.data = [];
|
|
|
+ this.right.condition.deviceName = "";
|
|
|
+ this.right.condition.orgId = 0;
|
|
|
+ },
|
|
|
+ handleLeftOrgNodeClick(node) {
|
|
|
+ this.left.condition.orgId = node.orgId;
|
|
|
+ this.leftSearch();
|
|
|
+ },
|
|
|
+ handleRightOrgNodeClick(node) {
|
|
|
+ this.right.condition.orgId = node.orgId;
|
|
|
+ this.RightSearch();
|
|
|
+ },
|
|
|
+ handleLeftSelectionChange(val) {
|
|
|
+ this.left.selectedCount = val.length;
|
|
|
+ this.left.selectedRows = val;
|
|
|
+ },
|
|
|
+ handleRightSelectionChange(val) {
|
|
|
+ this.right.selectedCount = val.length;
|
|
|
+ this.right.selectedRows = val;
|
|
|
+ },
|
|
|
+ handleRightOrgChange(node) {
|
|
|
+ this.right.condition.orgName = node.orgName;
|
|
|
+ },
|
|
|
+ handleAdd() {
|
|
|
+ let addData = this.left.selectedRows.filter(
|
|
|
+ (row) => this.boundDeviceIds.indexOf(row.deviceId) < 0
|
|
|
+ );
|
|
|
+ addData.map((row) => {
|
|
|
+ let clone = { ...row };
|
|
|
+ this.right.data.push(clone);
|
|
|
+ this.boundDevicesClone.push(clone);
|
|
|
+ this.boundDeviceIds.push(clone.deviceId);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleRemove() {
|
|
|
+ let rightSelectedDeviceIds = this.right.selectedRows.map(
|
|
|
+ (r) => r.deviceId
|
|
|
+ );
|
|
|
+ this.right.data = this.right.data.filter(
|
|
|
+ (d) => rightSelectedDeviceIds.indexOf(d.deviceId) < 0
|
|
|
+ );
|
|
|
+ this.boundDevicesClone = this.boundDevicesClone.filter(
|
|
|
+ (d) => rightSelectedDeviceIds.indexOf(d.deviceId) < 0
|
|
|
+ );
|
|
|
+ this.boundDeviceIds = this.boundDevicesClone.map((d) => d.deviceId);
|
|
|
+ },
|
|
|
+ leftSearch() {
|
|
|
+ return;
|
|
|
+ let { condition } = this.left;
|
|
|
+ if (
|
|
|
+ this.left.prevCondition &&
|
|
|
+ JSON.stringify(condition) === JSON.stringify(this.left.prevCondition)
|
|
|
+ ) {
|
|
|
+ return;
|
|
|
}
|
|
|
+ this.left.prevCondition = { ...condition };
|
|
|
+ this.$api.alarmRule
|
|
|
+ .getDevice(
|
|
|
+ condition.orgId,
|
|
|
+ condition.deviceName,
|
|
|
+ this.deviceType,
|
|
|
+ 0,
|
|
|
+ 9999
|
|
|
+ )
|
|
|
+ .then((result) => {
|
|
|
+ this.left.data = result.content;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ rightSearch() {
|
|
|
+ const { condition } = this.right;
|
|
|
+ this.right.data = this.boundDevicesClone
|
|
|
+ .filter(
|
|
|
+ (d) =>
|
|
|
+ !condition.deviceName || d.deviceName.includes(condition.deviceName)
|
|
|
+ )
|
|
|
+ .filter((d) => !condition.orgId || d.orgId == condition.orgId);
|
|
|
+ },
|
|
|
+
|
|
|
+ onOK() {
|
|
|
+ this.$emit("ok", this.boundDevicesClone);
|
|
|
+ this.hideDialog();
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
-.el-transfer{
|
|
|
- margin-top: 20px;
|
|
|
+@ctlButtonWidth: 80px;
|
|
|
+.controller {
|
|
|
+ margin: auto;
|
|
|
+ width: 80px;
|
|
|
+ top: calc(50% - 30px);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .remove{
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-left: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-row-top {
|
|
|
+ height: 500px;
|
|
|
+ display: flex;
|
|
|
+ v-deep & > .el-col {
|
|
|
+ height: 100%;
|
|
|
+ width: calc(50% - 50px);
|
|
|
+ }
|
|
|
+
|
|
|
+ v-deep & > .el-col:nth-child(2) {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.box-card {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ v-deep .el-card__body {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.leftbox {
|
|
|
+ v-deep .k-tree-select__clear {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.deviceName-column-content {
|
|
|
+ display: block;
|
|
|
+ text-align: right;
|
|
|
}
|
|
|
</style>
|
coys