net
2025-02-14 06d3d15a5a08637041cc601101c063b11b07a346
zhitan-vue/src/views/modelconfiguration/indexwarehouse/indexWarehouse.vue
@@ -5,38 +5,44 @@
        <div class="tree page-box">
          <!-- <CardHeader class="mb20">用能单元结构</CardHeader> -->
          <!-- <el-input v-model="filterText" style="width: 240px" placeholder="输入关键字进行过滤" class="mb10" /> -->
          <el-tree ref="treeRef" :props="defaultProps" :data="treeData" node-key="id" highlight-current
            :filter-node-method="filterNode" :default-expanded-keys="treeExpandData" :expand-on-click-node="false"
            @node-click="changeNode" accordion>
          <el-tree
            ref="treeRef"
            :props="defaultProps"
            :data="treeData"
            node-key="id"
            highlight-current
            :filter-node-method="filterNode"
            :default-expanded-keys="treeExpandData"
            :expand-on-click-node="false"
            @node-click="changeNode"
            accordion
          >
            <template #default="{ node, data }">
              <span>
                <el-tooltip v-if="node.label.length > 6" class="item" effect="dark" :content="node.label"
                  placement="top-end">
                <el-tooltip
                  v-if="node.label.length > 6"
                  class="item"
                  effect="dark"
                  :content="node.label"
                  placement="top-end"
                >
                  <span>{{ node.label.slice(0, 6) + "..." }}</span>
                </el-tooltip>
                <span v-else id="b">{{ node.label }}</span>
              </span>
              <span class="node-opt">
                <el-link title="新增下级节点" icon="Plus" @click="() => addNode(node, data)">
                </el-link>
                <el-link title="修改节点" icon="EditPen" @click="() => editNode(node, data)">
                </el-link>
                <el-link title="删除节点" icon="Delete" @click="() => delNode(node, data)">
                </el-link>
                <el-link title="新增下级节点" icon="Plus" @click="() => addNode(node, data)"> </el-link>
                <el-link title="修改节点" icon="EditPen" @click="() => editNode(node, data)"> </el-link>
                <el-link title="删除节点" icon="Delete" @click="() => delNode(node, data)"> </el-link>
              </span>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="page-container-right">
        <div class="mb20 mt20 ml20 tab-box">
          <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')">
            计量器具配置信息
          </div>
          <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')">
            统计指标
          </div>
          <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')">计量器具配置信息</div>
          <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')">统计指标</div>
          <!-- <el-radio-group v-model="tab">
                                <el-radio-button label="1" @click="handleTab('1')"> 设备配置</el-radio-button>
                                <el-radio-button label="2" @click="handleTab('2')"> 采集指标</el-radio-button>
@@ -45,10 +51,10 @@
        <BaseCard :title="currentNode ? currentNode.label + '--节点配置' : '暂无节点配置'">
          <div>
            <div class="content-box" v-if="tab == '1'">
              <deviceConfig ref='deviceConfigRef' />
              <deviceConfig ref="deviceConfigRef" />
            </div>
            <div class="content-box1" v-if="tab == '2'">
              <statisticalIndicatorManagement ref='statisticalIndicatorManagementRef' :indexType='"STATISTIC"' />
              <statisticalIndicatorManagement ref="statisticalIndicatorManagementRef" :indexType="'STATISTIC'" />
            </div>
          </div>
        </BaseCard>
@@ -56,18 +62,22 @@
        <!-- <statisticalIndicatorManagement ref="statisticalIndicatorManagementRef" :indexType='"STATISTIC"' /> -->
      </div>
    </div>
    <treeNodeModal ref="treeNodeModalRef" @getList="getTreeList" modelCode="JCZBK_CODE" @addTreeList="addTreeList"
      @addTreeSelectList="addTreeSelectList" />
    <treeNodeModal
      ref="treeNodeModalRef"
      @getList="getTreeList"
      modelCode="JCZBK_CODE"
      @addTreeList="addTreeList"
      @addTreeSelectList="addTreeSelectList"
    />
  </div>
