fix: 生态报表

web

2025-03-26 98247bb0b4da9a322c97867262c1a76c53ace520

fix: 生态报表

 .env.development

@@ -6,7 +6,7 @@
VITE_APP_ENV = 'development'

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

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

 src/api/screen/index.js

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

/**
 * 获取生态流量监测点
 */
export const getFlowPointList = () => {
    return publicRequest({
        url: "/waterFlow/getPointList",
        method: "GET",
    })
}

/**
 * 获取水温监测点
 */
export const getTemperaturePointList = () => {
    return publicRequest({
        url: "/waterTemperature/getPointList",
        method: "GET",
    })
}

 src/api/screen/report/index.js

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


/**
 * 生态流量报表数据
 */
export const getFlowReportList = (data) => {
    return publicRequest({
        url: '/dataUploadLljRecord/search',
        method: 'post',
        data
    })
}

/**
 * 生态流量报表数据导出
 */
export const exportFlowReportList = (data) => {
    return publicRequest({
        url: '/dataUploadLljRecord/exportExcel',
        method: 'post',
        data,
        responseType: 'blob'
    })
}

 src/assets/images/screen_home.png

 src/assets/images/screen_home_bg.png

 src/components/Table/index.vue

@@ -43,7 +43,7 @@
const loading = ref(false);

