feat:用水数据相关处理

shuishen

2026-01-06 bd1a7397836051b2c2f9f3205dcccd0d066f2676

feat:用水数据相关处理

 src/api/dept/newIndex.js

@@ -411,4 +411,11 @@
        method: 'get',
        params
    })
}

export const getUserUseWaterPage = (key_words) => {
    return request({
        url: `/useWaterApi/zls_cbsj.php?api_action=getData&key_words=${key_words}`,
        method: 'get',
    })
}

 src/styles/media/index.scss

@@ -2086,6 +2086,35 @@

                                            }

                                            .btns-box {
                                                margin: countSizeVh(8) 0;
                                                display: flex;
                                                .btn {
                                                    padding: 0 countSizeVw(8, 1920);
                                                    cursor: pointer;

                                                    &.active {
                                                        background: #3d5ad5;
                                                    }
                                                }
                                            }

                                            .flex-container {
                                                display: flex;
                                                flex-direction: column;
                                                height: 0;
                                                flex: 1;

                                                .el-table {
                                                    height: 0;
                                                    flex: 1;
                                                }

                                                .echarts-box {
                                                    height: 0;
                                                    flex: 1;
                                                }
                                            }
                                        }
                                    }
                                }

 src/views/house/components/useWater.vue

@@ -2,66 +2,75 @@
<template>
    <div class="table-box-w">
        <div class="list-box">
            <el-button class="message-btn" type="primary" size="mini" :disabled="false">用户信息</el-button>
            <div class="btns-box">
                <div class="btn" :class="{ active: type === 1 }" @click="clickType(1)">用户信息</div>
                <div class="btn" :class="{ active: type === 2 }" @click="clickType(2)">用水信息</div>
                <div class="btn" :class="{ active: type === 3 }" @click="clickType(3)">用水趋势</div>
            </div>

            <el-table
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
                element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText"
                :data="dataList.records" style="width: 100%">
                <!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
                <el-table-column align="center" prop="yhbh" label="用户编号" width="100"> </el-table-column>
                <el-table-column align="center" prop="yhmc" label="用户名称" width="80" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="yhsj" label="用户手机" width="100" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="zjhm" label="证件号码" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="yhdz" label="用户地址" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="khrq" label="开户日期" width="96" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="dkyh" label="代扣银行" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="yhkh" label="银行卡号" show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </div>
            <div class="flex-container" v-show="type === 1">
                <el-table
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
                    element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText"
                    :data="dataList.records" style="width: 100%">
                    <!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
                    <el-table-column align="center" prop="yhbh" label="用户编号" width="100"> </el-table-column>
                    <el-table-column align="center" prop="yhmc" label="用户名称" width="80" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="yhsj" label="用户手机" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="zjhm" label="证件号码" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="yhdz" label="用户地址" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="khrq" label="开户日期" width="96" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="dkyh" label="代扣银行" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="yhkh" label="银行卡号" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </div>

        <div v-if="false">
            <el-button class="message-btn" type="primary" size="mini" :disabled="false">用水信息</el-button>
            <el-table
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
                element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText"
                :data="dataList.records" style="width: 100%">
                <!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
                <el-table-column align="center" prop="yhbh" label="用户编号" width="100"> </el-table-column>
                <el-table-column align="center" prop="yhmc" label="用户名称" width="80" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="yhsj" label="用户手机" width="100" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="zjhm" label="证件号码" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="yhdz" label="用户地址" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="khrq" label="开户日期" width="96" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="dkyh" label="代扣银行" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="yhkh" label="银行卡号" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <div class="flex-container" v-show="type === 2">
                <el-table
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
                    element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText"
                    :data="useWaterData" style="width: 100%">
                    <!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
                    <el-table-column align="center" prop="yhhh" label="用户编号" width="100"> </el-table-column>
                    <el-table-column align="center" prop="rll" label="日流量（吨）" width="80" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="ksrq" label="开始日期" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="ksds" label="开始读数（吨）" width="96" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="jsrq" label="结束日期" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" prop="jsds" label="结束读数（吨）" width="96" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </div>

            <div class="flex-container" v-show="type === 3">
                <div class="echarts-box" id="WaterEchartsBox"></div>
            </div>
        </div>
    </div>
</template>

<script>
let houseWaterEchartsBox = null

import { fontSize } from '@/utils/fontSize.js'