</template>
<script setup>
import treeNodeModal from './components/TreeNodeModal.vue'
import deviceConfig from './components/deviceConfig/DeviceConfig.vue'
import statisticalIndicatorManagement from './components/statisticalIndicatorManagement/statisticalIndicatorManagement.vue';
import { treeList, delModelNode, hasEnergyIndex, } from '@/api/modelConfiguration/indexWarehouse'
const { proxy } = getCurrentInstance();
import treeNodeModal from "./components/TreeNodeModal.vue"
import deviceConfig from "./components/deviceConfig/DeviceConfig.vue"
import statisticalIndicatorManagement from "./components/statisticalIndicatorManagement/statisticalIndicatorManagement.vue"
import { treeList, delModelNode, hasEnergyIndex } from "@/api/modelConfiguration/indexWarehouse"
const { proxy } = getCurrentInstance()
let currentNode = ref()
let treeRef = ref()
@@ -75,12 +85,12 @@
let treeData = ref([])
const defaultProps = ref({
  children: 'children',
  label: 'label',
  children: "children",
  label: "label",
})
//检索树
let filterText = ref('')
let filterText = ref("")
const filterNode = (value, data) => {
  if (!value) return true
@@ -88,14 +98,14 @@
}
watch(filterText, (val) => {
  // 检查treeRef.value是否是一个有效的ElTree实例
  if (treeRef.value && typeof treeRef.value.filter === 'function') {
  if (treeRef.value && typeof treeRef.value.filter === "function") {
    // 调用filter方法
    treeRef.value.filter(val);
    treeRef.value.filter(val)
  } else {
    // treeRef.value无效,处理错误
    console.error('error');
    console.error("error")
  }
});
})
let treeExpandData = ref([])
let isFirstLeafNode = ref(false)
@@ -103,32 +113,31 @@
let statisticalIndicatorManagementRef = ref(null)
//获取树列表
function getTreeList() {
  treeList({ modelCode: 'JCZBK_CODE' }).then(res => {
  treeList({ modelCode: "JCZBK_CODE" }).then((res) => {
    let { data } = res
    treeData.value = data;
    let chooseNode = null;
    treeData.value = data
    let chooseNode = null
    if (data.length > 0) {
      if (data[0].children && data[0].children.length !== 0 && isFirstLeafNode.value) {
        if (data[0].children[0].children && data[0].children[0].children.length !== 0) {
          chooseNode = data[0].children[0].children[0];
          chooseNode = data[0].children[0].children[0]
        } else {
          chooseNode = data[0].children[0];
          chooseNode = data[0].children[0]
        }
      } else {
        chooseNode = data[0];
        chooseNode = data[0]
      }
      currentNode.value = chooseNode;
      treeExpandData.value.push(chooseNode.id);
      currentNode.value = chooseNode
      treeExpandData.value.push(chooseNode.id)
      nextTick(() => {
        treeRef.value.setCurrentKey(chooseNode.id);
        treeRef.value.setCurrentKey(chooseNode.id)
        if (tab.value == 1 && deviceConfigRef.value) {
          deviceConfigRef.value.getList(chooseNode)
        }
        if (tab.value == 2 && statisticalIndicatorManagementRef.value) {
          statisticalIndicatorManagementRef.value.getList(chooseNode)
        }
      });
      })
    }
  })
}
@@ -143,7 +152,7 @@
  treeExpandData.value.push(addedNode.nodeId)
  nextTick(() => {
    treeRef.value.setCurrentNode(newChild)
    currentNode.value = newChild;
    currentNode.value = newChild
    if (tab.value == 1) {
      if (deviceConfigRef.value) {
        deviceConfigRef.value.getList(newChild)
@@ -155,11 +164,10 @@
      }
    }
  })
}
//树点击
function changeNode(data, node, ev) {
  currentNode.value = data;
  currentNode.value = data
  if (tab.value == 1) {
    if (deviceConfigRef.value) {
      deviceConfigRef.value.getList(data)
@@ -171,7 +179,6 @@
    }
  }
}
let treeNodeModalRef = ref(null)
@@ -188,26 +195,27 @@
function delNode(node, data) {
  if (data.children && data.children.length > 0) {
    proxy.$modal.msgWarning('包含子节点,不能进行删除!')
    proxy.$modal.msgWarning("包含子节点,不能进行删除!")
    return
  }
  hasEnergyIndex(data.id).then(response => {
  hasEnergyIndex(data.id).then((response) => {
    if (response.data) {
      proxy.$modal.msgWarning('当前节点下存在指标,不能进行删除!')
      proxy.$modal.msgWarning("当前节点下存在指标,不能进行删除!")
    } else {
      proxy.$modal.confirm('是否确认删除名为"' + data.label + '"的节点?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      proxy.$modal
        .confirm('是否确认删除名为"' + data.label + '"的节点?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(function () {
          return delModelNode(data.id)
        })
        .then(() => {
          let parent = node.parent
          let children = parent.data.children || parent.data
          let index = children.findIndex(d => d.id === data.id)
          let index = children.findIndex((d) => d.id === data.id)
          children.splice(index, 1)
          nextTick(() => {
@@ -217,10 +225,9 @@
              changeNode(null)
            }
          })
          proxy.$modal.msgSuccess('删除成功')
          proxy.$modal.msgSuccess("删除成功")
        })
        .catch(function () {
        })
        .catch(function () {})
    }
  })
}
@@ -234,15 +241,12 @@
    if (value == 2 && statisticalIndicatorManagementRef.value) {
      statisticalIndicatorManagementRef.value.getList(currentNode.value)
    }
  });
  })
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
.page-box {
  height: calc(100vh - 145px);
@@ -276,8 +280,6 @@
      margin-right: 5px;
    }
  }
}
:deep .el-tabs__nav-wrap:after {
@@ -298,29 +300,40 @@
.tab-box {
  display: flex;
  align-items: center;
  color: #fff;
  border-bottom: 1px solid #3371EB;
  color: #333;
  border-bottom: 1px solid #3371eb;
  margin-right: 20px;
  .tab-li {
    cursor: pointer;
    border: 1px solid #3371EB;
    border: 1px solid #3371eb;
    padding: 10px 25px;
    border-radius: 5px 5px 0 0;
  }
  .is-tab {
    background: #3371EB;
    background: #3371eb;
    color: #fff;
  }
}
.themeDark {
  .tab-box {
    color: #fff;
  }
}
.themeLight {
  .tab-box {
    color: #333;
  }
}
.content-box {
  height: calc(100vh - 310px) !important;
}
.content-box1 {
  height: calc(100vh - 290px) !important;
}
</style>