设备分组功能，添加高级筛选，上方文本框输入后的筛选
This commit is contained in:
liub
@ -3,7 +3,7 @@ import request from '@/utils/request';
|
||||
import { AxiosPromise } from 'axios';
|
||||
|
||||
//左侧节点的数据源
|
||||
function getTreeData(para : any) {
|
||||
function getTreeData(para: any) {
|
||||
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ function getTreeData(para : any) {
|
||||
});
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
Promise.allSettled([ promise2]).then(res => {
|
||||
Promise.allSettled([promise2]).then(res => {
|
||||
debugger;
|
||||
if (res[0].status == 'fulfilled') {
|
||||
let json = res[0].value;
|
||||
@ -205,7 +205,7 @@ function treeNodeSearch(treeData, search = '', filed = 'groupName', childField =
|
||||
|
||||
//更新节点名称
|
||||
function updateTreeName(nodes, targetValue, newTxt, filed = 'groupName', childField = "children", valueFiled = "id") {
|
||||
let updateTree=function(){
|
||||
let updateTree = function () {
|
||||
for (let node of nodes) {
|
||||
// 检查当前节点是否匹配value
|
||||
if (node[valueFiled] === targetValue) {
|
||||
@ -224,7 +224,7 @@ function updateTreeName(nodes, targetValue, newTxt, filed = 'groupName', childFi
|
||||
return false; // 未找到匹配的节点
|
||||
}
|
||||
|
||||
let requestUpdate=function(){
|
||||
let requestUpdate = function () {
|
||||
let promise2 = new Promise((resolve, reject) => {
|
||||
request({
|
||||
url: '/api/device/group',
|
||||
@ -323,10 +323,10 @@ function delTreeNode(nodes, targetValue, childField = "children", valueFiled = "
|
||||
return false; // 未找到匹配的节点
|
||||
}
|
||||
|
||||
let requestDel=function(){
|
||||
let requestDel = function () {
|
||||
let promise2 = new Promise((resolve, reject) => {
|
||||
request({
|
||||
url: '/api/device/group/'+targetValue,
|
||||
url: '/api/device/group/' + targetValue,
|
||||
method: 'delete',
|
||||
|
||||
}).then((res) => {
|
||||
@ -345,21 +345,20 @@ function delTreeNode(nodes, targetValue, childField = "children", valueFiled = "
|
||||
|
||||
//获取某个节点的设备数据
|
||||
function getNodeDevice(para) {
|
||||
|
||||
|
||||
|
||||
|
||||
let promise2 = new Promise((resolve, reject) => {
|
||||
request({
|
||||
url: '/api/device',
|
||||
method: 'get',
|
||||
params:{
|
||||
params: {
|
||||
"deviceStatus": 1,
|
||||
"pageNum": para.pageIndex,
|
||||
"pageSize": para.pageSize,
|
||||
"groupId": para.nodeCode,
|
||||
"communicationMode": para.communicationMode,//通讯方式 0:4G;1:蓝牙
|
||||
"deviceType": para.deviceType,//设备类型
|
||||
"deviceName": para.deviceName
|
||||
|
||||
}
|
||||
}
|
||||
}).then((res) => {
|
||||
resolve(res);
|
||||
}).catch((ex) => {
|
||||
@ -380,10 +379,10 @@ function getNodeDevice(para) {
|
||||
}
|
||||
|
||||
//从分组中删除设备
|
||||
function groupDelDevice(groupid,deviceIds){
|
||||
return new Promise((resolve,reject)=>{
|
||||
function groupDelDevice(groupid, deviceIds) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request({
|
||||
url: '/api/device/group/groupUnbind/'+deviceIds,
|
||||
url: '/api/device/group/groupUnbind/' + deviceIds,
|
||||
method: 'get',
|
||||
|
||||
}).then((res) => {
|
||||
@ -395,10 +394,10 @@ function groupDelDevice(groupid,deviceIds){
|
||||
}
|
||||
|
||||
//将设备移动至分组
|
||||
function deviceMoveGroup(groupid,deviceIds){
|
||||
return new Promise((resolve,reject)=>{
|
||||
function deviceMoveGroup(groupid, deviceIds) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request({
|
||||
url: '/api/device/group/groupId/'+groupid+'/'+deviceIds,
|
||||
url: '/api/device/group/groupId/' + groupid + '/' + deviceIds,
|
||||
method: 'get',
|
||||
|
||||
}).then((res) => {
|
||||
@ -409,6 +408,30 @@ function deviceMoveGroup(groupid,deviceIds){
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//获取设备类型
|
||||
function getDeviceTypeAll(){
|
||||
return new Promise((resolve, reject) => {
|
||||
request({
|
||||
url: '/api/deviceType/all' ,
|
||||
method: 'get',
|
||||
|
||||
}).then((res) => {
|
||||
resolve(res);
|
||||
}).catch((ex) => {
|
||||
reject(ex);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//获取通讯方式
|
||||
function getNetMode () {
|
||||
return request({
|
||||
url: '/api/deviceType/communicationMode',
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
getTreeData: getTreeData,
|
||||
treeNodeSearch: treeNodeSearch,
|
||||
@ -416,6 +439,9 @@ export default {
|
||||
addTreeNode: addTreeNode,
|
||||
delTreeNode: delTreeNode,
|
||||
getNodeDevice: getNodeDevice,
|
||||
groupDelDevice:groupDelDevice,
|
||||
deviceMoveGroup:deviceMoveGroup
|
||||
groupDelDevice: groupDelDevice,
|
||||
deviceMoveGroup: deviceMoveGroup,
|
||||
getDeviceTypeAll:getDeviceTypeAll,
|
||||
getNetMode:getNetMode
|
||||
|
||||
}
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
<el-tree :data="treeData" :props="defaultProps" accordion @node-click="handleNodeClick">
|
||||
<template #default="{ node, data }">
|
||||
|
||||
<div class="custom-tree-node" :class="checkNode.val==data.id?'active':''">
|
||||
<span :class="data.parentId!=null?'':'treeBold'">{{ node.label }}</span>
|
||||
<div class="custom-tree-node" :class="checkNode.val == data.id ? 'active' : ''">
|
||||
<span :class="data.parentId != null ? '' : 'treeBold'">{{ node.label }}</span>
|
||||
|
||||
<div class="iconContent">
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
<div class="rightSearch">
|
||||
<div class="searchContent">
|
||||
<div class="center H100">
|
||||
<input type="text" class="serchTxt" v-model="GjSearchForm.deviceName" />
|
||||
<input type="text" class="serchTxt" v-model="GjSearchForm.deviceName" @input="InputSearch()" />
|
||||
<Search class="icon" style="width: 16px;height:16px;" />
|
||||
</div>
|
||||
</div>
|
||||
@ -52,29 +52,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="searchBar" :class="Status.isGjSearch?'':'displayNone'">
|
||||
<div class="searchBar" :class="Status.isGjSearch ? '' : 'displayNone'">
|
||||
<div style="margin-top:20px;">
|
||||
<el-form class="demo-form-inline" :inline="true" :model="GjSearchForm" label-width="auto"
|
||||
style="width: 100%;">
|
||||
|
||||
<el-form-item label="设备类型">
|
||||
<el-select v-model="GjSearchForm.deviceType" placeholder="请选择设备类型">
|
||||
<el-option label="650" value="HBY 650" />
|
||||
<el-option label="670" value="HBY 670" />
|
||||
<el-select v-model="GjSearchForm.deviceType" placeholder="请选择">
|
||||
<el-option v-for="item in deviceTypes" :key="item.value" :label="item.typeName" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="通信方式">
|
||||
<el-select v-model="GjSearchForm.deviceType" placeholder="请选择设备类型">
|
||||
<el-option label="650" value="蓝牙" />
|
||||
<el-option label="670" value="4G" />
|
||||
<el-option label="670" value="蓝牙&4G" />
|
||||
<el-select v-model="GjSearchForm.netMode" placeholder="请选择">
|
||||
<el-option label="4G" :value="0" />
|
||||
<el-option label="蓝牙" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
||||
<button class="btnSearch">查询</button>
|
||||
<button class="btnReset">重置</button>
|
||||
<div class="btnSearch" @click="getDeviceList()">查询</div>
|
||||
<div class="btnReset" @click="ResetQuery()">重置</div>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
@ -128,7 +126,7 @@
|
||||
<el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<div class="center">
|
||||
<div class="moveDev" @click="showCheckGroup('item',scope.row)">移动</div>
|
||||
<div class="moveDev" @click="showCheckGroup('item', scope.row)">移动</div>
|
||||
<div class="delDev" @click="groupDelDevice(scope.row)">删除</div>
|
||||
</div>
|
||||
|
||||
@ -148,7 +146,7 @@
|
||||
<!-- 提示框 -->
|
||||
<el-dialog :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" width="500" center>
|
||||
<span>
|
||||
{{Status.confirm.text}}
|
||||
{{ Status.confirm.text }}
|
||||
</span>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
@ -167,7 +165,7 @@
|
||||
<template #default="{ node, data }">
|
||||
|
||||
<div class="custom-tree-node" @click.stop="CheckGroup(data)">
|
||||
<span :class="data.parentId!=null?'':'treeBold'">{{ node.label }}</span>
|
||||
<span :class="data.parentId != null ? '' : 'treeBold'">{{ node.label }}</span>
|
||||
<span>选择</span>
|
||||
</div>
|
||||
|
||||
@ -202,29 +200,30 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { status } from 'nprogress';
|
||||
import api from '@/api/equipmentManagement/devicegroup/index';
|
||||
import { stat } from 'fs';
|
||||
import { func } from 'vue-types';
|
||||
import { status } from 'nprogress';
|
||||
import api from '@/api/equipmentManagement/devicegroup/index';
|
||||
import { stat } from 'fs';
|
||||
import { func } from 'vue-types';
|
||||
import { deviceTypeAll } from '@/api/equipmentManagement/device';
|
||||
|
||||
interface Device {
|
||||
deviceName : string;
|
||||
devicePic : string;
|
||||
typeName : string;
|
||||
bindingStatus : string;
|
||||
}
|
||||
interface Device {
|
||||
deviceName: string;
|
||||
devicePic: string;
|
||||
typeName: string;
|
||||
bindingStatus: string;
|
||||
}
|
||||
|
||||
|
||||
var searchTxt = ref(''); //左侧树筛选文本
|
||||
var treeDataOrin = ref([]); //树控件的数据源
|
||||
var grid = ref(null);
|
||||
var searchTxt = ref(''); //左侧树筛选文本
|
||||
var treeDataOrin = ref([]); //树控件的数据源
|
||||
var grid = ref(null);
|
||||
|
||||
var cEdit = ref({ val: "", txt: "" });//当前正在编辑的节点数据
|
||||
var cEdit = ref({ val: "", txt: "" });//当前正在编辑的节点数据
|
||||
|
||||
var checkNode = { val: '' };//记录被选中的节点
|
||||
var checkNode = { val: '' };//记录被选中的节点
|
||||
|
||||
//全局状态控制
|
||||
var Status = reactive({
|
||||
//全局状态控制
|
||||
var Status = reactive({
|
||||
isEditTreeNode: false,//是否编辑节点
|
||||
isGjSearch: false,//是否显示高级筛选
|
||||
loading: false,
|
||||
@ -238,29 +237,32 @@
|
||||
},
|
||||
dialogGroupVisible: false,//是否显示选择分组的弹窗
|
||||
dialogDeviceVisible: false//是否显示选择设备的弹窗
|
||||
});
|
||||
//页码控件数据
|
||||
var pagin = reactive({
|
||||
});
|
||||
//页码控件数据
|
||||
var pagin = reactive({
|
||||
total: 0,
|
||||
});
|
||||
//右边的筛选条件
|
||||
var GjSearchForm = reactive({
|
||||
});
|
||||
//右边的筛选条件
|
||||
var GjSearchForm = reactive({
|
||||
deviceName: '',
|
||||
deviceType: '',
|
||||
netMode: '',
|
||||
deviceType: "",
|
||||
netMode: "",
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
});
|
||||
//设备列表
|
||||
var deviceList = ref<Device[]>();
|
||||
//所有设备类型
|
||||
var deviceTypes = reactive([]);
|
||||
|
||||
var deviceList = ref<Device[]>();
|
||||
|
||||
var transfer = reactive({
|
||||
//穿梭框的数据和值
|
||||
var transfer = reactive({
|
||||
value: [],
|
||||
data: []
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
window.confirm = function (text, OK, cancel, title) {
|
||||
window.confirm = function (text, OK, cancel, title) {
|
||||
let Cfg = {
|
||||
Visible: true,
|
||||
title: '提示',
|
||||
@ -281,9 +283,9 @@
|
||||
}
|
||||
|
||||
Status.confirm = Cfg;
|
||||
}
|
||||
}
|
||||
|
||||
window.alert = function (text, OK, title) {
|
||||
window.alert = function (text, OK, title) {
|
||||
|
||||
let Cfg = {
|
||||
Visible: true,
|
||||
@ -300,9 +302,9 @@
|
||||
}
|
||||
|
||||
Status.confirm = Cfg;
|
||||
}
|
||||
}
|
||||
|
||||
var hideConfirm = function () {
|
||||
var hideConfirm = function () {
|
||||
|
||||
let Cfg = {
|
||||
Visible: false,
|
||||
@ -313,43 +315,54 @@
|
||||
}
|
||||
|
||||
Status.confirm = Cfg;
|
||||
}
|
||||
}
|
||||
|
||||
var showloading = function () {
|
||||
var showloading = function () {
|
||||
window.loadingIndex = ElLoading.service({ fullscreen: true })
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var closeLoading = function () {
|
||||
var closeLoading = function () {
|
||||
if (window.loadingIndex) {
|
||||
window.loadingIndex.close();
|
||||
}
|
||||
}
|
||||
var hideloading = closeLoading;
|
||||
//查询某个节点的设备
|
||||
var getDeviceList = () => {
|
||||
}
|
||||
var hideloading = closeLoading;
|
||||
|
||||
function ResetQuery() {
|
||||
GjSearchForm.deviceType = "";
|
||||
GjSearchForm.netMode = "";
|
||||
}
|
||||
//查询某个节点的设备
|
||||
var getDeviceList = () => {
|
||||
if (!checkNode.val) {
|
||||
pagin.total = 0;
|
||||
deviceList.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
let para = {
|
||||
nodeCode: checkNode.val,
|
||||
pageIndex: GjSearchForm.pageNum,
|
||||
pageSize: GjSearchForm.pageSize
|
||||
pageSize: GjSearchForm.pageSize,
|
||||
communicationMode: GjSearchForm.netMode,
|
||||
deviceType: GjSearchForm.deviceType,
|
||||
deviceName: GjSearchForm.deviceName
|
||||
}
|
||||
|
||||
showloading();
|
||||
api.getNodeDevice(para).then((res) => {
|
||||
deviceList.value = res.rows;
|
||||
pagin.total = res.total;
|
||||
}).catch((ex) => {
|
||||
console.log("出现了异常", ex);
|
||||
}).finally(() => {
|
||||
hideloading();
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
//树控件节点点击事件
|
||||
var handleNodeClick = (node) => {
|
||||
}
|
||||
//树控件节点点击事件
|
||||
var handleNodeClick = (node) => {
|
||||
debugger;
|
||||
if (checkNode.val == node.id) {
|
||||
return;
|
||||
@ -357,21 +370,21 @@
|
||||
console.log("节点数据：", node.id);
|
||||
checkNode.val = node.id;
|
||||
getDeviceList();
|
||||
}
|
||||
}
|
||||
|
||||
//树控件筛选后显示的数据源
|
||||
var treeData = computed(() => {
|
||||
//树控件筛选后显示的数据源
|
||||
var treeData = computed(() => {
|
||||
let arr = api.treeNodeSearch(treeDataOrin.value, searchTxt.value, 'groupName', 'children');
|
||||
return arr;
|
||||
});
|
||||
});
|
||||
|
||||
//显示/隐藏高级筛选
|
||||
var ToggleGjSearch = function () {
|
||||
//显示/隐藏高级筛选
|
||||
var ToggleGjSearch = function () {
|
||||
Status.isGjSearch = !Status.isGjSearch;
|
||||
}
|
||||
}
|
||||
|
||||
//编辑节点
|
||||
var editNode = (node) => {
|
||||
//编辑节点
|
||||
var editNode = (node) => {
|
||||
|
||||
console.log("编辑节点：", node.data.value);
|
||||
cEdit.value.val = node.data.id;
|
||||
@ -390,9 +403,9 @@
|
||||
completeEdit(node);
|
||||
});
|
||||
//
|
||||
}
|
||||
//完成编辑
|
||||
var completeEdit = (node) => {
|
||||
}
|
||||
//完成编辑
|
||||
var completeEdit = (node) => {
|
||||
|
||||
|
||||
let now = DateFormat(new Date(), "yyyy-MM-dd HH:mm:ss");
|
||||
@ -429,17 +442,17 @@
|
||||
hideloading();
|
||||
});
|
||||
Status.isEditTreeNode = false;
|
||||
}
|
||||
}
|
||||
|
||||
//放弃编辑
|
||||
var cancelEdit = (node) => {
|
||||
//放弃编辑
|
||||
var cancelEdit = (node) => {
|
||||
cEdit.value.val = "";
|
||||
cEdit.value.txt = "";
|
||||
Status.isEditTreeNode = false;
|
||||
}
|
||||
}
|
||||
|
||||
//删除节点
|
||||
var delNode = (node) => {
|
||||
//删除节点
|
||||
var delNode = (node) => {
|
||||
debugger;
|
||||
if (node.data.children && node.data.children.length > 0) {
|
||||
alert("节点包含子节点,不允许删除");
|
||||
@ -463,9 +476,9 @@
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var DateFormat = function (date, format) {
|
||||
var DateFormat = function (date, format) {
|
||||
if (!date) {
|
||||
date = new Date();
|
||||
}
|
||||
@ -505,10 +518,10 @@
|
||||
return format.replace(/(yyyy|MM|dd|HH|mm|ss|SSS|M|d|H|m|s|S)/g, (match) => {
|
||||
return formatMap[match];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//增加节点
|
||||
var addNode = (node) => {
|
||||
//增加节点
|
||||
var addNode = (node) => {
|
||||
let title = '';
|
||||
if (node) {
|
||||
console.log("给节点新增子节点：", node.data.id);
|
||||
@ -570,45 +583,45 @@
|
||||
hideloading();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//树控件的自定义属性
|
||||
var defaultProps = {
|
||||
//树控件的自定义属性
|
||||
var defaultProps = {
|
||||
children: 'children',
|
||||
label: 'groupName',
|
||||
parentId: "parentId"
|
||||
}
|
||||
}
|
||||
|
||||
var RowSelectionChange = (tr) => {
|
||||
var RowSelectionChange = (tr) => {
|
||||
debugger;
|
||||
console.log("行选中变化", tr);
|
||||
getSelectionRows();
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
var getSelectionRows = () => {
|
||||
var getSelectionRows = () => {
|
||||
|
||||
if (grid.value) { // 检查ref是否已正确引用组件实例
|
||||
var selectedRows = grid.value.getSelectionRows(); // 获取选中行数据数组
|
||||
return selectedRows;
|
||||
}
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var RefreshTree = function () {
|
||||
var RefreshTree = function () {
|
||||
api.getTreeData(searchTxt.value).then((res) => {
|
||||
treeDataOrin.value = res;
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//从分组中删除设备
|
||||
var groupDelDevice = (row) => {
|
||||
//从分组中删除设备
|
||||
var groupDelDevice = (row) => {
|
||||
|
||||
let rows = [];//
|
||||
if (!row) {
|
||||
@ -637,9 +650,9 @@
|
||||
});
|
||||
}, null, "警告");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var showDevice = () => {
|
||||
var showDevice = () => {
|
||||
Status.dialogDeviceVisible = true;
|
||||
//获取所有
|
||||
let promise1 = api.getNodeDevice({
|
||||
@ -654,8 +667,8 @@
|
||||
nodeCode: checkNode.val
|
||||
});
|
||||
|
||||
cGroupAndDevice.deviceIds=[];
|
||||
transfer.value=[];
|
||||
cGroupAndDevice.deviceIds = [];
|
||||
transfer.value = [];
|
||||
|
||||
Promise.allSettled([promise1, promise2]).then(res => {
|
||||
|
||||
@ -667,7 +680,7 @@
|
||||
let arr = res1.rows.map(item => ({
|
||||
key: item.deviceId,
|
||||
label: item.deviceName,
|
||||
disabled:item.groupId && item.groupId==checkNode.val?false:item.groupId ?true:false
|
||||
disabled: item.groupId && item.groupId == checkNode.val ? false : item.groupId ? true : false
|
||||
}));
|
||||
|
||||
transfer.data = arr;
|
||||
@ -692,40 +705,40 @@
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//确认选择这些设备
|
||||
var OKCheckDevice = () => {
|
||||
//确认选择这些设备
|
||||
var OKCheckDevice = () => {
|
||||
|
||||
debugger;
|
||||
debugger;
|
||||
|
||||
let arr=transfer.value.map(item=>({
|
||||
deviceId:item
|
||||
let arr = transfer.value.map(item => ({
|
||||
deviceId: item
|
||||
}));
|
||||
if(arr.length==0){
|
||||
if (arr.length == 0) {
|
||||
alert("未选择任何设备");
|
||||
return;
|
||||
}
|
||||
hideDevice();
|
||||
cGroupAndDevice.deviceIds=arr;
|
||||
cGroupAndDevice.groupid=checkNode.val;
|
||||
deviceMoveGroup(cGroupAndDevice.groupid,cGroupAndDevice.deviceIds);
|
||||
}
|
||||
cGroupAndDevice.deviceIds = arr;
|
||||
cGroupAndDevice.groupid = checkNode.val;
|
||||
deviceMoveGroup(cGroupAndDevice.groupid, cGroupAndDevice.deviceIds);
|
||||
}
|
||||
|
||||
//隐藏选择设备
|
||||
var hideDevice = () => {
|
||||
//隐藏选择设备
|
||||
var hideDevice = () => {
|
||||
Status.dialogDeviceVisible = false;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var cGroupAndDevice={
|
||||
groupid:'',
|
||||
deviceIds:[]
|
||||
};
|
||||
var cGroupAndDevice = {
|
||||
groupid: '',
|
||||
deviceIds: []
|
||||
};
|
||||
//显示选择分组
|
||||
var showCheckGroup = (type,row) => {
|
||||
var showCheckGroup = (type, row) => {
|
||||
let rows = [row];
|
||||
if(type=='check'){
|
||||
if (type == 'check') {
|
||||
rows = getSelectionRows();
|
||||
}
|
||||
|
||||
@ -733,40 +746,40 @@ debugger;
|
||||
alert("请选择要移动的设备");
|
||||
return;
|
||||
}
|
||||
cGroupAndDevice.deviceIds=rows;
|
||||
cGroupAndDevice.deviceIds = rows;
|
||||
Status.dialogGroupVisible = true;
|
||||
|
||||
|
||||
cGroupAndDevice.groupid="";
|
||||
}
|
||||
//选中了某个分组
|
||||
var CheckGroup = (item) => {
|
||||
cGroupAndDevice.groupid = "";
|
||||
}
|
||||
//选中了某个分组
|
||||
var CheckGroup = (item) => {
|
||||
|
||||
cGroupAndDevice.groupid=item.id;
|
||||
}
|
||||
cGroupAndDevice.groupid = item.id;
|
||||
}
|
||||
|
||||
//确定选中某个分组
|
||||
var OkCheckGroup = () => {
|
||||
//确定选中某个分组
|
||||
var OkCheckGroup = () => {
|
||||
if (!cGroupAndDevice.groupid) {
|
||||
alert("请先选择分组");
|
||||
return;
|
||||
}
|
||||
CancelCheckGroup();
|
||||
deviceMoveGroup(cGroupAndDevice.groupid,cGroupAndDevice.deviceIds);
|
||||
}
|
||||
//隐藏选择分组
|
||||
var CancelCheckGroup = () => {
|
||||
deviceMoveGroup(cGroupAndDevice.groupid, cGroupAndDevice.deviceIds);
|
||||
}
|
||||
//隐藏选择分组
|
||||
var CancelCheckGroup = () => {
|
||||
Status.dialogGroupVisible = false
|
||||
}
|
||||
//将设备移动至分组
|
||||
var deviceMoveGroup = (groupid,row) => {
|
||||
}
|
||||
//将设备移动至分组
|
||||
var deviceMoveGroup = (groupid, row) => {
|
||||
let rows = [];//
|
||||
if (!row) {
|
||||
rows = getSelectionRows();
|
||||
} else {
|
||||
if(Array.isArray(row)){
|
||||
if (Array.isArray(row)) {
|
||||
rows = row;
|
||||
}else{
|
||||
} else {
|
||||
rows = [row];
|
||||
}
|
||||
|
||||
@ -791,17 +804,35 @@ debugger;
|
||||
hideloading();
|
||||
});
|
||||
// }, null, "警告");
|
||||
}
|
||||
|
||||
|
||||
let timer;
|
||||
function InputSearch() {
|
||||
clearTimeout(timer);
|
||||
// 等待 500ms 无输入后执行查询
|
||||
timer = setTimeout(() => {
|
||||
getDeviceList();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
RefreshTree();
|
||||
api.getDeviceTypeAll().then((res) => {
|
||||
if (res.code == 200) {
|
||||
deviceTypes = res.data.map(item => ({
|
||||
value: item.deviceTypeId,
|
||||
typeName: item.typeName
|
||||
}))
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main .searchBar .btnReset {
|
||||
.main .searchBar .btnReset {
|
||||
width: 76px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
@ -814,10 +845,10 @@ debugger;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0px;
|
||||
border: 1px solid rgb(2, 124, 251);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.main .searchBar .btnSearch {
|
||||
.main .searchBar .btnSearch {
|
||||
/* 组合 454 */
|
||||
width: 76px;
|
||||
height: 32px;
|
||||
@ -832,9 +863,10 @@ debugger;
|
||||
letter-spacing: 0px;
|
||||
border: none;
|
||||
margin-right: 15px;
|
||||
}
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main .searchBar {
|
||||
.main .searchBar {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
@ -843,9 +875,9 @@ debugger;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.main .toolBar .rightSearch {
|
||||
.main .toolBar .rightSearch {
|
||||
width: 295px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -853,10 +885,10 @@ debugger;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main .toolBar .gjSearch {
|
||||
.main .toolBar .gjSearch {
|
||||
/* 矩形 155 */
|
||||
width: 85px;
|
||||
height: 32px;
|
||||
@ -864,30 +896,30 @@ debugger;
|
||||
border: 1px solid rgba(2, 124, 251, 1);
|
||||
border-radius: 4px;
|
||||
color: rgba(2, 124, 251, 1);
|
||||
|
||||
cursor: pointer;
|
||||
font-family: Noto Sans SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.main .toolBar .searchContent {
|
||||
.main .toolBar .searchContent {
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
border: 1px solid rgba(189, 198, 215, 1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.main .toolBar .serchTxt {
|
||||
.main .toolBar .serchTxt {
|
||||
border: none;
|
||||
width: 175px;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.main .toolBar .btnAdd {
|
||||
.main .toolBar .btnAdd {
|
||||
background-color: #027CFB;
|
||||
color: #FFFFFF;
|
||||
width: 105px;
|
||||
@ -898,10 +930,10 @@ debugger;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.main .toolBar {
|
||||
.main .toolBar {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
overflow: hidden;
|
||||
@ -913,25 +945,25 @@ debugger;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
border-bottom: 1px solid rgba(235, 238, 248, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.nodeInput {
|
||||
.nodeInput {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border: 1px solid rgb(189, 198, 215);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.red {
|
||||
.red {
|
||||
color: #FF0000;
|
||||
}
|
||||
}
|
||||
|
||||
.green {
|
||||
.green {
|
||||
color: #0ed50e;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
.custom-tree-node {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
@ -941,14 +973,14 @@ debugger;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node.active{
|
||||
.custom-tree-node.active {
|
||||
background: rgba(228, 234, 240, 0.4) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.custom-tree-node .iconContent {
|
||||
.custom-tree-node .iconContent {
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
|
||||
@ -960,38 +992,38 @@ debugger;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node .iconContent .icon {
|
||||
.custom-tree-node .iconContent .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node-Edit .iconContent .icon {
|
||||
.custom-tree-node-Edit .iconContent .icon {
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node:hover .iconContent .icon {
|
||||
.custom-tree-node:hover .iconContent .icon {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.leftTree .treeBold {
|
||||
.leftTree .treeBold {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.leftTree .treeContent::-webkit-scrollbar {
|
||||
.leftTree .treeContent::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.leftTree .treeContent {
|
||||
.leftTree .treeContent {
|
||||
margin-top: 10px;
|
||||
height: calc(100% - 95px);
|
||||
overflow: scroll;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.leftTree .Search .txt::placeholder {
|
||||
.leftTree .Search .txt::placeholder {
|
||||
color: rgba(189, 198, 215, 1);
|
||||
|
||||
font-family: Microsoft YaHei;
|
||||
@ -999,9 +1031,9 @@ debugger;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.leftTree .Search .txt {
|
||||
.leftTree .Search .txt {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
@ -1009,18 +1041,18 @@ debugger;
|
||||
text-indent: 5px;
|
||||
line-height: 36px;
|
||||
color: rgb(96, 98, 102);
|
||||
}
|
||||
}
|
||||
|
||||
.leftTree .Search {
|
||||
.leftTree .Search {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
height: 36px;
|
||||
border: 1px solid rgba(189, 198, 215, 1);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.leftTree .head .nodeEdit {
|
||||
.leftTree .head .nodeEdit {
|
||||
color: rgba(2, 124, 251, 1);
|
||||
cursor: pointer;
|
||||
font-family: Microsoft YaHei;
|
||||
@ -1029,9 +1061,9 @@ debugger;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.leftTree .head .title {
|
||||
.leftTree .head .title {
|
||||
color: rgba(56, 64, 79, 1);
|
||||
|
||||
font-family: Microsoft YaHei;
|
||||
@ -1040,9 +1072,9 @@ debugger;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.leftTree .head {
|
||||
.leftTree .head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
@ -1052,43 +1084,42 @@ debugger;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid rgba(235, 238, 248, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.fleft {
|
||||
.fleft {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.fright {
|
||||
.fright {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.clear {
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex
|
||||
;
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.displayNone {
|
||||
.displayNone {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
input:focus {
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.H100 {
|
||||
.H100 {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.content {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 84px);
|
||||
height: calc(100vh - 84px);
|
||||
@ -1097,9 +1128,9 @@ debugger;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 20px;
|
||||
font-family: 'Microsoft YaHei';
|
||||
}
|
||||
}
|
||||
|
||||
.leftTree {
|
||||
.leftTree {
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
@ -1108,9 +1139,9 @@ debugger;
|
||||
margin-right: 15px;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
.main {
|
||||
width: calc(82% - 15px);
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
@ -1118,9 +1149,9 @@ debugger;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.moveDev {
|
||||
.moveDev {
|
||||
margin-right: 10px;
|
||||
color: rgba(2, 124, 251, 1);
|
||||
|
||||
@ -1128,9 +1159,9 @@ debugger;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.delDev {
|
||||
.delDev {
|
||||
color: rgba(224, 52, 52, 1);
|
||||
|
||||
font-family: Noto Sans SC;
|
||||
@ -1139,13 +1170,13 @@ debugger;
|
||||
|
||||
letter-spacing: 0px;
|
||||
|
||||
}
|
||||
|
||||
.gridTool {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
:deep .el-tree-node__content{
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.gridTool {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
:deep .el-tree-node__content {
|
||||
height: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user