hldy_yunwei_vue/src/views/iot/baseIot/CheckBaseIotList.vue

<template>
  <div class="p-2">
    <div v-show="activeKey==='1'">
      <!--查询区域-->
      <div class="jeecg-basic-table-form-container">
        <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24" style="margin-top:10px;">
            <a-col :lg="6">
              <a-form-item name="syncType">
                <template #label><span title="机构名称">机构名称</span></template>
                <j-dict-select-tag type='list' v-model:value="queryParam.id" dictCode="sys_depart,depart_name,id"
                  placeholder="请选机构名称" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
                  <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-row>
        <a-col v-for="(item,index) in orgList" style="padding: 5px" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6">
          <a-card :title="item.departName"
          :class="['card-3d', { 'card-selected': isSelected===item }]"
          @mouseenter="item.key"
          @mouseleave="item.key"
          @click="isSelected = item">
            <p>机构编码：{{item.orgCode}}</p>
            <p>创建时间：{{item.createTime}}</p>
            <p style="text-align: right"><a-button @click="handleCheckOrg(item)">选择</a-button></p>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <div v-show="activeKey==='2'">
      <a-row style="padding:10px;">
        <a-col :span="12"><span style="font-size: 18px;">{{orgInfo.departName}} - 物联设备配置</span></a-col>
        <a-col :span="12" style="text-align: right"><a-button @click="activeKey = '1'">返回上一页</a-button></a-col>
        <a-col v-for="(item,index) in baseList" style="padding: 5px" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6">
          <a-card :title="`NUID：`+item.nuId"
            :class="['card-3d', { 'card-selected': isSelected===item }]"
            @mouseenter="item.key"
            @mouseleave="item.key"
            @click="isSelected = item">
            <p>单元名称：{{item.nuName}}</p>
            <p>创建时间：{{item.createTime}}</p>
            <p>单元类型：{{item.areaFlagText}}</p>
            <div style="text-align: center;">
              <a-badge :count="item.sxtNum">
                <a-button type="dashed" size="small" @click="handleSxt(item)" style="margin-left: 10px;">摄像头</a-button>
              </a-badge>
              <a-badge :count="item.dbNum">
                <a-button type="dashed" size="small" @click="handleDb(item)" style="margin-left: 10px;">电表</a-button>
              </a-badge>
              <a-badge :count="item.sbNum" >
                <a-button type="dashed" size="small" @click="handleSb(item)" style="margin-left: 10px;">水表</a-button>
              </a-badge>
              <a-badge :count="item.wsdjNum" >
                <a-button type="dashed" size="small" @click="handleWsd(item)" style="margin-left: 10px;">温湿度</a-button>
              </a-badge>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <SxtModal ref="sxtModal" @success="handleWlsbSuccess"></SxtModal>
    <DbModal ref="dbModal" @success="handleWlsbSuccess"></DbModal>
    <SbModal ref="sbModal" @success="handleWlsbSuccess"></SbModal>
    <WsdModal ref="wsdModal" @success="handleWlsbSuccess"></WsdModal>
  </div>
</template>

<script lang="ts" name="ElectricitySyncLog-ElectricitySyncLog" setup>
  import { ref, reactive,onMounted } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import SxtModal from '/@/views/iot/baseIot/compoents/SxtModal.vue';
  import DbModal from '/@/views/iot/baseIot/compoents/DbModal.vue';
  import SbModal from '/@/views/iot/baseIot/compoents/SbModal.vue';
  import WsdModal from '/@/views/iot/baseIot/compoents/WsdModal.vue';

  const formRef = ref();
  const sxtModal = ref();
  const dbModal = ref();
  const sbModal = ref();
  const wsdModal = ref();
  const queryParam = reactive<any>({});
  
  const activeKey= ref('1');
  const orgInfo= ref<any>({});
  const orgList= ref<any>([]);
  const baseList= ref<any>([]);
  const isHover = ref(false);
  const isSelected = ref(false);
  const labelCol = reactive({
    xs:24, sm:8
  });
  const wrapperCol = reactive({
    xs: 24, sm: 15,
  });

//查询机构列表
  function searchQuery() {
    defHttp.get({ url: '/sys/sysDepart/listAll', params: queryParam }).then((res) => {
      orgList.value = res;
    });
  }
//重置
function searchReset() {
    queryParam.id = '';
    searchQuery();
  }
  //操作成功刷新页面
  function handleSuccess(){
    searchQuery();
  }
  // 选择机构
  function handleCheckOrg(item){
    activeKey.value = "2";
    orgInfo.value = item;
    getBaseList(item);
  }

  //获取区域及物联设备数量
  function getBaseList(item){
    defHttp.get({ url: '/admin/nuBaseInfo/nuBaseInfo/getBaseWlsbList', params: {orgCode:item.orgCode} }).then((res) => {
      baseList.value = res;
    });
  }
  //选择摄像头
  function handleSxt(item){
    console.log("🚀 ~ handleSxt ~ item:", item)
    item.orgInfo = orgInfo.value;
    sxtModal.value.init(item);
  }
  //选择电表
  function handleDb(item){
    console.log("🚀 ~ handleDb ~ item:", item)
    item.orgInfo = orgInfo.value;
    dbModal.value.init(item);
  }
  //选择水表
  function handleSb(item){
    console.log("🚀 ~ handleSb ~ item:", item)
    item.orgInfo = orgInfo.value;
    sbModal.value.init(item);
  }
  //选择温湿度计
  function handleWsd(item){
    console.log("🚀 ~ handleWsd ~ item:", item)
    item.orgInfo = orgInfo.value;
    wsdModal.value.init(item);
  }

  //物联设备同步后刷新列表
  function handleWlsbSuccess(){
    console.log("🚀 ~ handleWlsbSuccess ~ handleWlsbSuccess:", orgInfo.value)
    getBaseList(orgInfo.value)
  }

  // 自动请求并暴露内部方法
  onMounted(() => {
    activeKey.value = "1";
    searchQuery();
  });
</script>

<style lang="less" scoped>
/* 基础卡片样式 */
.card-3d {
  border-radius: 8px;
  border: 1px solid #f0f0f0; /* 边框增强立体感 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background: white;
  position: relative;
}

/* 鼠标悬停：阴影加深 + 轻微上浮 */
.card-3d:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  transform: translate(-2px,-2px);
}

/* 选中状态：蓝色边框 + 更明显的阴影 */
.card-3d.card-selected {
  box-shadow: 0 8px 24px rgba(24, 144, 255, 0.3);
  border: 1px solid #1890ff;
}

/* 选中 + 悬停：阴影更强 */
.card-3d.card-selected.card-hover {
  box-shadow: 0 10px 28px rgba(24, 144, 255, 0.4);
  transform: translate(-3px,-3px);
}
  .jeecg-basic-table-form-container {
    padding: 14px 0 0 14px;
    background: white;
    border-radius: 8px;
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }
    .query-group-cust{
      min-width: 100px !important;
    }
    .query-group-split-cust{
      width: 30px;
      display: inline-block;
      text-align: center
    }
    .ant-form-item:not(.ant-form-item-with-help){
      margin-bottom: 16px;
      height: 32px;
    }
    :deep(.ant-picker),:deep(.ant-input-number){
      width: 100%;
    }
  }
</style>