225 lines
7.7 KiB
Vue
225 lines
7.7 KiB
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>
|