import {
    getZlsYhxx
    getZlsYhxx,
    getUserUseWaterPage
} from "@/api/dept/newIndex.js"
export default {
    name: 'tableFromPop',
@@ -85,15 +94,16 @@
    data () {
        //这里存放数据
        return {
            type: 1,
            row: {},
            residentLoading: false,
            useWaterData: [],
            residentNoDataText: '暂无数据',
            dataList: {
                total: 1,
                records: []

            },

        }
    },
    //监听属性 类似于data概念
@@ -109,16 +119,155 @@
    },
    //方法集合
    methods: {
        init () {
        async init () {
            this.residentLoading = true
            getZlsYhxx(this.residentDetailsType, this.residentIdSave).then((res) => {
                this.dataList.total = res.data.data.total
                this.dataList.records = res.data.data.records
                this.residentLoading = false
            }).catch((err) => {
                this.residentLoading = false
            })
            const res = await getZlsYhxx(this.residentDetailsType, this.residentIdSave)
            this.dataList.total = res.data.data.total
            this.dataList.records = res.data.data.records

            const result = await getUserUseWaterPage(res.data.data.records[0].yhbh)

            this.useWaterData = result.data[0].data

            this.residentLoading = false
        },

        /**
         * @description: 图表数据处理
         * @param {*} xDate
         * @param {*} yDate
         * @param {*} colors
         * @return {*}
         */
        initPersonOptions (data) {
            let options

            let newData = data.slice(0, 15)

            if (newData.length == 0) {
                options = {
                    title: {
                        text: '暂无数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'normal',
                            fontSize: fontSize(14)
                        }
                    }
                }
            } else {
                options = {
                    tooltip: {
                        trigger: 'item',
                        formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}吨</strong>',
                        backgroundColor: 'rgba(8, 56, 185, 0.9)',
                        borderColor: 'rgba(8, 56, 185, 0.9)',
                        textStyle: {
                            color: '#fff',
                            fontSize: fontSize(12)
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: newData.map(item => item.jsrq),

                        axisLabel: {
                            color: "#fff",
                            interval: 0,
                            rotate: 45,
                            fontSize: fontSize(10)
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(12)
                        }
                    },
                    series: [
                        {
                            name: '日流浪',
                            data: newData.map(item => item.rll),
                            type: 'line',

                            lineStyle: {
                                normal: {
                                    width: 5,
                                    color: "rgba(25,163,223,1)", // 线条颜色
                                },
                                borderColor: 'rgba(0,0,0,.4)',
                            },
                            itemStyle: {
                                color: "rgba(25,163,223,1)",
                                borderColor: "#646ace",
                                borderWidth: 2

                            },
                            tooltip: {
                                show: true
                            },
                            areaStyle: { //区域填充样式
                                normal: {
                                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "rgba(25,163,223,.3)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(25,163,223, 0)"
                                    }
                                    ], false),
                                    shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
                                    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                                }
                            },
                            smooth: true
                        },
                    ],
                    grid: {
                        top: '4%',
                        left: '2%',
                        right: '2%',
                        bottom: '1%',
                        containLabel: true
                    },
                }
            }

            return options
        },

        clickType (type) {
            this.type = type

            if (this.type === 3) {
                this.$nextTick(() => {
                    if (houseWaterEchartsBox) {
                        houseWaterEchartsBox.clear()
                        houseWaterEchartsBox.dispose()
                        houseWaterEchartsBox = null
                    }

                    let chartDom = document.getElementById('WaterEchartsBox')
                    houseWaterEchartsBox = this.$echarts.init(chartDom)

                    houseWaterEchartsBox.setOption(this.initPersonOptions(this.useWaterData), true)
                })
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {

 src/views/house/index.vue

@@ -1413,7 +1413,6 @@
                aoiId: this.villageInfo.aoiId,
            }).then(
                res => {
                    console.log('getAlarmStatistics', res.data)
                    let newArr = []
                    res.data.forEach(item => {
                        newArr.push({ name: item.name, value: item.count })
@@ -1743,7 +1742,6 @@
                }

                this.villageInfoLoading = false
                console.log('search--------', res.data.result[0])
                // 停车场出入口
                if (
                    res.data.result[0].deep_infos != null &&
@@ -1770,7 +1768,6 @@
                    res.data.result[0].children_infos &&
                    res.data.result[0].children_infos.length
                ) {
                    console.log('search---building', res.data.result[0].children_infos)
                    if (res.data.result[0].children_infos[0].exttype == 'building') {
                        this.isShowBuildListBox = true
                        let buildData = res.data.result[0].children_infos
@@ -1816,7 +1813,6 @@
                            }
                        }, 500)
                    } else if (res.data.result[0].children_infos[0].exttype == 'unit') {
                        console.log('search---unit')
                        this.isShowHouseBox = true
                        this.isShowBuildListBox = false
                        let houseUintList = res.data.result[0]
@@ -1880,9 +1876,8 @@
        },

        // 楼栋单元楼层户室查询--大搜
        getUnitHousesData (ak, region, ids, infos, buildId) {
            getSearchExtensivelyHousesdata(ak, region, ids, infos).then((res) => {
                console.log('getUnitHousesData--then')
        async getUnitHousesData (ak, region, ids, infos, buildId) {
            await getSearchExtensivelyHousesdata(ak, region, ids, infos).then((res) => {
                if (res.data.result == null) {
                    setTimeout(() => {
                        this.pictLoading = false
@@ -1896,7 +1891,6 @@
                    let houseUintList = res.data.result[0]
                    this.unitAllArr = houseUintList
                    // 林家小区小区下只有楼栋情况
                    console.log('children_infos' in res.data.result[0], 55552222333)
                    if ('children_infos' in res.data.result[0] == false) {
                        setTimeout(() => {
                            this.pictLoading = false
@@ -1949,7 +1943,6 @@
            this.unitChoosed3DList = []
            getHouses(build_std_addr_id, adcode).then((res) => {
                let houseData = res.data.data.properties
                console.log('getHouses3DData--then')
                this.$EventBus.$emit("showThreeDimensions", {
                    positions: houseData.kmj3a,
                    minHeight: res.data.data.properties.hwtxa.features[0].properties.yjpca,
@@ -1962,6 +1955,9 @@
                    this.nextFloorShow = true
                }

                console.log(this.unitChoosed3DList, this.unitChoosedArr, '获取点击的楼栋及户室数据')

                console.log('确认是否有点击触发', aoiArr)
                if (aoiArr) {
                    this.unitChoosed3DList.forEach(item => {
                        let aoiHeight = aoiArr[1]
@@ -1970,6 +1966,9 @@
                            item.properties.szhfr +
                            item.properties.hnagn
                        if (minHeight < aoiHeight && aoiHeight < maxHeight) {
                            console.log('确认点击的户室范围')


                            let chooseIndex = ''
                            this.unitChoosedArr.forEach((one, index) => {
                                if (one.sname == item.properties.cftlg) {
@@ -1987,6 +1986,8 @@
                            ])
                            let point = this.$turf.point(aoiArr[0])
                            if (this.$turf.booleanContains(polygon, point)) {
                                console.log('确认点击的是范围内的某个户室', item)

                                this.unitChoosedArr.forEach(xIt => {
                                    xIt.children_infos.forEach(yIt => {
                                        if (item.properties.snxmi == yIt.std_addr_id.split('|')[2]) {
@@ -2055,7 +2056,6 @@
            if (params.exttype == 'room') {
                residentId = params.std_addr_id.split('|')[2]
                if (residentId == '11ACAB7FB7909F652F579C6E1ADE3F71') {//测试万达晶座11栋310
                    console.log('this.isShowPayInfo=true')
                    this.isShowPayInfo = true
                    this.menuList.forEach(item => {
                        if (item.name == '交易信息') {
@@ -2063,7 +2063,6 @@
                        }
                    })
                } else {
                    console.log(' this.isShowPayInfo=false')
                    this.isShowPayInfo = false
                }
                this.residentDetailsType = 1
@@ -2100,7 +2099,7 @@
            this.residentDetailsType = 1
        },

        buildingClick (item, aoiArr) {
        async buildingClick (item, aoiArr) {
            if (this.buildingChoosed.name == item.name && !aoiArr) return
            this.unfoldHouseBox('up')
            this.isBuildHighLightchecked = true
@@ -2133,7 +2132,6 @@
            }, 200)
            this.isShowFloorCount = true
            // 获取户籍人口重点人口数据
            console.log(item, 'item-------------')
            this.choosedBuildUid = item.build_uid
            this.choosedBuildStdId = item.build_std_addr_id
            // 重点人口户籍人口
@@ -2141,7 +2139,7 @@
            this.getVillagePersonStatisticInfoByBuildId({ buildId })

            // 楼栋单元楼层户室查询-大搜
            this.getUnitHousesData(
            await this.getUnitHousesData(
                "ebf48ecaa1fd436fa3d40c4600aa051f",
                "361100",
                item.build_uid,
@@ -2381,7 +2379,6 @@
                end: this.eventTimeArr[1]
            }).then((res) => {
                this.callPolicePage.count = res.data.data.pages
                console.log('getAlarmList', res)
                if (res.data.data.records.length > 0) {

                    this.callPoliceData = res.data.data.records.map((item, index) => {
@@ -2837,6 +2834,8 @@
                    })

                    if (chooseBuildItem.length !== 0) {
                        console.log('同小区点击触发')

                        this.buildingClick(chooseBuildItem, [
                            [e.wgs84Position.lng, e.wgs84Position.lat],
                            e.wgs84Position.alt,