feat: 添加生态流量页面&做大屏分辨率适配

web

2025-03-19 ae8d9d380854076d0b2da145576ae08f14a8f835

 src/views/facility/facilityList/index.vue

@@ -1,12 +1,13 @@
<script setup>
import facilityApi from "@/api/facility/index";
import pointApi from "@/api/facility/point";
import supplierApi from "@/api/waterMeterApi/supplier.js";
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/configuration/facilityParameter/index.js";
import waterFacilityParameter from "@/api/facility/parameter.js";
import {PREURL} from '@/config/index'
import setPostParams from "../../../utils/searchParams.js";
import setPostParams from "@/utils/searchParams.js";
import {onMounted} from "vue";
const route = useRoute();
const preUrl = ref(PREURL);
const {proxy} = getCurrentInstance();
@@ -39,15 +40,9 @@
    facilityCode: '设备编号',
    facilityName: '设备名称',
    facilityTypeName: '设备类型',
    longitude: '经度',
    latitude: '纬度',
    pointName: '设备监控点',
    networkType:'网络类型',
    facilityUrl: '设备图片',
    producedDate:'出厂日期',
    installDate:'安装日期',
    supplier: '设备供应商',
    createTimeView: '创建时间'
})

/** 获取权限列表 */
@@ -68,12 +63,8 @@
    facilityCode: '设备编号',
    facilityName: '设备名称',
    facilityType: '设备类型',
    longitude: '经度',
    latitude: '纬度',
    pointId: '设备监控点',
    facilityUrl: '设备图片',
    supplier: '设备供应商',
    networkType:'网络类型',
    remark:'备注信息',
    createTimeView: '创建时间'
})
@@ -91,28 +82,19 @@
//查询监控点
const pointList = ref();
const getPoint = async () => {
    await pointApi().search({limit: 10000, page: 1}).then((res) => {
    await pointApi().search({limit: 100, page: 1}).then((res) => {
        pointList.value = res.data.list
    })
}
getPoint()
//查询供应商
const supplierList = ref();
const getSupplier = async () => {
    await supplierApi().search({limit: 10000, page: 1}).then((res) => {
        console.log("供应商" + res.data.list);
        supplierList.value = res.data.list
    })
}
getSupplier()

//查询设备类型
const facilityTypeList = ref();
const getFacilityTypeList = async () => {
    await facilityTypeApi().search({limit: 10000, page: 1}).then((res) => {
    await facilityTypeApi().search({limit: 100, page: 1}).then((res) => {
        facilityTypeList.value = res.data.list
    })
}
getFacilityTypeList()

//获取参数列表数据
//设备参数table
const tableParamData = ref([]);
@@ -141,14 +123,13 @@
async function handleAdd() {
    reset();
    open.value = true;
    isDetail.value = false;
    title.value = "新增";
    console.log('form',form.value)
}

/** 修改按钮操作 */
async function handleUpdate(row) {
    reset();
    // form.value = Object.assign({},row)
    Object.keys(row).forEach(key => {
        if (form.value.hasOwnProperty(key)) {
            form.value[key] = row[key];
@@ -156,6 +137,7 @@
    });
    form.value.id = row.id
    open.value = true;
    isDetail.value = true;
    title.value = "修改";
}

@@ -179,6 +161,7 @@
const openParamForm = ref(false)
const open = ref(false);
const title = ref("");
const isDetail = ref(false);
const multipleSelection = ref([])
let  tableParamHeader = ref({
    name: '参数名称',
@@ -196,7 +179,6 @@
//已选择设备参数
const handleSelectionParams = (val) =>{
    multipleSelection.value = val
    console.log('esele',val);
}
/**
 * 设备参数操作相关
@@ -278,12 +260,21 @@
    form.value = {
        facilityCode: '',
        facilityName: '',
        facilityType: '',
        pointId: '',
        facilityUrl: '',
        remark:'',
        installDate: ''
    };
    proxy.resetForm("facilityTypeRef");
}

getList();
onMounted(() => {
    getList();
    getPoint()
    getFacilityTypeList()
})

</script>
<template>
    <div class="app-container">
@@ -329,7 +320,7 @@
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleband(scope.row)">参数绑定</el-button>
                    <el-button link type="primary" icon="Edit" v-has="['update',route]"
@@ -357,12 +348,6 @@
                <el-form-item :label="formLabel.facilityName" prop="facilityName">
                    <el-input v-model="form.facilityName" :placeholder="inpTip+formLabel.facilityName"/>
                </el-form-item>
                <el-form-item :label="formLabel.longitude" prop="longitude">
                    <el-input v-model="form.longitude" :placeholder="inpTip+formLabel.longitude"/>
                </el-form-item>
                <el-form-item :label="formLabel.latitude" prop="latitude">
                    <el-input v-model="form.latitude" :placeholder="inpTip+formLabel.latitude"/>
                </el-form-item>
                <el-form-item label="选择设备类型" prop="facilityType">
                    <el-select v-model="form.facilityType" :placeholder="inpTip+formLabel.facilityType">
                        <el-option
@@ -383,19 +368,6 @@
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择供应商" prop="supplier">
                    <el-select v-model="form.supplier" :placeholder="inpTip+formLabel.supplier">
                        <el-option
                                v-for="(item,index) in supplierList"
                                :label="item.name"
                                :value="item.name"
                                :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备出厂日期" prop="producedDate">
                    <el-input v-model="form.producedDate" placeholder="请输入出厂日期(格式：xxxx年xx月xx日)" />
                </el-form-item>
                <el-form-item label="安装日期" prop="installDate">
                    <el-date-picker
                        v-model="form.installDate"
@@ -405,21 +377,15 @@
                        value-format="YYYY-MM-DD"
                        :disabled="isDetail ? true : false"
                    />
                    <!-- <el-input v-model="item.installTime" :disabled="isDetail ? true : false"></el-input> -->
                </el-form-item>
                <el-form-item :label="formLabel.networkType" prop="networkType">
                    <el-input v-model="form.networkType" :placeholder="inpTip+formLabel.networkType" />
                </el-form-item>
                <el-form-item :label="formLabel.remark" prop="remark">
                    <el-input v-model="form.remark" :placeholder="inpTip+formLabel.remark" />
                </el-form-item>
                <el-form-item><br></el-form-item>
                <el-form-item label="资料上传" prop="facilityUrl">
                <el-form-item label="资料上传" prop="facilityUrl" style="flex: 1">
                    <upload-icons @uploadData="uploadData" :imageList="form.facilityUrl" :limit="1"
                                  :disabled='isDetail ? true : false'></upload-icons>
                    <span style="display: block;">(请上传1张设备图片)</span>
                </el-form-item>
                <el-form-item></el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
@@ -456,5 +422,8 @@
    max-width: 100px;
    height: 50px;
}
.form-box{
    justify-content: normal;
}
</style>