添加物联设备同步功能v3版本流程
This commit is contained in:
parent
cf26287dcf
commit
b8adb33956
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
|
||||
enum Api {
|
||||
getOrgInfo = '/admin/orgapplyinfo/orgApplyInfo/getOrgInfo',
|
||||
|
||||
addNuIot = '/admin/nuBaseInfo/nuBaseInfo/addNuIot',
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取机构详细信息（包含sys_depart信息）
|
||||
* @param params orgCode部门编码 不传查所有
|
||||
* @returns
|
||||
*/
|
||||
export const getOrgInfo = (params) => defHttp.get({ url: Api.getOrgInfo, params });
|
||||
|
||||
|
||||
export const addNuIot = (params, isUpdate) => {
|
||||
return defHttp.post({ url: Api.addNuIot, params }, { isTransformResponse: false });
|
||||
};
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
import {BasicColumn} from '/@/components/Table';
|
||||
import {FormSchema} from '/@/components/Table';
|
||||
import { rules} from '/@/utils/helper/validator';
|
||||
import { render } from '/@/utils/common/renderUtils';
|
||||
import { getWeekMonthQuarterYear } from '/@/utils';
|
||||
//列表数据
|
||||
export const baseSxtColumns: BasicColumn[] = [
|
||||
{
|
||||
title: 'SN',
|
||||
align: "center",
|
||||
dataIndex: 'sn',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
align: "center",
|
||||
dataIndex: 'deviceName'
|
||||
},
|
||||
{
|
||||
title: '设备状态',
|
||||
align: "center",
|
||||
dataIndex: 'deviceStatus_dictText',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '设备型号',
|
||||
align: "center",
|
||||
dataIndex: 'deviceModel',
|
||||
width: 220,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: "center",
|
||||
dataIndex: 'action',
|
||||
width: 120,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
//列表数据
|
||||
export const baseDbColumns: BasicColumn[] = [
|
||||
{
|
||||
title: 'SN',
|
||||
align: "center",
|
||||
dataIndex: 'address',
|
||||
},
|
||||
{
|
||||
title: '设备状态',
|
||||
align: "center",
|
||||
dataIndex: 'relayState',
|
||||
customRender:({record})=>{
|
||||
return record.relayState?(record.relayState=='1'?'合闸':'拉闸'):'';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '在线状态',
|
||||
align: "center",
|
||||
dataIndex: 'online',
|
||||
customRender:({record})=>{
|
||||
return record.online?(record.online=='true'?'在线':'离线'):'';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '信号强度',
|
||||
align: "center",
|
||||
dataIndex: 'csq',
|
||||
customRender:({record})=>{
|
||||
if(record.csq){
|
||||
if(record.csq < 10){
|
||||
return '低';
|
||||
}else if(record.csq > 20){
|
||||
return '高';
|
||||
}else{
|
||||
return '中';
|
||||
}
|
||||
}else{
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: "center",
|
||||
dataIndex: 'action',
|
||||
width: 120,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
//列表数据
|
||||
export const baseSbColumns: BasicColumn[] = [
|
||||
{
|
||||
title: 'SN',
|
||||
align: "center",
|
||||
dataIndex: 'address',
|
||||
},
|
||||
{
|
||||
title: '设备状态',
|
||||
align: "center",
|
||||
dataIndex: 'relayState',
|
||||
customRender:({record})=>{
|
||||
return record.relayState?(record.relayState=='1'?'开阀':'关阀'):'';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '在线状态',
|
||||
align: "center",
|
||||
dataIndex: 'online',
|
||||
customRender:({record})=>{
|
||||
return record.online?(record.online=='true'?'在线':'离线'):'';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '信号强度',
|
||||
align: "center",
|
||||
dataIndex: 'csq',
|
||||
customRender:({record})=>{
|
||||
if(record.csq){
|
||||
if(record.csq < 10){
|
||||
return '低';
|
||||
}else if(record.csq > 20){
|
||||
return '高';
|
||||
}else{
|
||||
return '中';
|
||||
}
|
||||
}else{
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: "center",
|
||||
dataIndex: 'action',
|
||||
width: 120,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
//列表数据
|
||||
export const baseWsdColumns: BasicColumn[] = [
|
||||
{
|
||||
title: 'SN',
|
||||
align: "center",
|
||||
dataIndex: 'sn'
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
align: "center",
|
||||
dataIndex: 'deviceName'
|
||||
},
|
||||
{
|
||||
title: '在线状态',
|
||||
align: "center",
|
||||
dataIndex: 'status',
|
||||
customRender:({record})=>{
|
||||
return record.status?(record.status=='0'?'在线':'离线'):'';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '启用状态',
|
||||
align: "center",
|
||||
dataIndex: 'delFlag',
|
||||
customRender:({record})=>{
|
||||
return record.delFlag?(record.delFlag=='0'?'启用':'停用'):'';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: "center",
|
||||
dataIndex: 'action',
|
||||
width: 120,
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<JFormContainer :disabled="disabled">
|
||||
<template #detail>
|
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
|
||||
name="NuBaseInfoForm">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="区域名称" v-bind="validateInfos.nuName" id="NuBaseInfoForm-nuName" name="nuName">
|
||||
<a-input v-model:value="formData.nuName" placeholder="区域名称自动生成" allow-clear
|
||||
:disabled="true"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="区域编码" v-bind="validateInfos.nuId" id="NuBaseInfoForm-nuId" name="nuId">
|
||||
<a-input v-model:value="formData.nuId" placeholder="编码自动生成" allow-clear
|
||||
:disabled="true"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="区域标签" v-bind="validateInfos.areaFlag" id="NuBaseInfoForm-areaFlag" name="areaFlag">
|
||||
<j-dict-select-tag v-model:value="formData.areaFlag" dictCode="nu_type" placeholder="请选择区域标签"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="摄像头" v-bind="validateInfos.iotSn" id="NuBaseInfoForm-iotSn" name="iotSn">
|
||||
<a-input-search v-model:value="formData.iotSn" placeholder="请选择摄像头" enter-button="选择" readonly @search="chercSxt" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
</JFormContainer>
|
||||
<CheckSxtModal ref="checkSxtModal" @success="handleSxtSuccess"/>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||||
import { getValueType } from '/@/utils';
|
||||
import { addNuIot } from '../DeviceSync.api';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||||
import CheckSxtModal from '/@/views/deviceSync/compoents/CheckSxtModal.vue'
|
||||
|
||||
const props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: () => ({}) },
|
||||
formBpm: { type: Boolean, default: true },
|
||||
});
|
||||
const formRef = ref();
|
||||
const checkSxtModal = ref();
|
||||
const useForm = Form.useForm;
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const formData = reactive<Record<string, any>>({
|
||||
id: '',
|
||||
nuName: '',
|
||||
nuId: '',
|
||||
orgCode: '',
|
||||
areaFlag: '',
|
||||
status: '',
|
||||
iotSn:'',
|
||||
});
|
||||
const orgInfo = ref<any>({})
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
//表单验证
|
||||
const validatorRules = reactive({
|
||||
areaFlag : [{ required: true, message: '请选择区域标签!'},],
|
||||
iot : [{ required: true, message: '请选择摄像头!'},],
|
||||
});
|
||||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
|
||||
|
||||
// 表单禁用
|
||||
const disabled = computed(() => {
|
||||
if (props.formBpm === true) {
|
||||
if (props.formData.disabled === false) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return props.formDisabled;
|
||||
});
|
||||
//选择摄像头
|
||||
function chercSxt(){
|
||||
checkSxtModal.value.disabled = true;
|
||||
checkSxtModal.value.init({})
|
||||
|
||||
}
|
||||
//选择摄像头成功
|
||||
function handleSxtSuccess(record) {
|
||||
console.log("🚀 ~ handleSxtSuccess ~ record:", record)
|
||||
formData.iotSn = record.sn;
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add(record) {
|
||||
console.log("🚀 ~ add ~ record:", record)
|
||||
orgInfo.value = record;
|
||||
edit(record);
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function edit(record) {
|
||||
nextTick(() => {
|
||||
resetFields();
|
||||
const tmpData = {};
|
||||
Object.keys(formData).forEach((key) => {
|
||||
if (record.hasOwnProperty(key)) {
|
||||
tmpData[key] = record[key]
|
||||
}
|
||||
})
|
||||
//赋值
|
||||
Object.assign(formData, tmpData);
|
||||
});
|
||||
}
|
||||
//选择摄像头
|
||||
function onSearch() {
|
||||
console.log('orgInfo', orgInfo.value);
|
||||
formData.iot = '111';
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
async function submitForm() {
|
||||
try {
|
||||
// 触发表单验证
|
||||
await validate();
|
||||
} catch ({ errorFields }) {
|
||||
if (errorFields) {
|
||||
const firstField = errorFields[0];
|
||||
if (firstField) {
|
||||
formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}
|
||||
return Promise.reject(errorFields);
|
||||
}
|
||||
confirmLoading.value = true;
|
||||
const isUpdate = ref<boolean>(false);
|
||||
//时间格式化
|
||||
let model = formData;
|
||||
if (model.id) {
|
||||
isUpdate.value = true;
|
||||
}
|
||||
//循环数据
|
||||
for (let data in model) {
|
||||
//如果该数据是数组并且是字符串类型
|
||||
if (model[data] instanceof Array) {
|
||||
let valueType = getValueType(formRef.value.getProps, data);
|
||||
//如果是字符串类型的需要变成以逗号分割的字符串
|
||||
if (valueType === 'string') {
|
||||
model[data] = model[data].join(',');
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!model.id) {
|
||||
model.status = "0";
|
||||
}
|
||||
await addNuIot(model, isUpdate.value)
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
createMessage.success("暂存成功！");
|
||||
emit('ok');
|
||||
} else {
|
||||
createMessage.warning(res.message);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
confirmLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
submitForm,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.antd-modal-form {
|
||||
padding: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true"
|
||||
:footer-style="{ textAlign: 'right' }" @close="handleCancel">
|
||||
<NuBaseInfoForm ref="registerForm" @ok="submitCallback" :orgCode="orgCode" :formDisabled="disableSubmit"
|
||||
:formBpm="false"></NuBaseInfoForm>
|
||||
<template #footer>
|
||||
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
|
||||
<a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose } from 'vue';
|
||||
import NuBaseInfoForm from './AddNuIotForm.vue'
|
||||
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
|
||||
|
||||
const title = ref<string>('');
|
||||
const width = ref<number>(800);
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add(record) {
|
||||
title.value = '新增';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.add(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param record
|
||||
*/
|
||||
function edit(record) {
|
||||
title.value = disableSubmit.value ? '详情' : '编辑';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.edit(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定按钮点击事件
|
||||
*/
|
||||
function handleOk() {
|
||||
registerForm.value.submitForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback() {
|
||||
handleCancel();
|
||||
emit('success');
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<SectionDivider :title="'电表列表'" />
|
||||
<a-table :columns="baseDbColumns" :data-source="dataList.records" :pagination="pageParams" @change="handleTableChange" >
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<span>
|
||||
<a @click="handleSelect(record)">选择</a>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { baseDbColumns } from '../DeviceSync.data';
|
||||
import { Pagination } from 'ant-design-vue';
|
||||
|
||||
const formRef = ref();
|
||||
const queryParam = reactive<any>({checkType:''});
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
const dataList= ref<any>([]);
|
||||
const checkDataList= ref<any>([]);
|
||||
const baseIotInfo= ref<any>({});
|
||||
const pageParams = ref({ pageNo: 1, pageSize: 10, total: 0, showTotal: (total) => `共 ${total} 条数据` })
|
||||
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
function init(record) {
|
||||
console.log("🚀 ~ init ~ record:", record)
|
||||
baseIotInfo.value = record;
|
||||
queryParam.pageNo = 1;
|
||||
queryParam.checkType = '0';
|
||||
getDataList();
|
||||
}
|
||||
/**
|
||||
* 分页触发方法
|
||||
*/
|
||||
function handleTableChange(record){
|
||||
queryParam.pageNo = record.current;
|
||||
getDataList();
|
||||
}
|
||||
/**
|
||||
* 获取数据列表
|
||||
*/
|
||||
function getDataList() {
|
||||
queryParam.pageSize = pageParams.value.pageSize;
|
||||
defHttp.get({ url: '/iot/tq/electricityMeter/list',params:queryParam }).then((res) => {
|
||||
dataList.value = res;
|
||||
pageParams.value.total = res.total;
|
||||
});
|
||||
}
|
||||
|
||||
function handleSelect(record){
|
||||
emit("ok",record)
|
||||
}
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
function submitForm() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
submitForm,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.antd-modal-form {
|
||||
padding: 14px;
|
||||
}
|
||||
.jcxxClass{
|
||||
margin-left: 35px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true"
|
||||
:footer-style="{ textAlign: 'right' }" @close="handleCancel">
|
||||
<DbForm ref="registerForm" @ok="submitCallback"></DbForm>
|
||||
<template #footer>
|
||||
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose } from 'vue';
|
||||
import DbForm from './CheckDbForm.vue'
|
||||
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
|
||||
|
||||
const title = ref<string>('');
|
||||
const width = ref<string>('80%');
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param record
|
||||
*/
|
||||
function init(record) {
|
||||
title.value = '电表';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.init(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定按钮点击事件
|
||||
*/
|
||||
function handleOk() {
|
||||
registerForm.value.submitForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback(record) {
|
||||
handleCancel();
|
||||
emit('success',record);
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<SectionDivider :title="'水表列表'" />
|
||||
<a-table :columns="baseSbColumns" :data-source="dataList.records" :pagination="pageParams" @change="handleTableChange" >
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<span>
|
||||
<a @click="handleSelect(record)">选择</a>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { baseSbColumns } from '../DeviceSync.data';
|
||||
import { Pagination } from 'ant-design-vue';
|
||||
|
||||
const formRef = ref();
|
||||
const queryParam = reactive<any>({checkType:''});
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
const dataList= ref<any>([]);
|
||||
const checkDataList= ref<any>([]);
|
||||
const baseIotInfo= ref<any>({});
|
||||
const pageParams = ref({ pageNo: 1, pageSize: 10, total: 0, showTotal: (total) => `共 ${total} 条数据` })
|
||||
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
function init(record) {
|
||||
console.log("🚀 ~ init ~ record:", record)
|
||||
baseIotInfo.value = record;
|
||||
queryParam.pageNo = 1;
|
||||
queryParam.checkType = '0';
|
||||
getDataList();
|
||||
}
|
||||
/**
|
||||
* 分页触发方法
|
||||
*/
|
||||
function handleTableChange(record){
|
||||
queryParam.pageNo = record.current;
|
||||
getDataList();
|
||||
}
|
||||
/**
|
||||
* 获取数据列表
|
||||
*/
|
||||
function getDataList() {
|
||||
queryParam.pageSize = pageParams.value.pageSize;
|
||||
defHttp.get({ url: '/iot/tq/waterMeter/list',params:queryParam }).then((res) => {
|
||||
dataList.value = res;
|
||||
pageParams.value.total = res.total;
|
||||
});
|
||||
}
|
||||
|
||||
function handleSelect(record){
|
||||
emit("ok",record)
|
||||
}
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
function submitForm() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
submitForm,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.antd-modal-form {
|
||||
padding: 14px;
|
||||
}
|
||||
.jcxxClass{
|
||||
margin-left: 35px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true"
|
||||
:footer-style="{ textAlign: 'right' }" @close="handleCancel">
|
||||
<CheckSbForm ref="registerForm" @ok="submitCallback"></CheckSbForm>
|
||||
<template #footer>
|
||||
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose } from 'vue';
|
||||
import CheckSbForm from './CheckSbForm.vue'
|
||||
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
|
||||
|
||||
const title = ref<string>('');
|
||||
const width = ref<string>('80%');
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param record
|
||||
*/
|
||||
function init(record) {
|
||||
title.value = '电表';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.init(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定按钮点击事件
|
||||
*/
|
||||
function handleOk() {
|
||||
registerForm.value.submitForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback(record) {
|
||||
handleCancel();
|
||||
emit('success',record);
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<SectionDivider :title="'摄像头列表'" />
|
||||
<a-table :columns="baseSxtColumns" :data-source="dataList.records" :pagination="pageParams" @change="handleTableChange" >
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<span>
|
||||
<a @click="handleSelect(record)">选择</a>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { baseSxtColumns } from '../DeviceSync.data';
|
||||
import { Pagination } from 'ant-design-vue';
|
||||
|
||||
const formRef = ref();
|
||||
const queryParam = reactive<any>({checkType:''});
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
const dataList= ref<any>([]);
|
||||
const checkDataList= ref<any>([]);
|
||||
const baseIotInfo= ref<any>({});
|
||||
const pageParams = ref({ pageNo: 1, pageSize: 10, total: 0, showTotal: (total) => `共 ${total} 条数据` })
|
||||
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
function init(record) {
|
||||
console.log("🚀 ~ init ~ record:", record)
|
||||
baseIotInfo.value = record;
|
||||
queryParam.pageNo = 1;
|
||||
queryParam.checkType = '0';
|
||||
getDataList();
|
||||
}
|
||||
/**
|
||||
* 分页触发方法
|
||||
*/
|
||||
function handleTableChange(record){
|
||||
queryParam.pageNo = record.current;
|
||||
getDataList();
|
||||
}
|
||||
/**
|
||||
* 获取数据列表
|
||||
*/
|
||||
function getDataList() {
|
||||
queryParam.pageSize = pageParams.value.pageSize;
|
||||
defHttp.get({ url: '/iot/tplink/cameraInfo/list',params:queryParam }).then((res) => {
|
||||
dataList.value = res;
|
||||
pageParams.value.total = res.total;
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 选择摄像头
|
||||
*/
|
||||
function handleSelect(record){
|
||||
console.log("🚀 ~ handleSelect ~ record:", record)
|
||||
emit("ok",record)
|
||||
}
|
||||
function handleUnSelect(record){
|
||||
checkDataList.value.records = checkDataList.value.records.filter(item => item.id !== record.id)
|
||||
}
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
function submitForm() {
|
||||
// const list = checkDataList.value.records;
|
||||
// const orgInfo = baseIotInfo.value.orgInfo;
|
||||
// const params = {nuId:baseIotInfo.value.nuId,
|
||||
// nuName:baseIotInfo.value.nuName,
|
||||
// dataSourceCode:baseIotInfo.value.sysOrgCode,
|
||||
// departId: orgInfo.id,
|
||||
// departName: orgInfo.departName,
|
||||
// list}
|
||||
// defHttp.post({url:"/iot/tplink/cameraInfo/syncCameraList",params}).then((res)=>{
|
||||
// console.log("🚀 ~ submitForm ~ res:", res)
|
||||
// emit("ok")
|
||||
// })
|
||||
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
submitForm,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.antd-modal-form {
|
||||
padding: 14px;
|
||||
}
|
||||
.jcxxClass{
|
||||
margin-left: 35px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true"
|
||||
:footer-style="{ textAlign: 'right' }" @close="handleCancel">
|
||||
<SxtForm ref="registerForm" @ok="submitCallback"></SxtForm>
|
||||
<template #footer>
|
||||
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
|
||||
<!-- <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button> -->
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose } from 'vue';
|
||||
import SxtForm from './CheckSxtForm.vue'
|
||||
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
|
||||
|
||||
const title = ref<string>('');
|
||||
const width = ref<string>('80%');
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param record
|
||||
*/
|
||||
function init(record) {
|
||||
title.value = '摄像头';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.init(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定按钮点击事件
|
||||
*/
|
||||
function handleOk() {
|
||||
registerForm.value.submitForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback(record) {
|
||||
handleCancel();
|
||||
emit('success',record);
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<SectionDivider :title="'温湿度计列表'" />
|
||||
<a-table :columns="baseWsdColumns" :data-source="dataList.records" :pagination="pageParams" @change="handleTableChange" >
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<span>
|
||||
<a @click="handleSelect(record)">选择</a>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { baseWsdColumns } from '../DeviceSync.data';
|
||||
import { Pagination } from 'ant-design-vue';
|
||||
|
||||
const formRef = ref();
|
||||
const queryParam = reactive<any>({checkType:''});
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
const dataList= ref<any>([]);
|
||||
const checkDataList= ref<any>([]);
|
||||
const baseIotInfo= ref<any>({});
|
||||
const pageParams = ref({ pageNo: 1, pageSize: 10, total: 0, showTotal: (total) => `共 ${total} 条数据` })
|
||||
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
function init(record) {
|
||||
console.log("🚀 ~ init ~ record:", record)
|
||||
baseIotInfo.value = record;
|
||||
queryParam.pageNo = 1;
|
||||
queryParam.checkType = '0';
|
||||
getDataList();
|
||||
}
|
||||
/**
|
||||
* 分页触发方法
|
||||
*/
|
||||
function handleTableChange(record){
|
||||
queryParam.pageNo = record.current;
|
||||
getDataList();
|
||||
}
|
||||
/**
|
||||
* 获取数据列表
|
||||
*/
|
||||
function getDataList() {
|
||||
queryParam.pageSize = pageParams.value.pageSize;
|
||||
defHttp.get({ url: '/iot/yiweilian/humidDevice/list',params:queryParam }).then((res) => {
|
||||
dataList.value = res;
|
||||
pageParams.value.total = res.total;
|
||||
});
|
||||
}
|
||||
|
||||
function handleSelect(record){
|
||||
emit("ok",record)
|
||||
}
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
function submitForm() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
submitForm,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.antd-modal-form {
|
||||
padding: 14px;
|
||||
}
|
||||
.jcxxClass{
|
||||
margin-left: 35px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true"
|
||||
:footer-style="{ textAlign: 'right' }" @close="handleCancel">
|
||||
<CheckWsdjForm ref="registerForm" @ok="submitCallback"></CheckWsdjForm>
|
||||
<template #footer>
|
||||
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose } from 'vue';
|
||||
import CheckWsdjForm from './CheckWsdjForm.vue'
|
||||
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
|
||||
|
||||
const title = ref<string>('');
|
||||
const width = ref<string>('80%');
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param record
|
||||
*/
|
||||
function init(record) {
|
||||
title.value = '电表';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.init(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定按钮点击事件
|
||||
*/
|
||||
function handleOk() {
|
||||
registerForm.value.submitForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback(record) {
|
||||
handleCancel();
|
||||
emit('success',record);
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<template>
|
||||
<a-col v-for="(item,index) in tableData" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
|
||||
<a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }" :bodyStyle="{ padding: '24px 24px 4px 24px' }">
|
||||
<template #title>
|
||||
<a-row style="font-weight: normal;">
|
||||
<a-col :span="18" style="font-size: 14px;">
|
||||
<div style="font-size: 12px;">SN：<span style="font-weight: bold;">{{item.address}}</span></div>
|
||||
<div style="font-size: 12px;">设备类型：电表</div>
|
||||
</a-col>
|
||||
<a-col :span="6" style="text-align: center;padding-top: 4px;">
|
||||
<div :class="item.relayState=='1'?'zxClass':'lxClass'">{{item.relayState=='1'?'在线':'离线'}}</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<a-row>
|
||||
<a-col :span="12" style="margin-top: -10px;">
|
||||
<span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
|
||||
</a-col>
|
||||
<a-col :span="12" style="margin-top: -10px;">
|
||||
用电量：{{item.eleValue?item.eleValue:'0.0'}}KWH
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: left;margin-top: 10px;">
|
||||
同步状态：{{item.syncType =='1'?'已同步':'未同步'}}
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: left;margin-top: 10px;">
|
||||
维修状态：
|
||||
<span v-if="item.maintainStatus=='0'">正常</span>
|
||||
<span v-if="item.maintainStatus=='1'" style="color: red;">维修中</span>
|
||||
<span v-if="item.maintainStatus=='2'">报废</span>
|
||||
</a-col>
|
||||
<a-col :span="24" style="text-align: center;margin-top: 20px;">
|
||||
<span style="display:inline-block;cursor: pointer;" @click="handleRead(item)">
|
||||
<span class="tbClass"><img src="../../../assets/iot/a1.png" style="width:20px;" /></span><br/>
|
||||
<span class="antTitle">抄表</span>
|
||||
</span>
|
||||
<span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleDel(item)" v-if="item.syncType=='0'">
|
||||
<span class="tbClass"><img src="../../../assets/iot/a15.png" style="width:20px;" /></span><br/>
|
||||
<span class="antTitle">移除</span>
|
||||
</span>
|
||||
<span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleWeixiu(item)" v-if="item.maintainStatus=='1'" >
|
||||
<span class="tbClass"><img src="../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
|
||||
<span class="antTitle">维修</span>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<CameraPreviewModal ref="previewModal"></CameraPreviewModal>
|
||||
<a-modal v-model:visible="wxvisible" title="维修" @ok="handleWxOk">
|
||||
<div style="padding: 10px;text-align: center;">
|
||||
<div style="line-height: 60px;">
|
||||
维修状态：<a-radio-group v-model:value="maintainStatus" :options="plainOptions" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="iot-nuIotCameraInfo" setup>
|
||||
import {ref} from 'vue';
|
||||
import {Modal} from 'ant-design-vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
|
||||
import { c } from 'node_modules/vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
|
||||
const wxvisible = ref<boolean>(false);
|
||||
const bxInfo = ref<any>({});
|
||||
const maintainStatus = ref<string>('');
|
||||
const previewModal = ref();
|
||||
const { createMessage } = useMessage();
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const props = defineProps({
|
||||
tableData: { type: Object, default: () => ([]) },
|
||||
});
|
||||
const plainOptions = [
|
||||
{ label: '正常', value: '0' },
|
||||
{ label: '报废', value: '2' },
|
||||
];
|
||||
function handleWxOk() {
|
||||
if(!maintainStatus.value){
|
||||
createMessage.error('请选择报修状态！');
|
||||
}else{
|
||||
wxvisible.value = false;
|
||||
var params = {
|
||||
id: bxInfo.value.id,
|
||||
maintainStatus: maintainStatus.value,
|
||||
}
|
||||
defHttp.post({ url: '/iot/tq/electricityMeter/edit', params }).then(() => {
|
||||
emit("ok");
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 维修
|
||||
*/
|
||||
function handleWeixiu(record){
|
||||
bxInfo.value = record;
|
||||
wxvisible.value = true;
|
||||
}
|
||||
|
||||
// 抄电表
|
||||
async function handleRead(record) {
|
||||
const params = {
|
||||
'cid' : record.cid,
|
||||
'address' : record.address,
|
||||
};
|
||||
await defHttp.get({ url: '/iot/tq/electricityMeter/eleRead', params }).then((res) => {
|
||||
console.log("🚀 ~ handleRead ~ res:", res)
|
||||
});
|
||||
setTimeout(() => {
|
||||
emit("ok");
|
||||
}, 4000);
|
||||
}
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
function handleDel(record) {
|
||||
console.log("🚀 ~ handleDel ~ record:", record)
|
||||
Modal.confirm({
|
||||
title: '移除电表',
|
||||
content: '是否要移除此电表？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
// todo 删除
|
||||
defHttp.post({ url: '/iot/tq/electricityMeter/updateDepartById', params: { id: record.id } }).then(() => {
|
||||
emit("ok");
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
|
||||
.zxClass{
|
||||
font-size:14px;
|
||||
background: linear-gradient(to right, #1ea0fa, #017de9);
|
||||
border-radius: 8px;
|
||||
height: 35px;
|
||||
color: white;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.lxClass{
|
||||
font-size:14px;
|
||||
background: linear-gradient(to right, #cccccc, #cccccc);
|
||||
border-radius: 8px;
|
||||
height: 35px;
|
||||
color: white;
|
||||
line-height: 35px;
|
||||
}
|
||||
.tbClass{
|
||||
background: #f6f6f6;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.antTitle{
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ytbClass{
|
||||
font-size:12px;
|
||||
background: linear-gradient(to right, #1ea0fa, #017de9);
|
||||
border-radius: 8px;
|
||||
height: 20px;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.wtbClass{
|
||||
font-size:12px;
|
||||
background: linear-gradient(to right, #cccccc, #cccccc);
|
||||
border-radius: 8px;
|
||||
height: 20px;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-button type="primary" @click="checkSxt" preIcon="ant-design:plus-outlined" style="margin-left:10px;"> 摄像头</a-button>
|
||||
<a-button type="primary" @click="checkDb" preIcon="ant-design:plus-outlined" style="margin-left:10px;"> 电表</a-button>
|
||||
<a-button type="primary" @click="checkSb" preIcon="ant-design:plus-outlined" style="margin-left:10px;"> 水表</a-button>
|
||||
<a-button type="primary" @click="checkWsdj" preIcon="ant-design:plus-outlined" style="margin-left:10px;"> 温湿度计</a-button>
|
||||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:sync-outlined" style="margin-left:10px;"> 同步</a-button>
|
||||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:snippets-outlined" style="margin-left:10px;"> 日志</a-button>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-row>
|
||||
<SxtList :tableData="dataList.cameraInfoList" @ok="hadleSuccess"></SxtList>
|
||||
<DbList :tableData="dataList.electricityMeterList" @ok="hadleSuccess"></DbList>
|
||||
<SbList :tableData="dataList.waterMeterList" @ok="hadleSuccess"></SbList>
|
||||
<WsdjList :tableData="dataList.humidDeviceList" @ok="hadleSuccess"></WsdjList>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<CheckSxtModal ref="checkSxtModal" @success="handleSxtSuccess"/>
|
||||
<CheckDbModal ref="checkDbModal" @success="handleDbSuccess"/>
|
||||
<CheckSbModal ref="checkSbModal" @success="handleSbSuccess"/>
|
||||
<CheckWsdjModal ref="checkWsdjModal" @success="handleWsdjSuccess"/>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||||
import { getValueType } from '/@/utils';
|
||||
import { addNuIot } from '../DeviceSync.api';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||||
import SxtList from '/@/views/deviceSync/compoents/SxtList.vue'
|
||||
import DbList from '/@/views/deviceSync/compoents/DbList.vue'
|
||||
import SbList from '/@/views/deviceSync/compoents/SbList.vue'
|
||||
import WsdjList from '/@/views/deviceSync/compoents/WsdjList.vue'
|
||||
import CheckSxtModal from '/@/views/deviceSync/compoents/CheckSxtModal.vue'
|
||||
import CheckDbModal from '/@/views/deviceSync/compoents/CheckDbModal.vue'
|
||||
import CheckSbModal from '/@/views/deviceSync/compoents/CheckSbModal.vue'
|
||||
import CheckWsdjModal from '/@/views/deviceSync/compoents/CheckWsdjModal.vue'
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: () => ({}) },
|
||||
formBpm: { type: Boolean, default: true },
|
||||
});
|
||||
const formRef = ref();
|
||||
const checkSxtModal = ref();
|
||||
const checkDbModal = ref();
|
||||
const checkSbModal = ref();
|
||||
const checkWsdjModal = ref();
|
||||
const useForm = Form.useForm;
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const formData = reactive<Record<string, any>>({
|
||||
id: '',
|
||||
nuName: '',
|
||||
nuId: '',
|
||||
orgCode: '',
|
||||
areaFlag: '',
|
||||
status: '',
|
||||
iotSn:'',
|
||||
});
|
||||
const nuInfo = ref<any>({})
|
||||
const dataList = ref<any>({cameraInfoList:[], waterMeterList:[], electricityMeterList:[], humidDeviceList:[]})
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
//表单验证
|
||||
const validatorRules = reactive({
|
||||
areaFlag : [{ required: true, message: '请选择区域标签!'},],
|
||||
iot : [{ required: true, message: '请选择摄像头!'},],
|
||||
});
|
||||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
|
||||
|
||||
// 表单禁用
|
||||
const disabled = computed(() => {
|
||||
if (props.formBpm === true) {
|
||||
if (props.formData.disabled === false) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return props.formDisabled;
|
||||
});
|
||||
|
||||
//选择温湿度计
|
||||
function checkWsdj(){
|
||||
checkWsdjModal.value.disabled = true;
|
||||
checkWsdjModal.value.init({nuId:nuInfo.value.nuId})
|
||||
}
|
||||
//选择水表
|
||||
function checkSb(){
|
||||
checkSbModal.value.disabled = true;
|
||||
checkSbModal.value.init({nuId:nuInfo.value.nuId})
|
||||
}
|
||||
//选择电表
|
||||
function checkDb(){
|
||||
checkDbModal.value.disabled = true;
|
||||
checkDbModal.value.init({nuId:nuInfo.value.nuId})
|
||||
}
|
||||
//选择摄像头
|
||||
function checkSxt(){
|
||||
checkSxtModal.value.disabled = true;
|
||||
checkSxtModal.value.init({nuId:nuInfo.value.nuId})
|
||||
}
|
||||
//选择摄像头成功回调
|
||||
function handleSxtSuccess(record) {
|
||||
formData.iotSn = record.sn;
|
||||
var params = {
|
||||
id: record.id,
|
||||
nuId: nuInfo.value.nuId,
|
||||
nuName: nuInfo.value.nuId,
|
||||
departId:nuInfo.value.departId,
|
||||
departName:nuInfo.value.departName,
|
||||
departServerUrl: nuInfo.value.departServerUrl,
|
||||
}
|
||||
defHttp.post({ url: '/iot/tplink/cameraInfo/edit', params }).then(() => {
|
||||
reload();
|
||||
});
|
||||
}
|
||||
|
||||
//选择电表成功回调
|
||||
function handleDbSuccess(record) {
|
||||
var params = {
|
||||
id: record.id,
|
||||
nuId: nuInfo.value.nuId,
|
||||
nuName: nuInfo.value.nuId,
|
||||
departId:nuInfo.value.departId,
|
||||
departName:nuInfo.value.departName,
|
||||
departServerUrl: nuInfo.value.departServerUrl,
|
||||
}
|
||||
defHttp.post({ url: '/iot/tq/electricityMeter/edit', params }).then(() => {
|
||||
reload();
|
||||
});
|
||||
console.log("🚀 ~ handleDbSuccess ~ params:", params)
|
||||
}
|
||||
|
||||
//选择水表成功回调
|
||||
function handleSbSuccess(record) {
|
||||
var params = {
|
||||
id: record.id,
|
||||
nuId: nuInfo.value.nuId,
|
||||
nuName: nuInfo.value.nuId,
|
||||
departId:nuInfo.value.departId,
|
||||
departName:nuInfo.value.departName,
|
||||
departServerUrl: nuInfo.value.departServerUrl,
|
||||
}
|
||||
defHttp.post({ url: '/iot/tq/waterMeter/edit', params }).then(() => {
|
||||
reload();
|
||||
});
|
||||
console.log("🚀 ~ handleDbSuccess ~ params:", params)
|
||||
}
|
||||
|
||||
//选择温湿度计成功回调
|
||||
function handleWsdjSuccess(record) {
|
||||
var params = {
|
||||
id: record.id,
|
||||
nuId: nuInfo.value.nuId,
|
||||
nuName: nuInfo.value.nuId,
|
||||
departId:nuInfo.value.departId,
|
||||
departName:nuInfo.value.departName,
|
||||
departServerUrl: nuInfo.value.departServerUrl,
|
||||
}
|
||||
defHttp.post({ url: '/iot/yiweilian/humidDevice/edit', params }).then(() => {
|
||||
reload();
|
||||
});
|
||||
console.log("🚀 ~ handleDbSuccess ~ params:", params)
|
||||
}
|
||||
function hadleSuccess(){
|
||||
reload();
|
||||
}
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add(record) {
|
||||
console.log("🚀 ~ add ~ record:", record)
|
||||
nextTick(() => {
|
||||
resetFields();
|
||||
nuInfo.value = record;
|
||||
reload();
|
||||
});
|
||||
}
|
||||
|
||||
function reload() {
|
||||
defHttp.get({ url: '/iot/ddvicesIot/list', params: { nuId: nuInfo.value.nuId } }).then((res) => {
|
||||
console.log("🚀 ~ reload ~ res:", res)
|
||||
dataList.value = res;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function edit(record) {
|
||||
nextTick(() => {
|
||||
resetFields();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
async function submitForm() {
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
submitForm,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.antd-modal-form {
|
||||
padding: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true"
|
||||
:footer-style="{ textAlign: 'right' }" @close="handleCancel">
|
||||
<DevicesForm ref="devicesForm" @ok="submitCallback" :orgCode="orgCode" :formDisabled="disableSubmit"
|
||||
:formBpm="false"></DevicesForm>
|
||||
<template #footer>
|
||||
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
|
||||
<!-- <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button> -->
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose } from 'vue';
|
||||
import DevicesForm from './DevicesForm.vue'
|
||||
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
|
||||
|
||||
const title = ref<string>('');
|
||||
const width = ref<string>('80%');
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const devicesForm = ref();
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add(record) {
|
||||
title.value = '设备管理';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
devicesForm.value.add(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param record
|
||||
*/
|
||||
function edit(record) {
|
||||
title.value = disableSubmit.value ? '详情' : '编辑';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
devicesForm.value.edit(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定按钮点击事件
|
||||
*/
|
||||
function handleOk() {
|
||||
devicesForm.value.submitForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback() {
|
||||
handleCancel();
|
||||
emit('success');
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
<template>
|
||||
<a-col v-for="(item,index) in tableData" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
|
||||
<a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }" :bodyStyle="{ padding: '24px 24px 4px 24px' }">
|
||||
<template #title>
|
||||
<a-row style="font-weight: normal;">
|
||||
<a-col :span="18" style="font-size: 14px;">
|
||||
<div style="font-size: 12px;">SN：<span style="font-weight: bold;">{{item.address}}</span></div>
|
||||
<div style="font-size: 12px;">设备类型：水表</div>
|
||||
</a-col>
|
||||
<a-col :span="6" style="text-align: center;padding-top: 4px;">
|
||||
<div :class="item.relayState=='1'?'zxClass':'lxClass'">{{item.relayState=='1'?'在线':'离线'}}</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<a-row>
|
||||
<a-col :span="12" style="margin-top: -10px;">
|
||||
<span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
|
||||
</a-col>
|
||||
<a-col :span="12" style="margin-top: -10px;">
|
||||
用水量：{{item.eleValue?item.eleValue:'0.0'}}m³
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: left;margin-top: 10px;">
|
||||
同步状态：{{item.syncType =='1'?'已同步':'未同步'}}
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: left;margin-top: 10px;">
|
||||
维修状态：
|
||||
<span v-if="item.maintainStatus=='0'">正常</span>
|
||||
<span v-if="item.maintainStatus=='1'" style="color: red;">维修中</span>
|
||||
<span v-if="item.maintainStatus=='2'">报废</span>
|
||||
</a-col>
|
||||
<!-- <a-col :span="14" style="text-align: right;font-size: 44px;font-weight: bold;margin-top:18px;">
|
||||
<span>{{item.eleValue?item.eleValue:'0.00'}}</span>
|
||||
</a-col>
|
||||
<a-col :span="8" style="padding: 12px 0 0 5px;margin-top:18px;">
|
||||
<div style="font-size: 12px;margin: 5px 0 -5px 2px;padding:2px;">KWH</div>
|
||||
<div style="margin-top:-3px;"><span style="background:#eeeeee;padding: 2px;border-radius:5px;font-size:11px;">用电量</span></div>
|
||||
</a-col>-->
|
||||
<a-col :span="24" style="text-align: center;margin-top: 20px;">
|
||||
<span style="display:inline-block;cursor: pointer;" @click="handleRead(item)">
|
||||
<span class="tbClass"><img src="../../../assets/iot/a1.png" style="width:20px;" /></span><br/>
|
||||
<span class="antTitle">抄表</span>
|
||||
</span>
|
||||
<span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleDel(item)" v-if="item.syncType=='0'">
|
||||
<span class="tbClass"><img src="../../../assets/iot/a15.png" style="width:20px;" /></span><br/>
|
||||
<span class="antTitle">移除</span>
|
||||
</span>
|
||||
<span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleWeixiu(item)" v-if="item.maintainStatus=='1'" >
|
||||
<span class="tbClass"><img src="../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
|
||||
<span class="antTitle">维修</span>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<CameraPreviewModal ref="previewModal"></CameraPreviewModal>
|
||||
<a-modal v-model:visible="wxvisible" title="维修" @ok="handleWxOk">
|
||||
<div style="padding: 10px;text-align: center;">
|
||||
<div style="line-height: 60px;">
|
||||
维修状态：<a-radio-group v-model:value="maintainStatus" :options="plainOptions" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="iot-nuIotCameraInfo" setup>
|
||||
import {ref} from 'vue';
|
||||
import {Modal} from 'ant-design-vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
|
||||
import { c } from 'node_modules/vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
|
||||
const wxvisible = ref<boolean>(false);
|
||||
const bxInfo = ref<any>({});
|
||||
const maintainStatus = ref<string>('');
|
||||
const previewModal = ref();
|
||||
const { createMessage } = useMessage();
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const props = defineProps({
|
||||
tableData: { type: Object, default: () => ([]) },
|
||||
});
|
||||
const plainOptions = [
|
||||
{ label: '正常', value: '0' },
|
||||
{ label: '报废', value: '2' },
|
||||
];
|
||||
function handleWxOk() {
|
||||
if(!maintainStatus.value){
|
||||
createMessage.error('请选择报修状态！');
|
||||
}else{
|
||||
wxvisible.value = false;
|
||||
var params = {
|
||||
id: bxInfo.value.id,
|
||||
maintainStatus: maintainStatus.value,
|
||||
}
|
||||
defHttp.post({ url: '/iot/tq/waterMeter/edit', params }).then(() => {
|
||||
emit("ok");
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 维修
|
||||
*/
|
||||
function handleWeixiu(record){
|
||||
bxInfo.value = record;
|
||||
wxvisible.value = true;
|
||||
}
|
||||
|
||||
// 抄水表
|
||||
async function handleRead(record) {
|
||||
const params = {
|
||||
'cid' : record.cid,
|
||||
'address' : record.address,
|
||||
};
|
||||
await defHttp.get({ url: '/iot/tq/waterMeter/waterRead', params }).then((res) => {
|
||||
console.log("🚀 ~ handleRead ~ res:", res)
|
||||
});
|
||||
setTimeout(() => {
|
||||
emit("ok");
|
||||
}, 4000);
|
||||
}
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
function handleDel(record) {
|
||||
console.log("🚀 ~ handleDel ~ record:", record)
|
||||
Modal.confirm({
|
||||
title: '移除水表',
|
||||
content: '是否要移除此水表？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
// todo 删除
|
||||
defHttp.post({ url: '/iot/tq/waterMeter/updateDepartById', params: { id: record.id } }).then(() => {
|
||||
emit("ok");
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
|
||||
.zxClass{
|
||||
font-size:14px;
|
||||
background: linear-gradient(to right, #1ea0fa, #017de9);
|
||||
border-radius: 8px;
|
||||
height: 35px;
|
||||
color: white;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.lxClass{
|
||||
font-size:14px;
|
||||
background: linear-gradient(to right, #cccccc, #cccccc);
|
||||
border-radius: 8px;
|
||||
height: 35px;
|
||||
color: white;
|
||||
line-height: 35px;
|
||||
}
|
||||
.tbClass{
|
||||
background: #f6f6f6;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.antTitle{
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ytbClass{
|
||||
font-size:12px;
|
||||
background: linear-gradient(to right, #1ea0fa, #017de9);
|
||||
border-radius: 8px;
|
||||
height: 20px;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.wtbClass{
|
||||
font-size:12px;
|
||||
background: linear-gradient(to right, #cccccc, #cccccc);
|
||||
border-radius: 8px;
|
||||
height: 20px;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<a-col v-for="(item,index) in tableData" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
|
||||
<a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }" :bodyStyle="{ padding: '24px 24px 4px 24px' }">
|
||||
<template #title>
|
||||
<a-row style="font-weight: normal;">
|
||||
<a-col :span="18" style="font-size: 14px;">
|
||||
<div style="font-size: 12px;">SN：<span style="font-weight: bold;">{{item.sn}}</span></div>
|
||||
<div style="font-size: 12px;">设备类型：摄像头</div>
|
||||
</a-col>
|
||||
<a-col :span="6" style="text-align: center;padding-top: 4px;">
|
||||
<div :class="item.deviceStatus=='1'?'zxClass':'lxClass'">{{item.deviceStatus =='1'?'在线':'离线'}}</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<a-row>
|
||||
<a-col :span="24" style="margin-top: -10px;">
|
||||
<span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: left;margin-top: 10px;">
|
||||
同步状态：{{item.syncType =='1'?'已同步':'未同步'}}
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: left;margin-top: 10px;">
|
||||
维修状态：
|
||||
<span v-if="item.maintainStatus=='0'">正常</span>
|
||||
<span v-if="item.maintainStatus=='1'" style="color: red;">维修中</span>
|
||||
<span v-if="item.maintainStatus=='2'">报废</span>
|
||||
</a-col>
|
||||
<a-col :span="24" style="text-align: center;margin-top: 20px;">
|
||||
<span style="display:inline-block;cursor: pointer;" @click="handlePreview(item)">
|
||||
<span class="tbClass"><img src="../../../assets/iot/a14.png" style="width:20px;" /></span><br/>
|
||||
<span class="antTitle">预览</span>
|
||||
</span>
|
||||
<span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleDel(item)" v-if="item.syncType=='0'">
|
||||
<span class="tbClass"><img src="../../../assets/iot/a15.png" style="width:20px;" /></span><br/>
|
||||
<span class="antTitle">移除</span>
|
||||
</span>
|
||||
<span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleWeixiu(item)" v-if="item.maintainStatus=='1'" >
|
||||
<span class="tbClass"><img src="../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
|
||||
<span class="antTitle">维修</span>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<CameraPreviewModal ref="previewModal"></CameraPreviewModal>
|
||||
<a-modal v-model:visible="wxvisible" title="维修" @ok="handleWxOk">
|
||||
<div style="padding: 10px;text-align: center;">
|
||||
<div style="line-height: 60px;">
|
||||
维修状态：<a-radio-group v-model:value="maintainStatus" :options="plainOptions" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="iot-nuIotCameraInfo" setup>
|
||||
import {ref} from 'vue';
|
||||
import {Modal} from 'ant-design-vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
|
||||
import { c } from 'node_modules/vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
|
||||
const wxvisible = ref<boolean>(false);
|
||||
const bxInfo = ref<any>({});
|
||||
const maintainStatus = ref<string>('');
|
||||
const previewModal = ref();
|
||||
const { createMessage } = useMessage();
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const props = defineProps({
|
||||
tableData: { type: Object, default: () => ([]) },
|
||||
});
|
||||
const plainOptions = [
|
||||
{ label: '正常', value: '0' },
|
||||
{ label: '报废', value: '2' },
|
||||
];
|
||||
function handleWxOk() {
|
||||
if(!maintainStatus.value){
|
||||
createMessage.error('请选择报修状态！');
|
||||
}else{
|
||||
wxvisible.value = false;
|
||||
var params = {
|
||||
id: bxInfo.value.id,
|
||||
maintainStatus: maintainStatus.value,
|
||||
}
|
||||
defHttp.post({ url: '/iot/tplink/cameraInfo/edit', params }).then(() => {
|
||||
emit("ok");
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 维修
|
||||
*/
|
||||
function handleWeixiu(record){
|
||||
bxInfo.value = record;
|
||||
wxvisible.value = true;
|
||||
}
|
||||
/**
|
||||
* 预览
|
||||
*/
|
||||
function handlePreview(record) {
|
||||
previewModal.value.disableSubmit = true;
|
||||
previewModal.value.edit(record);
|
||||
}
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
function handleDel(record) {
|
||||
console.log("🚀 ~ handleDel ~ record:", record)
|
||||
const list = props.tableData;
|
||||
if(list.length==1){
|
||||
createMessage.error('请至少保留一个摄像头！');
|
||||
}else{
|
||||
Modal.confirm({
|
||||
title: '移除摄像头',
|
||||
content: '是否要移除此摄像头？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
// todo 删除
|
||||
defHttp.post({ url: '/iot/tplink/cameraInfo/updateDepartById', params: { id: record.id } }).then(() => {
|
||||
emit("ok");
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
|
||||
.zxClass{
|
||||
font-size:14px;
|
||||
background: linear-gradient(to right, #1ea0fa, #017de9);
|
||||
border-radius: 8px;
|
||||
height: 35px;
|
||||
color: white;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.lxClass{
|
||||
font-size:14px;
|
||||
background: linear-gradient(to right, #cccccc, #cccccc);
|
||||
border-radius: 8px;
|
||||
height: 35px;
|
||||
color: white;
|
||||
line-height: 35px;
|
||||
}
|
||||
.tbClass{
|
||||
background: #f6f6f6;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.antTitle{
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ytbClass{
|
||||
font-size:12px;
|
||||
background: linear-gradient(to right, #1ea0fa, #017de9);
|
||||
border-radius: 8px;
|
||||
height: 20px;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.wtbClass{
|
||||
font-size:12px;
|
||||
background: linear-gradient(to right, #cccccc, #cccccc);
|
||||
border-radius: 8px;
|
||||
height: 20px;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
<template>
|
||||
<a-col v-for="(item,index) in tableData" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
|
||||
<a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }" :bodyStyle="{ padding: '24px 24px 4px 24px' }">
|
||||
<template #title>
|
||||
<a-row style="font-weight: normal;">
|
||||
<a-col :span="18" style="font-size: 14px;">
|
||||
<div style="font-size: 12px;">SN：<span style="font-weight: bold;">{{item.sn}}</span></div>
|
||||
<div style="font-size: 12px;">设备类型：温湿度计</div>
|
||||
</a-col>
|
||||
<a-col :span="6" style="text-align: center;padding-top: 4px;">
|
||||
<div :class="item.status=='1'?'zxClass':'lxClass'">{{item.status=='1'?'在线':'离线'}}</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<a-row>
|
||||
<a-col :span="12" style="margin-top: -10px;">
|
||||
温度：{{item.temperature?item.temperature:'-'}}℃
|
||||
</a-col>
|
||||
<a-col :span="12" style="margin-top: -10px;">
|
||||
湿度：{{item.humidity?item.humidity:'-'}}%
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: left;margin-top: 10px;">
|
||||
同步状态：{{item.syncType =='1'?'已同步':'未同步'}}
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: left;margin-top: 10px;">
|
||||
维修状态：
|
||||
<span v-if="item.maintainStatus=='0'">正常</span>
|
||||
<span v-if="item.maintainStatus=='1'" style="color: red;">维修中</span>
|
||||
<span v-if="item.maintainStatus=='2'">报废</span>
|
||||
</a-col>
|
||||
<!-- <a-col :span="14" style="text-align: right;font-size: 44px;font-weight: bold;margin-top:18px;">
|
||||
<span>{{item.eleValue?item.eleValue:'0.00'}}</span>
|
||||
</a-col>
|
||||
<a-col :span="8" style="padding: 12px 0 0 5px;margin-top:18px;">
|
||||
<div style="font-size: 12px;margin: 5px 0 -5px 2px;padding:2px;">KWH</div>
|
||||
<div style="margin-top:-3px;"><span style="background:#eeeeee;padding: 2px;border-radius:5px;font-size:11px;">用电量</span></div>
|
||||
</a-col>-->
|
||||
<a-col :span="24" style="text-align: center;margin-top: 20px;">
|
||||
<span style="display:inline-block;cursor: pointer;" @click="handleRead(item)">
|
||||
<span class="tbClass"><img src="../../../assets/iot/a1.png" style="width:20px;" /></span><br/>
|
||||
<span class="antTitle">抄表</span>
|
||||
</span>
|
||||
<span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleDel(item)" v-if="item.syncType=='0'">
|
||||
<span class="tbClass"><img src="../../../assets/iot/a15.png" style="width:20px;" /></span><br/>
|
||||
<span class="antTitle">移除</span>
|
||||
</span>
|
||||
<span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleWeixiu(item)" v-if="item.maintainStatus=='1'" >
|
||||
<span class="tbClass"><img src="../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
|
||||
<span class="antTitle">维修</span>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<CameraPreviewModal ref="previewModal"></CameraPreviewModal>
|
||||
<a-modal v-model:visible="wxvisible" title="维修" @ok="handleWxOk">
|
||||
<div style="padding: 10px;text-align: center;">
|
||||
<div style="line-height: 60px;">
|
||||
维修状态：<a-radio-group v-model:value="maintainStatus" :options="plainOptions" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="iot-nuIotCameraInfo" setup>
|
||||
import {ref} from 'vue';
|
||||
import {Modal} from 'ant-design-vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
|
||||
import { c } from 'node_modules/vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
|
||||
const wxvisible = ref<boolean>(false);
|
||||
const bxInfo = ref<any>({});
|
||||
const maintainStatus = ref<string>('');
|
||||
const previewModal = ref();
|
||||
const { createMessage } = useMessage();
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const props = defineProps({
|
||||
tableData: { type: Object, default: () => ([]) },
|
||||
});
|
||||
const plainOptions = [
|
||||
{ label: '正常', value: '0' },
|
||||
{ label: '报废', value: '2' },
|
||||
];
|
||||
function handleWxOk() {
|
||||
if(!maintainStatus.value){
|
||||
createMessage.error('请选择报修状态！');
|
||||
}else{
|
||||
wxvisible.value = false;
|
||||
var params = {
|
||||
id: bxInfo.value.id,
|
||||
maintainStatus: maintainStatus.value,
|
||||
}
|
||||
defHttp.post({ url: '/iot/yiweilian/humidDevice/edit', params }).then(() => {
|
||||
emit("ok");
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 维修
|
||||
*/
|
||||
function handleWeixiu(record){
|
||||
bxInfo.value = record;
|
||||
wxvisible.value = true;
|
||||
}
|
||||
|
||||
// 抄温湿度计
|
||||
async function handleRead(record) {
|
||||
const params = {
|
||||
'sn' : record.sn,
|
||||
};
|
||||
await defHttp.get({ url: '/iot/yiweilian/humidDevice/updateDeviceRealTime', params }).then((res) => {
|
||||
console.log("🚀 ~ handleRead ~ res:", res)
|
||||
});
|
||||
setTimeout(() => {
|
||||
emit("ok");
|
||||
}, 4000);
|
||||
}
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
function handleDel(record) {
|
||||
console.log("🚀 ~ handleDel ~ record:", record)
|
||||
Modal.confirm({
|
||||
title: '移除温湿度计',
|
||||
content: '是否要移除此温湿度计？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
// todo 删除
|
||||
defHttp.post({ url: '/iot/yiweilian/humidDevice/updateDepartById', params: { id: record.id } }).then(() => {
|
||||
emit("ok");
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
|
||||
.zxClass{
|
||||
font-size:14px;
|
||||
background: linear-gradient(to right, #1ea0fa, #017de9);
|
||||
border-radius: 8px;
|
||||
height: 35px;
|
||||
color: white;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.lxClass{
|
||||
font-size:14px;
|
||||
background: linear-gradient(to right, #cccccc, #cccccc);
|
||||
border-radius: 8px;
|
||||
height: 35px;
|
||||
color: white;
|
||||
line-height: 35px;
|
||||
}
|
||||
.tbClass{
|
||||
background: #f6f6f6;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.antTitle{
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ytbClass{
|
||||
font-size:12px;
|
||||
background: linear-gradient(to right, #1ea0fa, #017de9);
|
||||
border-radius: 8px;
|
||||
height: 20px;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.wtbClass{
|
||||
font-size:12px;
|
||||
background: linear-gradient(to right, #cccccc, #cccccc);
|
||||
border-radius: 8px;
|
||||
height: 20px;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,433 @@
|
|||
<template>
|
||||
<div class="p-2 base-class">
|
||||
<a-card class="base-con-class">
|
||||
<div class="org-info-card">
|
||||
<div class="org-info-header">
|
||||
<div class="org-title">
|
||||
<span class="base-info-label">机构信息:</span>
|
||||
<span v-if="!orgData" class="base-info-label" style="color: #ff4d4f;"> 请先选择机构</span>
|
||||
<span v-else class="base-info-label">{{ orgData?.departName }}</span>
|
||||
<span v-if="orgData" class="base-info-label" style="margin-left:30px;">机构编码：{{ orgData?.orgCode || '-' }}</span>
|
||||
</div>
|
||||
<a-button v-if="!orgSelectedCon" class="reset-btn" type="primary" @click.stop="orgReset" style="margin-top:10px;">
|
||||
<span>重新选择</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
<div class="p-2 con-class" style="margin-top: -10px;" v-show="orgSelectedCon">
|
||||
<a-card :bordered="false" class="org-container">
|
||||
<a-row :style="props.layout === 'half' ? { height: '68vh', overflow: 'auto' } : {}">
|
||||
<a-col v-for="item in orgTableList.records" :key="item.id" :xs="24" :sm="24"
|
||||
:md="props.layout == 'full' ? 12 : 8"
|
||||
:lg="props.layout == 'full' ? 12 : 8" :xl="props.layout == 'full' ? 8 : 8"
|
||||
:xxl="props.layout == 'full' ? 6 : 8"
|
||||
style="padding: 8px;min-height: 290px;">
|
||||
<div class="org-card" :class="{ 'active': item.orgId == orgData?.orgId }">
|
||||
<a-card
|
||||
:class="{ 'selected-card': selectedOrgs.some(org => org.orgCode === item.orgCode) }"
|
||||
style="width: 100%; border-radius: 8px; border:0px; "
|
||||
:headStyle="{ height: '60px', padding: '0 24px' }"
|
||||
:style="{ cursor: showChoose ? 'pointer' : 'default' }"
|
||||
:bodyStyle="{ padding: '24px 24px 4px 24px !important' }">
|
||||
<template #title>
|
||||
<a-row style="font-weight: normal;">
|
||||
<a-col :span="props.layout == 'full' ? 22 : 21" style="font-size: 14px; padding-top: 4px;">
|
||||
<div>
|
||||
<span style="font-weight: bold;">{{ item.departName }}</span>
|
||||
<span style="color: green; font-size: 12px; margin-left: 8px;" v-if="selectedOrgs.some(org => org.orgCode === item.orgCode)">已选择</span>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="props.layout == 'full' ? 2 : 3" style="text-align: center; padding-top: 4px;">
|
||||
<div class="zxClass">{{ item.orgCode }}</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<p>加1盟时间：{{ item.franchiseTime?.substring(0, 10) }}</p>
|
||||
<p>机构负责人：{{ item.orgLeader }}</p>
|
||||
<p>负责人电话：{{ item.orgLeaderPhone }}</p>
|
||||
<p :title="item.comRegisterAddress">
|
||||
机构地址：{{ item.comRegisterAddress }}</p>
|
||||
<a-divider />
|
||||
<div style="text-align: center;">
|
||||
<a-button type="primary" @click="handleOrgSelected(item)">预览</a-button>
|
||||
<a-button type="primary" @click="handleOrgSelected(item)" style="margin-left:10px;">配置</a-button>
|
||||
<a-button type="primary" @click="handleOrgSelected(item)" style="margin-left:10px;">日志</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col v-if="orgTableList.length == 0">
|
||||
<div style="margin: 30px auto;">
|
||||
<a-empty/>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div
|
||||
style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;"
|
||||
v-show="props.layout == 'full'">
|
||||
<span style="margin-right: 10px;">共 {{ orgTableList.total }} 条数据</span>
|
||||
<Pagination showLessItems v-model:current="pageParams.pageNo"
|
||||
:pageSize="pageParams.pageSize" size="small"
|
||||
show-quick-jumper :total="orgTableList.total" @change="reload"/>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
<div class="p-2 cardContent" v-show="!orgSelectedCon">
|
||||
<a-row>
|
||||
<a-col :span="24" style="margin-bottom: 10px;">
|
||||
<a-button type="primary" @click="handleAddNuIot">添加区域</a-button>
|
||||
<a-button type="primary" style="margin-left: 10px;">设备预览</a-button>
|
||||
</a-col>
|
||||
<a-col v-for="(item,index) in nuDataList" 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']"
|
||||
@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-button size="small" @click="handleSbgl(item)" >设备管理</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="24" v-show="nuDataList.length == 0" >
|
||||
<a-empty />
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</div>
|
||||
<AddNuIotModal ref="addNuIotModal" @success="handleNuSuccess"/>
|
||||
<DevicesModal ref="devicesModal" @success="handleNuSuccess"/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="synchronization-directive" setup>
|
||||
import {ref, reactive, onMounted} from 'vue';
|
||||
import {Empty} from 'ant-design-vue';
|
||||
import {Modal} from 'ant-design-vue';
|
||||
import { Pagination } from 'ant-design-vue'
|
||||
import {getOrgInfo} from './DeviceSync.api'
|
||||
import AddNuIotModal from './compoents/AddNuIotModal.vue'
|
||||
import DevicesModal from './compoents/DevicesModal.vue'
|
||||
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
|
||||
const emit = defineEmits(['orgChanged']);
|
||||
|
||||
const props = defineProps({
|
||||
showChoose: {type: Boolean, default: false},
|
||||
layout: {type: String, default: 'full'}, // 控制布局: 'full' 或 'half'
|
||||
})
|
||||
const orgTableList = ref<any>({records: [], total: 0})
|
||||
|
||||
|
||||
|
||||
interface OrganizationData {
|
||||
orgId?: string;
|
||||
departName: string;
|
||||
orgCode: string;
|
||||
franchiseTime?: string;
|
||||
orgLeader?: string;
|
||||
orgLeaderPhone?: string;
|
||||
comRegisterAddress?: string;
|
||||
sysOrgCode: string;
|
||||
}
|
||||
|
||||
const queryParam = reactive<any>({})
|
||||
const pageParams = ref({pageNo: 1, pageSize: 8})
|
||||
const orgData = ref<OrganizationData | null>(null);
|
||||
const orgSelectedCon = ref(true);
|
||||
const addNuIotModal = ref();
|
||||
const devicesModal = ref();
|
||||
const nuDataList = ref([]);
|
||||
const isSelected = ref(false);
|
||||
|
||||
// 当前选中的卡片 ID 数组
|
||||
const selectedOrgs = ref<string[]>([])
|
||||
|
||||
function handleAddNuIot(){
|
||||
addNuIotModal.value.disableSubmit = false;
|
||||
addNuIotModal.value.add(orgData.value)
|
||||
}
|
||||
|
||||
function handleSbgl(item){
|
||||
item.departId = orgData.value.orgId;
|
||||
item.departName = orgData.value.departName;
|
||||
item.departServerUrl = orgData.value.orgCode;
|
||||
devicesModal.value.disableSubmit = false;
|
||||
devicesModal.value.add(item);
|
||||
}
|
||||
//添加护理单元及摄像头新增回调
|
||||
function handleNuSuccess(){
|
||||
getNuList(orgData.value)
|
||||
}
|
||||
|
||||
//点击卡片
|
||||
const handleOrgSelected = async (org) => {
|
||||
console.log("🚀 ~ handleOrgSelected ~ org:", org)
|
||||
orgData.value = org;
|
||||
orgSelectedCon.value = false;
|
||||
getNuList(org)
|
||||
};
|
||||
function getNuList(org){
|
||||
defHttp.get({ url: '/admin/nuBaseInfo/nuBaseInfo/getBaseWlsbList', params: {orgCode: org.orgCode} }).then(res => {
|
||||
console.log("🚀 ~ handleOrgSelected ~ res:", res)
|
||||
nuDataList.value = res
|
||||
})
|
||||
}
|
||||
|
||||
//重新选择
|
||||
const orgReset = () => {
|
||||
orgSelectedCon.value = true;
|
||||
}
|
||||
|
||||
|
||||
/** 数据加载-加载机构卡片 */
|
||||
function reload() {
|
||||
queryParam.pageSize = pageParams.value.pageSize
|
||||
queryParam.pageNo = pageParams.value.pageNo
|
||||
if (props.layout == 'half') {
|
||||
queryParam.pageSize = -1
|
||||
}
|
||||
getOrgInfo(queryParam).then(res => {
|
||||
orgTableList.value = res
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
reload()
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
:deep(.ant-card-bordered) {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.base-class {
|
||||
:deep(.ant-card .ant-card-body) {
|
||||
padding-top: 10px !important;
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.con-class {
|
||||
:deep(.ant-card-body) {
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.base-con-class {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-2px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.org-info-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
padding-bottom: 5px;
|
||||
// border-bottom: 1px solid #f0f0f0;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.org-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 9px;
|
||||
|
||||
.base-info-label {
|
||||
font-weight: 600;
|
||||
color: #595959;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.org-name {
|
||||
margin-left: 10px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 新增的机构卡片样式 */
|
||||
.org-cards-container {
|
||||
max-height: 75vh;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.org-card {
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
|
||||
background: radial-gradient(circle at center, #c7e6ff 0%, #d4eeff 70%, #e4f0ff 100%);
|
||||
}
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 16px;
|
||||
min-height: 48px;
|
||||
|
||||
.ant-card-head-title {
|
||||
padding: 12px 0;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.org-container {
|
||||
//background: transparent;
|
||||
background: white;
|
||||
|
||||
.org-card {
|
||||
padding: 0px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s;
|
||||
background: white;
|
||||
|
||||
&:hover {
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 2px 12px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid #1890ff;
|
||||
//background: #f0f8ff;
|
||||
}
|
||||
|
||||
.org-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.org-title {
|
||||
margin: 0 0 0 8px;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
>span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.anticon {
|
||||
margin-right: 4px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions) {
|
||||
.ant-descriptions-item-label {
|
||||
width: 80px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.org-info-content {
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.info-item {
|
||||
flex: 1;
|
||||
padding: 0 8px;
|
||||
|
||||
.label {
|
||||
color: #8c8c8c;
|
||||
font-size: 13px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #262626;
|
||||
font-size: 13px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zxClass {
|
||||
font-size: 12px;
|
||||
background: linear-gradient(to right, #1ea0fa, #017de9);
|
||||
border-radius: 8px;
|
||||
height: 25px;
|
||||
color: white;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
|
||||
.selected-card {
|
||||
border: 2px solid #1890ff;
|
||||
box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);
|
||||
}
|
||||
|
||||
.cardContent{
|
||||
margin-top: -10px;background:white;margin:0 10px;border-radius:8px;
|
||||
}
|
||||
|
||||
/* 基础卡片样式 */
|
||||
.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 {
|
||||
border: 2px solid #1890ff;
|
||||
box-shadow: 0 4px 8px rgba(24, 144, 255, 0.4);
|
||||
transform: translate(-3px,-3px);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,392 @@
|
|||
<template>
|
||||
<div class="p-2 base-class">
|
||||
<a-card class="base-con-class">
|
||||
<div class="org-info-card">
|
||||
<div class="org-info-header">
|
||||
<div class="org-title">
|
||||
<span class="base-info-label">机构信息:</span>
|
||||
<span v-if="!orgData" class="base-info-label" style="color: #ff4d4f;"> 请先选择机构</span>
|
||||
<span v-else class="base-info-label">{{ orgData?.departName }}</span>
|
||||
<span v-if="orgData" class="base-info-label" style="margin-left:30px;">机构编码：{{ orgData?.orgCode || '-' }}</span>
|
||||
</div>
|
||||
<a-button v-if="!orgSelectedCon" class="reset-btn" type="primary" @click.stop="orgReset" style="margin-top:10px;">
|
||||
<span>重新选择</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
<div class="p-2 con-class" style="margin-top: -10px;" v-show="orgSelectedCon">
|
||||
<a-card :bordered="false" class="org-container">
|
||||
<a-row :style="props.layout === 'half' ? { height: '68vh', overflow: 'auto' } : {}">
|
||||
<a-col v-for="item in orgTableList.records" :key="item.id" :xs="24" :sm="24"
|
||||
:md="props.layout == 'full' ? 12 : 8"
|
||||
:lg="props.layout == 'full' ? 12 : 8" :xl="props.layout == 'full' ? 8 : 8"
|
||||
:xxl="props.layout == 'full' ? 6 : 8"
|
||||
style="padding: 8px;min-height: 290px;">
|
||||
<div class="org-card" :class="{ 'active': item.orgId == orgData?.orgId }" @click="handleOrgSelected(item)">
|
||||
<a-card
|
||||
:class="{ 'selected-card': selectedOrgs.some(org => org.orgCode === item.orgCode) }"
|
||||
style="width: 100%; border-radius: 8px; border:0px; "
|
||||
:headStyle="{ height: '60px', padding: '0 24px' }"
|
||||
:style="{ cursor: showChoose ? 'pointer' : 'default' }"
|
||||
:bodyStyle="{ padding: '24px 24px 4px 24px !important' }">
|
||||
<template #title>
|
||||
<a-row style="font-weight: normal;">
|
||||
<a-col :span="props.layout == 'full' ? 22 : 21" style="font-size: 14px; padding-top: 4px;">
|
||||
<div>
|
||||
<span style="font-weight: bold;">{{ item.departName }}</span>
|
||||
<!-- 如果是已选择，显示"已选择" -->
|
||||
<span style="color: green; font-size: 12px; margin-left: 8px;" v-if="selectedOrgs.some(org => org.orgCode === item.orgCode)">已选择</span>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="props.layout == 'full' ? 2 : 3" style="text-align: center; padding-top: 4px;">
|
||||
<div class="zxClass">{{ item.orgCode }}</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<p>加盟时间：{{ item.franchiseTime?.substring(0, 10) }}</p>
|
||||
<p>机构负责人：{{ item.orgLeader }}</p>
|
||||
<p>负责人电话：{{ item.orgLeaderPhone }}</p>
|
||||
<p :title="item.comRegisterAddress">
|
||||
机构地址：{{ item.comRegisterAddress }}</p>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col v-if="orgTableList.length == 0">
|
||||
<div style="margin: 30px auto;">
|
||||
<a-empty/>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div
|
||||
style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;"
|
||||
v-show="props.layout == 'full'">
|
||||
<span style="margin-right: 10px;">共 {{ orgTableList.total }} 条数据</span>
|
||||
<Pagination showLessItems v-model:current="pageParams.pageNo"
|
||||
:pageSize="pageParams.pageSize" size="small"
|
||||
show-quick-jumper :total="orgTableList.total" @change="reload"/>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="synchronization-directive" setup>
|
||||
import {ref, reactive, onMounted} from 'vue';
|
||||
import {Empty} from 'ant-design-vue';
|
||||
import {Modal} from 'ant-design-vue';
|
||||
import { Pagination } from 'ant-design-vue'
|
||||
import {getOrgInfo} from './OrgApplyInfo.api'
|
||||
|
||||
const emit = defineEmits(['orgChanged']);
|
||||
|
||||
const props = defineProps({
|
||||
showChoose: {type: Boolean, default: false},
|
||||
layout: {type: String, default: 'full'}, // 控制布局: 'full' 或 'half'
|
||||
})
|
||||
const orgTableList = ref<any>({records: [], total: 0})
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
|
||||
|
||||
interface OrganizationData {
|
||||
orgId?: string;
|
||||
departName: string;
|
||||
orgCode: string;
|
||||
franchiseTime?: string;
|
||||
orgLeader?: string;
|
||||
orgLeaderPhone?: string;
|
||||
comRegisterAddress?: string;
|
||||
}
|
||||
|
||||
const queryParam = reactive<any>({})
|
||||
const pageParams = ref({pageNo: 1, pageSize: 8})
|
||||
const orgData = ref<OrganizationData | null>(null);
|
||||
const orgSelectedCon = ref(true);
|
||||
|
||||
// 当前选中的卡片 ID 数组
|
||||
const selectedOrgs = ref<string[]>([])
|
||||
|
||||
const handleOrgSelected = async (org) => {
|
||||
if (!!orgData.value && orgData.value.orgId != org.orgId) {
|
||||
// Modal.confirm({
|
||||
// title: '变更机构提醒',
|
||||
// content: '是否变更机构！',
|
||||
// okText: '确认',
|
||||
// cancelText: '取消',
|
||||
// onOk: async () => {
|
||||
// await loadOrgData(org);
|
||||
// },
|
||||
// });
|
||||
await loadOrgData(org);
|
||||
} else {
|
||||
await loadOrgData(org);
|
||||
}
|
||||
};
|
||||
|
||||
const loadOrgData = async (org) => {
|
||||
// 更新机构数据
|
||||
orgData.value = org;
|
||||
emit('orgChanged', org)
|
||||
};
|
||||
|
||||
const orgReset = () => {
|
||||
orgSelectedCon.value = true;
|
||||
emit('orgReset');
|
||||
}
|
||||
|
||||
const resetOrgSelectedCon = (v_) => {
|
||||
orgSelectedCon.value = v_
|
||||
}
|
||||
|
||||
/** 数据加载 */
|
||||
function reload() {
|
||||
queryParam.pageSize = pageParams.value.pageSize
|
||||
queryParam.pageNo = pageParams.value.pageNo
|
||||
if (props.layout == 'half') {
|
||||
queryParam.pageSize = -1
|
||||
}
|
||||
getOrgInfo(queryParam).then(res => {
|
||||
orgTableList.value = res
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
reload()
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
orgData,
|
||||
resetOrgSelectedCon,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
:deep(.ant-card-bordered) {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.base-class {
|
||||
:deep(.ant-card .ant-card-body) {
|
||||
padding-top: 10px !important;
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.con-class {
|
||||
:deep(.ant-card-body) {
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.base-con-class {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-2px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.org-info-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
padding-bottom: 5px;
|
||||
// border-bottom: 1px solid #f0f0f0;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.org-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 9px;
|
||||
|
||||
.base-info-label {
|
||||
font-weight: 600;
|
||||
color: #595959;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.org-name {
|
||||
margin-left: 10px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 新增的机构卡片样式 */
|
||||
.org-cards-container {
|
||||
max-height: 75vh;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.org-card {
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
|
||||
background: radial-gradient(circle at center, #c7e6ff 0%, #d4eeff 70%, #e4f0ff 100%);
|
||||
}
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 16px;
|
||||
min-height: 48px;
|
||||
|
||||
.ant-card-head-title {
|
||||
padding: 12px 0;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.org-container {
|
||||
//background: transparent;
|
||||
background: white;
|
||||
|
||||
.org-card {
|
||||
padding: 0px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s;
|
||||
background: white;
|
||||
|
||||
&:hover {
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 2px 12px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid #1890ff;
|
||||
//background: #f0f8ff;
|
||||
}
|
||||
|
||||
.org-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.org-title {
|
||||
margin: 0 0 0 8px;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
>span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.anticon {
|
||||
margin-right: 4px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions) {
|
||||
.ant-descriptions-item-label {
|
||||
width: 80px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.org-info-content {
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.info-item {
|
||||
flex: 1;
|
||||
padding: 0 8px;
|
||||
|
||||
.label {
|
||||
color: #8c8c8c;
|
||||
font-size: 13px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #262626;
|
||||
font-size: 13px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zxClass {
|
||||
font-size: 12px;
|
||||
background: linear-gradient(to right, #1ea0fa, #017de9);
|
||||
border-radius: 8px;
|
||||
height: 25px;
|
||||
color: white;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.tbClass {
|
||||
background: #f6f6f6;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.antTitle {
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ellipsis-one-lines {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.selected-card {
|
||||
border: 2px solid #1890ff;
|
||||
box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue