feat:添加界面，接入设备数据

web

2025-03-25 c1e2ec17485606ba8d2d6de9520396e55248ff6d

feat:添加界面，接入设备数据

 .env.development

@@ -5,6 +5,9 @@
# 开发环境配置
VITE_APP_ENV = 'development'

# 图片地址
VITE_APP_IMG_BASEURL = 'http://192.168.0.200:8036/upload'

# 金川接口
  # VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8030'
  # VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8036'

 .env.production

@@ -5,8 +5,10 @@
# 开发环境配置
VITE_APP_ENV = 'production'

# 图片地址
VITE_APP_IMG_BASEURL = 'http://113.250.189.120:8036/upload'

# 金川管理系统/开发环境
#VITE_APP_PUBLIC_REQUEST_API = 'https://wise.huiwuyuntong.com/farming-api'
 VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8036'
# 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip

 src/api/facility/index.js

@@ -37,5 +37,13 @@
                data,
            });
        },
        get: (params) => {
            return publicRequest({
                url: '/waterFacility/get',
                method: 'get',
                params
            });
        },

    };
}

 src/api/facility/point.js

@@ -36,5 +36,11 @@
                data
            });
        },
        getParentPoint: () => {
            return publicRequest({
                url: 'waterMonitoryPoint/getListTree',
                method: 'get',
            })
        }
    };
}

 src/api/screen/shebei/index.js

对比新文件
@@ -0,0 +1,22 @@
import {publicRequest} from '@/utils/request'


/**
 * 获取水温设备菜单
 */
export const getTemperatureMenu = () => {
    return publicRequest({
        url: 'waterTemperature/getFacilityList',
        method: 'get',
    })
}

/**
 * 获取流量设备菜单
 */
export const getFlowMenu = () => {
    return publicRequest({
        url: 'waterFlow/getFacilityList',
        method: 'get',
    })
}

 src/components/Menu/MenuItem.vue

对比新文件
@@ -0,0 +1,35 @@
<script setup>

const props = defineProps({
    item: {
        type: Object,
        default: () => {}
    }
})

</script>

<template>
    <template v-if="!item?.hidden">
        <!-- 只有一个子菜单的情况 -->
        <template v-if="props.item?.children?.length === 0">
            <el-menu-item :index="props.item?.id">{{props.item?.name}}</el-menu-item>
        </template>

        <!-- 多个子菜单的情况 -->
        <el-sub-menu v-else :index="props.item?.id" popper-append-to-body>
            <template #title>
                <span>{{props.item?.name}}</span>
            </template>
            <MenuItem
                v-for="(item, index) in props.item?.children"
                :key="index"
                :item="item"
            ></MenuItem>
        </el-sub-menu>
    </template>
</template>

<style scoped lang="scss">

</style>

 src/components/Menu/index.vue

对比新文件
@@ -0,0 +1,21 @@
<script setup>
import MenuItem from "./MenuItem.vue";

const props = defineProps({
    menuList: {
        type: Array,
        default: () => []
    }
})

</script>

<template>
    <el-menu class="el-menu">
        <MenuItem v-for="(item, index) in props.menuList" :key="index" :item="item" />
    </el-menu>
</template>

<style scoped lang="scss">

</style>

 src/views/facility/facilityList/index.vue