// 默认第一页
const getData = (data={page:1}) => {
const getData = (data={ page: state.page }) => {
    const pagedata = { limit: state.limit, page: data.page, ...props.searchData }
    loading.value = true;
    props.getList(pagedata).then(res => {
@@ -54,12 +54,19 @@
    })
}

// 分页按钮
const paginationFun = (data) => {
    state.page = data.page
    getData(data)
}

onMounted(() =>{
    getData({ page: state.page })
})

// 将方法抛出去，外面可以调用
defineExpose({
    state,
    getData
})
</script>
@@ -109,9 +116,9 @@
            <pagination
                layout="prev, pager, next, jumper"
                :total="state.total"
                :page="state.current"
                :page="state.page"
                :limit="state.limit"
                @pagination="getData"
                @pagination="paginationFun"
            />
            <!-- 页码右侧自定义插槽，可以加自定义按钮 -->
            <slot name="pagination"></slot>

 src/config/index.js

文件已删除

 src/screen/index.vue

@@ -1,8 +1,9 @@
<template>
    <div class="container">
        <div class="t">请选择要进入的系统</div>
        <div class="list">
            <router-link to="/temp" class="item">水温监测系统</router-link>
            <router-link to="/flow" class="item">流量监测系统</router-link>
            <router-link to="/flow" class="item">生态流量监测系统</router-link>
        </div>
    </div>
</template>
@@ -15,22 +16,35 @@
.container{
    width: 100%;
    height: 100%;
    padding: 100px;
    background: url("@/assets/images/screen_home_bg.png") no-repeat;
    background-size: cover;
    .t{
        height: 100px;
        line-height: 100px;
        font-size: 63px;
        color: #2F97CC;
        text-align: center;
    }
    .list{
        width: 100%;
        height: calc(100% - 100px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        background: url("@/assets/images/screen_home.png") no-repeat 0 50%;
        background-size: 100%;
    }
    .item{
        width: 300px;
        height: 150px;
        width: 44%;
        height: 300px;
        text-align: center;
        line-height: 150px;
        font-size: 28px;
        color: #fff;
        background-color: #1ab394;
        box-shadow: 0 0 10px #1ab394;
        line-height: 480px;
        font-size: 44px;
        letter-spacing: 3px;
        color: #5DBDED;
        border-radius: 10px;
        font-weight: 700;
    }
}
</style>

 src/utils/index.js

@@ -476,12 +476,12 @@
/**
 * blob文件流导出
 */
export function exportBlobFile(blob) {
export function exportBlobFile(blob, name) {
  const link = document.createElement('a')
  const url = URL || window.webkitURL
  const href = url.createObjectURL(blob)
  link.href = href;
  link.download = '报警记录.xlsx'
  link.download = name + '.xlsx'
  link.click()
}
 

 src/utils/validate.js

@@ -93,12 +93,12 @@
}

//设置图片路径
import { PREURL } from '@/config/index'
const imgBaseUrl = import.meta.env.VITE_APP_IMG_BASEURL //图片前缀
export const getImage = (imgList) =>{
  if(imgList != null){
    return imgList.split(',').map((image) => {
      if(image.indexOf('http') == -1 && image != ''){
        return PREURL + image
        return imgBaseUrl + image
      }else {
        return image
      }
@@ -107,8 +107,8 @@
}
export const setImage = (imgList) =>{
  return imgList.map((image) => {
    if(image.indexOf(PREURL) != -1){
      return image.replace(PREURL,'')
    if(image.indexOf(imgBaseUrl) != -1){
      return image.replace(imgBaseUrl,'')
    }else {
      return image
    }

 src/views/facility/facilityList/index.vue

@@ -1,16 +1,14 @@
<script setup>
import facilityApi from "@/api/facility/index";
import pointApi from "@/api/facility/point";
import supplierApi from "@/api/facility/supplier.js";
import facilityTypeApi from "@/api/facility/facilityType.js";
import commonParameters from "@/api/configuration/commonParameters/index.js";
import waterFacilityParameter from "@/api/facility/parameter.js";
import {PREURL} from '@/config/index'
import setPostParams from "@/utils/searchParams.js";
import {onMounted} from "vue";
const route = useRoute();
const preUrl = ref(PREURL);
const {proxy} = getCurrentInstance();
const imgBaseUrl = import.meta.env.VITE_APP_IMG_BASEURL //图片前缀

/**
 * 搜索相关
@@ -210,7 +208,7 @@
}
//上传文件，添加图片地址信息
const uploadData = (data) => {
    form.value.facilityUrl = data.toString();
    form.value.facilityUrl = imgBaseUrl + data.toString();
}

/** 提交按钮 */
@@ -317,7 +315,7 @@
            >
                <template #default="scope">
                    <div v-if="key.toString() === 'facilityUrl'" style="height: 50px;margin: 0 auto">
                        <img :src="preUrl + scope.row.facilityUrl" class="table-headImg"/>
                        <img :src="imgBaseUrl + scope.row.facilityUrl" class="table-headImg" alt="" />
                    </div>
                </template>
            </el-table-column>

 src/views/facility/facilityType/index.vue

@@ -12,7 +12,7 @@

const route = useRoute();
const {proxy} = getCurrentInstance();

const imgBaseUrl = import.meta.env.VITE_APP_IMG_BASEURL //图片前缀

/**
 * 搜索相关
@@ -119,7 +119,7 @@

//上传文件，添加图片地址信息
const uploadData = (data) => {
    form.value.headImg = data.newFileView
    form.value.headImg = imgBaseUrl + data.newFileView
}

/** 提交按钮 */
@@ -208,7 +208,7 @@
            >
                <template #default="scope">
                    <div v-if="key.toString() == 'headImg'">
                        <img :src="scope.row.headImg" class="table-headImg"/>
                        <img :src="imgBaseUrl + scope.row.headImg" class="table-headImg" alt="" />
                    </div>
                </template>
            </el-table-column>

 src/views/facility/monitorList/index.vue

@@ -13,6 +13,7 @@

const route = useRoute();
const {proxy} = getCurrentInstance();
const imgBaseUrl = import.meta.env.VITE_APP_IMG_BASEURL //图片前缀

/**
 * 搜索相关
@@ -148,7 +149,7 @@

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

/** 提交按钮 */
@@ -243,7 +244,7 @@
            >
                <template #default="scope">
                    <div v-if="key === 'imageUrl'">
                        <img :src="scope.row.headImg" class="table-headImg"/>
                        <img :src="imgBaseUrl + scope.row.headImg" class="table-headImg" alt="" />
                    </div>
                    <div v-else-if="key === 'pointType'">
                        {{ scope.row.pointType === 1 ? '水温监测点' : '生态流量监测点' }}

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

@@ -1,91 +1,109 @@
<script setup>
import {ref} from "vue";
import {ref, onMounted} from "vue";
import {getFlowPointList} from "@/api/screen/index.js";
import {getFlowReportList, exportFlowReportList} from "@/api/screen/report/index.js";
import Table from '@/components/Table/index.vue'
import { exportBlobFile } from '@/utils/index.js'

const selectType = ref(1);
const typeOption = ref([
    { label: '水电站流量监测点', value: 1 },
    { label: '新扎口流量监测点', value: 2 },
const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', checkStrictly: true, expandTrigger: 'hover', emitPath: false }; //级联选择器配置
const typeOption = ref([])
const timeOption = ref([
    { label: '小时', value: 1 },
    { label: '日', value: 2 },
    { label: '月', value: 3 },
    { label: '季度', value: 4 },
    { label: '年', value: 5 },
])
const time = ref()
const timeVal = ref([])
const searchData = reactive({
    pointId: '',
    dateType: 2,
    createTimeRange: ''
})
const tableRef = ref(null); //表格实例
let tableHead = [
    { prop: 'code', label: '流速 (m/s)' },
    { prop: 'shebei', label: '瞬时流量 (m³/h)', },
    { prop: 'content', label: '累计流量 (m³)' },
    { prop: 'sure', label: '采集点' },
    { prop: 'time', label: '采集时间' },
    { prop: 'flowVelocity', label: '流速 (m/s)' },
    { prop: 'newFlow', label: '瞬时流量 (m³/h)', },
    { prop: 'totalFlow', label: '累计流量 (m³)' },
    { prop: 'pointName', label: '采集点' },
    { prop: 'uploadTimeView', label: '采集时间' },
]

const getTableData = () => {
    return new Promise(resolve => {
        let arr = {
            data:{
                list: [
                    { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                    { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                    { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                    { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                    { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                ]
            },
            total: 30,
        }
        resolve(arr)
// 获取监测点
const getPoint = () => {
    getFlowPointList().then(res => {
        typeOption.value = res.data
    })
}

// 导出报表
const exportData = () => {
    let data = {
        limit: tableRef.value.state.limit,
        page: tableRef.value.state.page,
        ...searchData
    }
    if(timeVal.value && timeVal.value.length > 0) {
        data.createTimeRange = timeVal.value[0] + '~' + timeVal.value[1]
    } else {
        data.createTimeRange = ''
    }
    exportFlowReportList(data).then(res => {
        exportBlobFile(res, '统计报表')
    })
}

// 搜索数据
const searchTable = () => {
    if(timeVal.value && timeVal.value.length > 0) {
        searchData.createTimeRange = timeVal.value[0] + '~' + timeVal.value[1]
    } else {
        searchData.createTimeRange = ''
    }
    tableRef.value.getData()
}

onMounted(() => {
    getPoint()
})
</script>

<template>
    <div class="report">
        <div class="report-tool">
            <el-cascader size="large" v-model="searchData.pointId" :options="typeOption" :show-all-levels="false" :props="cascaderOption" clearable />
            <el-select
                v-model="selectType"
                v-model="searchData.dateType"
                class="tool-select"
                size="large"
                placeholder="Select"
                style="width: 20rem"
                placeholder="请选择"
                clearable
                style="width: 15rem"
            >
                <el-option
                    v-for="item in typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-select
                v-model="selectType"
                class="tool-select"
                size="large"
                placeholder="Select"
                style="width: 20rem"
            >
                <el-option
                    v-for="item in typeOption"
                    v-for="item in timeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-date-picker
                v-model="time"
                v-model="timeVal"
                type="datetimerange"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                size="large"
                style="width: 30rem"
                clearable
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
            />
            <el-button type="success" size="large" style="width: 6rem">一键导出</el-button>
            <el-button type="primary" size="large" style="width: 6rem" @click="searchTable">搜索</el-button>
            <el-button type="success" size="large" style="width: 6rem" @click="exportData">一键导出</el-button>
        </div>
        <div class="report-table">
            <Table :getList="getTableData" :headList="tableHead"></Table>
            <Table ref="tableRef" :getList="getFlowReportList" :headList="tableHead" :searchData="searchData"></Table>
        </div>
    </div>
</template>

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

@@ -5,8 +5,8 @@
import { getFlowMenu } from '@/api/screen/shebei/index.js'
import setPostParams from "@/utils/searchParams.js";
import { useRouter } from "vue-router";

const router = useRouter();
const imgBaseUrl = import.meta.env.VITE_APP_IMG_BASEURL; //图片前缀

const menuList = ref([])
const deviceList = ref([])
@@ -107,7 +107,7 @@
                            <div>{{item.facilityCode}}</div>
                        </div>
                        <div class="item-img">
                            <img v-if="item.image" :src="VITE_APP_IMG_BASEURL + item.image" alt="" />
                            <img v-if="item.facilityUrl" :src="imgBaseUrl + item.facilityUrl" alt="" />
                        </div>
                        <div class="item-info">
                            <div class="online">设备在线状态： <span :style="{color: item.isOnline ? '#56d12c' : '#bababa'}">{{item.isOnline ? '在线' : '掉线'}}</span></div>
@@ -123,7 +123,7 @@
                            <div>{{item.facilityCode}}</div>
                        </div>
                        <div class="item-img">
                            <img v-if="item.image" :src="VITE_APP_IMG_BASEURL + item.image" alt="" />
                            <img v-if="item.facilityUrl" :src="imgBaseUrl + item.facilityUrl" alt="" />
                        </div>
                        <div class="item-info">
                            <div class="online">设备在线状态： <span :style="{color: item.isOnline ? '#56d12c' : '#bababa'}">{{item.isOnline ? '在线' : '掉线'}}</span></div>
@@ -139,7 +139,7 @@
                            <div>{{item.facilityCode}}</div>
                        </div>
                        <div class="item-img">
                            <img v-if="item.image" :src="VITE_APP_IMG_BASEURL + item.image" alt="" />
                            <img v-if="item.facilityUrl" :src="imgBaseUrl + item.facilityUrl" alt="" />
                        </div>
                        <div class="item-info">
                            <div class="online">设备在线状态： <span :style="{color: item.isOnline ? '#56d12c' : '#bababa'}">{{item.isOnline ? '在线' : '掉线'}}</span></div>

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

@@ -73,8 +73,10 @@
}

const searchTable = () => {
    if(exportTime.value) {
    if(exportTime.value && exportTime.value.length > 0) {
        searchData.createTimeRange = exportTime.value[0] + '~' + exportTime.value[1]
    }else {
        searchData.createTimeRange = ''
    }
    tableRef.value.getData()
}
@@ -82,7 +84,7 @@
// 导出报警报表
const exportWarnTabl = () => {
    exportWarnHistory({ createTimeRange: searchData.createTimeRange }).then(res => {
        exportBlobFile(res)
        exportBlobFile(res, '报警记录')
    })
}

@@ -125,6 +127,7 @@
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        style="width: 28rem"
                        clearable
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"

 src/views/screen/temperature/report/index.vue

@@ -1,91 +1,91 @@
<script setup>
import {ref} from "vue";
import {ref, onMounted} from "vue";
import {getTemperaturePointList} from "@/api/screen/index.js";
import {getFlowReportList} from "@/api/screen/report/index.js";
import Table from '@/components/Table/index.vue'

const selectType = ref(1);
const typeOption = ref([
    { label: '水电站流量监测点', value: 1 },
    { label: '新扎口流量监测点', value: 2 },
const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', checkStrictly: true, expandTrigger: 'hover', emitPath: false }; //级联选择器配置
const typeOption = ref([])
const timeOption = ref([
    { label: '小时', value: 1 },
    { label: '日', value: 2 },
    { label: '月', value: 3 },
    { label: '季度', value: 4 },
    { label: '年', value: 5 },
])
const time = ref()
const timeVal = ref([])
const searchData = reactive({
    pointId: '',
    dateType: 2,
    createTimeRange: ''
})
const tableRef = ref(null); //表格实例
let tableHead = [
    { prop: 'code', label: '流速 (m/s)' },
    { prop: 'shebei', label: '瞬时流量 (m³/h)', },
    { prop: 'content', label: '累计流量 (m³)' },
    { prop: 'sure', label: '采集点' },
    { prop: 'time', label: '采集时间' },
    { prop: 'flowVelocity', label: '流速 (m/s)' },
    { prop: 'newFlow', label: '瞬时流量 (m³/h)', },
    { prop: 'totalFlow', label: '累计流量 (m³)' },
    { prop: 'pointName', label: '采集点' },
    { prop: 'uploadTimeView', label: '采集时间' },
]

const getTableData = () => {
    return new Promise(resolve => {
        let arr = {
            data:{
                list: [
                    { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                    { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                    { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
                    { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
                    { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                    { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
                ],
                total: 30,
            },
        }
        resolve(arr)
// 获取监测点
const getPoint = () => {
    getTemperaturePointList().then(res => {
        typeOption.value = res.data
    })
}

// 搜索数据
const searchTable = () => {
    if(timeVal.value && timeVal.value.length > 0) {
        searchData.createTimeRange = timeVal.value[0] + '~' + timeVal.value[1]
    } else {
        searchData.createTimeRange = ''
    }
    tableRef.value.getData()
}

onMounted(() => {
    getPoint()
})
</script>

<template>
    <div class="report">
        <div class="report-tool">
            <el-cascader size="large" v-model="searchData.pointId" :options="typeOption" :show-all-levels="false" :props="cascaderOption" clearable />
            <el-select
                v-model="selectType"
                v-model="searchData.dateType"
                class="tool-select"
                size="large"
                placeholder="Select"
                style="width: 20rem"
                placeholder="请选择"
                clearable
                style="width: 15rem"
            >
                <el-option
                    v-for="item in typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-select
                v-model="selectType"
                class="tool-select"
                size="large"
                placeholder="Select"
                style="width: 20rem"
            >
                <el-option
                    v-for="item in typeOption"
                    v-for="item in timeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-date-picker
                v-model="time"
                v-model="timeVal"
                type="datetimerange"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                size="large"
                style="width: 30rem"
                clearable
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
            />
            <el-button type="primary" size="large" style="width: 6rem" @click="searchTable">搜索</el-button>
            <el-button type="success" size="large" style="width: 6rem">一键导出</el-button>
        </div>
        <div class="report-table">
            <Table :getList="getTableData" :headList="tableHead"></Table>
            <Table ref="tableRef" :getList="getFlowReportList" :headList="tableHead" :searchData="searchData"></Table>
        </div>
    </div>
</template>

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

@@ -1,7 +1,15 @@
<script setup>
import {ref} from "vue";
import {ref, onMounted} from "vue";
import facilityApi from "@/api/facility/index";
import { getTemperatureMenu } from '@/api/screen/shebei/index.js'
import {getUserType} from '@/utils/auth.js'
import setPostParams from "@/utils/searchParams.js";
import {useRouter} from "vue-router";
const router = useRouter();
const imgBaseUrl = import.meta.env.VITE_APP_IMG_BASEURL; //图片前缀

const menuList = ref([])
const deviceList = ref([])
const userType = ref(getUserType())
const monitorRef = ref()
const searchVal = ref('')
@@ -12,21 +20,37 @@
    { 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 = () => {
    getTemperatureMenu().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>

@@ -34,28 +58,20 @@
    <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 +91,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 +102,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.facilityUrl" :src="imgBaseUrl + item.facilityUrl" 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.facilityUrl" :src="imgBaseUrl + item.facilityUrl" 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="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.facilityUrl" :src="imgBaseUrl + item.facilityUrl" 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>

 src/views/system/user/index.vue

@@ -131,10 +131,10 @@
    <script setup>
    import  user from "@/api/system/user";
    import  role from "@/api/system/role";
    import  { PREURL } from "@/config/index";
    import  { sysDictData } from "@/api/system/dict";
    import setPostParams from "@/utils/searchParams.js";
    const { proxy } = getCurrentInstance();
    const imgBaseUrl = import.meta.env.VITE_APP_IMG_BASEURL //图片前缀
    
    /**
     * 搜索相关
@@ -232,7 +232,7 @@

    //上传文件，添加图片地址信息
    const uploadData = (img) => {
        form.value.headImg = img.toString()
        form.value.headImg = imgBaseUrl + img.toString()
    }

    //获取用户分类列表