提交更改

package.json

@@ -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",

pnpm-lock.yaml

@@ -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:
+  element-plus@2.7.6:
-    resolution: {integrity: sha512-e4oqhfRGBpdblgsjEBK+tA2+fg1H1KZ2Qinty1SaJl0X49FrMLK0lpXQNheWyBqI4V/pyjVOF9sRjz2hfyoctw==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.7.5.tgz}
+    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:

src/components/tree/govern/deviceInfoTree.vue

@@ -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)
             })

src/components/tree/govern/deviceTree.vue

@@ -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', {

src/components/tree/govern/pointTree.vue

@@ -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')
+                console.log(item2.comFlag,"88888");
-                    item2.color = '#e26257 !important'
+                    item2.color = item2.comFlag === 3 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                     arr2.push(item2)
                 })
             })

src/views/govern/device/planData/components/popup.vue

@@ -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>
-        <!-- <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">
+                <!-- <TreeTransfer
-                    <el-popconfirm
+                    style="margin-top: 20px"
-                        confirm-button-text="是"
+                    ref="treeTransferRef"
-                        cancel-button-text="否"
+                    node-key="id"
-                        icon-color="#626AEF"
+                    :fromData="unBindList"
-                        width="200"
+                    :toData="bindList"
-                        title="是否确认绑定所选数据？"
+                    :defaultProps="{ label: 'name', value: 'id' }"
-                        @confirm="addDeviceData"
+                    :title="['未绑定', '已绑定']"
-                        @cancel="cancelDelete"
+                /> -->
-                    >
+                <TreeTransfers :fromData="unBindList" :toData="bindList" @getData="getData" />
-                        <template #reference>
+                <div class="device_info" v-show="false">
-                            <el-button type="primary" :disabled="tableStore.table.selection.length == 0">
+                    <div class="left_device">
-                                数据绑定
+                        <p>未绑定</p>
-                            </el-button>
+                        <deviceInfoTree1
-                        </template>
-                    </el-popconfirm>
-                </div>
-
-                <div class="device_info add_device" style="width: 100%">
-                    <div class="device-manage" v-loading="loading">
-                        <deviceInfoTree
                             :showCheckbox="true"
                             :default-checked-keys="defaultCheckedKeys"
-                            @checkChange="checkChange"
+                            @checkChange="checkChange1"
-                            ref="deviceInfoTreeRef"
+                            ref="deviceInfoTreeRef1"
-                        ></deviceInfoTree>
+                            style="height: 320px; width: 390px; border: 0"
-                        <div class="device-manage-right">
+                        ></deviceInfoTree1>
-                            <TableHeader datePicker ref="TableHeaderRef"></TableHeader>
-                            <Table ref="tableRef" />
                     </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)
+        // getSelectedTable(id)
-        //查新增列表
+
-        await tableStore.index()
+        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 => {
+                // subForm.list = tableData.value.map(item => {
-                    return item.id
+                //     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 => {
+                // subForm.list = tableData.value.map(item => {
-                    return item.id
+                //     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;
+.device_info {
-    // justify-content: space-between;
-    // align-items: center;
-}
-.device-manage {
     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>

src/views/govern/device/planData/components/treeTransfer.vue

@@ -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>

src/views/govern/device/planData/components/treeTransfers.vue

@@ -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>

src/views/govern/device/planData/index.vue

@@ -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 :model="searchForm" class="history_select" id="history_select">
-                    <el-form-item label="统计指标">
+                    <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-form-item
-                            <el-select v-model="item.count" multiple placeholder="请选择谐波次数">
+                            :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 {
+    .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;