@@ -81,9 +81,10 @@
});
//查询监控点
const pointList = ref();
const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', checkStrictly: true, expandTrigger: 'hover', emitPath: false }; //级联选择器配置
const getPoint = async () => {
    await pointApi().search({limit: 100, page: 1}).then((res) => {
        pointList.value = res.data.list
    await pointApi().getParentPoint().then((res) => {
        pointList.value = res.data
    })
}

@@ -359,14 +360,7 @@
                    </el-select>
                </el-form-item>
                <el-form-item label="选择监控点" prop="pointId">
                    <el-select v-model="form.pointId" :placeholder="inpTip+formLabel.pointId">
                        <el-option
                                v-for="(item,index) in pointList"
                                :label="item.pointName"
                                :value="item.id"
                                :key="index"
                        ></el-option>
                    </el-select>
                    <el-cascader v-model="form.pointId" :options="pointList" :show-all-levels="false" :props="cascaderOption" />
                </el-form-item>
                <el-form-item label="安装日期" prop="installDate">
                    <el-date-picker
@@ -424,6 +418,9 @@
}
.form-box{
    justify-content: normal;
    :deep(.el-cascader){
        flex-grow: 1;
    }
}
</style>
 

 src/views/facility/monitorList/index.vue

@@ -19,13 +19,13 @@
 */
/** 搜索按钮操作 */
function handleQuery() {
  getList({keywords: searchParams.value.keywords})
    getList({keywords: searchParams.value.keywords})
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
    proxy.resetForm("queryRef");
    handleQuery();
}

/**
@@ -33,108 +33,110 @@
 */

const pageParam = ref({
  total: 0,
  limit: 0,
  page: 1,
    total: 0,
    limit: 0,
    page: 1,
})
const tableData = ref([]);

let tableHeader = ref({
  pointName: '监控点名称',
  pointCode: '监控点编号',
  pointType: '监控类型',
  address: '详细地址',
  createTimeView: '创建时间',
  imageUrl: '图片',
  remark: '备注'
    pointName: '监控点名称',
    pointCode: '监控点编号',
    pointType: '监控类型',
    address: '详细地址',
    createTimeView: '创建时间',
    imageUrl: '图片',
    remark: '备注'
})

/** 获取权限列表 */
async function getList(val) {
  loading.value = true;
  let postParam = setPostParams(val)
  await pointApi().search({...postParam, ...searchParams.value}).then((res) => {
    monityList.value = res.data.list;
    tableData.value = res.data.list
    pageParam.value.total = res.data.total
    pageParam.value.limit = res.data.limit
    pageParam.value.page = res.data.page
  })
  loading.value = false;
    loading.value = true;
    let postParam = setPostParams(val)
    await pointApi().search({...postParam, ...searchParams.value}).then((res) => {
        tableData.value = res.data.list
        pageParam.value.total = res.data.total
        pageParam.value.limit = res.data.limit
        pageParam.value.page = res.data.page
    })
    loading.value = false;
}

/**
 *  表单相关
 */
const formLabel = ({
  pointName: '监控点名称',
  pointCode: '监控点编号',
  pointType: '监控点类型',
  parentId: '父级监控点',
  address: '详细地址',
  imageUrl: '图片',
  remark: '备注'
    pointName: '监控点名称',
    pointCode: '监控点编号',
    pointType: '监控点类型',
    parentId: '父级监控点',
    address: '详细地址',
    imageUrl: '图片',
    remark: '备注'
})
const rules = ref({
  pointName: [{required: true, message: `请输入${formLabel.pointName}`, trigger: "blur"}],
  pointCode: [{required: true, message: `请输入${formLabel.address}`, trigger: "blur"}],
  pointType: [{required: true, message: `请输入${formLabel.pointType}`, trigger: "blur"}],
    pointName: [{required: true, message: `请输入${formLabel.pointName}`, trigger: "blur"}],
    pointCode: [{required: true, message: `请输入${formLabel.address}`, trigger: "blur"}],
    pointType: [{required: true, message: `请输入${formLabel.pointType}`, trigger: "blur"}],
});
const form = ref({
  pointName: '',
  pointCode: '',
  pointType: '',
  parentId: '',
  address: '',
  imageUrl: '',
  remark: ''
    pointName: '',
    pointCode: '',
    pointType: '',
    parentId: '',
    address: '',
    imageUrl: '',
    remark: ''
});
const searchParams = ref({
  keywords: '',
    keywords: '',
});
// 监控点列表
const monityList = ref([]);
// 监控点类型
const monityTypeList = ref([]);
const monityTypeList = [
    {id: 1, name: '水温监测点'},
    {id: 2, name: '生态流量监测点'}
];
const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', checkStrictly: true, expandTrigger: 'hover', emitPath: false }; //级联选择器配置

/** 新增按钮操作 */
async function handleAdd() {
  reset();
  open.value = true;
  title.value = "新增";
    reset();
    open.value = true;
    title.value = "新增";
}

/** 修改按钮操作 */
async function handleUpdate(row) {
  reset();
  Object.keys(form.value).forEach(key => {
    if (row.hasOwnProperty(key)) {
      form.value[key] = row[key];
    }
  });
  form.value.id = row.id
  open.value = true;
  title.value = "修改";
    reset();
    Object.keys(form.value).forEach(key => {
        if (row.hasOwnProperty(key)) {
            form.value[key] = row[key];
        }
    });
    form.value.id = row.id
    open.value = true;
    title.value = "修改";
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除名称为"' + row.contact + '"的数据项?').then(function () {
    // return pointApi().remove(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });
    proxy.$modal.confirm('是否确认删除名称为"' + row.contact + '"的数据项?').then(function () {
        // return pointApi().remove(row.id);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {
    });
}


// 获取监控点类型
const getMonitryType = () => {
  monityTypeList.value = [
      {id: 1, name: '水温监测点'},
      {id: 2, name: '生态流量监测点'}
     ]
// 获取监控点列表
const getMonitryList = () => {
    pointApi().getParentPoint().then(res => {
        monityList.value = res.data;
    })
}

/**
@@ -146,179 +148,175 @@

//上传文件，添加图片地址信息
const uploadData = (data) => {
  form.value.imageUrl = data.toString();
    form.value.imageUrl = data.toString();
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      if (form.value.id != undefined) {
        pointApi().modify(form.value).then(res => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        }).catch(() => {
          open.value = false;
          proxy.$modal.msgError("修改失败");
        });
      } else {
        pointApi().create(form.value).then(res => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        }).catch(() => {
          open.value = false;
          proxy.$modal.msgError("新增失败");
        });
      }
    }
  });
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if (form.value.id != undefined) {
                pointApi().modify(form.value).then(res => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                }).catch(() => {
                    open.value = false;
                    proxy.$modal.msgError("修改失败");
                });
            } else {
                pointApi().create(form.value).then(res => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                }).catch(() => {
                    open.value = false;
                    proxy.$modal.msgError("新增失败");
                });
            }
        }
    });
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
    open.value = false;
    reset();
}

/** 表单重置 */
function reset() {
  form.value = {
    parentId: '',
    pointName: '',
    pointCode: '',
    pointType: '',
    address: '',
    imageUrl: '',
    remark: ''
  };
  proxy.resetForm("formRef");
    form.value = {
        parentId: '',
        pointName: '',
        pointCode: '',
        pointType: '',
        address: '',
        imageUrl: '',
        remark: ''
    };
    proxy.resetForm("formRef");
}

onMounted(() => {
  getMonitryType();
  getList();
    getList();
    getMonitryList();
})
</script>
<template>
  <div class="app-container">
    <el-form :model="searchParams" ref="queryRef" :inline="true">
      <el-form-item label="" prop="">
        <el-input
            v-model="searchParams.keywords"
            placeholder="请输入搜索信息"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="app-container">
        <el-form :model="searchParams" ref="queryRef" :inline="true">
            <el-form-item label="" prop="">
                <el-input
                    v-model="searchParams.keywords"
                    placeholder="请输入搜索信息"
                    clearable
                    style="width: 200px"
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
        >新增
        </el-button>
      </el-col>
    </el-row>
    <!--表格及分页-->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column
          v-for="(item, key, index) of tableHeader"
          :prop="key.toString()"
          :label="item"
          :key="index"
          align="center"
      >
        <template #default="scope">
          <div v-if="key === 'imageUrl'">
            <img :src="scope.row.headImg" class="table-headImg"/>
          </div>
          <div v-else-if="key === 'pointType'">
            {{ scope.row.pointType === 1 ? '水温监测点' : '生态流量监测点' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" v-has="['update',route]"
                     @click="handleUpdate(scope.row)">修改
          </el-button>
          <el-button link type="primary" icon="Delete" v-has="['delete',route]"
                     @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
        :total="pageParam.total"
        v-model:page="pageParam.page"
        v-model:limit="pageParam.limit"
        :page-sizes="[10,20,30]"
        @pagination="getList"
    />
    <!-- 添加/修改表单 -->
    <el-dialog :title="title" v-model="open" append-to-body center>
      <el-form class="form-box" ref="formRef" :model="form" :rules="rules" label-width='auto'>
        <el-form-item :label="formLabel.parentId" prop="parentId">
          <el-select v-model="form.parentId" :placeholder="'请输入'+formLabel.parentId">
            <el-option
                v-for="(item,index) in monityList"
                :label="item.pointName"
                :value="item.id"
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="Plus"
                    @click="handleAdd"
                >新增
                </el-button>
            </el-col>
        </el-row>
        <!--表格及分页-->
        <el-table v-loading="loading" :data="tableData">
            <el-table-column
                v-for="(item, key, index) of tableHeader"
                :prop="key.toString()"
                :label="item"
                :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="formLabel.pointType" prop="pointType">
          <el-select v-model="form.pointType" :placeholder="'请输入'+formLabel.pointType">
            <el-option
                v-for="(item,index) in monityTypeList"
                :label="item.name"
                :value="item.id"
                :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="formLabel.pointName" prop="pointName">
          <el-input v-model="form.pointName" :placeholder="'请输入'+formLabel.pointName"/>
        </el-form-item>
        <el-form-item :label="formLabel.pointCode" prop="pointCode">
          <el-input v-model="form.pointCode" :placeholder="'请输入'+formLabel.pointCode"/>
        </el-form-item>
        <el-form-item :label="formLabel.address" prop="address">
          <el-input v-model="form.address" :placeholder="'请输入'+formLabel.address"/>
        </el-form-item>
        <el-form-item :label="formLabel.remark" prop="address">
          <el-input v-model="form.remark" :placeholder="'请输入'+formLabel.remark"/>
        </el-form-item>
<!--        <el-form-item></el-form-item>-->
        <el-form-item label="图片" prop="imageUrl" style="flex: 1">
          <upload-icons @uploadData="uploadData" :imageList="form.imageUrl" :limit="1"></upload-icons>
          <span style="display: block;">(请上传1张设备图片)</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
                align="center"
            >
                <template #default="scope">
                    <div v-if="key === 'imageUrl'">
                        <img :src="scope.row.headImg" class="table-headImg"/>
                    </div>
                    <div v-else-if="key === 'pointType'">
                        {{ scope.row.pointType === 1 ? '水温监测点' : '生态流量监测点' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" v-has="['update',route]"
                               @click="handleUpdate(scope.row)">修改
                    </el-button>
                    <el-button link type="primary" icon="Delete" v-has="['delete',route]"
                               @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :total="pageParam.total"
            v-model:page="pageParam.page"
            v-model:limit="pageParam.limit"
            :page-sizes="[10,20,30]"
            @pagination="getList"
        />
        <!-- 添加/修改表单 -->
        <el-dialog :title="title" v-model="open" append-to-body center>
            <el-form class="form-box" ref="formRef" :model="form" :rules="rules" label-width='auto'>
                <el-form-item :label="formLabel.parentId" prop="parentId">
                    <el-cascader v-model="form.parentId" :options="monityList" :show-all-levels="false" :props="cascaderOption" />
                </el-form-item>
                <el-form-item :label="formLabel.pointType" prop="pointType">
                    <el-select v-model="form.pointType" :placeholder="'请输入'+formLabel.pointType">
                        <el-option
                            v-for="(item,index) in monityTypeList"
                            :label="item.name"
                            :value="item.id"
                            :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="formLabel.pointName" prop="pointName">
                    <el-input v-model="form.pointName" :placeholder="'请输入'+formLabel.pointName"/>
                </el-form-item>
                <el-form-item :label="formLabel.pointCode" prop="pointCode">
                    <el-input v-model="form.pointCode" :placeholder="'请输入'+formLabel.pointCode"/>
                </el-form-item>
                <el-form-item :label="formLabel.address" prop="address">
                    <el-input v-model="form.address" :placeholder="'请输入'+formLabel.address"/>
                </el-form-item>
                <el-form-item :label="formLabel.remark" prop="address">
                    <el-input v-model="form.remark" :placeholder="'请输入'+formLabel.remark"/>
                </el-form-item>
                <!--        <el-form-item></el-form-item>-->
                <el-form-item label="图片" prop="imageUrl" style="flex: 1">
                    <upload-icons @uploadData="uploadData" :imageList="form.imageUrl" :limit="1"></upload-icons>
                    <span style="display: block;">(请上传1张设备图片)</span>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.form-box {
  justify-content: normal;
    justify-content: normal;
    :deep(.el-cascader){
        flex-grow: 1;
    }
}
</style>

 src/views/screen/flow/shebei/index.vue

@@ -1,7 +1,15 @@
<script setup>
import {ref} from "vue";
import {ref, onMounted} from "vue";
import {getUserType} from '@/utils/auth.js'
import facilityApi from "@/api/facility/index";
import { getFlowMenu } from '@/api/screen/shebei/index.js'
import setPostParams from "@/utils/searchParams.js";
import { useRouter } from "vue-router";

const router = useRouter();

const menuList = ref([])
const deviceList = ref([])
const userType = ref(getUserType())
const monitorRef = ref()
const searchVal = ref('')
@@ -12,50 +20,57 @@
    { label: '1个', value: 1 },
])

const shebeiData = ref([
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
    { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
])
// 获取菜单列表
const getMenu = () => {
    getFlowMenu().then(res => {
        menuList.value = res.data
    })
}

// 获取设备
const getDataList = () => {
    let postParam = setPostParams()
    facilityApi().search({ ...postParam, keywords: searchVal.value }).then(res => {
        deviceList.value = res.data.list
    })
}

// 全屏操作
const handleFullScreen = () => {
    monitorRef.value.requestFullscreen()
}

// 选择菜单
const handleSelectMenu = (id) => {
    facilityApi().get({ id }).then(res => {
        deviceList.value = [res.data]
    })
}

onMounted(() => {
    getMenu()
    getDataList()
})
</script>

<template>
    <div class="shebei">
        <div class="shebei-menu">
            <div class="menu-t">设备列表</div>
            <el-menu class="el-menu">
                <el-sub-menu index="1">
                    <template #title>
                        <span>雷达水位计</span>
            <el-menu class="el-menu-vertical-demo" @select="handleSelectMenu">
                <template v-for="(item, index) in menuList" :key="index+1">
                    <template v-if="item?.facilityPOList?.length === 0">
                        <el-menu-item :index="item.id">{{item.name}}</el-menu-item>
                    </template>
                    <el-menu-item index="1-1">SWY001</el-menu-item>
                    <el-menu-item index="1-2">SWY002</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <span>雷达测速仪</span>
                    <template v-else>
                        <el-sub-menu :index="item.id">
                            <template #title>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item v-for="(child, cidx) in item.facilityPOList" :key="cidx" :index="child.id">{{child.facilityName}}</el-menu-item>
                        </el-sub-menu>
                    </template>
                    <el-menu-item index="2-1">CY001</el-menu-item>
                    <el-menu-item index="2-2">CY002</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <span>雷达流量计</span>
                    </template>
                    <el-menu-item index="3-1">LJL001</el-menu-item>
                    <el-menu-item index="3-2">LJL002</el-menu-item>
                </el-sub-menu>
                </template>
            </el-menu>
        </div>
        <div class="shebei-monitor">
@@ -75,9 +90,9 @@
                            :value="item.value"
                        />
                    </el-select>
                    <el-input v-model="searchVal" style="width: 20rem" placeholder="请输入监测点名称" />
                    <el-button><el-icon><Search /></el-icon>搜索</el-button>
                    <el-button style="margin-left: 0" v-if="userType === '1'"><el-icon><Plus /></el-icon>新增</el-button>
                    <el-input v-model="searchVal" style="width: 20rem" placeholder="请输入设备名称" />
                    <el-button @click="getDataList"><el-icon><Search /></el-icon>搜索</el-button>
                    <el-button style="margin-left: 0" v-if="userType === '1'" @click="router.push('/facilityList')"><el-icon><Plus /></el-icon>新增</el-button>
                </div>
                <div class="tool-r" @click="handleFullScreen">
                    <img src="@/assets/images/flow/fullscreen.png" />
@@ -86,49 +101,49 @@
            </div>
            <div class="monitor-box" ref="monitorRef">
                <div class="list-six list" v-if="selectNum === 6">
                    <div class="item" v-for="(item, index) in shebeiData" :key="index">
                    <div class="item" v-for="(item, index) in deviceList" :key="index">
                        <div class="item-t">
                            <div>{{item.name}}</div>
                            <div>{{item.code}}</div>
                            <div>{{item.facilityName}}</div>
                            <div>{{item.facilityCode}}</div>
                        </div>
                        <div class="item-img">
                            <img v-if="item.image" :src="item.image" />
                            <img v-if="item.image" :src="VITE_APP_IMG_BASEURL + item.image" alt="" />
                        </div>
                        <div class="item-info">
                            <div class="online">设备在线状态： <span :style="{color: item.online ? '#56d12c' : '#bababa'}">{{item.online ? '在线' : '掉线'}}</span></div>
                            <div class="time">安装时间： <span>{{item.time}}</span></div>
                            <div class="online">设备在线状态： <span :style="{color: item.isOnline ? '#56d12c' : '#bababa'}">{{item.isOnline ? '在线' : '掉线'}}</span></div>
                            <div class="time">安装时间： <span>{{item.installDate}}</span></div>
                            <div class="address">安装位置： <span>{{item.address}}</span></div>
                        </div>
                    </div>
                </div>
                <div class="list-two list" v-else-if="selectNum === 2">
                    <div class="item" v-for="(item, index) in shebeiData" :key="index">
                    <div class="item" v-for="(item, index) in deviceList" :key="index">
                        <div class="item-t">
                            <div>{{item.name}}</div>
                            <div>{{item.code}}</div>
                            <div>{{item.facilityName}}</div>
                            <div>{{item.facilityCode}}</div>
                        </div>
                        <div class="item-img">
                            <img v-if="item.image" :src="item.image" />
                            <img v-if="item.image" :src="VITE_APP_IMG_BASEURL + item.image" alt="" />
                        </div>
                        <div class="item-info">
                            <div class="online">设备在线状态： <span :style="{color: item.online ? '#56d12c' : '#bababa'}">{{item.online ? '在线' : '掉线'}}</span></div>
                            <div class="time">安装时间： <span>{{item.time}}</span></div>
                            <div class="online">设备在线状态： <span :style="{color: item.isOnline ? '#56d12c' : '#bababa'}">{{item.isOnline ? '在线' : '掉线'}}</span></div>
                            <div class="time">安装时间： <span>{{item.installDate}}</span></div>
                            <div class="address">安装位置： <span>{{item.address}}</span></div>
                        </div>
                    </div>
                </div>
                <div class="list-one list" v-else-if="selectNum === 1">
                    <div class="item" v-for="(item, index) in shebeiData" :key="index">
                    <div class="item" v-for="(item, index) in deviceList" :key="index">
                        <div class="item-t">
                            <div>{{item.name}}</div>
                            <div>{{item.code}}</div>
                            <div>{{item.facilityName}}</div>
                            <div>{{item.facilityCode}}</div>
                        </div>
                        <div class="item-img">
                            <img v-if="item.image" :src="item.image" />
                            <img v-if="item.image" :src="VITE_APP_IMG_BASEURL + item.image" alt="" />
                        </div>
                        <div class="item-info">
                            <div class="online">设备在线状态： <span :style="{color: item.online ? '#56d12c' : '#bababa'}">{{item.online ? '在线' : '掉线'}}</span></div>
                            <div class="time">安装时间： <span>{{item.time}}</span></div>
                            <div class="online">设备在线状态： <span :style="{color: item.isOnline ? '#56d12c' : '#bababa'}">{{item.isOnline ? '在线' : '掉线'}}</span></div>
                            <div class="time">安装时间： <span>{{item.installDate}}</span></div>
                            <div class="address">安装位置： <span>{{item.address}}</span></div>
                        </div>
                    </div>