Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交更改

Browse Source
This commit is contained in:
zhujiyan
2024-07-12 16:55:10 +08:00
parent 85c76e078d
commit b7547be989
10 changed files with 1151 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -25,6 +25,7 @@
"file-saver": "v2.0.5",
"html2canvas": "^1.4.1",
"jquery": "^3.7.1",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"luckyexcel": "v1.0.1",
"mitt": "^3.0.1",

13
pnpm-lock.yaml generated
View File

@@ -43,7 +43,7 @@ importers:
version: echarts@4.9.0
element-plus:
specifier: ^2.7.5
version: 2.7.5(vue@3.3.13(typescript@5.3.3))
version: 2.7.6(vue@3.3.13(typescript@5.3.3))
exceljs:
specifier: v4.4.0
version: 4.4.0
@@ -56,6 +56,9 @@ importers:
jquery:
specifier: ^3.7.1
version: 3.7.1
lodash:
specifier: ^4.17.21
version: 4.17.21
lodash-es:
specifier: ^4.17.21
version: 4.17.21
@@ -1007,8 +1010,8 @@ packages:
electron-to-chromium@1.4.616:
resolution: {integrity: sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==}
element-plus@2.7.5:
resolution: {integrity: sha512-e4oqhfRGBpdblgsjEBK+tA2+fg1H1KZ2Qinty1SaJl0X49FrMLK0lpXQNheWyBqI4V/pyjVOF9sRjz2hfyoctw==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.7.5.tgz}
element-plus@2.7.6:
resolution: {integrity: sha512-36sw1K23hYjgeooR10U6CiCaCp2wvOqwoFurADZVlekeQ9v5U1FhJCFGEXO6i/kZBBMwsE1c9fxjLs9LENw2Rg==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.7.6.tgz}
peerDependencies:
vue: ^3.2.0
@@ -2753,7 +2756,7 @@ snapshots:
electron-to-chromium@1.4.616: {}
element-plus@2.7.5(vue@3.3.13(typescript@5.3.3)):
element-plus@2.7.6(vue@3.3.13(typescript@5.3.3)):
dependencies:
'@ctrl/tinycolor': 3.6.1
'@element-plus/icons-vue': 2.3.1(vue@3.3.13(typescript@5.3.3))
@@ -3353,7 +3356,7 @@ snapshots:
use-element-plus-theme@0.0.5(@types/node@20.10.5)(rollup@4.9.1)(typescript@5.3.3)(vite@5.0.10(@types/node@20.10.5)(sass@1.69.5)):
dependencies:
element-plus: 2.7.5(vue@3.3.13(typescript@5.3.3))
element-plus: 2.7.6(vue@3.3.13(typescript@5.3.3))
vite-plugin-dts: 3.7.0(@types/node@20.10.5)(rollup@4.9.1)(typescript@5.3.3)(vite@5.0.10(@types/node@20.10.5)(sass@1.69.5))
vue: 3.3.13(typescript@5.3.3)
transitivePeerDependencies:

1
src/components/tree/govern/deviceInfoTree.vue
View File

@@ -77,6 +77,7 @@ const getTreeList = (list:any) => {
item3.color = config.getColorVal('elementUiPrimary')
if (item3.comFlag === 1) {
item3.color = '#e26257 !important'
item3.color = item3.comFlag == 3 ? '#e26257 !important' : config.getColorVal('elementUiPrimary')
}
arr.push(item3)
})

5
src/components/tree/govern/deviceTree.vue
View File

