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

@@ -54,7 +54,6 @@
  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
@@ -95,7 +94,11 @@
// 监控点列表
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() {
@@ -129,12 +132,11 @@
}


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

/**
@@ -197,8 +199,8 @@
}

onMounted(() => {
  getMonitryType();
  getList();
    getMonitryList();
})
</script>
<template>
@@ -270,14 +272,7 @@
    <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"
                :key="index"
            ></el-option>
          </el-select>
                    <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">
@@ -320,5 +315,8 @@
<style lang="scss" scoped>
.form-box {
  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 v-else>
                        <el-sub-menu :index="item.id">
                    <template #title>
                        <span>雷达测速仪</span>
                                <span>{{item.name}}</span>
                    </template>
                    <el-menu-item index="2-1">CY001</el-menu-item>
                    <el-menu-item index="2-2">CY002</el-menu-item>
                            <el-menu-item v-for="(child, cidx) in item.facilityPOList" :key="cidx" :index="child.id">{{child.facilityName}}</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>