@@ -58,9 +58,10 @@ getDeviceTree().then(res => {
item.icon = 'el-icon-Platform'
item.color = config.getColorVal('elementUiPrimary')
item.color = '#e26257 !important'
item.color = item.comFlag === 3 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-Platform'
item2.color = config.getColorVal('elementUiPrimary')
item2.color = item2.comFlag === 3 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
// item2.children.forEach((item3: any) => {
// item3.icon = 'el-icon-Platform'
// item3.color = config.getColorVal('elementUiPrimary')
@@ -76,7 +77,7 @@ getDeviceTree().then(res => {
tree.value = res.data
nextTick(() => {
if (arr.length) {
console.log(treRef.value.treeRef1,"99999999");
console.log(treRef.value.treeRef1, '99999999')
treRef.value.treeRef1.setCurrentKey(arr[0].id)
// 注册父组件事件
emit('init', {

8
src/components/tree/govern/pointTree.vue
View File

@@ -43,10 +43,12 @@ getLineTree().then(res => {
item.children.forEach((item: any) => {
item.icon = 'el-icon-Platform'
item.color = config.getColorVal('elementUiPrimary')
console.log(item.comFlag,"88888");
item.color = item.comFlag === 3 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-Platform'
item2.color = config.getColorVal('elementUiPrimary')
item2.color = '#e26257 !important'
item2.icon = 'el-icon-Platform'
console.log(item2.comFlag,"88888");
item2.color = item2.comFlag === 3 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
arr2.push(item2)
})
})

4
src/components/tree/point.vue
View File

@@ -34,7 +34,7 @@
<el-collapse accordion v-model="activeName" style="flex: 1; overflow: auto" @change="changeDevice">
<el-collapse-item title="治理设备" :name="0">
<el-tree
style="min-height: calc(100vh - 250px)"
style="min-height: calc(100vh - 250px)"
ref="treeRef1"
:props="defaultProps"
highlight-current
@@ -59,7 +59,7 @@
</el-collapse-item>
<el-collapse-item title="便携式设备" :name="1">
<el-tree
style="min-height: calc(100vh - 250px)"
style="min-height: calc(100vh - 250px)"
ref="treeRef2"
:props="defaultProps"
highlight-current

682
src/views/govern/device/planData/components/popup.vue
View File

@@ -1,175 +1,29 @@
<template>
<el-dialog
class="cn-operate-dialog device-manage-popup"
v-model="dialogVisible"
:title="title"
draggable
:style="{ width: activeFormIndex == 0 || activeFormIndex == 1 ? '500px' : '1300px' }"
:style="{ width: activeFormIndex == 0 || activeFormIndex == 1 ? '500px' : '1100px' }"
>
<!-- 新增方案数据 -->
<el-form
:model="form"
scroll-to-error
class="form-one"
label-width="140px"
:rules="rules1"
ref="ruleFormRef1"
v-if="activeFormIndex == 0 || activeFormIndex == 1"
>
<!-- 新增方案数据 -->
<div class="form-one">
<el-form-item label="方案名称：" prop="itemName">
<el-input v-model="form.itemName" placeholder="请输入方案名称" />
</el-form-item>
<el-form-item label="方案描述：" prop="describe">
<el-input type="textarea" v-model="form.describe" placeholder="请输入方案描述" />
</el-form-item>
</div>
<el-form-item label="方案名称：" prop="itemName">
<el-input v-model="form.itemName" placeholder="请输入方案名称" />
</el-form-item>
<el-form-item label="方案描述：" prop="describe">
<el-input type="textarea" v-model="form.describe" placeholder="请输入方案描述" />
</el-form-item>
</el-form>
<!-- <el-collapse accordion v-model="activeTab" v-show="activeFormIndex != 0" style="width: 100%"> -->
<!-- <el-collapse-item title="测试项信息" :name="0">
<div v-if="activeFormIndex != 0">
<div class="form-two monitor" v-for="(item, index) in form?.records" :key="index">
<el-form :model="form" scroll-to-error class="form-one" label-width="120px">
<el-form-item label="测试项名称：">
<el-input v-model="item.itemName" placeholder="请输入测试项名称" />
</el-form-item>
<el-form-item label="测量间隔：">
<el-select
v-model="item.statisticalInterval"
placeholder="请选择测量间隔"
clearable
style="width: 100%"
>
<el-option
v-for="(item, index) in statisticalIntervalList"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="电压等级：">
<el-select
v-model="item.voltageLevel"
placeholder="请选择电压等级"
clearable
style="width: 100%"
>
<el-option
v-for="(item, index) in voltageLevelList"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="接线方式：">
<el-select
v-model="item.volConType"
placeholder="请选择接线方式"
clearable
style="width: 100%"
>
<el-option
v-for="(item, index) in volConTypeList"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="最小短路容量：">
<el-input
v-model="item.capacitySscmin"
oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
autocomplete="off"
placeholder="请选择最小短路容量"
>
<template #append>MVA</template>
</el-input>
</el-form-item>
<el-form-item label="用户协议容量：">
<el-input
v-model="item.capacitySi"
autocomplete="off"
oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
placeholder="请输入用户协议容量"
>
<template #append>MVA</template>
</el-input>
</el-form-item>
<el-form-item label="基准短路容量：">
<el-input
v-model="item.capacitySscb"
oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
placeholder="请输入基准短路容量"
>
<template #append>MVA</template>
</el-input>
</el-form-item>
<el-form-item label="供电设备容量：">
<el-input
v-model="item.capacitySt"
oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
placeholder="请输入供电设备容量"
>
<template #append>MVA</template>
</el-input>
</el-form-item>
<el-form-item label="PT变比：" prop="pt">
<el-input
style="width: 48%"
v-model="item.pt"
autocomplete="off"
placeholder="请输入PT变比"
oninput="value=value.replace(/[^0-9.]/g,'')"
/>
<el-input
style="width: 48%"
v-model="item.pt1"
autocomplete="off"
placeholder="请输入PT变比"
oninput="value=value.replace(/[^0-9.]/g,'')"
/>
</el-form-item>
<el-form-item label="CT变比：" prop="ct">
<el-input
v-model="item.ct"
style="width: 48%"
autocomplete="off"
oninput="value=value.replace(/[^0-9.]/g,'')"
placeholder="请输入CT变比"
/>
<el-input
v-model="item.ct1"
style="width: 48%"
autocomplete="off"
oninput="value=value.replace(/[^0-9.]/g,'')"
placeholder="请输入CT变比"
/>
</el-form-item>
<el-form-item label="监测位置：" style="width: 100%">
<el-input type="textarea" v-model="item.location" placeholder="请输入监测位置" />
</el-form-item>
</el-form>
</div>
</div>
</el-collapse-item> -->
<!-- <el-collapse-item title="数据绑定" :name="1"> -->
<!-- 测试项信息&数据绑定页面 -->
<el-tabs type="border-card" v-model="activeName" v-if="activeFormIndex != 0 && activeFormIndex != 1">
<el-tab-pane label="测试项信息" :name="0">
<!-- <div class="form-two monitor" v-for="(item, index) in form?.records" :key="index"> -->
<el-form
:model="form1"
ref="ruleFormRef2"
@@ -202,6 +56,7 @@
placeholder="请选择电压等级"
clearable
style="width: 100%"
@change="changeVoltageLevel"
>
<el-option
v-for="(item, index) in voltageLevelList"
@@ -311,105 +166,56 @@
<el-input type="textarea" v-model="form1.location" placeholder="请输入监测位置" />
</el-form-item>
</el-form>
<!-- </div> -->
</el-tab-pane>
<el-tab-pane label="已绑定数据" :name="1" v-if="tableData && tableData.length != 0">
<div class="device_info" style="width: 100%">
<!-- <el-button type="primary" @click="addFlag = true" v-if="!addFlag">新增</el-button> -->
<div class="button_info">
<el-popconfirm
confirm-button-text="是"
cancel-button-text="否"
icon-color="#626AEF"
width="200"
title="是否确认移除所选数据？"
@confirm="handleDelete('')"
@cancel="cancelDelete"
>
<template #reference>
<el-button type="danger" :disabled="checkedList.length == 0" v-if="!addFlag">
移除
</el-button>
</template>
</el-popconfirm>
</div>
<div class="device-manage" v-loading="loading">
<vxe-table
v-bind="defaultAttribute"
:data="tableData"
height="420"
style="width: 100%; margin-top: 10px"
ref="checkedTableRef"
@checkbox-all="selectChangeEvent"
@checkbox-change="selectChangeEvent"
>
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column type="seq" width="40"></vxe-column>
<vxe-column field="itemName" title="名称"></vxe-column>
<vxe-column field="devName" title="设备名称"></vxe-column>
<vxe-column field="devMac" title="设备MAC"></vxe-column>
<vxe-column field="devNdId" title="网络识别码"></vxe-column>
<vxe-column field="lineName" title="线路号"></vxe-column>
<vxe-column field="startTime" title="开始时间"></vxe-column>
<vxe-column field="endTime" title="结束时间"></vxe-column>
<vxe-column title="操作" width="120" fixed="right">
<template #default="{ row }">
<el-popconfirm
width="150"
confirm-button-text="是"
cancel-button-text="否"
icon-color="#626AEF"
title="是否确认移除？"
@confirm="handleDelete(row)"
@cancel="cancelDelete"
>
<template #reference>
<el-button type="danger" text size="small">移除</el-button>
</template>
</el-popconfirm>
</template>
</vxe-column>
</vxe-table>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="数据绑定" :name="2">
<div class="button_info">
<el-popconfirm
confirm-button-text="是"
cancel-button-text="否"
icon-color="#626AEF"
width="200"
title="是否确认绑定所选数据？"
@confirm="addDeviceData"
@cancel="cancelDelete"
>
<template #reference>
<el-button type="primary" :disabled="tableStore.table.selection.length == 0">
数据绑定
</el-button>
</template>
</el-popconfirm>
</div>
<div class="device_info add_device" style="width: 100%">
<div class="device-manage" v-loading="loading">
<deviceInfoTree
<!-- <TreeTransfer
style="margin-top: 20px"
ref="treeTransferRef"
node-key="id"
:fromData="unBindList"
:toData="bindList"
:defaultProps="{ label: 'name', value: 'id' }"
:title="['未绑定', '已绑定']"
/> -->
<TreeTransfers :fromData="unBindList" :toData="bindList" @getData="getData" />
<div class="device_info" v-show="false">
<div class="left_device">
<p>未绑定</p>
<deviceInfoTree1
:showCheckbox="true"
:default-checked-keys="defaultCheckedKeys"
@checkChange="checkChange"
ref="deviceInfoTreeRef"
></deviceInfoTree>
<div class="device-manage-right">
<TableHeader datePicker ref="TableHeaderRef"></TableHeader>
<Table ref="tableRef" />
</div>
@checkChange="checkChange1"
ref="deviceInfoTreeRef1"
style="height: 320px; width: 390px; border: 0"
></deviceInfoTree1>
</div>
<div class="center_bind">
<el-button
type="primary"
@click="handleUnBind"
:disabled="selectedBindList.length == 0"
:icon="ArrowLeft"
>
解绑
</el-button>
<el-button type="primary" @click="handleBind" :disabled="selectedUnBindList.length == 0">
绑定
<el-icon><ArrowRight /></el-icon>
</el-button>
</div>
<div class="right_device">
<p>已绑定</p>
<deviceInfoTree2
:showCheckbox="true"
:default-checked-keys="defaultCheckedKeys"
@checkChange="checkChange2"
ref="deviceInfoTreeRef2"
style="height: 320px; width: 390px; border: 0"
></deviceInfoTree2>
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- </el-collapse-item> -->
<!-- </el-collapse> -->
<template #footer="">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
@@ -417,20 +223,23 @@
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject, defineEmits, provide, nextTick } from 'vue'
import { ref, inject, defineEmits, provide, nextTick, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Minus, Message } from '@element-plus/icons-vue'
import { Plus, Minus, Message, ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
import { addPlan, addRecord, updateRecord, getDeviceList, addDevice, delDevice } from '@/api/cs-device-boot/planData'
import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import deviceInfoTree from '@/components/tree/govern/deviceInfoTree.vue'
import deviceInfoTree1 from '@/components/tree/govern/deviceInfoTree.vue'
import deviceInfoTree2 from '@/components/tree/govern/deviceInfoTree.vue'
import { mainHeight } from '@/utils/layout'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import TreeTransfer from './treeTransfer.vue'
import TreeTransfers from './treeTransfers.vue'
const dictData = useDictData()
const dialogVisible = ref(false)
const voltageLevelList = dictData.getBasicData('Dev_Voltage')
const voltageLevelList = dictData.getBasicData('Dev_Voltage_Stand')
const volConTypeList = dictData.getBasicData('Dev_Connect')
const emit = defineEmits(['onSubmit'])
//表单数据
@@ -486,7 +295,46 @@ const initForm = () => {
ct1: 5, //ct变比2
location: '' //监测位置
}
changeVoltageLevel()
}
const codeValue = (val: any) => {
return (
voltageLevelList.find((item: any) => {
return item.code == val
})?.value * 1
)
}
//改变电压等级计算基准短路容量
const changeVoltageLevel = async () => {
let value: any =
voltageLevelList.find((item: any) => {
return item.id == form1.value.voltageLevel
})?.value * 1
if (value < codeValue('6kV')) {
form1.value.capacitySscb = 10
} else if (value < codeValue('20kV')) {
form1.value.capacitySscb = 100
} else if (value < codeValue('35kV')) {
form1.value.capacitySscb = 200
} else if (value < codeValue('66kV')) {
form1.value.capacitySscb = 250
} else if (value < codeValue('110kV')) {
form1.value.capacitySscb = 500
} else if (value < codeValue('220kV')) {
form1.value.capacitySscb = 750
} else if (value < codeValue('330kV')) {
form1.value.capacitySscb = 2000
} else if (value < codeValue('500kV')) {
form1.value.capacitySscb = 3000
} else if (value < codeValue('750kV')) {
form1.value.capacitySscb = 4500
} else if (value < codeValue('1000kV')) {
form1.value.capacitySscb = 7000
} else {
form1.value.capacitySscb = 9000
}
}
initForm()
//方案校验规则
const rules1 = ref({
@@ -602,9 +450,9 @@ const details = (val: any) => {
}
//修改测试项回显
if (activeFormIndex.value == 3) {
if(val.records[0]&& val.records.length != 0 ){
if (val.records[0] && val.records.length != 0) {
form1.value = JSON.parse(JSON.stringify(val.records[0]))
}else{
} else {
initForm()
}
}
@@ -612,6 +460,10 @@ const details = (val: any) => {
initForm()
}
}
//未绑定数据tree
const unBindList = ref([])
//已绑定数据tree
const bindList = ref([])
//0 新增方案 1 修改方案 2 新增测试项 3 修改测试项 4 设备信息
const open = async (val: any, id: any) => {
activeFormIndex.value = val
@@ -627,19 +479,160 @@ const open = async (val: any, id: any) => {
// getDeviceList({ id: id, isTrueFlag: 0, pageNum: 1, pageSize: 200 }).then(res => {})
dialogVisible.value = true
selectId.value = id
//1 列表 0树
//获取树形数据
//0未绑定数据 1 已绑定数据
//获取未绑定树形数据
getDeviceList({ id: id, isTrueFlag: 0 }).then(res => {
deviceInfoTreeRef.value.getTreeList(res.data)
deviceInfoTreeRef1.value.getTreeList(res.data)
unBindList.value = res.data
})
//获取已绑定树形数据
getDeviceList({ id: id, isTrueFlag: 1 }).then(res => {
deviceInfoTreeRef2.value.getTreeList(res.data)
bindList.value = res.data
})
//查绑定测试项列表
getSelectedTable(id)
//查新增列表
await tableStore.index()
// getSelectedTable(id)
nextTick(() => {
console.log(unBindList.value, bindList.value, '000000')
// treeTransferRef.value.initData(unBindList.value, bindList.value)
})
activeName.value = 0
}
}
//获取选择的绑定的数据
const checkedIdList: any = ref([])
const getData = (rightData: any) => {
checkedIdList.value = []
if (rightData && rightData.length != 0) {
rightData.map((item: any) => {
item.children.map((vv: any) => {
vv.children.map((kk: any) => {
checkedIdList.value.push(kk.id)
})
})
})
}
checkedIdList.value = [...new Set(checkedIdList.value)]
console.log(checkedIdList.value, '++++++++++++++处理好的id')
}
//未绑定数据变化时处理
const unBindListChange = () => {
//判断未绑定是否跟绑定的数据有重复的，如果有，则删除绑定的数据
unBindList.value.map((item: any) => {
bindList.value.map((vv: any, vvIndex: any) => {
if (vv == item) {
bindList.value.splice(vvIndex, 1)
}
// if(vv.children&&vv.children.length!=0&&item.children&&item.children.length!=0){
// if(vv.children==item.children){
// bindList.value.splice(vvIndex,1);
// }
// vv.children.map((vv1:any)=>{
// })
// }
})
})
}
//已绑定数据变化时处理
const bindListChange = () => {
//判断未绑定是否跟绑定的数据有重复的，如果有，则删除绑定的数据
bindList.value.map((item: any) => {
unBindList.value.map((vv: any, vvIndex: any) => {
if (vv == item) {
unBindList.value.splice(vvIndex, 1)
}
// if(vv.children&&vv.children.length!=0&&item.children&&item.children.length!=0){
// if(vv.children==item.children){
// bindList.value.splice(vvIndex,1);
// }
// vv.children.map((vv1:any)=>{
// })
// }
})
})
}
//解绑---选择已绑定的数据添加到未绑定的数组里面，已绑定的数组删除选择的数据
const handleUnBind = () => {
console.log(unBindList.value, '000000000000解绑')
selectedBindList.value.map((sel: any) => {
unBindList.value.map((item: any) => {
//如果选择的已绑定的id跟现有未绑定的数据id相等
if (sel.id && item.id && sel.id == item.id) {
if (item.children && sel.children) {
item.children = [...sel.children, ...item.children]
item.children = [...new Set(item.children)]
}
}
//如果选择的已绑定的id和现有未绑定的数据id不相等
if (sel.pid && item.id && !sel.children) {
//从已绑定的数组里面查找到这条数据
bindList.value.map((b: any, b_index: any) => {
if (b.children && b.children.length != 0) {
b.children.map((b_c: any, b_c_index: any) => {
if (b_c.children && b_c.children.length != 0) {
b_c.children.map((b_c_c: any, b_c_c_index: any) => {
if (b_c_c.pid == sel.pid && b_c_c.id == sel.id) {
let obj = JSON.parse(JSON.stringify(b))
unBindList.value.push(b)
unBindList.value = [...new Set(unBindList.value)]
// b.children.splice(b_c_index, 1)
// b.c.children.splice(b_c_c_index, 1)
unBindListChange()
} else {
return
}
})
}
})
}
})
}
})
})
}
//绑定---选择未绑定的数据添加到已绑定的数组里面，未绑定的数组删除选择的数据
const handleBind = () => {
console.log(bindList.value, '000000000000绑定')
selectedUnBindList.value.map((sel: any) => {
console.log(sel, '绑定')
bindList.value.map((item: any) => {
//如果选择的已绑定的id跟现有未绑定的数据id相等
if (sel.id && item.id && sel.id == item.id) {
if (item.children && sel.children) {
item.children = [...sel.children, ...item.children]
item.children = [...new Set(item.children)]
}
}
//如果选择的已绑定的id和现有未绑定的数据id不相等
if (sel.pid && item.id && !sel.children) {
//从未绑定的数组里面查找到这条数据
unBindList.value.map((b: any, b_index: any) => {
if (b.children && b.children.length != 0) {
b.children.map((b_c: any, b_c_index: any) => {
if (b_c.children && b_c.children.length != 0) {
b_c.children.map((b_c_c: any, b_c_c_index: any) => {
if (b_c_c.pid == sel.pid && b_c_c.id == sel.id) {
let obj = JSON.parse(JSON.stringify(b))
bindList.value.push(b)
bindList.value = [...new Set(bindList.value)]
// b.children.splice(b_c_index, 1)
// b.c.children.splice(b_c_c_index, 1)
bindListChange()
} else {
return
}
})
}
})
}
})
}
})
})
}
const loading = ref(false)
const defaultCheckedKeys: any = ref([])
const tableData = ref([])
@@ -648,8 +641,22 @@ defineOptions({
})
const treeIds: any = ref([])
const pids: any = ref([])
//绑定选择的数据
const selectedBindList: any = ref([])
//未绑定选择的数据
const selectedUnBindList: any = ref([])
//未绑定树节点变化时处理数据
const checkChange1 = (data: any) => {
selectedUnBindList.value = data.data
}
//已绑定树节点变化时处理数据
const checkChange2 = (data: any) => {
selectedBindList.value = data.data
}
//树节点选择变化的时候处理树节点选中数据
const checkChange = async (data: any) => {
return
treeIds.value = []
pids.value = []
// if (data.checked) {
@@ -677,111 +684,15 @@ const checkChange = async (data: any) => {
}
treeIds.value = [...new Set(treeIds.value)]
pids.value = [...new Set(pids.value)]
await tableStore.index()
// await tableStore.index()
}
const deviceInfoTreeRef = ref()
const deviceInfoTreeRef1 = ref()
const deviceInfoTreeRef2 = ref()
//判断是否显示新增页面 false显示详情页面和删除按钮隐藏确定按钮 true显示新增页面与确定按钮隐藏删除按钮
const addFlag = ref(false)
const selectId: any = ref('')
//查绑定测试项列表
const getSelectedTable = async (id: any) => {
//新增传0已绑定传1
await getDeviceList({ id: id, isTrueFlag: 1, pageNum: 1, pageSize: 1000 }).then(res => {
tableData.value = res.data.records
})
}
//新增设备列表
const tableStore = new TableStore({
url: '/cs-device-boot/wlRecord/queryPage',
publicHeight: 260,
method: 'POST',
column: [
{ width: '40', type: 'checkbox', fixed: 'left' },
{ title: '序号', type: 'seq', width: 60 },
{ field: 'itemName', title: '名称', minWidth: 170 },
{ field: 'devName', title: '设备名称', minWidth: 170 },
{ field: 'lineName', title: '线路号', minWidth: 170 },
{ field: 'startTime', title: '开始时间', minWidth: 170 },
{ field: 'endTime', title: '结束时间', minWidth: 170 }
],
beforeSearchFun: () => {
tableStore.table.params.id = selectId.value
//新增传0已绑定传1
tableStore.table.params.isTrueFlag = 0
tableStore.table.params.treeIds = treeIds.value
tableStore.table.params.pids = pids.value
}
})
tableStore.table.params.treeIds = []
tableStore.table.params.pids = []
provide('tableStore', tableStore)
const tableRef = ref()
//删除设备
const checkedTableRef = ref()
//判断是否选择了设备数据
const checkedList: any = ref([])
/*
* 记录选择的项
*/
const selectChangeEvent = (checked: any) => {
checkedList.value = checkedTableRef.value.getCheckboxRecords()
}
//添加绑定设备
const addDeviceData = async () => {
//选择的数据
let deviceIds = []
if (tableStore.table.selection.length != 0) {
tableStore.table.selection.map(item => {
deviceIds.push(item.id)
})
const addForm = {
id: selectId.value,
list: deviceIds
}
await addDevice(addForm).then(res => {
if (res.code == 'A0000') {
ElMessage.success('绑定成功')
getSelectedTable(selectId.value)
//清除树节点选择状态
defaultCheckedKeys.value = []
//刷新新增列表状态
tableStore.index()
addFlag.value = false
}
})
} else {
ElMessage.warning('请选择设备信息')
}
}
//移除绑定的设备
const handleDelete = (row: any) => {
let list = []
//单选删除
if (row) {
list.push(row.id)
}
//批量删除
else {
checkedTableRef.value.getCheckboxRecords().length != 0
? checkedTableRef.value.getCheckboxRecords().map((item: any) => {
list.push(item.id)
})
: (list = [])
}
if (list.length != 0) {
delDevice({ id: selectId.value, list: list }).then(res => {
if (res.code == 'A0000') {
ElMessage.success('移除成功')
activeName.value = tableData.value.length == 0 ? 0 : 2
getSelectedTable(selectId.value)
}
})
}
}
const cancelDelete = () => {
console.log('取消')
}
//关闭
const ruleFormRef1 = ref()
const ruleFormRef2 = ref()
@@ -792,7 +703,6 @@ const close = () => {
if (addFlag.value) {
addFlag.value = false
checkedList.value = []
checkedTableRef.value.clearCheckboxRow()
} else {
dialogVisible.value = false
}
@@ -805,6 +715,8 @@ const close = () => {
}
//tabs
activeName.value = 0
unBindList.value = []
bindList.value = []
initForm()
}
//提交
@@ -850,13 +762,14 @@ const submit = () => {
if (activeFormIndex.value == 2) {
ruleFormRef2.value.validate(valid => {
if (valid) {
const subForm = {
let subForm = {
id: planId.value,
records: [form1.value]
}
subForm.list = tableData.value.map(item => {
return item.id
})
// subForm.list = tableData.value.map(item => {
// return item.id
// })
subForm.records[0].list = checkedIdList.value
addRecord(subForm).then(res => {
ElMessage.success('新增测试项成功')
initForm()
@@ -875,9 +788,10 @@ const submit = () => {
// ...form1.value
// }
let subForm = JSON.parse(JSON.stringify(form1.value))
subForm.list = tableData.value.map(item => {
return item.id
})
// subForm.list = tableData.value.map(item => {
// return item.id
// })
subForm.list = checkedIdList.value
updateRecord(subForm).then(res => {
ElMessage.success('修改测试项成功')
initForm()
@@ -902,32 +816,36 @@ defineExpose({ open, details })
width: 100% !important;
}
}
.monitor {
position: relative;
padding: 10px 50px;
.monitor_add {
position: absolute;
right: 5px;
top: 10px;
}
}
.button_info {
width: 100%;
display: flex;
justify-content: flex-end;
margin: 10px 0;
}
.add_device {
// display: flex;
// justify-content: space-between;
// align-items: center;
}
.device-manage {
.device_info {
width: 100%;
height: 100%;
display: flex;
.device-manage-right {
// justify-content: space-between;
.left_device,
.right_device {
width: 410px;
border: 1px solid #eee;
padding-right: 10px;
p {
margin: 10px 10px 0 10px;
font-weight: 800;
font-size: 14px;
}
}
.center_bind {
flex: 1;
display: flex;
padding: 0 30px;
align-items: center;
justify-content: center;
}
}
</style>

555
src/views/govern/device/planData/components/treeTransfer.vue Normal file
View File

@@ -0,0 +1,555 @@
<!-- eslint-disable vue/no-unused-vars -->
<template>
<div class="treeTransfer">
<!-- 左边 -->
<div class="leftTree">
<p class="left_title">{{ props.title[0] }}</p>
<div class="list">
<div class="left_lowline">
<!-- <el-checkbox
v-model="checkedLeft"
:disabled="leftTreeData.length < 1"
label=""
size="large"
style="margin-right: 12px"
@change="leftAllCheck"
/> -->
</div>
<!-- 搜索 -->
<div class="left_input">
<el-input
v-model="leftSearchText"
class="w-50"
placeholder="请输入"
clearable
prefix-icon="el-icon-search"
@clear="onSearchLeft"
@keyup.enter="onSearchLeft"
@change="onSearchLeft"
/>
</div>
<div style="overflow: auto; flex: 1; margin-top: 10px">
<el-tree
ref="leftTreeRef"
:filter-node-method="filterNode"
:data="leftTreeData"
show-checkbox
:node-key="props.nodeKey"
:props="props.defaultProps"
v-slot="{ node, data }"
accordion
@check="onCheckLeft"
default-expand-all
>
<div>
{{ data.name }}
</div>
</el-tree>
</div>
</div>
</div>
<!-- 中间按钮 -->
<div class="btnDiv">
<div class="mg10">
<el-button @click="toRight()" type="primary" :disabled="leftOperation.length < 1">
绑定
<el-icon><ArrowRight style="width: 20px !important; height: 20px !important" /></el-icon>
</el-button>
</div>
<div class="mg10">
<el-button @click="toLeft()" type="primary" :disabled="rightOperation.length < 1">
<el-icon><ArrowLeft style="width: 20px !important; height: 20px !important" /></el-icon>
解绑
</el-button>
</div>
</div>
<!-- 右边 -->
<div class="rightTree">
<div class="list">
<p class="left_title">{{ props.title[1] }}</p>
<div class="left_lowline">
<!-- <el-checkbox
v-model="checkedRight"
:disabled="rightTreeData.length < 1"
label=""
size="large"
style="margin-right: 12px"
@change="rightAllCheck"
/> -->
</div>
<!-- 搜索 -->
<div class="left_input">
<el-input
v-model="rightSearchText"
class="w-50"
placeholder="请输入"
clearable
prefix-icon="el-icon-search"
@clear="onSearchRight"
@keyup.enter="onSearchRight"
@change="onSearchRight"
/>
</div>
<div style="overflow: auto; flex: 1; margin-top: 10px">
<el-tree
:filter-node-method="filterNode"
ref="rightTreeRef"
:data="rightTreeData"
show-checkbox
:node-key="props.nodeKey"
:props="props.defaultProps"
v-slot="{ node, data }"
accordion
@check="onCheckRight"
default-expand-all
>
<div>
{{ data.name }}
</div>
</el-tree>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
//@ts-nocheck 解决ts类型报红
import { ref, onMounted, watch } from 'vue'
import lodash from 'lodash'
const props = defineProps(['nodeKey', 'fromData', 'toData', 'defaultProps', 'title'])
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
const checkedLeft = ref(false)
const checkedRight = ref(false)
const leftSearchText = ref('')
const rightSearchText = ref('')
const leftOperation = ref<any[]>([])
const rightOperation = ref<any[]>([])
// 定义emit
const emits = defineEmits(['change'])
const leftTreeRef = ref()
const rightTreeRef = ref()
// 左侧数据
const leftTreeData = ref([])
// 右侧数据
const rightTreeData = ref([])
watch(
props,
newVal => {
leftTreeData.value = lodash.cloneDeep(newVal.fromData)
rightTreeData.value = lodash.cloneDeep(newVal.toData)
},
{ immediate: true }
)
watch(
() => leftTreeData.value,
val => {
if (val) {
val.map((item: any, index: any) => {
if (item.pid) {
val.splice(index, 1)
} else {
if (!item.children || item.children.length == 0) {
val.splice(index, 1)
} else {
item.children.map((vv: any, indexs: any) => {
console.log(vv, '-------------')
if (!vv.children || vv.children.length == 0) {
item.children.splice(indexs, 1)
item.children = [...new Set(item.children)]
}
})
}
}
})
}
},
{
immediate: true,
deep: true
}
)
watch(
() => rightTreeData.value,
val => {
if (val) {
val.map((item: any, index: any) => {
if (item.pid) {
val.splice(index, 1)
} else {
if (!item.children || item.children.length == 0) {
val.splice(index, 1)
} else {
item.children.map((vv: any, indexs: any) => {
console.log(vv, '++++++++++')
if (!vv.children || vv.children.length == 0) {
item.children.splice(indexs, 1)
item.children = [...new Set(item.children)]
}
})
}
}
})
}
},
{
immediate: true,
deep: true
}
)
watch(leftSearchText, val => {
leftTreeRef.value?.filter(val)
})
watch(rightSearchText, val => {
rightTreeRef.value?.filter(val)
})
defineExpose({
leftTreeData,
rightTreeData
})
onMounted(() => {
leftSearchText.value = ''
rightSearchText.value = ''
})
const removeChecked = (rightList, allCheckedKeys) => {
rightList.forEach((e, index) => {
if (allCheckedKeys.indexOf(e.id) == -1) {
rightList.splice(index, 1)
}
if (e.children) {
removeChecked(e.children, allCheckedKeys)
}
})
return rightList
}
const recursionTree = (parents, allCheckedKeys) => {
parents.forEach(e => {
const list = lodash.filter(e.children, child => allCheckedKeys.indexOf(child.id) >= 0)
e.children = list
if (e.children.length !== 0) {
recursionTree(e.children, allCheckedKeys)
}
})
return parents
}
const handleData = (selectedNodes, leftTree, allCheckedKeys, type) => {
console.log(selectedNodes, '选择的数据')
//右移动，获取左边选择的数据，添加到右侧
selectedNodes.map((item: any) => {
//叶子结点
//去绑定
if (item.children && item.children.length != 0 && item.pid && type == 'left') {
rightTreeData.value.map((vv: any) => {
if (vv.id == item.pid) {
vv.children.push(item)
}
vv.children = [...new Set(vv.children)]
})
}
//去解绑
if (item.children && item.children.length != 0 && item.pid && type == 'right') {
leftTreeData.value.map((vv: any) => {
if (vv.id == item.pid) {
vv.children.push(item)
}
vv.children = [...new Set(vv.children)]
})
}
})
return
console.log(selectedNodes, leftTree, allCheckedKeys, '888-888')
selectedNodes.forEach(item => {
if (item.children) {
let parent = leftTree.getNode(item.pid)
console.log(parent, parent, 'parent')
let node = item
if (parent && !leftTree.getNode(item.id) && allCheckedKeys.indexOf(item.id) > 0) {
const copyNode = lodash.cloneDeep(node)
copyNode.children = []
leftTree.append(copyNode, parent)
}
handleData(item.children, leftTree, allCheckedKeys)
} else {
let parent = leftTree.getNode(item.pid)
let node = item
if (parent && !leftTree.getNode(item.id) && allCheckedKeys.indexOf(item.id) > 0) {
leftTree.append(node, parent)
}
}
})
}
// 去右边
const toRight = async () => {
const leftTree = leftTreeRef.value
checkedLeft.value = false
if (!leftTree) {
return
}
const leftNodes = leftTree.getCheckedNodes(false, true)
//查找到有数据的父节点
const parents = leftNodes.filter(el => el.children && el.children.length > 0)
console.log(parents, '找到的父节点')
// const checkedKeys = [...new Set(leftTree.getCheckedKeys(false))]
const checkedKeys = leftTree.getCheckedKeys(false)
const halfCheckedKeys = leftTree.getHalfCheckedKeys()
const allCheckedKeys = halfCheckedKeys.concat(checkedKeys)
const rightTree = rightTreeRef.value
if (!rightTree) {
let rightList = parents.map(parent => {
const obj = lodash.omit(parent, ['children'])
obj.children = lodash.filter(parent.children, child => allCheckedKeys.indexOf(child.id) >= 0)
console.log(obj, '找到的数据275')
return obj
})
let copyRightList = lodash.cloneDeep(rightList)
removeChecked(copyRightList, allCheckedKeys)
rightTreeData.value.push(...copyRightList)
rightTreeData.value = [...new Set(rightTreeData.value)]
} else {
let isExist = false
rightTree.data.forEach(e => {
if (parents.length != 0 && parents[0].id === (e as any).id) isExist = true
})
console.log(isExist, '88')
if (!isExist) {
const overall = lodash.cloneDeep(parents)
let rightList = await recursionTree(overall, allCheckedKeys)
let copyRightList = lodash.cloneDeep(rightList)
removeChecked(copyRightList, allCheckedKeys)
rightTreeData.value.push(...copyRightList)
rightTreeData.value = [...new Set(rightTreeData.value)]
} else {
handleData(leftNodes, rightTree, allCheckedKeys, 'left')
}
}
// 移过去之后要删除原本的值
leftNodes.forEach(node => {
leftTree.setChecked(node, false, false)
if (checkedKeys.indexOf(node.id) >= 0) {
leftTree.remove(node)
}
})
leftOperation.value = formatTree(leftTree.getCheckedNodes(false) || [], 'pid', 'id')
// emits('change', leftTreeData.value, rightTreeData.value)
emits('change', checkedKeys)
setTimeout(() => {
rightTree?.setCheckedNodes(leftNodes)
rightOperation.value = formatTree(rightTree.getCheckedNodes(false) || [], 'pid', 'id')
if (lodash.isEqual(rightOperation.value, rightTreeData.value)) {
checkedRight.value = true
} else {
checkedRight.value = false
}
}, 500)
}
// // 去左边
const toLeft = async () => {
checkedRight.value = false
const rightTree = rightTreeRef.value
console.log(rightTreeData.value, '++++++++++', leftTreeData.value)
if (!rightTree) {
return
}
//获取右侧选中已绑定的节点
const rightNodes = rightTree.getCheckedNodes(false, true)
const checkedKeys = [...new Set(rightTree.getCheckedKeys(false))]
const halfCheckedKeys = rightTree.getHalfCheckedKeys()
const allCheckedKeys = halfCheckedKeys.concat(checkedKeys)
//获取有数据的节点
const parents = lodash.filter(rightNodes, item => item.children && item.children.length > 0)
const leftTree = leftTreeData.value.length ? leftTreeRef.value : null
//左侧树无数据
let leftList = parents.map(parent => {
const obj = lodash.omit(parent, ['children'])
obj.children = lodash.filter(parent.children, child => allCheckedKeys.indexOf(child.id) >= 0)
return obj
})
let copyLeftList = lodash.cloneDeep(leftList)
console.log(copyLeftList, 'copyLeftListcopyLeftListcopyLeftListcopyLeftListcopyLeftList')
copyLeftList.map((item)=>{
if(!item.pid){
leftTreeData.value.push(item)
}
// leftTreeData.value.map((vv)=>{
// if(vv.id==item.pid){
// }
// })
})
return
if (!leftTree) {
let leftList = parents.map(parent => {
const obj = lodash.omit(parent, ['children'])
obj.children = lodash.filter(parent.children, child => allCheckedKeys.indexOf(child.id) >= 0)
return obj
})
let copyLeftList = lodash.cloneDeep(leftList)
removeChecked(copyLeftList, allCheckedKeys)
leftTreeData.value.push(...copyLeftList)
leftTreeData.value = [...new Set(leftTreeData.value)]
}
//左侧树有数据
else {
let isExist = false
leftTree.data.forEach(e => {
if (parents.length != 0 && parents[0].id === (e as any).id) isExist = true
})
if (!isExist) {
const overall = lodash.cloneDeep(parents)
let leftList = await recursionTree(overall, allCheckedKeys)
let copyLeftList = lodash.cloneDeep(leftList)
console.log(copyLeftList, '5555555555555555555')
// removeChecked(copyLeftList, allCheckedKeys)
leftTreeData.value.push(...copyLeftList)
leftTreeData.value = [...new Set(leftTreeData.value)]
} else {
handleData(rightNodes, leftTree, allCheckedKeys, 'right')
}
}
console.log(rightTree, '11111111')
rightNodes.forEach(node => {
rightTree.setChecked(node, false, false)
if (checkedKeys.indexOf(node.id) >= 0) {
rightTree.remove(node)
}
})
console.log(rightTree, '2222222')
rightOperation.value = formatTree(rightTree.getCheckedNodes(false) || [], 'pid', 'id')
// emits('change', leftTreeData.value, rightTreeData.value)
emits('change', checkedKeys)
console.log(leftTreeData.value, '99999999')
}
//左侧选中（移除原本值用）
const onCheckLeft = () => {
leftOperation.value = formatTree(leftTreeRef.value?.getCheckedNodes(false) || [], 'pid', 'id')
if (lodash.isEqual(leftOperation.value, leftTreeData.value)) {
checkedLeft.value = true
} else {
checkedLeft.value = false
}
}
// 右侧选中
const onCheckRight = () => {
rightOperation.value = formatTree(rightTreeRef.value!.getCheckedNodes(false) || [], 'pid', 'id')
if (lodash.isEqual(rightOperation.value, rightTreeData.value)) {
checkedRight.value = true
} else {
checkedRight.value = false
}
}
const formatTree = (tree: any[], parentKey: string = 'pid', idKey: string = 'id') => {
// 格式化选择的树：清除全选下面的子节点
let swap,
parentIds: string[] = []
// 先找出有children的id集合，再把所有的数据做对比，只要pid和其中一个对上，就把该数据删除；
tree.forEach((item, index) => {
if (item.children) {
parentIds.push(item[idKey])
}
})
swap = tree.filter((item, index) => {
if (parentIds.indexOf(item[parentKey]) == -1) {
return item
}
})
return swap
}
const onSearchLeft = () => {
leftTreeRef.value?.filter(leftSearchText.value)
}
const leftAllCheck = () => {
const leftTree = leftTreeRef.value
if (checkedLeft.value) {
leftTree?.setCheckedNodes(leftTreeData.value)
checkedLeft.value = true
} else {
leftTree?.setCheckedNodes([])
checkedLeft.value = false
}
onCheckLeft()
}
const rightAllCheck = () => {
const rightTree = rightTreeRef.value
if (checkedRight.value) {
rightTree?.setCheckedNodes(rightTreeData.value)
checkedRight.value = true
} else {
rightTree?.setCheckedNodes([])
checkedRight.value = false
}
onCheckRight()
}
const onSearchRight = () => {
rightTreeRef.value?.filter(rightSearchText.value)
}
const filterNode = (value: string, data: any) => {
if (!value) return true
return data[props.defaultProps.label].includes(value)
}
</script>
<style lang="scss" scoped>
.treeTransfer {
display: flex;
height: 400px;
width: 100%;
.btnDiv {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.mg10 {
padding: 5px;
:deep(svg),
:deep(.el-icon) {
height: 2em !important;
width: 2em !important;
}
}
}
.leftTree {
width: 45%;
border: 1px solid rgb(182, 182, 182);
box-sizing: border-box;
padding: 5px 10px;
.list {
height: 100%;
display: flex;
flex-direction: column;
}
}
.rightTree {
border: 1px solid rgb(182, 182, 182);
box-sizing: border-box;
padding: 5px 10px;
width: 45%;
.list {
height: 100%;
display: flex;
flex-direction: column;
}
}
.left_lowline {
display: flex;
align-items: center;
}
.right_lowline {
display: flex;
align-items: center;
}
}
</style>

252
src/views/govern/device/planData/components/treeTransfers.vue Normal file
View File

@@ -0,0 +1,252 @@
<template>
<div class="transferTreeBox" v-if="leftData.length!=0||rightData.length!=0">
<!-- 左侧待选内容 -->
<div class="SelectBox">
<div class="boxTitle" @click="clickAllSelect">全选 &gt;</div>
<div class="boxCenter">
<el-tree
ref="leftTree"
default-expand-all
:data="leftData"
:props="defaultProps"
show-checkbox
node-key="id"
/>
</div>
</div>
<!-- 中间穿梭按钮 -->
<div class="transferBtn">
<div class="pickBtn" @click="towardsRight">&gt;&gt;</div>
<div class="pickBtn" @click="towardsLeft">&lt;&lt;</div>
</div>
<!-- 右侧已选内容 -->
<div class="SelectBox">
<div class="boxTitle" @click="clickCancelAllSelect">&lt; 取消全选</div>
<div class="boxCenter">
<el-tree
ref="rightTree"
default-expand-all
:data="rightData"
:props="defaultProps"
show-checkbox
node-key="id"
/>
</div>
</div>
</div>
</template>
<script>
// const mockTreeData = [
// {
// id: '1',
// label: '1',
// children: [
// {
// id: '1-1',
// label: '1-1',
// pid: '1'
// },
// {
// id: '1-2',
// label: '1-2',
// pid: '1'
// },
// {
// id: '1-3',
// label: '1-3',
// pid: '1'
// }
// ]
// },
// {
// id: '2',
// label: '2',
// children: [
// {
// id: '2-1',
// label: '2-1',
// pid: '2'
// },
// {
// id: '2-2',
// label: '2-2',
// pid: '2'
// },
// {
// id: '2-3',
// label: '2-3',
// pid: '2'
// }
// ]
// },
// {
// id: '3',
// label: '3',
// children: [
// {
// id: '3-1',
// label: '3-1',
// pid: '3'
// },
// {
// id: '3-2',
// label: '3-2',
// pid: '3'
// },
// {
// id: '3-3',
// label: '3-3',
// pid: '3'
// }
// ]
// }
// ]
export default {
layout: 'login',
props: ['fromData', 'toData'],
data() {
return {
defaultProps: {
children: 'children',
label: 'name'
},
leftData: [],
rightData: []
}
},
watch: {
fromData(val, oldVal) {
if (val) {
this.leftData = val
}
},
toData(val, oldVal) {
if (val) {
this.rightData = val
this.$emit('getData', this.rightData)
}
}
},
mounted() {
this.$forceUpdate()
this.$emit('getData', this.rightData)
},
methods: {
// 点击向右穿梭
towardsRight() {
// (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，
// 1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
this.$nextTick(() => {
const checkedNodes = this.$refs.leftTree.getCheckedNodes(false, true) // 包含半选
const checkedKeys = this.$refs.leftTree.getCheckedKeys(false)
const copyNodes = JSON.parse(JSON.stringify(checkedNodes))
copyNodes.forEach(x => {
x.children = []
if (!this.$refs.rightTree.getNode(x.id)) {
this.$refs.rightTree.append(x, x.pid)
}
})
checkedKeys.forEach(x => {
this.$refs.leftTree.remove(x)
})
this.afterToward()
this.$forceUpdate()
})
},
// 点击向左穿梭
towardsLeft() {
this.$nextTick(() => {
const checkedNodes = this.$refs.rightTree.getCheckedNodes(false, true) // 包含半选
const checkedKeys = this.$refs.rightTree.getCheckedKeys(false)
const copyNodes = JSON.parse(JSON.stringify(checkedNodes))
copyNodes.forEach(x => {
x.children = []
if (!this.$refs.leftTree.getNode(x.id)) {
this.$refs.leftTree.append(x, x.pid)
}
})
checkedKeys.forEach(x => {
this.$refs.rightTree.remove(x)
})
this.$forceUpdate()
this.afterToward()
})
console.log(this.leftData,"++++++++++176", this.$refs.rightTree);
},
// 点击全选
clickAllSelect() {
this.$refs.leftTree.setCheckedNodes(this.leftData)
this.towardsRight()
},
// 点击取消全选
clickCancelAllSelect() {
this.$refs.rightTree.setCheckedNodes(this.rightData)
this.towardsLeft()
},
// 数据穿梭后
afterToward() {
this.$refs.leftTree.setCheckedKeys([])
this.$refs.rightTree.setCheckedKeys([])
console.log(this.rightData, '00000000000000', this.leftData)
this.$emit('getData', this.rightData)
this.$forceUpdate()
}
}
}
</script>
<style lang="scss" scoped>
.transferTreeBox {
display: flex;
width: 100%;
justify-content: space-around;
.SelectBox {
border: 1px solid #ccc;
height: 500px;
width: 45%;
color: #fff;
position: relative;
.boxTitle {
background: var(--el-color-primary);
height: 30px;
line-height: 30px;
text-align: center;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.boxCenter {
height: 100%;
width: 100%;
overflow-y: scroll;
background: #fff;
}
}
.transferBtn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.pickBtn {
height: 30px;
width: 50px;
background: var(--el-color-primary);
color: #fff;
font-weight: 700;
font-size: 20px;
border-radius: 5px;
margin-top: 10px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
}
}
</style>

39
src/views/govern/device/planData/index.vue
View File

@@ -92,8 +92,8 @@
<p>历史趋势</p>
</div>
<div class="history_header">
<el-form :model="searchForm" class="history_select" id="history_select" label-width="auto">
<el-form-item label="统计指标">
<el-form :model="searchForm" class="history_select" id="history_select">
<el-form-item label="统计指标" label-width="80px">
<el-select
multiple
:multiple-limit="3"
@@ -111,8 +111,18 @@
</el-select>
</el-form-item>
<div v-for="(item, index) in countData" :key="index">
<el-form-item :label="item.name + '谐波次数'" v-if="item.countOptions.length != 0">
<el-select v-model="item.count" multiple placeholder="请选择谐波次数">
<el-form-item
:label="item.name + '谐波次数'"
v-if="item.countOptions.length != 0"
label-width="180px"
>
<el-select
v-model="item.count"
multiple
collapse-tags
collapse-tags-tooltip
placeholder="请选择谐波次数"
>
<el-option
v-for="vv in item.countOptions"
:key="vv"
@@ -122,7 +132,7 @@
</el-select>
</el-form-item>
</div>
<el-form-item label="值类型">
<el-form-item label="值类型" label-width="80px">
<el-select v-model="searchForm.type" placeholder="请选择值类型">
<el-option
v-for="item in typeOptions"
@@ -160,7 +170,6 @@ import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import * as echarts from 'echarts'
import { isNonNullChain } from 'typescript'
import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
import { read, writeFile, utils } from 'xlsx'
const dictData = useDictData()
defineOptions({
@@ -317,7 +326,7 @@ const init = async () => {
searchForm.value.index.map((item: any, indexs: any) => {
indexOptions.value.map((vv: any) => {
if (vv.id == item) {
chartTitle.value += indexs == searchForm.value.index.length - 1 ? vv.name : vv.name+ '/'
chartTitle.value += indexs == searchForm.value.index.length - 1 ? vv.name : vv.name + '/'
}
})
})
@@ -828,26 +837,26 @@ onMounted(() => {})
}
}
.monitor_info {
::v-deep .monitor_info {
width: 100%;
}
::v-deep .el-tabs__content {
padding: 0 !important;
max-height: 160px !important;
}
.el-tabs__content {
padding: 0 !important;
max-height: 160px !important;
}
}
.history_header {
display: flex;
// flex-wrap: wrap;
#history_select {
width: 90%;
width: 95%;
display: flex;
justify-content: flex-start;
overflow: auto;
// flex-wrap: wrap;
.el-form-item {
flex: none;
width: 380px !important;
max-width: 380px !important;
}
.el-select {
margin-right: 10px;