开始处理水电抄表功能

wuxw
1 parent 5760f7b9
Showing 25 changed files with 3212 additions and 2301 deletions
public/js/jessibuca/jessibuca.d.ts
public/js/jessibuca/jessibuca.js
public/js/jessibuca/renderer.js
src/api/fee/contractCreateFeeApi.js
src/api/fee/meterWaterManageApi.js
src/components/car/floorUnitTree.vue
src/components/fee/addMeterWater.vue
src/components/fee/contractCreateFeeAdd.vue
src/components/fee/deleteMeterWater.vue
src/components/fee/editMeterWater.vue
src/components/fee/floorSelect2.vue
src/components/fee/importMeterWaterFee.vue
src/components/fee/importMeterWaterFee2.vue
src/components/fee/roomMeterQrcode.vue
src/components/fee/roomSelect2.vue
src/components/fee/roomTreeDiv.vue
src/components/fee/unitSelect2.vue
src/i18n/feeI18n.js
src/i18n/index.js
src/router/feeRouter.js
-declare namespace Jessibuca {
-
-    /** 超时信息 */
-    enum TIMEOUT {
-        /** 当play()的时候，如果没有数据返回 */
-        loadingTimeout = 'loadingTimeout',
-        /** 当播放过程中，如果超过timeout之后没有数据渲染 */
-        delayTimeout = 'delayTimeout',
-    }
-
-    /** 错误信息 */
-    enum ERROR {
-        /** 播放错误，url 为空的时候，调用 play 方法 */
-        playError = 'playError',
-        /** http 请求失败 */
-        fetchError = 'fetchError',
-        /** websocket 请求失败 */
-        websocketError = 'websocketError',
-        /** webcodecs 解码 h265 失败 */
-        webcodecsH265NotSupport = 'webcodecsH265NotSupport',
-        /** mediaSource 解码 h265 失败 */
-        mediaSourceH265NotSupport = 'mediaSourceH265NotSupport',
-        /** wasm 解码失败 */
-        wasmDecodeError = 'wasmDecodeError',
-    }
-
-    interface Config {
-        /**
-         * 播放器容器
-         * *  若为 string ，则底层调用的是 document.getElementById('id')
-         * */
-        container: HTMLElement | string;
-        /**
-         * 设置最大缓冲时长，单位秒，播放器会自动消除延迟
-         */
-        videoBuffer?: number;
-        /**
-         * worker地址
-         * *  默认引用的是根目录下面的decoder.js文件 ，decoder.js 与 decoder.wasm文件必须是放在同一个目录下面。 */
-        decoder?: string;
-        /**
-         * 是否不使用离屏模式（提升渲染能力）
-         */
-        forceNoOffscreen?: boolean;
-        /**
-         * 是否开启当页面的'visibilityState'变为'hidden'的时候，自动暂停播放。
-         */
-        hiddenAutoPause?: boolean;
-        /**
-         * 是否有音频，如果设置`false`，则不对音频数据解码，提升性能。
-         */
-        hasAudio?: boolean;
-        /**
-         * 设置旋转角度，只支持，0(默认)，180，270 三个值
-         */
-        rotate?: boolean;
-        /**
-         * 1. 当为`true`的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。 等同于 `setScaleMode(1)`
-         * 2. 当为`false`的时候：视频画面完全填充canvas区域,画面会被拉伸。等同于 `setScaleMode(0)`
-         */
-        isResize?: boolean;
-        /**
-         * 1. 当为`true`的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全。等同于 `setScaleMode(2)`
-         */
-        isFullResize?: boolean;
-        /**
-         * 1. 当为`true`的时候：ws协议不检验是否以.flv为依据，进行协议解析。
-         */
-        isFlv?: boolean;
-        /**
-         * 是否开启控制台调试打
-         */
-        debug?: boolean;
-        /**
-         * 1. 设置超时时长, 单位秒
-         * 2. 在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件
-         */
-        timeout?: number;
-        /**
-         * 1. 设置超时时长, 单位秒
-         * 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
-         */
-        heartTimeout?: number;
-        /**
-         * 1. 设置超时时长, 单位秒
-         * 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
-         */
-        loadingTimeout?: number;
-        /**
-         * 是否支持屏幕的双击事件，触发全屏，取消全屏事件
-         */
-        supportDblclickFullscreen?: boolean;
-        /**
-         * 是否显示网
-         */
-        showBandwidth?: boolean;
-        /**
-         * 配置操作按钮
-         */
-        operateBtns?: {
-            /** 是否显示全屏按钮 */
-            fullscreen?: boolean;
-            /** 是否显示截图按钮 */
-            screenshot?: boolean;
-            /** 是否显示播放暂停按钮 */
-            play?: boolean;
-            /** 是否显示声音按钮 */
-            audio?: boolean;
-            /** 是否显示录制按 */
-            record?: boolean;
-        };
-        /**
-         * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
-         */
-        keepScreenOn?: boolean;
-        /**
-         * 是否开启声音，默认是关闭声音播放的
-         */
-        isNotMute?: boolean;
-        /**
-         * 加载过程中文案
-         */
-        loadingText?: string;
-        /**
-         * 背景图片
-         */
-        background?: string;
-        /**
-         * 是否开启MediaSource硬解码
-         * * 视频编码只支持H.264视频（Safari on iOS不支持）
-         * * 不支持 forceNoOffscreen 为 false (开启离屏渲染)
-         */
-        useMSE?: boolean;
-        /**
-         * 是否开启Webcodecs硬解码
-         * *  视频编码只支持H.264视频 (需在chrome 94版本以上，需要https或者localhost环境)
-         * *  支持 forceNoOffscreen 为 false （开启离屏渲染)
-         * */
-        useWCS?: boolean;
-        /**
-         * 是否开启键盘快捷键
-         * 目前支持的键盘快捷键有：esc -> 退出全屏；arrowUp -> 声音增加；arrowDown -> 声音减少；
-         */
-        hotKey?: boolean;
-        /**
-         *  在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
-         *  设置为false 则直接关闭播放，抛出Error 异常，设置为true 则会自动切换成wasm模式播放。
-         */
-        autoWasm?: boolean;
-        /**
-         * heartTimeout 心跳超时之后自动再播放,不再抛出异常，而直接重新播放视频地址。
-         */
-        heartTimeoutReplay?: boolean,
-        /**
-         * heartTimeoutReplay 从试次数，超过之后，不再自动播放
-         */
-        heartTimeoutReplayTimes?: number,
-        /**
-         * loadingTimeout loading之后自动再播放,不再抛出异常，而直接重新播放视频地址。
-         */
-        loadingTimeoutReplay?: boolean,
-        /**
-         * heartTimeoutReplay 从试次数，超过之后，不再自动播放
-         */
-        loadingTimeoutReplayTimes?: number
-        /**
-         * wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
-         */
-        wasmDecodeErrorReplay?: boolean,
-        /**
-         * https://github.com/langhuihui/jessibuca/issues/152 解决方案
-         * 例如：WebGL图像预处理默认每次取4字节的数据，但是540x960分辨率下的U、V分量宽度是540/2=270不能被4整除，导致绿屏。
-         */
-        openWebglAlignment?: boolean
-    }
-}
-
-
-declare class Jessibuca {
-
-    constructor(config?: Jessibuca.Config);
-
-    /**
-     * 是否开启控制台调试打印
-     @example
-     // 开启
-     jessibuca.setDebug(true)
-     // 关闭
-     jessibuca.setDebug(false)
-     */
-    setDebug(flag: boolean): void;
-
-    /**
-     * 静音
-     @example
-     jessibuca.mute()
-     */
-    mute(): void;
-
-    /**
-     * 取消静音
-     @example
-     jessibuca.cancelMute()
-     */
-    cancelMute(): void;
-
-    /**
-     * 留给上层用户操作来触发音频恢复的方法。
-     *
-     * iPhone，chrome等要求自动播放时，音频必须静音，需要由一个真实的用户交互操作来恢复，不能使用代码。
-     *
-     * https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
-     */
-    audioResume(): void;
-
-    /**
-     *
-     * 设置超时时长, 单位秒
-     * 在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
-
-     @example
-     jessibuca.setTimeout(10)
-
-     jessibuca.on('timeout',function(){
-        //
-    });
-     */
-    setTimeout(): void;
-
-    /**
-     * @param mode
-     *      0 视频画面完全填充canvas区域,画面会被拉伸  等同于参数 `isResize` 为false
-     *
-     *      1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 `isResize` 为true
-     *
-     *      2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 `isFullResize` 为true
-     @example
-     jessibuca.setScaleMode(0)
-
-     jessibuca.setScaleMode(1)
-
-     jessibuca.setScaleMode(2)
-     */
-    setScaleMode(mode: number): void;
-
-    /**
-     * 暂停播放
-     *
-     * 可以在pause 之后，再调用 `play()`方法就继续播放之前的流。
-     @example
-     jessibuca.pause().then(()=>{
-        console.log('pause success')
-
-        jessibuca.play().then(()=>{
-
-        }).catch((e)=>{
-
-        })
-
-    }).catch((e)=>{
-        console.log('pause error',e);
-    })
-     */
-    pause(): Promise<void>;
-
-    /**
-     * 关闭视频,不释放底层资源
-     @example
-     jessibuca.close();
-     */
-    close(): void;
-
-    /**
-     * 关闭视频，释放底层资源
-     @example
-     jessibuca.destroy()
-     */
-    destroy(): void;
-
-    /**
-     * 清理画布为黑色背景
-     @example
-     jessibuca.clearView()
-     */
-    clearView(): void;
-
-    /**
-     * 播放视频
-     @example
-
-     jessibuca.play('url').then(()=>{
-        console.log('play success')
-    }).catch((e)=>{
-        console.log('play error',e)
-    })
-     //
-     jessibuca.play()
-     */
-    play(url?: string): Promise<void>;
-
-    /**
-     * 重新调整视图大小
-     */
-    resize(): void;
-
-    /**
-     * 设置最大缓冲时长，单位秒，播放器会自动消除延迟。
-     *
-     * 等同于 `videoBuffer` 参数。
-     *
-     @example
-     // 设置 200ms 缓冲
-     jessibuca.setBufferTime(0.2)
-     */
-    setBufferTime(time: number): void;
-
-    /**
-     * 设置旋转角度，只支持，0(默认) ，180，270 三个值。
-     *
-     * > 可用于实现监控画面小窗和全屏效果，由于iOS没有全屏API，此方法可以模拟页面内全屏效果而且多端效果一致。   *
-     @example
-     jessibuca.setRotate(0)
-
-     jessibuca.setRotate(90)
-
-     jessibuca.setRotate(270)
-     */
-    setRotate(deg: number): void;
-
-    /**
-     *
-     * 设置音量大小，取值0 — 1
-     *
-     * > 区别于 mute 和 cancelMute 方法，虽然设置setVolume(0) 也能达到 mute方法，但是mute 方法是不调用底层播放音频的，能提高性能。而setVolume(0)只是把声音设置为0 ，以达到效果。
-     * @param volume 当为0时，完全无声;当为1时，最大音量，默认值
-     @example
-     jessibuca.setVolume(0.2)
-
-     jessibuca.setVolume(0)
-
-     jessibuca.setVolume(1)
-     */
-    setVolume(volume: number): void;
-
-    /**
-     * 返回是否加载完毕
-     @example
-     var result = jessibuca.hasLoaded()
-     console.log(result) // true
-     */
-    hasLoaded(): boolean;
-
-    /**
-     * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。
-     * H5目前在chrome\edge 84, android chrome 84及以上有原生亮屏API, 需要是https页面
-     * 其余平台为模拟实现，此时为兼容实现，并不保证所有浏览器都支持
-     @example
-     jessibuca.setKeepScreenOn()
-     */
-    setKeepScreenOn(): boolean;
-
-    /**
-     * 全屏(取消全屏)播放视频
-     @example
-     jessibuca.setFullscreen(true)
-     //
-     jessibuca.setFullscreen(false)
-     */
-    setFullscreen(flag: boolean): void;
-
-    /**
-     *
-     * 截图，调用后弹出下载框保存截图
-     * @param filename 可选参数, 保存的文件名, 默认 `时间戳`
-     * @param format   可选参数, 截图的格式，可选png或jpeg或者webp ,默认 `png`
-     * @param quality  可选参数, 当格式是jpeg或者webp时，压缩质量，取值0 ~ 1 ,默认 `0.92`
-     * @param type 可选参数, 可选download或者base64或者blob，默认`download`
-
-     @example
-
-     jessibuca.screenshot("test","png",0.5)
-
-     const base64 = jessibuca.screenshot("test","png",0.5,'base64')
-
-     const fileBlob = jessibuca.screenshot("test",'blob')
-     */
-    screenshot(filename?: string, format?: string, quality?: number, type?: string): void;
-
-    /**
-     * 开始录制。
-     * @param fileName 可选，默认时间戳
-     * @param fileType 可选，默认webm，支持webm 和mp4 格式
-
-     @example
-     jessibuca.startRecord('xxx','webm')
-     */
-    startRecord(fileName: string, fileType: string): void;
-
-    /**
-     * 暂停录制并下载。
-     @example
-     jessibuca.stopRecordAndSave()
-     */
-    stopRecordAndSave(): void;
-
-    /**
-     * 返回是否正在播放中状态。
-     @example
-     var result = jessibuca.isPlaying()
-     console.log(result) // true
-     */
-    isPlaying(): boolean;
-
-    /**
-     *   返回是否静音。
-     @example
-     var result = jessibuca.isMute()
-     console.log(result) // true
-     */
-    isMute(): boolean;
-
-    /**
-     * 返回是否正在录制。
-     @example
-     var result = jessibuca.isRecording()
-     console.log(result) // true
-     */
-    isRecording(): boolean;
-
-
-    /**
-     * 监听 jessibuca 初始化事件
-     * @example
-     * jessibuca.on("load",function(){console.log('load')})
-     */
-    on(event: 'load', callback: () => void): void;
-
-    /**
-     * 视频播放持续时间，单位ms
-     * @example
-     * jessibuca.on('timeUpdate',function (ts) {console.log('timeUpdate',ts);})
-     */
-    on(event: 'timeUpdate', callback: () => void): void;
-
-    /**
-     * 当解析出视频信息时回调，2个回调参数
-     * @example
-     * jessibuca.on("videoInfo",function(data){console.log('width:',data.width,'height:',data.width)})
-     */
-    on(event: 'videoInfo', callback: (data: {
-        /** 视频宽 */
-        width: number;
-        /** 视频高 */
-        height: number;
-    }) => void): void;
-
-    /**
-     * 当解析出音频信息时回调，2个回调参数
-     * @example
-     * jessibuca.on("audioInfo",function(data){console.log('numOfChannels:',data.numOfChannels,'sampleRate',data.sampleRate)})
-     */
-    on(event: 'audioInfo', callback: (data: {
-        /** 声频通道 */
-        numOfChannels: number;
-        /** 采样率 */
-        sampleRate: number;
-    }) => void): void;
-
-    /**
-     * 信息，包含错误信息
-     * @example
-     * jessibuca.on("log",function(data){console.log('data:',data)})
-     */
-    on(event: 'log', callback: () => void): void;
-
-    /**
-     * 错误信息
-     * @example
-     * jessibuca.on("error",function(error){
-        if(error === Jessibuca.ERROR.fetchError){
-            //
-        }
-        else if(error === Jessibuca.ERROR.webcodecsH265NotSupport){
-            //
-        }
-        console.log('error:',error)
-    })
-     */
-    on(event: 'error', callback: (err: Jessibuca.ERROR) => void): void;
-
-    /**
-     * 当前网速， 单位KB 每秒1次,
-     * @example
-     * jessibuca.on("kBps",function(data){console.log('kBps:',data)})
-     */
-    on(event: 'kBps', callback: (value: number) => void): void;
-
-    /**
-     * 渲染开始
-     * @example
-     * jessibuca.on("start",function(){console.log('start render')})
-     */
-    on(event: 'start', callback: () => void): void;
-
-    /**
-     * 当设定的超时时间内无数据返回,则回调
-     * @example
-     * jessibuca.on("timeout",function(error){console.log('timeout:',error)})
-     */
-    on(event: 'timeout', callback: (error: Jessibuca.TIMEOUT) => void): void;
-
-    /**
-     * 当play()的时候，如果没有数据返回，则回调
-     * @example
-     * jessibuca.on("loadingTimeout",function(){console.log('timeout')})
-     */
-    on(event: 'loadingTimeout', callback: () => void): void;
-
-    /**
-     * 当播放过程中，如果超过timeout之后没有数据渲染，则抛出异常。
-     * @example
-     * jessibuca.on("delayTimeout",function(){console.log('timeout')})
-     */
-    on(event: 'delayTimeout', callback: () => void): void;
-
-    /**
-     * 当前是否全屏
-     * @example
-     * jessibuca.on("fullscreen",function(flag){console.log('is fullscreen',flag)})
-     */
-    on(event: 'fullscreen', callback: () => void): void;
-
-    /**
-     * 触发播放事件
-     * @example
-     * jessibuca.on("play",function(flag){console.log('play')})
-     */
-    on(event: 'play', callback: () => void): void;
-
-    /**
-     * 触发暂停事件
-     * @example
-     * jessibuca.on("pause",function(flag){console.log('pause')})
-     */
-    on(event: 'pause', callback: () => void): void;
-
-    /**
-     * 触发声音事件，返回boolean值
-     * @example
-     * jessibuca.on("mute",function(flag){console.log('is mute',flag)})
-     */
-    on(event: 'mute', callback: () => void): void;
-
-    /**
-     * 流状态统计，流开始播放后回调，每秒1次。
-     * @example
-     * jessibuca.on("stats",function(s){console.log("stats is",s)})
-     */
-    on(event: 'stats', callback: (stats: {
-        /** 当前缓冲区时长，单位毫秒 */
-        buf: number;
-        /** 当前视频帧率 */
-        fps: number;
-        /** 当前音频码率，单位byte */
-        abps: number;
-        /** 当前视频码率，单位byte */
-        vbps: number;
-        /** 当前视频帧pts，单位毫秒 */
-        ts: number;
-    }) => void): void;
-
-    /**
-     * 渲染性能统计，流开始播放后回调，每秒1次。
-     * @param performance 0: 表示卡顿,1: 表示流畅,2: 表示非常流程
-     * @example
-     * jessibuca.on("performance",function(performance){console.log("performance is",performance)})
-     */
-    on(event: 'performance', callback: (performance: 0 | 1 | 2) => void): void;
-
-    /**
-     * 录制开始的事件
-
-     * @example
-     * jessibuca.on("recordStart",function(){console.log("record start")})
-     */
-    on(event: 'recordStart', callback: () => void): void;
-
-    /**
-     * 录制结束的事件
-
-     * @example
-     * jessibuca.on("recordEnd",function(){console.log("record end")})
-     */
-    on(event: 'recordEnd', callback: () => void): void;
-
-    /**
-     * 录制的时候，返回的录制时长，1s一次
-
-     * @example
-     * jessibuca.on("recordingTimestamp",function(timestamp){console.log("recordingTimestamp is",timestamp)})
-     */
-    on(event: 'recordingTimestamp', callback: (timestamp: number) => void): void;
-
-    /**
-     * 监听调用play方法 经过 初始化-> 网络请求-> 解封装 -> 解码 -> 渲染 一系列过程的时间消耗
-     * @param event
-     * @param callback
-     */
-    on(event: 'playToRenderTimes', callback: (times: {
-        playInitStart: number, // 1 初始化
-        playStart: number, // 2 初始化
-        streamStart: number, // 3 网络请求
-        streamResponse: number, // 4 网络请求
-        demuxStart: number, // 5 解封装
-        decodeStart: number, // 6 解码
-        videoStart: number, // 7 渲染
-        playTimestamp: number,// playStart- playInitStart
-        streamTimestamp: number,// streamStart - playStart
-        streamResponseTimestamp: number,// streamResponse - streamStart
-        demuxTimestamp: number, // demuxStart - streamResponse
-        decodeTimestamp: number, // decodeStart - demuxStart
-        videoTimestamp: number,// videoStart - decodeStart
-        allTimestamp: number // videoStart - playInitStart
-    }) => void): void
-
-    /**
-     * 监听方法
-     *
-     @example
-
-     jessibuca.on("load",function(){console.log('load')})
-     */
-    on(event: string, callback: Function): void;
-
-}
-
-export default Jessibuca;
-!(function () {
-    /**
-     * @param opt
-     *        container: DOM 容器
-     *        contextOptions：
-     *        videoBuffer：
-     *        forceNoGL：
-     *        isNotMute：
-     *        decoder：
-     * @constructor
-     */
-    function Jessibuca(opt) {
-        this._opt = opt;
-
-        if (typeof opt.container === "string") {
-            this._opt.container = document.getElementById(opt.container);
-        }
-        if (!this._opt.container) {
-            throw new Error('Jessibuca need container option');
-            return;
-        }
-
-        this._canvasElement = document.createElement("canvas");
-        this._canvasElement.style.position = "absolute";
-        this._canvasElement.style.top = 0;
-        this._canvasElement.style.left = 0;
-        this._opt.container.appendChild(this._canvasElement);
-        this._container = this._opt.container;
-        this._container.style.overflow = "hidden";
-        this._containerOldPostion = {
-            position: this._container.style.position,
-            top: this._container.style.top,
-            left: this._container.style.left,
-            width: this._container.style.width,
-            height: this._container.style.height
-        }
-        if (this._containerOldPostion.position != "absolute") {
-            this._container.style.position = "relative"
-        }
-        this._opt.videoBuffer = opt.videoBuffer || 0;
-        this._opt.text = opt.text || '';
-        //
-        this._opt.isResize = opt.isResize === false ? opt.isResize : true;
-        this._opt.isFullResize = opt.isFullResize === true ? opt.isFullResize : false;
-        this._opt.isDebug = opt.debug === true;
-        this._opt.timeout = typeof opt.timeout === 'number' ? opt.timeout : 30;
-        this._opt.supportDblclickFullscreen = opt.supportDblclickFullscreen === true;
-        this._opt.showBandwidth = opt.showBandwidth === true;
-        this._opt.operateBtns = Object.assign({
-            fullscreen: false,
-            screenshot: false,
-            play: false,
-            audio: false
-        }, opt.operateBtns || {});
-        this._opt.keepScreenOn = opt.keepScreenOn === true;
-
-        if (!opt.forceNoGL) this._initContextGL();
-        this._audioContext = new (window.AudioContext || window.webkitAudioContext)();
-        this._audioEnabled(true);
-        if (!opt.isNotMute) this._audioEnabled(false);
-        if (this._contextGL) {
-            this._initProgram();
-            this._initBuffers();
-            this._initTextures();
-        }
-        this._onresize = () => this.resize();
-        this._onfullscreenchange = () => this._fullscreenchange();
-        window.addEventListener("resize", this._onresize);
-        document.addEventListener('fullscreenchange', this._onfullscreenchange);
-        this._decoderWorker = new Worker(opt.decoder || 'ff.js')
-        var _this = this;
-        this._hasLoaded = false;
-        this._stats = {
-            buf: 0,
-            fps: 0,
-            abps: '',
-            vbps: '',
-            ts: ''
-        };
-
-        if (this._opt.supportDblclickFullscreen) {
-            this._canvasElement.addEventListener('dblclick', function () {
-                _this.fullscreen = !_this.fullscreen;
-            }, false);
-        }
-        this.onPlay = noop;
-        this.onPause = noop;
-        this.onRecord = noop;
-        this.onFullscreen = noop;
-        this.onMute = noop;
-        this.onLoad = noop;
-        this.onLog = noop;
-        this.onError = noop;
-        this.onTimeUpdate = noop;
-        this.onInitSize = noop;
-        this._onMessage();
-        this._initDom();
-        this._initStatus();
-        this._initEventListener();
-        this._hideBtns();
-        //
-        this._initWakeLock();
-        this._enableWakeLock();
-    };
-
-    function noop() {
-
-    }
-
-    Jessibuca.prototype._initDom = function () {
-        var playBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAARVJREFUSMe9laEOglAUhs+5k9lJFpsJ5QWMJoNGbEY0mEy+gr6GNo0a3SiQCegMRILzGdw4hl+Cd27KxPuXb2zA/91z2YXoGRERkX4fvN3A2QxUiv4dFM3n8jZRBLbbVfd+ubJuF4xjiCyXkksueb1uSKCIZYGLBTEx8ekEoV7PkICeVgs8HiGyXoO2bUigCDM4HoPnM7bI8wwJ6Gk0sEXbLSay30Oo2TQkoGcwgFCSQMhxDAvoETEscDiQkJC4LjMz8+XyZ4HrFYWjEQqHQ1asWGWZfmdFAsVINxuw00HhbvfpydpvxWkKTqdYaRCUfUPJCdzv4Gr1uqfli0tOIAzByUT/iCrL6+84y3Bw+D6ui5Ou+jwA8FnIO++FACgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDEtMDhUMTY6NDI6NTMrMDg6MDCKP7wnAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAw+2IEmwAAAEl0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fZ2Y3MDBzN2IzZncvYm9mYW5nLnN2Z8fICi0AAAAASUVORK5CYII=';
-        var pauseBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAHVJREFUSMftkCESwCAMBEOnCtdXVMKHeC7oInkEeQJXkRoEZWraipxZc8lsQqQZBACAlIS1oqGhhTCdu3oyxyyMcdRf79c5J7SWDBky+z4173rbJvR+VF/e/qwKqIAKqMBDgZyFzAQCoZTpxq7HLDyOrw/9b07l3z4dDnI2IAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0wMS0wOFQxNjo0Mjo1MyswODowMIo/vCcAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMDEtMDhUMTY6NDI6NTMrMDg6MDD7YgSbAAAASnRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl9nZjcwMHM3YjNmdy96YW50aW5nLnN2ZxqNZJkAAAAASUVORK5CYII=';
-        var screenshotBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAaxJREFUSMfNlLFOAkEQhmevAZMjR6OGRBJKsFBzdkYNpYSaWkopIOFRCBWh1ieA+ALGRgutjK0HzV2H5SX7W/zsmY3cnTEhcZovOzcz9+/s7Ir8d4OGht7fBwAgjvEri2OTl1ffSf0xAMBxRIkS1e3Se3+vcszEMe/6OqmT/aN2m1wsNu/o5YVsNHI7BgA4PCRfXzfXCwKy1RLbcXZG9nrkzc12jvT8nPU/PtatOThgAx8fuS4WyZ0de2e+T87n5OcnuVqRsxl5cpImQDnKUc7DA1fVqpimZCu+vCSjiNH9PlmpJNTQ0INBErfeafZRAakC6FWKfH9nwU7H/l6rGdqCOx3y7c3U+aOARsMMp+1vNskwTLjulB23XJL1epqA9OshIiKeJxAIoug7UyA4OuLi6Ynr52deu+NjOy4MSc9Ln8rMDpTLybBpaOjdXbJUIqdTm8a/t2fn/RSQewR24HicTLmGhnbdzcPquvYtGY3+PIR24UKBUXd35v6Sk4lN47+9NXm/FBAEedfGTjw9JYdDm76fm6+hoS8ujGAxT6L9Im7bTKeurvIEb92+AES1b6x283XSAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAwij+8JwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wMS0wOFQxNjo0Mjo1MyswODowMPtiBJsAAABJdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX2dmNzAwczdiM2Z3L2NhbWVyYS5zdmeyubWEAAAAAElFTkSuQmCC';
-        var fullscreenBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAALZJREFUSMftVbsORUAQVSj8DomChvh3lU5CoSVCQq2RObeYu8XG3deVoHCak81kds7Oaz3vxRcAAMwztOg6vX9d6/3XFQQC+b7iAoFhYE7Tvx9EIFAcy/ftO3MQGAQkCfM4MmeZWyajiLnvmYuCeduMAuSzvRBVYNluFHCssSgFp7Sq9ALKkjnPf9ubRtkDL27HNT3QtsY9cAjsNAVheHIKBOwD2wpxFHDbJpwmaHH2L1iWx+2BDy8RbXXtqbRBAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAwij+8JwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wMS0wOFQxNjo0Mjo1MyswODowMPtiBJsAAABTdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX2dmNzAwczdiM2Z3L3F1YW5waW5nenVpZGFodWEuc3ZnTBoI7AAAAABJRU5ErkJggg==';
-        var minScreenBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAYJJREFUSMfdVbGKwkAQnQn+geAfWBixUTsVgp3YGKxSWflVNmIjARULwc5KO40ipNHWRgs/wGLniucKa+Jd5ODuuGle5u3szGRmd5bor4iIiMhuB3Sc+HXXBdp2/Lpta7v4dccRJUrUdhtNQIkSVa3C8HwG1uumg34f2OnEB+h0tF1Sv5b+YIsttpZLEhKSdhvscPi8IXFF74GJiYnHY7Cex8zMvFgkbInjmJnv98kqoO30vmhLtaRMB60WtEbDNDudgMUiKiQSzfjOMzFxoQAyCPSfw7/nQZ/PUYnpNGV6OR6BmYzJbzYIoBQCzGaRBDQvJCTdLnTLolg5HN5t6f8V1h/oUT4PrVKJWBotmEzQw+vV3J9Ow851P2/BaoX9Yfh0BrJZYKlk8uUyHOpDeLuBHwzMBJtN2PV6IPUhXK9Nf5cLMAxfluanrmGkRBggtRo03wfq66P/6CsJAnOg+f6rgfZI4BGYiYlHIx048eR6krcnq34kkj1GuVz8+jceo9+SD5A8yGh8CTq7AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAwij+8JwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wMS0wOFQxNjo0Mjo1MyswODowMPtiBJsAAABNdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX2dmNzAwczdiM2Z3L3p1aXhpYW9odWEuc3ZnoCFr0AAAAABJRU5ErkJggg==';
-        var quietBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAR9JREFUSMfVlD0LglAYhe9VkwgNihpsjbYQf4JTS7+iuaGxpcGfJjS0NFRLk2NDi6MogafhJGRIX9yEzvJwrx/nvPd9VYh/F3LkyBuN2g3J1QoAgCQhPe/Hxq5Lo+0WlfJ9dYYAgGaTDAIyy/BUnwcwWJlhcLnZkN2ugIBAuy2kkEL2ep8F73S4kjfFcfn6cMj9KLodrWVBiXyf75tMyOOR+4MBOZ8XLXzorboA5UpnM/J0Ivd7+vX7xX2asqGpVKtFXi5sqWmypXefrfIWAACmU/JwKCoun8hu9zA0uk6u13wgirg+n7+bAcsibbt6SB3n9TQXPxwAwHJJpum7M6BcDDQa0SgMaw9QPkJNIxcLMo4ZcDz+eYDqQFLWbqxKV57EtW1WtMbmAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAwij+8JwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wMS0wOFQxNjo0Mjo1MyswODowMPtiBJsAAABKdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX2dmNzAwczdiM2Z3L2ppbmd5aW4uc3ZnIlMYaQAAAABJRU5ErkJggg==';
-        var playAudioBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAU5JREFUSMftkzGKwlAURf9PULBQwULSCKK1bZAgNuoaFFyAC3AdZg0uQCwshWzAShEEO7Gy0soUCu9Occ3An5nMGCfdzGsO7+Xy3/03iVL/lbAAACiVIBCI77O37Vi9QCDZbEqLm03ycEBUAoHk818v7nYpul5Jz4tf8HBKYa1mcjwmbzd8rG8NFIsU7ffk8UjmcjE3XK+RtB4G2PT75GbDeblMttumfjSKMRCGLxsQCKTReE9KIJDJxDw/SmKxiOZWWh+ntrSlre2WXRAorbTSrZapip7X66kbMKtQUFBQCENznsmQ93vqBhh5r8fO85jAcsnIrcce1yV3uxgD8zl5uZgU+dGBVlrp6GbTKRPwffaDAek45Gz2/M0AAJ0OeTol+w0rFYrOZ3K1MhNJEjEAwHF4cBA8Z8B1zcXV6msv+JMR2yaHQ1LrXx/8Z+sNRxsWcwZeb6UAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDEtMDhUMTY6NDI6NTMrMDg6MDCKP7wnAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAw+2IEmwAAAEt0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fZ2Y3MDBzN2IzZncvc2hlbmd5aW4uc3ZnFog1MQAAAABJRU5ErkJggg==';
-        var recordBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAPRJREFUSMflVDEOwjAQO0e8gr2sZYVunREbD6ISfAgmkBjpC/hBEQ+AtTWD6QAI0gBlqRfLp+TiXC5n1nXgMUCS5HBoNBqj6IOMMFwuEpsNAABl6d3HihWrOJaBsuRPkGW+c929HAxuYefb6L+R0ZgkMrJYiItCnCT1sl5Y1jwXj0bNniJNJWqujfX7LyrwJh8AYDxWgulU0dPp20IFlxoODm61kpE4VnS9/puBXyPYgH7LbKY3PhwUnUw+NdC4CdW9+71UgyZspwIBB9No3O0klktxUahyx+Pz+lYG0Xzu84lXRqTqwRQAGAzns8R223gUdxZXGcAK5Hp0ClIAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDEtMDhUMTY6NDI6NTMrMDg6MDCKP7wnAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAw+2IEmwAAAE50RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fZ2Y3MDBzN2IzZncvbHV6aGlzaGlwaW4uc3Zn5Zd7GQAAAABJRU5ErkJggg==';
-        var recordingBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAahJREFUSMdjYBjpgBFd4NZK+f+soQYG//T+yzFuUFUl2cApjEWM/758UZvysPDn3127GBkZGBgY/v4l6ICb9xTWsRbp6/9f9W8N44Jz5xgCGI4wfGFiIttrR/5n/3/U3KyR8rj8t0RdHS5lcAv+//yXzzhZTY1ii2FAmsGZocna+maD3GnWY62tNzbJBbDOffLkxie5eJYwa2uYMhaigzb2/zyGguPH/y9mTGKYYGlJUIMiYxDjHCen/4oMDAxznJzg4k8Z/jP+l5LCCAFCQP30Y5dfXVZWDI7/zzIs8PNjNGJ4/7/r+XNKA4rkoNZ4/lj0V9TmzUxJv0J+F+jrM3YyvPq/acsWujmA2oBkB9y4LifLxhoa+teAzYFtwtWr/8sZxBj9fHxo7oCbprJ72MqOHWNgZGBkYFy1isGGoZahTFSU0hAgOhcQnfph4P7/df9T9u1jPMn4nyHmxIn/bAzLGe7GxTHsZyj+f+zpUwYGBmmG6bQsiMr+L/v/rqlJY9Njm9889fW4lGEUxXCHwAomUgH3vxBG8c+f1WWf9P98sns3oaJ4FAAAbtWqHTT84QYAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDEtMDhUMTY6MzU6MjMrMDg6MDBLHbvEAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTAxLTA4VDE2OjM1OjIzKzA4OjAwOkADeAAAAE50RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fcTM1YTFhNHBtY2MvbHV6aGlzaGlwaW4uc3Zn6xlv1QAAAABJRU5ErkJggg==';
-        var gifBase64 = 'data:image/gif;base64,R0lGODlhgACAAKIAAP///93d3bu7u5mZmQAA/wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBQAEACwCAAIAfAB8AAAD/0i63P4wygYqmDjrzbtflvWNZGliYXiubKuloivPLlzReD7al+7/Eh5wSFQIi8hHYBkwHUmD6CD5YTJLz49USuVYraRsZ7vtar7XnQ1Kjpoz6LRHvGlz35O4nEPP2O94EnpNc2sef1OBGIOFMId/inB6jSmPdpGScR19EoiYmZobnBCIiZ95k6KGGp6ni4wvqxilrqBfqo6skLW2YBmjDa28r6Eosp27w8Rov8ekycqoqUHODrTRvXsQwArC2NLF29UM19/LtxO5yJd4Au4CK7DUNxPebG4e7+8n8iv2WmQ66BtoYpo/dvfacBjIkITBE9DGlMvAsOIIZjIUAixliv9ixYZVtLUos5GjwI8gzc3iCGghypQqrbFsme8lwZgLZtIcYfNmTJ34WPTUZw5oRxdD9w0z6iOpO15MgTh1BTTJUKos39jE+o/KS64IFVmsFfYT0aU7capdy7at27dw48qdS7eu3bt480I02vUbX2F/JxYNDImw4GiGE/P9qbhxVpWOI/eFKtlNZbWXuzlmG1mv58+gQ4seTbq06dOoU6vGQZJy0FNlMcV+czhQ7SQmYd8eMhPs5BxVdfcGEtV3buDBXQ+fURxx8oM6MT9P+Fh6dOrH2zavc13u9JXVJb520Vp8dvC76wXMuN5Sepm/1WtkEZHDefnzR9Qvsd9+/wi8+en3X0ntYVcSdAE+UN4zs7ln24CaLagghIxBaGF8kFGoIYV+Ybghh841GIyI5ICIFoklJsigihmimJOLEbLYIYwxSgigiZ+8l2KB+Ml4oo/w8dijjcrouCORKwIpnJIjMnkkksalNeR4fuBIm5UEYImhIlsGCeWNNJphpJdSTlkml1jWeOY6TnaRpppUctcmFW9mGSaZceYopH9zkjnjUe59iR5pdapWaGqHopboaYua1qije67GJ6CuJAAAIfkEBQUABAAsCgACAFcAMAAAA/9Iutz+ML5Ag7w46z0r5WAoSp43nihXVmnrdusrv+s332dt4Tyo9yOBUJD6oQBIQGs4RBlHySSKyczVTtHoidocPUNZaZAr9F5FYbGI3PWdQWn1mi36buLKFJvojsHjLnshdhl4L4IqbxqGh4gahBJ4eY1kiX6LgDN7fBmQEJI4jhieD4yhdJ2KkZk8oiSqEaatqBekDLKztBG2CqBACq4wJRi4PZu1sA2+v8C6EJexrBAD1AOBzsLE0g/V1UvYR9sN3eR6lTLi4+TlY1wz6Qzr8u1t6FkY8vNzZTxaGfn6mAkEGFDgL4LrDDJDyE4hEIbdHB6ESE1iD4oVLfLAqPETIsOODwmCDJlv5MSGJklaS6khAQAh+QQFBQAEACwfAAIAVwAwAAAD/0i63P5LSAGrvTjrNuf+YKh1nWieIumhbFupkivPBEzR+GnnfLj3ooFwwPqdAshAazhEGUXJJIrJ1MGOUamJ2jQ9QVltkCv0XqFh5IncBX01afGYnDqD40u2z76JK/N0bnxweC5sRB9vF34zh4gjg4uMjXobihWTlJUZlw9+fzSHlpGYhTminKSepqebF50NmTyor6qxrLO0L7YLn0ALuhCwCrJAjrUqkrjGrsIkGMW/BMEPJcphLgDaABjUKNEh29vdgTLLIOLpF80s5xrp8ORVONgi8PcZ8zlRJvf40tL8/QPYQ+BAgjgMxkPIQ6E6hgkdjoNIQ+JEijMsasNY0RQix4gKP+YIKXKkwJIFF6JMudFEAgAh+QQFBQAEACw8AAIAQgBCAAAD/kg0PPowykmrna3dzXvNmSeOFqiRaGoyaTuujitv8Gx/661HtSv8gt2jlwIChYtc0XjcEUnMpu4pikpv1I71astytkGh9wJGJk3QrXlcKa+VWjeSPZHP4Rtw+I2OW81DeBZ2fCB+UYCBfWRqiQp0CnqOj4J1jZOQkpOUIYx/m4oxg5cuAaYBO4Qop6c6pKusrDevIrG2rkwptrupXB67vKAbwMHCFcTFxhLIt8oUzLHOE9Cy0hHUrdbX2KjaENzey9Dh08jkz8Tnx83q66bt8PHy8/T19vf4+fr6AP3+/wADAjQmsKDBf6AOKjS4aaHDgZMeSgTQcKLDhBYPEswoA1BBAgAh+QQFBQAEACxOAAoAMABXAAAD7Ei6vPOjyUkrhdDqfXHm4OZ9YSmNpKmiqVqykbuysgvX5o2HcLxzup8oKLQQix0UcqhcVo5ORi+aHFEn02sDeuWqBGCBkbYLh5/NmnldxajX7LbPBK+PH7K6narfO/t+SIBwfINmUYaHf4lghYyOhlqJWgqDlAuAlwyBmpVnnaChoqOkpaanqKmqKgGtrq+wsbA1srW2ry63urasu764Jr/CAb3Du7nGt7TJsqvOz9DR0tPU1TIA2ACl2dyi3N/aneDf4uPklObj6OngWuzt7u/d8fLY9PXr9eFX+vv8+PnYlUsXiqC3c6PmUUgAACH5BAUFAAQALE4AHwAwAFcAAAPpSLrc/m7IAau9bU7MO9GgJ0ZgOI5leoqpumKt+1axPJO1dtO5vuM9yi8TlAyBvSMxqES2mo8cFFKb8kzWqzDL7Xq/4LB4TC6bz1yBes1uu9uzt3zOXtHv8xN+Dx/x/wJ6gHt2g3Rxhm9oi4yNjo+QkZKTCgGWAWaXmmOanZhgnp2goaJdpKGmp55cqqusrZuvsJays6mzn1m4uRAAvgAvuBW/v8GwvcTFxqfIycA3zA/OytCl0tPPO7HD2GLYvt7dYd/ZX99j5+Pi6tPh6+bvXuTuzujxXens9fr7YPn+7egRI9PPHrgpCQAAIfkEBQUABAAsPAA8AEIAQgAAA/lIutz+UI1Jq7026h2x/xUncmD5jehjrlnqSmz8vrE8u7V5z/m5/8CgcEgsGo/IpHLJbDqf0Kh0ShBYBdTXdZsdbb/Yrgb8FUfIYLMDTVYz2G13FV6Wz+lX+x0fdvPzdn9WeoJGAYcBN39EiIiKeEONjTt0kZKHQGyWl4mZdREAoQAcnJhBXBqioqSlT6qqG6WmTK+rsa1NtaGsuEu6o7yXubojsrTEIsa+yMm9SL8osp3PzM2cStDRykfZ2tfUtS/bRd3ewtzV5pLo4eLjQuUp70Hx8t9E9eqO5Oku5/ztdkxi90qPg3x2EMpR6IahGocPCxp8AGtigwQAIfkEBQUABAAsHwBOAFcAMAAAA/9Iutz+MMo36pg4682J/V0ojs1nXmSqSqe5vrDXunEdzq2ta3i+/5DeCUh0CGnF5BGULC4tTeUTFQVONYAs4CfoCkZPjFar83rBx8l4XDObSUL1Ott2d1U4yZwcs5/xSBB7dBMBhgEYfncrTBGDW4WHhomKUY+QEZKSE4qLRY8YmoeUfkmXoaKInJ2fgxmpqqulQKCvqRqsP7WooriVO7u8mhu5NacasMTFMMHCm8qzzM2RvdDRK9PUwxzLKdnaz9y/Kt8SyR3dIuXmtyHpHMcd5+jvWK4i8/TXHff47SLjQvQLkU+fG29rUhQ06IkEG4X/Rryp4mwUxSgLL/7IqFETB8eONT6ChCFy5ItqJomES6kgAQAh+QQFBQAEACwKAE4AVwAwAAAD/0i63A4QuEmrvTi3yLX/4MeNUmieITmibEuppCu3sDrfYG3jPKbHveDktxIaF8TOcZmMLI9NyBPanFKJp4A2IBx4B5lkdqvtfb8+HYpMxp3Pl1qLvXW/vWkli16/3dFxTi58ZRcChwIYf3hWBIRchoiHiotWj5AVkpIXi4xLjxiaiJR/T5ehoomcnZ+EGamqq6VGoK+pGqxCtaiiuJVBu7yaHrk4pxqwxMUzwcKbyrPMzZG90NGDrh/JH8t72dq3IN1jfCHb3L/e5ebh4ukmxyDn6O8g08jt7tf26ybz+m/W9GNXzUQ9fm1Q/APoSWAhhfkMAmpEbRhFKwsvCsmosRIHx444PoKcIXKkjIImjTzjkQAAIfkEBQUABAAsAgA8AEIAQgAAA/VIBNz+8KlJq72Yxs1d/uDVjVxogmQqnaylvkArT7A63/V47/m2/8CgcEgsGo/IpHLJbDqf0Kh0Sj0FroGqDMvVmrjgrDcTBo8v5fCZki6vCW33Oq4+0832O/at3+f7fICBdzsChgJGeoWHhkV0P4yMRG1BkYeOeECWl5hXQ5uNIAOjA1KgiKKko1CnqBmqqk+nIbCkTq20taVNs7m1vKAnurtLvb6wTMbHsUq4wrrFwSzDzcrLtknW16tI2tvERt6pv0fi48jh5h/U6Zs77EXSN/BE8jP09ZFA+PmhP/xvJgAMSGBgQINvEK5ReIZhQ3QEMTBLAAAh+QQFBQAEACwCAB8AMABXAAAD50i6DA4syklre87qTbHn4OaNYSmNqKmiqVqyrcvBsazRpH3jmC7yD98OCBF2iEXjBKmsAJsWHDQKmw571l8my+16v+CweEwum8+hgHrNbrvbtrd8znbR73MVfg838f8BeoB7doN0cYZvaIuMjY6PkJGSk2gClgJml5pjmp2YYJ6dX6GeXaShWaeoVqqlU62ir7CXqbOWrLafsrNctjIDwAMWvC7BwRWtNsbGFKc+y8fNsTrQ0dK3QtXAYtrCYd3eYN3c49/a5NVj5eLn5u3s6e7x8NDo9fbL+Mzy9/T5+tvUzdN3Zp+GBAAh+QQJBQAEACwCAAIAfAB8AAAD/0i63P4wykmrvTjrzbv/YCiOZGmeaKqubOu+cCzPdArcQK2TOL7/nl4PSMwIfcUk5YhUOh3M5nNKiOaoWCuWqt1Ou16l9RpOgsvEMdocXbOZ7nQ7DjzTaeq7zq6P5fszfIASAYUBIYKDDoaGIImKC4ySH3OQEJKYHZWWi5iZG0ecEZ6eHEOio6SfqCaqpaytrpOwJLKztCO2jLi1uoW8Ir6/wCHCxMG2x7muysukzb230M6H09bX2Nna29zd3t/g4cAC5OXm5+jn3Ons7eba7vHt2fL16tj2+QL0+vXw/e7WAUwnrqDBgwgTKlzIsKHDh2gGSBwAccHEixAvaqTYcFCjRoYeNyoM6REhyZIHT4o0qPIjy5YTTcKUmHImx5cwE85cmJPnSYckK66sSAAj0aNIkypdyrSp06dQo0qdSrWq1atYs2rdyrWr169gwxZJAAA7';
-        var playBigBase64 = 'data:image/png;base64,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';
-
-        function _setStyle(dom, cssObj) {
-            Object.keys(cssObj).forEach(function (key) {
-                dom.style[key] = cssObj[key];
-            })
-        }
-
-        var doms = {};
-
-        var fragment = document.createDocumentFragment();
-        var btnWrap = document.createElement('div');
-        var control1 = document.createElement('div');
-        var control2 = document.createElement('div');
-        var textDom = document.createElement('div');
-        var speedDom = document.createElement('div');
-        var playDom = document.createElement('div');
-        var playBigDom = document.createElement('div');
-        var pauseDom = document.createElement('div');
-        var screenshotsDom = document.createElement('div');
-        var fullscreenDom = document.createElement('div');
-        var minScreenDom = document.createElement('div');
-        var loadingDom = document.createElement('div');
-        var loadingTextDom = document.createElement('div');
-        var quietAudioDom = document.createElement('div');
-        var playAudioDom = document.createElement('div');
-        var recordDom = document.createElement('div');
-        var recordingDom = document.createElement('div');
-        var bgDom = document.createElement('div');
-
-        loadingTextDom.innerText = this._opt.loadingText || '';
-        textDom.innerText = this._opt.text || '';
-        speedDom.innerText = '';
-        playDom.title = '播放';
-        pauseDom.title = '暂停';
-        screenshotsDom.title = '截屏';
-        fullscreenDom.title = '全屏';
-        minScreenDom.title = '退出全屏';
-        quietAudioDom.title = '静音';
-        playAudioDom.title = '取消静音';
-        recordDom.title = '录制';
-        recordingDom.title = '取消录制';
-
-        var wrapStyle = {
-            height: '38px',
-            zIndex: 11,
-            position: 'absolute',
-            left: 0,
-            bottom: 0,
-            width: '100%',
-            background: 'rgba(0,0,0)'
-        };
-
-        var bgStyle = {
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-        };
-
-        if (this._opt.background) {
-            bgStyle = Object.assign({}, bgStyle, {
-                backgroundRepeat: "no-repeat",
-                backgroundPosition: "center",
-                backgroundSize: '100%',
-                backgroundImage: "url('" + this._opt.background + "')"
-            })
-        }
-
-        //
-        var loadingStyle = {
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-            textAlign: 'center',
-            color: "#fff",
-            display: 'none',
-            backgroundImage: "url('" + gifBase64 + "')",
-            backgroundRepeat: "no-repeat",
-            backgroundPosition: "center",
-            backgroundSize: "40px 40px",
-        };
-
-        var playBigStyle = {
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-            display: 'none',
-            background: 'rgba(0,0,0,0.4)',
-            backgroundImage: "url('" + playBigBase64 + "')",
-            backgroundRepeat: "no-repeat",
-            backgroundPosition: "center",
-            backgroundSize: "48px 48px",
-            cursor: "pointer"
-        };
-
-        var loadingTextStyle = {
-            position: 'absolute',
-            width: "100%",
-            top: '60%',
-            textAlign: 'center',
-        }
-        var controlStyle = {
-            position: 'absolute',
-            top: 0,
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-        };
-        var styleObj = {
-            display: 'none',
-            position: 'relative',
-            fontSize: '13px',
-            color: '#fff',
-            lineHeight: '20px',
-            marginLeft: '5px',
-            marginRight: '5px',
-            userSelect: 'none'
-        };
-        var styleObj2 = {
-            display: 'none',
-            position: 'relative',
-            width: '16px',
-            height: '16px',
-            marginLeft: '8px',
-            marginRight: '8px',
-            backgroundRepeat: "no-repeat",
-            backgroundPosition: "center",
-            backgroundSize: '100%',
-            cursor: 'pointer',
-        };
-        _setStyle(bgDom, bgStyle);
-        _setStyle(btnWrap, wrapStyle);
-        _setStyle(loadingDom, loadingStyle);
-        _setStyle(playBigDom, playBigStyle);
-        _setStyle(loadingTextDom, loadingTextStyle);
-        _setStyle(control1, Object.assign({}, controlStyle, {
-            left: 0
-        }));
-        _setStyle(control2, Object.assign({}, controlStyle, {
-            right: 0
-        }));
-        _setStyle(textDom, styleObj);
-        _setStyle(speedDom, styleObj);
-        _setStyle(playDom, Object.assign({}, styleObj2, {
-            backgroundImage: "url('" + playBase64 + "')",
-        }));
-
-        _setStyle(pauseDom, Object.assign({}, styleObj2, {
-            backgroundImage: "url('" + pauseBase64 + "')"
-        }));
-
-        _setStyle(screenshotsDom, Object.assign({}, styleObj2, {
-            backgroundImage: "url('" + screenshotBase64 + "')"
-        }));
-
-        _setStyle(fullscreenDom, Object.assign({}, styleObj2, {
-            backgroundImage: "url('" + fullscreenBase64 + "')"
-        }));
-
-        _setStyle(minScreenDom, Object.assign({}, styleObj2, {
-            backgroundImage: "url('" + minScreenBase64 + "')"
-        }));
-
-        _setStyle(quietAudioDom, Object.assign({}, styleObj2, {
-            backgroundImage: "url('" + quietBase64 + "')"
-        }));
-
-        _setStyle(playAudioDom, Object.assign({}, styleObj2, {
-            backgroundImage: "url('" + playAudioBase64 + "')"
-        }));
-
-        _setStyle(recordDom, Object.assign({}, styleObj2, {
-            backgroundImage: "url('" + recordBase64 + "')"
-        }));
-
-        _setStyle(recordingDom, Object.assign({}, styleObj2, {
-            backgroundImage: "url('" + recordingBase64 + "')"
-        }));
-
-        loadingDom.appendChild(loadingTextDom);
-        if (this._opt.text) {
-            control1.appendChild(textDom);
-            doms.textDom = textDom;
-        }
-        if (this._opt.showBandwidth) {
-            control1.appendChild(speedDom);
-            doms.speedDom = speedDom;
-        }
-
-        // record
-        //control2.appendChild(recordingDom);
-        //control2.appendChild(recordDom);
-
-        // screenshots
-        if (this._opt.operateBtns.screenshot) {
-            control2.appendChild(screenshotsDom);
-            doms.screenshotsDom = screenshotsDom;
-        }
-
-        // play stop
-        if (this._opt.operateBtns.play) {
-            control2.appendChild(playDom);
-            control2.appendChild(pauseDom);
-            doms.playDom = playDom;
-            doms.pauseDom = pauseDom;
-        }
-
-        // audio
-        if (this._opt.operateBtns.audio) {
-            control2.appendChild(playAudioDom);
-            control2.appendChild(quietAudioDom);
-            doms.playAudioDom = playAudioDom;
-            doms.quietAudioDom = quietAudioDom;
-        }
-
-        // fullscreen
-        if (this._opt.operateBtns.fullscreen) {
-            control2.appendChild(fullscreenDom);
-            control2.appendChild(minScreenDom);
-            doms.fullscreenDom = fullscreenDom;
-            doms.minScreenDom = minScreenDom;
-        }
-
-        btnWrap.appendChild(control1);
-        btnWrap.appendChild(control2);
-
-        fragment.appendChild(bgDom);
-        doms.bgDom = bgDom;
-        fragment.appendChild(loadingDom);
-        doms.loadingDom = loadingDom;
-        if (this._showControl()) {
-            fragment.appendChild(btnWrap);
-        }
-        if (this._opt.operateBtns.play) {
-            fragment.appendChild(playBigDom);
-            doms.playBigDom = playBigDom;
-        }
-        this._container.appendChild(fragment);
-        this._doms = doms;
-    };
-
-    Jessibuca.prototype._initWakeLock = function () {
-        this._wakeLock = null;
-        var _this = this;
-        var handleWakeLock = () => {
-            if (this._wakeLock !== null && "visible" === document.visibilityState) {
-                _this._enableWakeLock();
-            }
-        };
-
-        document.addEventListener('visibilitychange', handleWakeLock);
-        document.addEventListener('fullscreenchange', handleWakeLock);
-    };
-
-    Jessibuca.prototype._enableWakeLock = function () {
-        if (this._opt.keepScreenOn) {
-            if ("wakeLock" in navigator) {
-                var _this = this;
-                navigator.wakeLock.request("screen").then((lock) => {
-                    _this._wakeLock = lock;
-                    _this._wakeLock.addEventListener('release', function () {
-                    });
-                })
-            }
-        }
-    };
-
-
-    Jessibuca.prototype._initGainNode = function () {
-        var gainNode = this._audioContext.createGain();
-        var _this = this;
-        var source;
-        if (!navigator.mediaDevices.getUserMedia) {
-            console.log('getUserMedia not supported on your browser!');
-            return;
-        }
-
-        navigator.mediaDevices.getUserMedia(
-            // constraints - only audio needed for this app
-            {
-                audio: true
-            },
-
-            // Success callback
-            function (stream) {
-                source = _this._audioContext.createMediaStreamSource(stream);
-                source.connect(gainNode);
-                gainNode.connect(_this._audioContext.destination);
-                _this._gainNode = gainNode;
-            },
-
-            // Error callback
-            function (err) {
-                console.log('The following gUM error occurred: ' + err);
-            }
-        );
-    };
-
-    Jessibuca.prototype._showControl = function () {
-        var result = false;
-
-        var hasBtnShow = false;
-        Object.keys(this._opt.operateBtns).forEach((key) => {
-            if (this._opt.operateBtns[key]) {
-                hasBtnShow = true;
-            }
-        });
-
-        if (this._opt.showBandwidth || this._opt.text || hasBtnShow) {
-            result = true;
-        }
-
-        return result;
-    };
-
-    Jessibuca.prototype._onMessage = function () {
-        var _this = this;
-        this._decoderWorker.onmessage = function (event) {
-            var msg = event.data;
-            switch (msg.cmd) {
-                case "init":
-                    _this._opt.isDebug && console.log("decoder worker init")
-                    _this.setBufferTime(_this._opt.videoBuffer);
-                    if (!_this._hasLoaded) {
-                        _this._opt.isDebug && console.log("has loaded");
-                        _this._hasLoaded = true;
-                        _this.onLoad();
-                        _this._trigger('load');
-                    }
-                    break
-                case "initSize":
-                    _this._canvasElement.width = msg.w;
-                    _this._canvasElement.height = msg.h;
-                    _this.onInitSize();
-                    _this.resize();
-                    _this._trigger('videoInfo', {w: msg.w, h: msg.h});
-                    if (_this.isWebGL()) {
-
-                    } else {
-                        _this._initRGB(msg.w, msg.h)
-                    }
-                    break
-                case "render":
-                    if (_this._contextGL) {
-                        _this._drawNextOutputPictureGL(msg.output);
-                    } else {
-                        _this._drawNextOutputPictureRGBA(msg.buffer);
-                    }
-                    if (_this.loading) {
-                        _this.loading = false;
-                        _this.playing = true;
-                        _this._opt.isDebug && console.log("clear check loading timeout");
-                        _this._clearCheckLoading();
-                    }
-                    _this._trigger('timeUpdate', msg.ts);
-                    _this.onTimeUpdate(msg.ts);
-                    _this._updateStats({bps: msg.bps, ts: msg.ts});
-                    _this._checkHeart();
-                    break
-                case "initAudio":
-                    _this._initAudioPlay(msg.frameCount, msg.samplerate, msg.channels)
-                    _this._trigger('audioInfo', {
-                        numOfChannels: msg.channels, // 声频通道
-                        length: msg.frameCount, // 帧数
-                        sampleRate: msg.samplerate // 采样率
-                    });
-                    break
-                case "playAudio":
-                    _this._playAudio(msg.buffer)
-                    break
-                case "print":
-                    _this.onLog(msg.text)
-                    this._trigger('log', msg.text);
-                    _this._opt.isDebug && console.log(msg.text);
-                    break
-                case "printErr":
-                    _this.onLog(msg.text);
-                    this._trigger('log', msg.text);
-                    _this.onError(msg.text);
-                    this._trigger('error', msg.text);
-                    _this._opt.isDebug && console.error(msg.text);
-                    break;
-                case "initAudioPlanar":
-                    _this._initAudioPlanar(msg);
-                    _this._trigger('audioInfo', {
-                        numOfChannels: msg.channels, // 声频通道
-                        length: undefined, // 帧数
-                        sampleRate: msg.samplerate // 采样率
-                    });
-                    break;
-                default:
-                    _this._opt.isDebug && console.log(msg);
-                    _this[msg.cmd](msg)
-            }
-        };
-    };
-
-    Jessibuca.prototype._initEventListener = function () {
-        var _this = this;
-
-        this._doms.playDom && this._doms.playDom.addEventListener('click', function (e) {
-            e.stopPropagation();
-            _this.play();
-        }, false);
-
-        this._doms.playBigDom && this._doms.playBigDom.addEventListener('click', function (e) {
-            e.stopPropagation();
-            _this.play();
-        }, false);
-
-        this._doms.pauseDom && this._doms.pauseDom.addEventListener('click', function (e) {
-            e.stopPropagation();
-            _this.pause();
-        }, false);
-
-        // screenshots
-        this._doms.screenshotsDom && this._doms.screenshotsDom.addEventListener('click', function (e) {
-            e.stopPropagation();
-            var filename = _this._opt.text + '' + _now();
-            _this._screenshot(filename);
-        }, false);
-        //
-        this._doms.fullscreenDom && this._doms.fullscreenDom.addEventListener('click', function (e) {
-            e.stopPropagation();
-            _this.fullscreen = true;
-        }, false);
-        //
-        this._doms.minScreenDom && this._doms.minScreenDom.addEventListener('click', function (e) {
-            e.stopPropagation();
-            _this.fullscreen = false;
-        }, false);
-        //
-        this._doms.recordDom && this._doms.recordDom.addEventListener('click', function (e) {
-            e.stopPropagation();
-            _this.recording = true;
-        }, false);
-        //
-        this._doms.recordingDom && this._doms.recordingDom.addEventListener('click', function (e) {
-            e.stopPropagation();
-            _this.recording = false;
-        }, false);
-
-        this._doms.quietAudioDom && this._doms.quietAudioDom.addEventListener('click', function (e) {
-            e.stopPropagation();
-            _this.cancelMute();
-        }, false);
-
-        this._doms.playAudioDom && this._doms.playAudioDom.addEventListener('click', function (e) {
-            e.stopPropagation();
-            _this.mute();
-        }, false);
-    };
-    /**
-     * set debug
-     * @param flag
-     */
-    Jessibuca.prototype.setDebug = function (flag) {
-        this._opt.isDebug = !!flag;
-    };
-    /**
-     * mute
-     */
-    Jessibuca.prototype.mute = function () {
-        this._audioEnabled(false);
-        this.quieting = true;
-    };
-
-    /**
-     * cancel mute
-     */
-    Jessibuca.prototype.cancelMute = function () {
-        this._audioEnabled(true);
-        this.quieting = false;
-    };
-
-    /**
-     * 设置旋转角度
-     */
-    Jessibuca.prototype.setRotate = function (deg) {
-
-    };
-
-    Jessibuca.prototype._initStatus = function () {
-        this._loading = true;
-        this.loading = true;
-        this._recording = false;
-        this.recording = false;
-        this._playing = false;
-        this.playing = false;
-        this._quieting = this._opt.isNotMute ? false : true;
-        this.quieting = this._opt.isNotMute ? false : true;
-        this._fullscreen = false;
-        this.fullscreen = false;
-    }
-
-    Jessibuca.prototype._initBtns = function () {
-        // show
-        _domToggle(this._doms.pauseDom, true);
-        _domToggle(this._doms.screenshotsDom, true);
-        _domToggle(this._doms.fullscreenDom, true);
-        _domToggle(this._doms.quietAudioDom, true);
-        _domToggle(this._doms.textDom, true);
-        _domToggle(this._doms.speedDom, true);
-        _domToggle(this._doms.recordDom, true);
-        // hide
-        _domToggle(this._doms.loadingDom, false);
-        _domToggle(this._doms.playDom, false);
-        _domToggle(this._doms.playBigDom, false);
-        _domToggle(this._doms.bgDom, false);
-    };
-
-    Jessibuca.prototype._hideBtns = function () {
-        var _this = this;
-        Object.keys(this._doms).forEach(function (dom) {
-            if (dom !== 'bgDom') {
-                _domToggle(_this._doms[dom], false);
-            }
-        })
-    };
-
-    function _checkFull() {
-        var isFull = document.fullscreenElement || window.webkitFullscreenElement || document.msFullscreenElement;
-        if (isFull === undefined) isFull = false;
-        return !!isFull;
-    }
-
-    Jessibuca.prototype._updateStats = function (options) {
-        options = options || {};
-
-        if (!this._startBpsTime) {
-            this._startBpsTime = _now();
-        }
-        var _nowTime = _now();
-        var timestamp = _nowTime - this._startBpsTime;
-
-        if (timestamp < 1 * 1000) {
-            this._bps += (options.bps || 0);
-            this._stats.fps += 1;
-            this._stats.vbps += parseInt((options.bps || 0));
-            return;
-        }
-        this._stats.ts = options.ts;
-        this._doms.speedDom && (this._doms.speedDom.innerText = _bpsSize(this._bps));
-        this._trigger('bps', this._bps);
-        this._trigger('stats', this._stats);
-        this._trigger('performance', _fpsStatus(this._stats.fps));
-        this._bps = 0;
-        this._stats.fps = 0;
-        this._stats.vbps = 0;
-        this._startBpsTime = _nowTime;
-    };
-
-
-    Jessibuca.prototype._checkHeart = function () {
-        if (this._checkHeartTimeout) {
-            clearTimeout(this._checkHeartTimeout);
-            this._checkHeartTimeout = null;
-        }
-        var _this = this;
-        this._checkHeartTimeout = setTimeout(function () {
-            _this._opt.isDebug && console.log('check heart timeout');
-            _this._trigger('timeout');
-            _this.recording = false;
-            _this.playing = false;
-            _this._close();
-        }, this._opt.timeout * 1000);
-    };
-
-    Jessibuca.prototype._checkLoading = function () {
-        if (this._checkLoadingTimeout) {
-            clearTimeout(this._checkLoadingTimeout);
-            this._checkLoadingTimeout = null;
-        }
-        var _this = this;
-        this._checkLoadingTimeout = setTimeout(function () {
-            _this._opt.isDebug && console.log('check loading timeout');
-            _this._trigger('timeout');
-            _this.playing = false;
-            _this._close();
-            _domToggle(_this._doms.loadingDom, false);
-        }, this._opt.timeout * 1000);
-    };
-
-    Jessibuca.prototype._clearCheckLoading = function () {
-        if (this._checkLoadingTimeout) {
-            clearTimeout(this._checkLoadingTimeout);
-            this._checkLoadingTimeout = null;
-        }
-    };
-
-    Jessibuca.prototype._initCheckVariable = function () {
-        this._startBpsTime = '';
-        this._bps = 0;
-        if (this._checkHeartTimeout) {
-            clearTimeout(this._checkHeartTimeout);
-            this._checkHeartTimeout = null;
-        }
-    }
-    //
-    Jessibuca.prototype._initAudioPlanar = function (msg) {
-        var channels = msg.channels
-        var samplerate = msg.samplerate
-        var context = this._audioContext;
-        var isPlaying = false;
-        var audioBuffers = [];
-        if (!context) return false;
-        var _this = this
-        this._playAudio = function (buffer) {
-            var frameCount = buffer[0][0].length
-            var audioBuffer = context.createBuffer(channels, frameCount * buffer.length, samplerate);
-            var copyToCtxBuffer = function (fromBuffer) {
-                for (var channel = 0; channel < channels; channel++) {
-                    var nowBuffering = audioBuffer.getChannelData(channel);
-                    for (var j = 0; j < buffer.length; j++) {
-                        for (var i = 0; i < frameCount; i++) {
-                            nowBuffering[i + j * frameCount] = fromBuffer[j][channel][i]
-                        }
-                        //postMessage({ cmd: "setBufferA", buffer: fromBuffer[j] }, '*', fromBuffer[j].map(x => x.buffer))
-                    }
-                }
-            }
-            var playNextBuffer = function () {
-                isPlaying = false;
-                //console.log("~", audioBuffers.length)
-                if (audioBuffers.length) {
-                    playAudio(audioBuffers.shift());
-                }
-                //if (audioBuffers.length > 1) audioBuffers.shift();
-            };
-            var playAudio = function (fromBuffer) {
-                if (!fromBuffer) return
-                if (isPlaying) {
-                    audioBuffers.push(fromBuffer);
-                    //console.log(audioBuffers.length)
-                    return;
-                }
-                isPlaying = true;
-                copyToCtxBuffer(fromBuffer);
-                var source = context.createBufferSource();
-                source.buffer = audioBuffer;
-                source.connect(context.destination);
-                // source.onended = playNextBuffer;
-                source.start();
-            };
-            _this._playAudio = playAudio
-            _this.audioInterval = setInterval(playNextBuffer, audioBuffer.duration * 1000);
-            playAudio(buffer)
-        };
-    }
-
-    function _unlock(context) {
-        context.resume();
-        var source = context.createBufferSource();
-        source.buffer = context.createBuffer(1, 1, 22050);
-        source.connect(context.destination);
-        if (source.noteOn)
-            source.noteOn(0);
-        else
-            source.start(0);
-    }
-
-    function _domToggle(dom, toggle) {
-        if (dom) {
-            dom.style.display = toggle ? 'block' : "none";
-        }
-    }
-
-    function _dataURLToFile(dataURL) {
-        const arr = dataURL.split(",");
-        const bstr = atob(arr[1]);
-        const type = arr[0].replace("data:", "").replace(";base64", "")
-        let n = bstr.length, u8arr = new Uint8Array(n);
-        while (n--) {
-            u8arr[n] = bstr.charCodeAt(n);
-        }
-        return new File([u8arr], 'file', {type});
-    }
-
-    function _downloadImg(content, fileName) {
-        const aLink = document.createElement("a");
-        aLink.download = fileName;
-        aLink.href = URL.createObjectURL(content);
-        aLink.click();
-        URL.revokeObjectURL(content);
-    }
-
-    function _bpsSize(value) {
-        if (null == value || value === '') {
-            return "0 KB/S";
-        }
-        var srcsize = parseFloat(value);
-        var size = srcsize / 1024;
-        size = size.toFixed(2);
-        return size + 'KB/S';
-    }
-
-    function _fpsStatus(fps) {
-        var result = 0;
-        if (fps >= 24) {
-            result = 2;
-        } else if (fps >= 15) {
-            result = 1;
-        }
-
-        return result;
-    }
-
-    /**
-     * set audio
-     * @param flag
-     */
-    Jessibuca.prototype._audioEnabled = function (flag) {
-        if (flag) {
-            _unlock(this._audioContext)
-            this._audioEnabled = function (flag) {
-                if (flag) {
-                    // 恢复
-                    this._audioContext.resume();
-
-                } else {
-                    // 暂停
-                    this._audioContext.suspend();
-                }
-            }
-        } else {
-            this._audioContext.suspend();
-        }
-    }
-
-    Jessibuca.prototype._playAudio = function (data) {
-        var context = this._audioContext;
-        var isPlaying = false;
-        var isDecoding = false;
-        if (!context) return false;
-        var audioBuffers = [];
-        var decodeQueue = []
-        var _this = this
-        var playNextBuffer = function (e) {
-            if (audioBuffers.length) {
-                playBuffer(audioBuffers.shift())
-            }
-        };
-        var playBuffer = function (buffer) {
-            isPlaying = true;
-            var audioBufferSouceNode = context.createBufferSource();
-            audioBufferSouceNode.buffer = buffer;
-            audioBufferSouceNode.connect(context.destination);
-            // audioBufferSouceNode.onended = playNextBuffer;
-            audioBufferSouceNode.start();
-            if (!_this.audioInterval) {
-                _this.audioInterval = setInterval(playNextBuffer, buffer.duration * 1000 - 1);
-            }
-        }
-        var decodeAudio = function () {
-            if (decodeQueue.length) {
-                context.decodeAudioData(decodeQueue.shift(), tryPlay, decodeAudio);
-            } else {
-                isDecoding = false
-            }
-        }
-        var tryPlay = function (buffer) {
-            decodeAudio()
-            if (isPlaying) {
-                audioBuffers.push(buffer);
-            } else {
-                playBuffer(buffer)
-            }
-        }
-        var playAudio = function (data) {
-            decodeQueue.push(...data)
-            if (!isDecoding) {
-                isDecoding = true
-                decodeAudio()
-            }
-        }
-        this._playAudio = playAudio
-        playAudio(data)
-    }
-    Jessibuca.prototype._initAudioPlay = function (frameCount, samplerate, channels) {
-        var context = this._audioContext;
-        var isPlaying = false;
-        var audioBuffers = [];
-        if (!context) return false;
-        var _this = this
-        var resampled = samplerate < 22050;
-        if (resampled) {
-            _this._opt.isDebug && console.log("resampled!")
-        }
-        var audioBuffer = resampled ? context.createBuffer(channels, frameCount << 1, samplerate << 1) : context.createBuffer(channels, frameCount, samplerate);
-        var playNextBuffer = function () {
-            isPlaying = false;
-            //console.log("~", audioBuffers.length)
-            if (audioBuffers.length) {
-                playAudio(audioBuffers.shift());
-            }
-        };
-
-        var copyToCtxBuffer = channels > 1 ? function (fromBuffer) {
-            for (var channel = 0; channel < channels; channel++) {
-                var nowBuffering = audioBuffer.getChannelData(channel);
-                if (resampled) {
-                    for (var i = 0; i < frameCount; i++) {
-                        nowBuffering[i * 2] = nowBuffering[i * 2 + 1] = fromBuffer[i * (channel + 1)] / 32768;
-                    }
-                } else
-                    for (var i = 0; i < frameCount; i++) {
-                        nowBuffering[i] = fromBuffer[i * (channel + 1)] / 32768;
-                    }
-
-            }
-        } : function (fromBuffer) {
-            var nowBuffering = audioBuffer.getChannelData(0);
-            for (var i = 0; i < nowBuffering.length; i++) {
-                nowBuffering[i] = fromBuffer[i] / 32768;
-            }
-        };
-        var playAudio = function (fromBuffer) {
-            if (isPlaying) {
-                audioBuffers.push(fromBuffer);
-                return;
-            }
-            isPlaying = true;
-            copyToCtxBuffer(fromBuffer);
-            var source = context.createBufferSource();
-            source.buffer = audioBuffer;
-            source.connect(context.destination);
-            if (!_this.audioInterval) {
-                _this.audioInterval = setInterval(playNextBuffer, audioBuffer.duration * 1000);
-            }
-            source.start();
-        };
-        this._playAudio = playAudio;
-    }
-    /**
-     * Returns true if the canvas supports WebGL
-     */
-    Jessibuca.prototype.isWebGL = function () {
-        return !!this._contextGL;
-    };
-    /**
-     * set timeout
-     * @param time
-     */
-    Jessibuca.prototype.setTimeout = function (time) {
-        if (typeof time === 'number') {
-            this._opt.timeout = Number(time);
-        }
-    };
-
-    /**
-     * @desc 视频缩放模式, 当视频分辨率比例与canvas显示区域比例不同时,缩放效果不同:
-     0 视频画面完全填充canvas区域,画面会被拉伸
-     1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边(默认)
-     2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全
-     * @param type
-     *
-     */
-    Jessibuca.prototype.setScaleMode = function (type) {
-        if (type === 0) {
-            this._opt.isFullResize = false;
-            this._opt.isResize = false;
-        } else if (type === 1) {
-            this._opt.isFullResize = false;
-            this._opt.isResize = true;
-        } else if (type === 2) {
-            this._opt.isFullResize = true;
-        }
-        this.resize();
-    };
-
-    /**
-     * Create the GL context from the canvas element
-     */
-    Jessibuca.prototype._initContextGL = function () {
-        var canvas = this._canvasElement;
-        var gl = null;
-
-        var validContextNames = ["webgl", "experimental-webgl", "moz-webgl", "webkit-3d"];
-        var nameIndex = 0;
-
-        while (!gl && nameIndex < validContextNames.length) {
-            var contextName = validContextNames[nameIndex];
-
-            try {
-                var contextOptions = {preserveDrawingBuffer: true};
-                if (this._opt.contextOptions) {
-                    contextOptions = Object.assign(contextOptions, this._opt.contextOptions);
-                }
-
-                gl = canvas.getContext(contextName, contextOptions);
-            } catch (e) {
-                gl = null;
-            }
-
-            if (!gl || typeof gl.getParameter !== "function") {
-                gl = null;
-            }
-
-            ++nameIndex;
-        }
-        ;
-
-        this._contextGL = gl;
-    };
-
-    /**
-     * Initialize GL shader program
-     */
-    Jessibuca.prototype._initProgram = function () {
-        var gl = this._contextGL;
-
-        var vertexShaderScript = [
-            'attribute vec4 vertexPos;',
-            'attribute vec4 texturePos;',
-            'varying vec2 textureCoord;',
-
-            'void main()',
-            '{',
-            'gl_Position = vertexPos;',
-            'textureCoord = texturePos.xy;',
-            '}'
-        ].join('\n');
-
-        var fragmentShaderScript = [
-            'precision highp float;',
-            'varying highp vec2 textureCoord;',
-            'uniform sampler2D ySampler;',
-            'uniform sampler2D uSampler;',
-            'uniform sampler2D vSampler;',
-            'const mat4 YUV2RGB = mat4',
-            '(',
-            '1.1643828125, 0, 1.59602734375, -.87078515625,',
-            '1.1643828125, -.39176171875, -.81296875, .52959375,',
-            '1.1643828125, 2.017234375, 0, -1.081390625,',
-            '0, 0, 0, 1',
-            ');',
-
-            'void main(void) {',
-            'highp float y = texture2D(ySampler,  textureCoord).r;',
-            'highp float u = texture2D(uSampler,  textureCoord).r;',
-            'highp float v = texture2D(vSampler,  textureCoord).r;',
-            'gl_FragColor = vec4(y, u, v, 1) * YUV2RGB;',
-            '}'
-        ].join('\n');
-
-        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
-        gl.shaderSource(vertexShader, vertexShaderScript);
-        gl.compileShader(vertexShader);
-        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
-            this._opt.isDebug && console.log('Vertex shader failed to compile: ' + gl.getShaderInfoLog(vertexShader));
-        }
-
-        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(fragmentShader, fragmentShaderScript);
-        gl.compileShader(fragmentShader);
-        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
-            this._opt.isDebug && console.log('Fragment shader failed to compile: ' + gl.getShaderInfoLog(fragmentShader));
-        }
-
-        var program = gl.createProgram();
-        gl.attachShader(program, vertexShader);
-        gl.attachShader(program, fragmentShader);
-        gl.linkProgram(program);
-        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-            this._opt.isDebug && console.log('Program failed to compile: ' + gl.getProgramInfoLog(program));
-        }
-
-        gl.useProgram(program);
-
-        this._shaderProgram = program;
-    };
-
-    /**
-     * Initialize vertex buffers and attach to shader program
-     */
-    Jessibuca.prototype._initBuffers = function () {
-        var gl = this._contextGL;
-        var program = this._shaderProgram;
-
-        var vertexPosBuffer = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]), gl.STATIC_DRAW);
-
-        var vertexPosRef = gl.getAttribLocation(program, 'vertexPos');
-        gl.enableVertexAttribArray(vertexPosRef);
-        gl.vertexAttribPointer(vertexPosRef, 2, gl.FLOAT, false, 0, 0);
-
-        var texturePosBuffer = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]), gl.STATIC_DRAW);
-
-        var texturePosRef = gl.getAttribLocation(program, 'texturePos');
-        gl.enableVertexAttribArray(texturePosRef);
-        gl.vertexAttribPointer(texturePosRef, 2, gl.FLOAT, false, 0, 0);
-
-        this._texturePosBuffer = texturePosBuffer;
-    };
-
-    /**
-     * Initialize GL textures and attach to shader program
-     */
-    Jessibuca.prototype._initTextures = function () {
-        var gl = this._contextGL;
-        var program = this._shaderProgram;
-
-        var yTextureRef = this._initTexture();
-        var ySamplerRef = gl.getUniformLocation(program, 'ySampler');
-        gl.uniform1i(ySamplerRef, 0);
-        this._yTextureRef = yTextureRef;
-
-        var uTextureRef = this._initTexture();
-        var uSamplerRef = gl.getUniformLocation(program, 'uSampler');
-        gl.uniform1i(uSamplerRef, 1);
-        this._uTextureRef = uTextureRef;
-
-        var vTextureRef = this._initTexture();
-        var vSamplerRef = gl.getUniformLocation(program, 'vSampler');
-        gl.uniform1i(vSamplerRef, 2);
-        this._vTextureRef = vTextureRef;
-    };
-
-    /**
-     * Create and configure a single texture
-     */
-    Jessibuca.prototype._initTexture = function () {
-        var gl = this._contextGL;
-
-        var textureRef = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, textureRef);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-
-        return textureRef;
-    };
-
-    /**
-     * Draw picture data to the canvas.
-     * If this object is using WebGL, the data must be an I420 formatted ArrayBuffer,
-     * Otherwise, data must be an RGBA formatted ArrayBuffer.
-     */
-    Jessibuca.prototype._drawNextOutputPicture = function (data) {
-        if (this._contextGL) {
-            this._drawNextOutputPictureGL(data);
-        } else {
-            this._drawNextOutputPictureRGBA(data);
-        }
-    };
-
-    /**
-     * Draw the next output picture using WebGL
-     */
-    Jessibuca.prototype._drawNextOutputPictureGL = function (data) {
-        var gl = this._contextGL;
-        var texturePosBuffer = this._texturePosBuffer;
-        var yTextureRef = this._yTextureRef;
-        var uTextureRef = this._uTextureRef;
-        var vTextureRef = this._vTextureRef;
-        var croppingParams = this.croppingParams
-        var width = this._canvasElement.width
-        var height = this._canvasElement.height
-        if (croppingParams) {
-            gl.viewport(0, 0, croppingParams.width, croppingParams.height);
-            var tTop = croppingParams.top / height;
-            var tLeft = croppingParams.left / width;
-            var tBottom = croppingParams.height / height;
-            var tRight = croppingParams.width / width;
-            var texturePosValues = new Float32Array([tRight, tTop, tLeft, tTop, tRight, tBottom, tLeft, tBottom]);
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
-            gl.bufferData(gl.ARRAY_BUFFER, texturePosValues, gl.DYNAMIC_DRAW);
-        } else {
-            gl.viewport(0, 0, this._canvasElement.width, this._canvasElement.height);
-        }
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, yTextureRef);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width, height, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, data[0]);
-
-        gl.activeTexture(gl.TEXTURE1);
-        gl.bindTexture(gl.TEXTURE_2D, uTextureRef);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width / 2, height / 2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, data[1]);
-
-        gl.activeTexture(gl.TEXTURE2);
-        gl.bindTexture(gl.TEXTURE_2D, vTextureRef);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width / 2, height / 2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, data[2]);
-
-        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-    };
-
-    /**
-     * Draw next output picture using ARGB data on a 2d canvas.
-     */
-    Jessibuca.prototype._drawNextOutputPictureRGBA = function (data) {
-        this.imageData.data.set(data);
-        var croppingParams = this.croppingParams
-        if (!croppingParams) {
-            this.ctx2d.putImageData(this.imageData, 0, 0);
-        } else {
-            this.ctx2d.putImageData(this.imageData, -croppingParams.left, -croppingParams.top, 0, 0, croppingParams.width, croppingParams.height);
-        }
-    };
-    Jessibuca.prototype.ctx2d = null;
-    Jessibuca.prototype.imageData = null;
-    Jessibuca.prototype._initRGB = function (width, height) {
-        this.ctx2d = this._canvasElement.getContext('2d');
-        this.imageData = this.ctx2d.getImageData(0, 0, width, height);
-        this.clear = function () {
-            this.ctx2d.clearRect(0, 0, width, height)
-        };
-    };
-
-    Jessibuca.prototype.pause = function () {
-        this._close();
-        if (this.loading) {
-            _domToggle(this._doms.loadingDom, false);
-        }
-        this.recording = false;
-        this.playing = false;
-    };
-
-    Jessibuca.prototype._close = function () {
-        if (this.audioInterval) {
-            clearInterval(this.audioInterval)
-        }
-        delete this._playAudio
-        this._decoderWorker.postMessage({cmd: "close"})
-
-        if (this._wakeLock) {
-            this._wakeLock.release();
-            this._wakeLock = null;
-        }
-
-        // this._contextGL.clear(this._contextGL.COLOR_BUFFER_BIT);
-        this._initCheckVariable();
-    }
-    /**
-     * destroy
-     * @desc delete worker,
-     */
-    Jessibuca.prototype.destroy = function () {
-        // destroy
-        this._decoderWorker.terminate()
-        window.removeEventListener("resize", this._onresize);
-        window.removeEventListener('fullscreenchange', this._onfullscreenchange);
-        this._initCheckVariable();
-        this._clearCheckLoading();
-        this._off();
-        this._hasLoaded = false;
-        // remove dom
-        while (this._container.firstChild) {
-            this._container.removeChild(this._container.firstChild);
-        }
-        if (this._wakeLock) {
-            this._wakeLock.release();
-        }
-    }
-
-    /**
-     * 清理画布为黑色背景
-     * 用于canvas重用进行多个流切换播放时，将上一个画面清理
-     * 避免后一个视频播放之前出现前一个视频最后一个画面
-     */
-    Jessibuca.prototype.clearView = function () {
-        this._contextGL.clear(this._contextGL.COLOR_BUFFER_BIT);
-    };
-    /**
-     * play
-     * @param url
-     */
-    Jessibuca.prototype.play = function (url) {
-        if (!this.playUrl && !url) {
-            return;
-        }
-        var needDelay = false;
-        if (url) {
-            if (this.playUrl) {
-                this._close();
-                needDelay = true;
-                this._contextGL.clear(this._contextGL.COLOR_BUFFER_BIT);
-            }
-            this.loading = true;
-            _domToggle(this._doms.bgDom, false);
-            this._checkLoading();
-            this.playUrl = url;
-        } else if (this.playUrl) {
-            // retry
-            if (this.loading) {
-                this._hideBtns();
-                _domToggle(this._doms.fullscreenDom, true);
-                _domToggle(this._doms.pauseDom, true);
-                _domToggle(this._doms.loadingDom, true);
-                this._checkLoading();
-            } else {
-                this.playing = true;
-            }
-        }
-        this._initCheckVariable();
-
-        if (needDelay) {
-            var _this = this;
-            setTimeout(function () {
-                _this._decoderWorker.postMessage({cmd: "play", url: _this.playUrl, isWebGL: _this.isWebGL()})
-            }, 300);
-        } else {
-            this._decoderWorker.postMessage({cmd: "play", url: this.playUrl, isWebGL: this.isWebGL()})
-        }
-    };
-    /**
-     * has loaded
-     * @returns {boolean}
-     */
-    Jessibuca.prototype.hasLoaded = function () {
-        return this._hasLoaded;
-    };
-
-    Object.defineProperty(Jessibuca.prototype, "fullscreen", {
-        set(value) {
-            if (value) {
-                if (!_checkFull()) {
-                    this._container.requestFullscreen();
-                }
-                _domToggle(this._doms.minScreenDom, true);
-                _domToggle(this._doms.fullscreenDom, false);
-            } else {
-                if (_checkFull()) {
-                    document.exitFullscreen();
-                }
-                _domToggle(this._doms.minScreenDom, false);
-                _domToggle(this._doms.fullscreenDom, true);
-            }
-
-            if (this._fullscreen !== value) {
-                this.onFullscreen(value);
-                this._trigger('fullscreen', value);
-            }
-            this._fullscreen = value;
-        },
-        get() {
-            return this._fullscreen;
-        }
-    });
-
-    Object.defineProperty(Jessibuca.prototype, 'playing', {
-        set(value) {
-            if (value) {
-                _domToggle(this._doms.playBigDom, false);
-                _domToggle(this._doms.playDom, false);
-                _domToggle(this._doms.pauseDom, true);
-
-                _domToggle(this._doms.screenshotsDom, true);
-                _domToggle(this._doms.recordDom, true);
-                if (this._quieting) {
-                    _domToggle(this._doms.quietAudioDom, true);
-                    _domToggle(this._doms.playAudioDom, false);
-                } else {
-                    _domToggle(this._doms.quietAudioDom, false);
-                    _domToggle(this._doms.playAudioDom, true);
-                }
-            } else {
-                this._doms.speedDom && (this._doms.speedDom.innerText = '');
-                if (this.playUrl) {
-                    _domToggle(this._doms.playDom, true);
-                    _domToggle(this._doms.playBigDom, true);
-                    _domToggle(this._doms.pauseDom, false);
-                }
-
-                // 在停止状态下录像，截屏，音量是非激活，只有播放,最大化时可点击
-                _domToggle(this._doms.recordDom, false);
-                _domToggle(this._doms.recordingDom, false);
-                _domToggle(this._doms.screenshotsDom, false);
-                _domToggle(this._doms.quietAudioDom, false);
-                _domToggle(this._doms.playAudioDom, false);
-            }
-
-            if (this._playing !== value) {
-                if (value) {
-                    this.onPlay();
-                    this._trigger('play');
-                } else {
-                    this.onPause();
-                    this._trigger('pause');
-                }
-            }
-            this._playing = value;
-        },
-        get() {
-            return this._playing;
-        }
-    });
-
-    Object.defineProperty(Jessibuca.prototype, 'recording', {
-        set(value) {
-            if (value) {
-                _domToggle(this._doms.recordDom, false);
-                _domToggle(this._doms.recordingDom, true);
-            } else {
-                _domToggle(this._doms.recordDom, true);
-                _domToggle(this._doms.recordingDom, false);
-
-            }
-            if (this._recording !== value) {
-                this.onRecord(value);
-                this._trigger('record', value);
-                this._recording = value;
-            }
-        },
-        get() {
-            return this._recording;
-        }
-    });
-
-    Object.defineProperty(Jessibuca.prototype, 'quieting', {
-        set(value) {
-            if (value) {
-                _domToggle(this._doms.quietAudioDom, true);
-                _domToggle(this._doms.playAudioDom, false);
-            } else {
-                _domToggle(this._doms.quietAudioDom, false);
-                _domToggle(this._doms.playAudioDom, true);
-            }
-            if (this._quieting !== value) {
-                this.onMute(value);
-                this._trigger('mute', value);
-            }
-            this._quieting = value;
-        },
-        get() {
-            return this._quieting;
-        }
-    });
-
-    Object.defineProperty(Jessibuca.prototype, 'loading', {
-        set(value) {
-            if (value) {
-                this._hideBtns();
-                _domToggle(this._doms.fullscreenDom, true);
-                _domToggle(this._doms.pauseDom, true);
-                _domToggle(this._doms.loadingDom, true);
-            } else {
-                this._initBtns();
-            }
-            this._loading = value;
-        },
-        get() {
-            return this._loading;
-        }
-    });
-
-    /**
-     * resize
-     */
-    Jessibuca.prototype.resize = function () {
-        var width = this._container.clientWidth;
-        var height = this._container.clientHeight;
-        if (this._showControl()) {
-            height -= 38;
-        }
-        var resizeWidth = this._canvasElement.width;
-        var resizeHeight = this._canvasElement.height;
-        var wScale = width / resizeWidth;
-        var hScale = height / resizeHeight;
-        var scale = wScale > hScale ? hScale : wScale;
-        if (!this._opt.isResize) {
-            if (wScale !== hScale) {
-                scale = wScale + ',' + hScale;
-            }
-        }
-        //
-        if (this._opt.isFullResize) {
-            scale = wScale > hScale ? wScale : hScale;
-        }
-
-        this._opt.isDebug && console.log('wScale', wScale, 'hScale', hScale, 'scale', scale);
-        this._canvasElement.style.transform = "scale(" + scale + ")"
-        this._canvasElement.style.left = ((width - resizeWidth) / 2) + "px"
-        this._canvasElement.style.top = ((height - resizeHeight) / 2) + "px"
-    }
-
-    Jessibuca.prototype._fullscreenchange = function () {
-        this.fullscreen = _checkFull();
-    }
-
-    /**
-     * change buffer
-     * @param buffer
-     */
-    Jessibuca.prototype.changeBuffer = function (buffer) {
-        this._stats.buf = Number(buffer) * 1000;
-        this._decoderWorker.postMessage({cmd: "setVideoBuffer", time: Number(buffer)});
-    };
-    /**
-     * 设置最大缓冲时长，单位秒，播放器会自动消除延迟。
-     * @param buffer
-     */
-    Jessibuca.prototype.setBufferTime = function (buffer) {
-        this.changeBuffer(buffer);
-    };
-
-    /**
-     * 设置音量大小，取值0.0 — 1.0
-     * 当为0.0时，完全无声
-     * 当为1.0时，最大音量，默认值
-     * @param volume
-     */
-    Jessibuca.prototype.setVolume = function (volume) {
-        if (this._gainNode) {
-            this._gainNode.gain.setValueAtTime(volume, this._audioContext.currentTime);
-        }
-    };
-
-    /**
-     * 开启屏幕常亮, 在play前调用
-     * 在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
-     * H5目前在chrome\edge 84, android chrome 84及以上有原生亮屏API, 需要是https页面
-     * 其余平台为模拟实现，此时为兼容实现，并不保证所有浏览器都支持
-     */
-    Jessibuca.prototype.setKeepScreenOn = function () {
-        this._opt.keepScreenOn = true;
-    };
-
-
-    /**
-     * set fullscreen
-     * @param flag
-     */
-    Jessibuca.prototype.setFullscreen = function (flag) {
-        var fullscreen = !!flag;
-        if (this.fullscreen !== fullscreen) {
-            this.fullscreen = fullscreen;
-        }
-    };
-
-    function _now() {
-        return new Date().getTime();
-    }
-
-    Jessibuca.prototype._screenshot = function (filename, format, quality) {
-        filename = filename || _now();
-        var formatType = {
-            png: 'image/png',
-            jpeg: 'image/jpeg',
-            webp: 'image/webp'
-        };
-        var encoderOptions = 0.92;
-
-        if (typeof quality !== 'undefined') {
-            encoderOptions = Number(quality);
-        }
-
-        var dataURL = this._canvasElement.toDataURL(formatType[format] || formatType.png, encoderOptions);
-        _downloadImg(_dataURLToFile(dataURL), filename);
-    }
-
-    /**
-     * 截图，调用后弹出下载框保存截图
-     * @param filename  保存的文件名 默认时间戳
-     * @param format 截图的格式，可选png或jpeg或者webp
-     * @param quality 可选参数，当格式是jpeg或者webp时，压缩质量，取值0.0 ~ 1.0
-     */
-    Jessibuca.prototype.screenshot = function (filename, format, quality) {
-        this._screenshot(filename, format, quality);
-    };
-
-
-    var eventSplitter = /\s+/;
-
-    // Execute callbacks
-    function _callEach(list, args, context) {
-        if (list) {
-            for (var i = 0, len = list.length; i < len; i += 1) {
-                list[i].apply(context, args);
-            }
-        }
-    }
-
-    /**
-     *
-     * @param events
-     * @param callback
-     * @returns {Jessibuca}
-     */
-    Jessibuca.prototype.on = function (events, callback) {
-        var cache, event, list;
-        if (!callback) return this;
-        cache = this.__events || (this.__events = {});
-        events = events.split(eventSplitter);
-        while (event = events.shift()) {
-            list = cache[event] || (cache[event] = []);
-            list.push(callback);
-        }
-        return this;
-    };
-    /**
-     *
-     * @param events
-     * @param callback
-     * @returns {Jessibuca}
-     * @private
-     */
-    Jessibuca.prototype._off = function () {
-        var cache;
-        if (!(cache = this.__events)) return this;
-        delete this.__events;
-        return this;
-    };
-
-    /**
-     *
-     * @param events
-     * @returns {Jessibuca}
-     * @private
-     */
-    Jessibuca.prototype._trigger = function (events) {
-        var cache, event, all, list, i, len, rest = [], args;
-        if (!(cache = this.__events)) return this;
-        events = events.split(eventSplitter);
-        // Fill up `rest` with the callback arguments.  Since we're only copying
-        // the tail of `arguments`, a loop is much faster than Array#slice.
-        for (i = 1, len = arguments.length; i < len; i++) {
-            rest[i - 1] = arguments[i];
-        }
-        // For each event, walk through the list of callbacks twice, first to
-        // trigger the event, then to trigger any `"all"` callbacks.
-        while (event = events.shift()) {
-            if (list = cache[event]) list = list.slice();
-            // Execute event callbacks.
-            _callEach(list, rest, this);
-        }
-        return this;
-    }
-
-    if (typeof define === 'function') {
-        define(function () {
-            return Jessibuca;
-        });
-    } else if (typeof exports !== 'undefined') {
-        module.exports = Jessibuca;
-    } else {
-        window.Jessibuca = Jessibuca;
-    }
-})();
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询合同列表
+export function queryContract(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContract',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 保存合同创建费用
+export function saveContractCreateFee(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.saveContractCreateFee',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取费用配置列表
+export function listFeeConfigs(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeConfig.listFeeConfigs',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取字典数据
+export function getDict(dictType, dictName) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dict/getDict',
+      method: 'get',
+      params: {
+        dictType,
+        dictName,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询抄表记录列表
+export function listMeterWaters(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/meterWater.listMeterWaters',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data,
+        total: res.total,
+        records: res.records
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询抄表类型列表
+export function listMeterTypes(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/meterType.listMeterType',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data,
+        total: res.total
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询楼栋列表
+export function queryFloors(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/floor.queryFloors',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.apiFloorDataVoList,
+        total: res.total
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询单元列表
+export function queryUnits(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/unit.queryUnits',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询房屋列表
+export function queryRooms(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/room.queryRooms',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询房屋树形列表
+export function queryRoomsTree(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/room.queryRoomsTree',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询上期抄表记录
+export function queryPreMeterWater(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/meterWater/queryPreMeterWater',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加抄表记录
+export function saveMeterWater(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/meterWater.saveMeterWater',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 修改抄表记录
+export function updateMeterWater(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/meterWater.updateMeterWater',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除抄表记录
+export function deleteMeterWater(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/meterWater.deleteMeterWater',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询收费项目列表
+export function listFeeConfigs(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/feeConfig.listFeeConfigs',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.feeConfigs,
+        total: res.total
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导入抄表数据
+export function importMeterWaterData(data) {
+  return new Promise((resolve, reject) => {
+    data.append('communityId', getCommunityId())
+    request({
+      url: '/assetImport/importData',
+      method: 'post',
+      data,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出抄表模板
+export function exportMeterWaterTemplate(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+<template>
+  <el-card class="tree-card">
+    <el-tree
+      ref="tree"
+      :data="treeData"
+      :props="defaultProps"
+      node-key="id"
+      :default-expanded-keys="expandedKeys"
+      :highlight-current="true"
+      @node-click="handleNodeClick"
+    >
+      <template #default="{ node, data }">
+        <span class="custom-tree-node">
+          <img :src="data.icon" class="tree-icon" v-if="data.icon">
+          <span>{{ node.label }}</span>
+        </span>
+      </template>
+    </el-tree>
+    <div v-if="!treeData || treeData.length === 0" class="no-data">
+      {{ $t('floorUnitTree.noBuilding') }}
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { queryFloorAndUnits } from '@/api/car/carStructureApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FloorUnitTree',
+  props: {
+    floorId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'text'
+      },
+      expandedKeys: [],
+      communityId: ''
+    }
+  },
+  watch: {
+    floorId(newVal) {
+      this.$nextTick(() => {
+        if (newVal) {
+          const node = this.$refs.tree.getNode('f_' + newVal)
+          if (node) {
+            this.$refs.tree.setCurrentKey(node.key)
+          }
+        }
+      })
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.loadFloorAndUnits()
+  },
+  methods: {
+    async loadFloorAndUnits() {
+      try {
+        const params = {
+          communityId: this.communityId
+        }
+        const data = await queryFloorAndUnits(params)
+        this.treeData = this.formatTreeData(data)
+        this.setDefaultExpanded()
+      } catch (error) {
+        this.$message.error(this.$t('floorUnitTree.fetchError'))
+      }
+    },
+    formatTreeData(data) {
+      const formattedData = []
+      const floorMap = {}
+
+      // First pass: create floor nodes
+      data.forEach(item => {
+        if (!floorMap[item.floorId]) {
+          floorMap[item.floorId] = {
+            id: 'f_' + item.floorId,
+            floorId: item.floorId,
+            floorNum: item.floorNum,
+            icon: require('@/assets/img/floor.png'),
+            text: `${item.floorNum}${this.$t('floorUnitTree.building')}(${item.floorName})`,
+            children: []
+          }
+          formattedData.push(floorMap[item.floorId])
+        }
+
+        // Add unit if it exists and not '0'
+        if (item.unitId && item.unitNum !== '0') {
+          floorMap[item.floorId].children.push({
+            id: 'u_' + item.unitId,
+            unitId: item.unitId,
+            text: `${item.unitNum}${this.$t('floorUnitTree.unit')}`,
+            icon: require('@/assets/img/unit.png')
+          })
+        }
+      })
+
+      return formattedData
+    },
+    setDefaultExpanded() {
+      if (this.treeData.length > 0) {
+        this.expandedKeys = [this.treeData[0].id]
+      }
+    },
+    handleNodeClick(data) {
+      if (data.id.startsWith('f_')) {
+        this.$emit('switchFloor', { floorId: data.floorId })
+      } else if (data.id.startsWith('u_')) {
+        this.$emit('switchUnit', { unitId: data.unitId })
+      }
+    },
+    refreshTree(params) {
+      if (params && params.floorId) {
+        this.floorId = params.floorId
+      }
+      this.loadFloorAndUnits()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-card {
+  height: 100%;
+
+  .custom-tree-node {
+    display: flex;
+    align-items: center;
+  }
+
+  .tree-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+  }
+
+  .no-data {
+    padding: 10px;
+    text-align: center;
+    color: #909399;
+  }
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog :title="$t('meterWater.addMeterReading')" :visible.sync="dialogVisible" width="50%" @close="handleClose">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
+      <el-form-item :label="$t('meterWater.feeType')" prop="feeTypeCd">
+        <el-select v-model="form.feeTypeCd" :placeholder="$t('meterWater.selectFeeType')" style="width: 100%"
+          @change="handleFeeTypeChange">
+          <el-option v-for="item in feeTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.feeItem')" prop="configId">
+        <el-select v-model="form.configId" :placeholder="$t('meterWater.selectFeeItem')" style="width: 100%"
+          @change="handleConfigChange">
+          <el-option v-for="item in feeConfigs" :key="item.configId" :label="item.feeName" :value="item.configId" />
+        </el-select>
+        <div class="form-tip">
+          {{ $t('meterWater.feeItemTip') }}
+        </div>
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.meterType')" prop="meterType">
+        <el-select v-model="form.meterType" :placeholder="$t('meterWater.selectMeterType')" style="width: 100%"
+          @change="handleMeterTypeChange">
+          <el-option v-for="item in meterTypes" :key="item.typeId" :label="item.typeName" :value="item.typeId" />
+        </el-select>
+      </el-form-item>
+
+      <template v-if="!form.hasRoom">
+        <el-form-item :label="$t('meterWater.building')">
+          <floor-select2 ref="floorSelect" @change="handleFloorChange" />
+        </el-form-item>
+
+        <el-form-item :label="$t('meterWater.unit')">
+          <unit-select2 ref="unitSelect" @change="handleUnitChange" />
+        </el-form-item>
+
+        <el-form-item :label="$t('meterWater.room')">
+          <room-select2 ref="roomSelect" @change="handleRoomChange" />
+        </el-form-item>
+      </template>
+
+      <el-form-item v-else :label="$t('meterWater.feeObject')">
+        <el-input v-model="form.ownerName" :placeholder="$t('meterWater.inputRoom')" disabled />
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.preDegrees')" prop="preDegrees">
+        <el-input v-model="form.preDegrees" :placeholder="$t('meterWater.inputPreDegrees')" />
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.curDegrees')" prop="curDegrees">
+        <el-input v-model="form.curDegrees" :placeholder="$t('meterWater.inputCurDegrees')"
+          @change="handleDegreesChange" />
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.preReadingTime')" prop="preReadingTime">
+        <el-date-picker v-model="form.preReadingTime" type="datetime"
+          :placeholder="$t('meterWater.selectPreReadingTime')" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.curReadingTime')" prop="curReadingTime">
+        <el-date-picker v-model="form.curReadingTime" type="datetime"
+          :placeholder="$t('meterWater.selectCurReadingTime')" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
+      </el-form-item>
+
+      <el-form-item v-if="form.computingFormula === '9009'" :label="$t('meterWater.price')" prop="price">
+        <el-input v-model="form.price" :placeholder="$t('meterWater.inputPrice')" />
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.remark')" prop="remark">
+        <el-input v-model="form.remark" type="textarea" :placeholder="$t('meterWater.inputRemark')" :rows="2" />
+      </el-form-item>
+
+      <el-form-item>
+        <div class="form-tip">
+          {{ $t('meterWater.unitTip') }}
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.save') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { saveMeterWater, queryPreMeterWater } from '@/api/fee/meterWaterManageApi'
+import { listFeeConfigs, listMeterTypes } from '@/api/fee/meterWaterManageApi'
+import { getDict } from '@/api/community/communityApi'
+import FloorSelect2 from '@/components/fee/floorSelect2'
+import UnitSelect2 from '@/components/fee/unitSelect2'
+import RoomSelect2 from '@/components/fee/roomSelect2'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddMeterWater',
+  components: {
+    FloorSelect2,
+    UnitSelect2,
+    RoomSelect2
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        waterId: '',
+        meterType: '',
+        preDegrees: '',
+        curDegrees: '',
+        preReadingTime: '',
+        curReadingTime: '',
+        remark: '',
+        roomId: '',
+        objId: '',
+        objName: '',
+        feeTypeCd: '',
+        feeConfigs: [],
+        configId: '',
+        objType: '3333',
+        hasRoom: false,
+        ownerName: '',
+        meterTypes: [],
+        computingFormula: '',
+        price: 0,
+        communityId: ''
+      },
+      rules: {
+        feeTypeCd: [
+          { required: true, message: this.$t('meterWater.feeTypeRequired'), trigger: 'blur' }
+        ],
+        configId: [
+          { required: true, message: this.$t('meterWater.feeItemRequired'), trigger: 'blur' }
+        ],
+        meterType: [
+          { required: true, message: this.$t('meterWater.meterTypeRequired'), trigger: 'blur' }
+        ],
+        preDegrees: [
+          { required: true, message: this.$t('meterWater.preDegreesRequired'), trigger: 'blur' },
+          { pattern: /^\d+(\.\d{1,2})?$/, message: this.$t('meterWater.degreesFormatError') }
+        ],
+        curDegrees: [
+          { required: true, message: this.$t('meterWater.curDegreesRequired'), trigger: 'blur' },
+          { pattern: /^\d+(\.\d{1,2})?$/, message: this.$t('meterWater.degreesFormatError') }
+        ],
+        preReadingTime: [
+          { required: true, message: this.$t('meterWater.preReadingTimeRequired'), trigger: 'blur' }
+        ],
+        curReadingTime: [
+          { required: true, message: this.$t('meterWater.curReadingTimeRequired'), trigger: 'blur' }
+        ],
+        remark: [
+          { max: 500, message: this.$t('meterWater.remarkMaxLength'), trigger: 'blur' }
+        ]
+      },
+      feeTypeOptions: [],
+      feeConfigs: [],
+      meterTypes: []
+    }
+  },
+  created() {
+    this.form.communityId = getCommunityId()
+    this.loadFeeTypes()
+    this.loadMeterTypes()
+  },
+  methods: {
+    open(params) {
+      this.resetForm()
+      if (params) {
+        this.form.hasRoom = Object.prototype.hasOwnProperty.call(params, 'roomId')
+        if (params.roomId) {
+          this.form.roomId = params.roomId
+          this.form.objId = params.roomId
+          this.form.objName = params.roomName
+          this.form.ownerName = params.ownerName
+            ? `${params.roomName}(${params.ownerName})`
+            : params.roomName
+        }
+      }
+      this.dialogVisible = true
+    },
+    resetForm() {
+      this.form = {
+        waterId: '',
+        meterType: '',
+        preDegrees: '',
+        curDegrees: '',
+        preReadingTime: '',
+        curReadingTime: '',
+        remark: '',
+        roomId: '',
+        objId: '',
+        objName: '',
+        feeTypeCd: '',
+        feeConfigs: [],
+        configId: '',
+        objType: '3333',
+        hasRoom: false,
+        ownerName: '',
+        meterTypes: [],
+        computingFormula: '',
+        price: 0,
+        communityId: getCommunityId()
+      }
+      this.$refs.form && this.$refs.form.resetFields()
+    },
+    handleClose() {
+      this.resetForm()
+    },
+    async loadFeeTypes() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd')
+        this.feeTypeOptions = data.map(item => ({
+          value: item.value,
+          label: item.label
+        }))
+      } catch (error) {
+        console.error('Failed to load fee types:', error)
+      }
+    },
+    async loadMeterTypes() {
+      try {
+        const { data } = await listMeterTypes({
+          communityId: this.form.communityId,
+          page: 1,
+          row: 50
+        })
+        this.meterTypes = data
+      } catch (error) {
+        console.error('Failed to load meter types:', error)
+      }
+    },
+    async handleFeeTypeChange(feeTypeCd) {
+      try {
+        const { data } = await listFeeConfigs({
+          communityId: this.form.communityId,
+          feeTypeCd,
+          isDefault: 'F',
+          valid: '1',
+          page: 1,
+          row: 20
+        })
+        this.feeConfigs = data
+        this.form.configId = ''
+      } catch (error) {
+        console.error('Failed to load fee configs:', error)
+      }
+    },
+    handleConfigChange(configId) {
+      const config = this.feeConfigs.find(item => item.configId === configId)
+      if (config) {
+        this.form.computingFormula = config.computingFormula
+      }
+      if (this.form.roomId) {
+        this.queryPreMeterWater()
+      }
+    },
+    handleMeterTypeChange() {
+      if (this.form.roomId) {
+        this.queryPreMeterWater()
+      }
+    },
+    async queryPreMeterWater() {
+      try {
+        const { data } = await queryPreMeterWater({
+          communityId: this.form.communityId,
+          objId: this.form.roomId,
+          objType: this.form.objType,
+          meterType: this.form.meterType
+        })
+
+        if (data && data.length > 0) {
+          this.form.preDegrees = data[0].curDegrees
+          this.form.preReadingTime = data[0].curReadingTime
+          if (this.form.computingFormula === '9009') {
+            this.form.price = data[0].price
+          }
+        } else {
+          this.form.preDegrees = '0'
+          this.form.preReadingTime = new Date().toISOString().slice(0, 19).replace('T', ' ')
+        }
+      } catch (error) {
+        console.error('Failed to query pre meter water:', error)
+      }
+    },
+    handleDegreesChange() {
+      const pre = parseFloat(this.form.preDegrees) || 0
+      const cur = parseFloat(this.form.curDegrees) || 0
+      if (pre > cur) {
+        this.$message.warning(this.$t('meterWater.degreesCompareError'))
+        this.form.curDegrees = ''
+      }
+    },
+    handleFloorChange(floor) {
+      this.form.floorId = floor.floorId
+      this.form.floorNum = floor.floorNum
+    },
+    handleUnitChange(unit) {
+      this.form.unitId = unit.unitId
+      this.form.unitNum = unit.unitNum
+    },
+    handleRoomChange(room) {
+      this.form.roomId = room.roomId
+      this.form.objId = room.roomId
+      this.form.objName = room.name
+      this.form.ownerName = room.link
+      this.queryPreMeterWater()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (!valid) return
+
+        try {
+          await saveMeterWater(this.form)
+          this.$message.success(this.$t('common.saveSuccess'))
+          this.dialogVisible = false
+          this.$emit('success')
+        } catch (error) {
+          console.error('Failed to save meter water:', error)
+          this.$message.error(error.message || this.$t('common.saveFailed'))
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.form-tip {
+  font-size: 12px;
+  color: #999;
+  margin-top: 5px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog :title="$t('contractCreateFeeAdd.title')" :visible.sync="visible" width="800px" @close="handleClose">
+    <el-form ref="form" :model="formData" :rules="rules" label-width="120px" label-position="right">
+      <el-form-item :label="$t('contractCreateFeeAdd.feeTypeCd')" prop="feeTypeCd">
+        <el-select v-model="formData.feeTypeCd" :placeholder="$t('contractCreateFeeAdd.selectFeeType')"
+          style="width: 100%" @change="handleFeeTypeChange">
+          <el-option v-for="item in feeTypeOptions" :key="item.statusCd" :label="item.name" :value="item.statusCd"
+            :disabled="item.statusCd === '888800010008' ||
+              item.statusCd === '888800010017'
+              " />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('contractCreateFeeAdd.configId')" prop="configId">
+        <el-select v-model="formData.configId" :placeholder="$t('contractCreateFeeAdd.selectFeeConfig')"
+          style="width: 100%" @change="handleConfigChange">
+          <el-option v-for="item in feeConfigOptions" :key="item.configId" :label="item.feeName"
+            :value="item.configId" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item v-if="formData.computingFormula === '4004'" :label="$t('contractCreateFeeAdd.amount')"
+        prop="amount">
+        <el-input v-model.trim="formData.amount" :placeholder="$t('contractCreateFeeAdd.inputAmount')" />
+      </el-form-item>
+
+      <el-form-item v-if="isMore" :label="$t('contractCreateFeeAdd.contractState')" prop="contractState">
+        <el-checkbox-group v-model="formData.contractState">
+          <el-checkbox label="2001">
+            {{ $t('contractCreateFeeAdd.state2001') }}
+          </el-checkbox>
+          <el-checkbox label="2003">
+            {{ $t('contractCreateFeeAdd.state2003') }}
+          </el-checkbox>
+          <el-checkbox label="2005">
+            {{ $t('contractCreateFeeAdd.state2005') }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+
+      <el-form-item :label="$t('contractCreateFeeAdd.startTime')" prop="startTime">
+        <el-date-picker v-model="formData.startTime" type="datetime"
+          :placeholder="$t('contractCreateFeeAdd.selectStartTime')" value-format="yyyy-MM-dd HH:mm:ss"
+          style="width: 100%" @change="validateStartTime" />
+      </el-form-item>
+
+      <el-form-item :label="$t('contractCreateFeeAdd.endTime')" prop="endTime" :rules="formData.feeFlag === '2006012'
+          ? [
+            {
+              required: true,
+              message: $t('contractCreateFeeAdd.endTimeRequired'),
+              trigger: 'blur'
+            }
+          ]
+          : []
+        ">
+        <el-date-picker v-model="formData.endTime" type="datetime"
+          :placeholder="$t('contractCreateFeeAdd.selectEndTime')" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%"
+          :disabled="!formData.feeFlag" @change="validateEndTime" />
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('common.submit') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveContractCreateFee,listFeeConfigs } from '@/api/fee/contractCreateFeeApi'
+import { getCommunityId,getDict } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractCreateFeeAdd',
+  data() {
+    return {
+      visible: false,
+      isMore: false,
+      formData: {
+        feeTypeCds: [],
+        feeConfigs: [],
+        contractId: '',
+        feeTypeCd: '',
+        configId: '',
+        contractState: ['2001'],
+        startTime: '',
+        feeFlag: '',
+        endTime: '',
+        computingFormula: '',
+        amount: ''
+      },
+      feeTypeOptions: [],
+      feeConfigOptions: [],
+      rules: {
+        feeTypeCd: [
+          {
+            required: true,
+            message: this.$t('contractCreateFeeAdd.feeTypeRequired'),
+            trigger: 'change'
+          }
+        ],
+        configId: [
+          {
+            required: true,
+            message: this.$t('contractCreateFeeAdd.configRequired'),
+            trigger: 'change'
+          }
+        ],
+        startTime: [
+          {
+            required: true,
+            message: this.$t('contractCreateFeeAdd.startTimeRequired'),
+            trigger: 'change'
+          }
+        ],
+        amount: [
+          {
+            required: true,
+            message: this.$t('contractCreateFeeAdd.amountRequired'),
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(contract, isMore) {
+      this.isMore = isMore
+      if (contract) {
+        this.formData.contractId = contract.contractId
+      }
+      this.visible = true
+      this.loadFeeTypes()
+    },
+    async loadFeeTypes() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd')
+        this.feeTypeOptions = data.filter(
+          item =>
+            item.statusCd !== '888800010015' && item.statusCd !== '888800010016'
+        )
+      } catch (error) {
+        console.error('Failed to load fee types:', error)
+      }
+    },
+    async handleFeeTypeChange(value) {
+      this.formData.configId = ''
+      try {
+        const params = {
+          page: 1,
+          row: 50,
+          communityId: getCommunityId(),
+          feeTypeCd: value,
+          isDefault: 'F',
+          valid: '1'
+        }
+        const { feeConfigs } = await listFeeConfigs(params)
+        this.feeConfigOptions = feeConfigs
+      } catch (error) {
+        console.error('Failed to load fee configs:', error)
+      }
+    },
+    handleConfigChange(value) {
+      this.formData.endTime = ''
+      const config = this.feeConfigOptions.find(item => item.configId === value)
+      if (config) {
+        this.formData.feeFlag = config.feeFlag
+        this.formData.computingFormula = config.computingFormula
+      }
+    },
+    validateStartTime(value) {
+      if (value && this.formData.endTime) {
+        const start = new Date(value).getTime()
+        const end = new Date(this.formData.endTime).getTime()
+        if (start >= end) {
+          this.$message.error(this.$t('contractCreateFeeAdd.timeError'))
+          this.formData.startTime = ''
+        }
+      }
+    },
+    validateEndTime(value) {
+      if (value && this.formData.startTime) {
+        const start = new Date(this.formData.startTime).getTime()
+        const end = new Date(value).getTime()
+        if (start >= end) {
+          this.$message.error(this.$t('contractCreateFeeAdd.timeError'))
+          this.formData.endTime = ''
+        }
+      }
+    },
+    async handleSubmit() {
+      try {
+        await this.$refs.form.validate()
+        const params = {
+          ...this.formData,
+          communityId: getCommunityId(),
+          contractState: this.formData.contractState.join(',')
+        }
+        const { data } = await saveContractCreateFee(params)
+        this.$message.success(
+          this.$t('contractCreateFeeAdd.success', {
+            total: data.totalRoom,
+            success: data.successRoom,
+            error: data.errorRoom
+          })
+        )
+        this.$emit('success')
+        this.visible = false
+      } catch (error) {
+        console.error('Submit failed:', error)
+      }
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.formData = {
+        feeTypeCds: [],
+        feeConfigs: [],
+        contractId: '',
+        feeTypeCd: '',
+        configId: '',
+        contractState: ['2001'],
+        startTime: '',
+        feeFlag: '',
+        endTime: '',
+        computingFormula: '',
+        amount: ''
+      }
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('meterWater.confirmOperation')"
+    :visible.sync="dialogVisible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div class="confirm-content">
+      <p>{{ $t('meterWater.confirmDeleteMeterReading') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleConfirm">{{ $t('common.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteMeterWater } from '@/api/fee/meterWaterManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteMeterWater',
+  data() {
+    return {
+      dialogVisible: false,
+      waterId: '',
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(data) {
+      this.waterId = data.waterId
+      this.dialogVisible = true
+    },
+    handleClose() {
+      this.waterId = ''
+    },
+    async handleConfirm() {
+      try {
+        await deleteMeterWater({
+          waterId: this.waterId,
+          communityId: this.communityId
+        })
+        this.$message.success(this.$t('common.deleteSuccess'))
+        this.dialogVisible = false
+        this.$emit('success')
+      } catch (error) {
+        console.error('Failed to delete meter water:', error)
+        this.$message.error(error.message || this.$t('common.deleteFailed'))
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.confirm-content {
+  text-align: center;
+  font-size: 16px;
+  padding: 20px 0;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('meterWater.editMeterReading')"
+    :visible.sync="dialogVisible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+      label-position="right"
+    >
+      <el-form-item :label="$t('meterWater.preDegrees')">
+        <el-input
+          v-model="form.preDegrees"
+          :placeholder="$t('meterWater.inputPreDegrees')"
+          disabled
+        />
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.curDegrees')" prop="curDegrees">
+        <el-input
+          v-model="form.curDegrees"
+          :placeholder="$t('meterWater.inputCurDegrees')"
+          @change="handleDegreesChange"
+        />
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.preReadingTime')">
+        <el-input
+          v-model="form.preReadingTime"
+          :placeholder="$t('meterWater.selectPreReadingTime')"
+          disabled
+        />
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.curReadingTime')" prop="curReadingTime">
+        <el-date-picker
+          v-model="form.curReadingTime"
+          type="datetime"
+          :placeholder="$t('meterWater.selectCurReadingTime')"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          style="width: 100%"
+        />
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.remark')" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          :placeholder="$t('meterWater.inputRemark')"
+          :rows="2"
+        />
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.save') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { updateMeterWater } from '@/api/fee/meterWaterManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditMeterWater',
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        waterId: '',
+        curDegrees: '',
+        curReadingTime: '',
+        remark: '',
+        communityId: '',
+        preDegrees: '',
+        preReadingTime: ''
+      },
+      rules: {
+        curDegrees: [
+          { required: true, message: this.$t('meterWater.curDegreesRequired'), trigger: 'blur' },
+          { pattern: /^\d+(\.\d{1,2})?$/, message: this.$t('meterWater.degreesFormatError') }
+        ],
+        curReadingTime: [
+          { required: true, message: this.$t('meterWater.curReadingTimeRequired'), trigger: 'blur' }
+        ],
+        remark: [
+          { max: 500, message: this.$t('meterWater.remarkMaxLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.form.communityId = getCommunityId()
+  },
+  methods: {
+    open(data) {
+      this.form = {
+        waterId: data.waterId,
+        curDegrees: data.curDegrees,
+        curReadingTime: data.curReadingTime,
+        remark: data.remark,
+        communityId: this.form.communityId,
+        preDegrees: data.preDegrees,
+        preReadingTime: data.preReadingTime
+      }
+      this.dialogVisible = true
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleDegreesChange() {
+      const pre = parseFloat(this.form.preDegrees) || 0
+      const cur = parseFloat(this.form.curDegrees) || 0
+      if (pre > cur) {
+        this.$message.warning(this.$t('meterWater.degreesCompareError'))
+        this.form.curDegrees = ''
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (!valid) return
+
+        try {
+          await updateMeterWater(this.form)
+          this.$message.success(this.$t('common.saveSuccess'))
+          this.dialogVisible = false
+          this.$emit('success')
+        } catch (error) {
+          console.error('Failed to update meter water:', error)
+          this.$message.error(error.message || this.$t('common.saveFailed'))
+        }
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-select
+    v-model="selectedFloor"
+    :placeholder="$t('meterWater.selectBuilding')"
+    filterable
+    clearable
+    style="width: 100%"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="item in floors"
+      :key="item.floorId"
+      :label="`${item.floorNum}栋`"
+      :value="item.floorId"
+    />
+  </el-select>
+</template>
+
+<script>
+import { queryFloors } from '@/api/fee/meterWaterManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FloorSelect2',
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      floors: [],
+      selectedFloor: this.value,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.loadFloors()
+  },
+  methods: {
+    async loadFloors() {
+      try {
+        const { data } = await queryFloors({
+          communityId: this.communityId,
+          page: 1,
+          row: 500
+        })
+        this.floors = data
+      } catch (error) {
+        console.error('Failed to load floors:', error)
+      }
+    },
+    handleChange(value) {
+      const floor = this.floors.find(item => item.floorId === value)
+      this.$emit('change', {
+        floorId: value,
+        floorNum: floor ? floor.floorNum : ''
+      })
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.selectedFloor = newVal
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('meterWater.meterReadingImport')"
+    :visible.sync="dialogVisible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+      label-position="right"
+    >
+      <el-form-item :label="$t('meterWater.feeType')" prop="feeTypeCd">
+        <el-select
+          v-model="form.feeTypeCd"
+          :placeholder="$t('meterWater.selectFeeType')"
+          style="width: 100%"
+          @change="handleFeeTypeChange"
+        >
+          <el-option
+            v-for="item in feeTypeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.feeItem')" prop="configId">
+        <el-select
+          v-model="form.configId"
+          :placeholder="$t('meterWater.selectFeeItem')"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in feeConfigs"
+            :key="item.configId"
+            :label="item.feeName"
+            :value="item.configId"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.meterType')" prop="meterType">
+        <el-select
+          v-model="form.meterType"
+          :placeholder="$t('meterWater.selectMeterType')"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in meterTypes"
+            :key="item.typeId"
+            :label="item.typeName"
+            :value="item.typeId"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.selectFile')" prop="file">
+        <el-upload
+          ref="upload"
+          :auto-upload="false"
+          :limit="1"
+          :on-change="handleFileChange"
+          :file-list="fileList"
+          accept=".xls,.xlsx"
+        >
+          <el-button size="small" type="primary">{{ $t('meterWater.selectFile') }}</el-button>
+          <div slot="tip" class="el-upload__tip">
+            {{ fileList.length > 0 ? fileList[0].name : $t('meterWater.fileRequired') }}
+          </div>
+        </el-upload>
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.downloadTemplate')">
+        <div>
+          {{ $t('meterWater.downloadTip') }}
+          <el-link type="primary" @click="handleDownloadTemplate">
+            {{ $t('meterWater.importTemplate') }}
+          </el-link>
+          {{ $t('meterWater.prepareData') }}
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleImport">{{ $t('common.import') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { importMeterWaterData, exportMeterWaterTemplate } from '@/api/fee/meterWaterManageApi'
+import { listFeeConfigs, listMeterTypes } from '@/api/fee/meterWaterManageApi'
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ImportMeterWaterFee',
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        feeTypeCd: '',
+        configId: '',
+        meterType: '',
+        file: null,
+        communityId: ''
+      },
+      rules: {
+        feeTypeCd: [
+          { required: true, message: this.$t('meterWater.feeTypeRequired'), trigger: 'blur' }
+        ],
+        configId: [
+          { required: true, message: this.$t('meterWater.feeItemRequired'), trigger: 'blur' }
+        ],
+        meterType: [
+          { required: true, message: this.$t('meterWater.meterTypeRequired'), trigger: 'blur' }
+        ],
+        file: [
+          { required: true, message: this.$t('meterWater.fileRequired'), trigger: 'blur' }
+        ]
+      },
+      feeTypeOptions: [],
+      feeConfigs: [],
+      meterTypes: [],
+      fileList: []
+    }
+  },
+  created() {
+    this.form.communityId = getCommunityId()
+    this.loadFeeTypes()
+    this.loadMeterTypes()
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.fileList = []
+    },
+    async loadFeeTypes() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd')
+        this.feeTypeOptions = data.map(item => ({
+          value: item.value,
+          label: item.label
+        }))
+      } catch (error) {
+        console.error('Failed to load fee types:', error)
+      }
+    },
+    async loadMeterTypes() {
+      try {
+        const { data } = await listMeterTypes({
+          communityId: this.form.communityId,
+          page: 1,
+          row: 50
+        })
+        this.meterTypes = data
+      } catch (error) {
+        console.error('Failed to load meter types:', error)
+      }
+    },
+    async handleFeeTypeChange(feeTypeCd) {
+      try {
+        const { data } = await listFeeConfigs({
+          communityId: this.form.communityId,
+          feeTypeCd,
+          isDefault: 'F',
+          valid: '1',
+          page: 1,
+          row: 20
+        })
+        this.feeConfigs = data
+        this.form.configId = ''
+      } catch (error) {
+        console.error('Failed to load fee configs:', error)
+      }
+    },
+    handleFileChange(file) {
+      this.form.file = file.raw
+      this.fileList = [file]
+    },
+    async handleDownloadTemplate() {
+      if (!this.form.meterType) {
+        this.$message.warning(this.$t('meterWater.selectMeterTypeFirst'))
+        return
+      }
+
+      try {
+        await exportMeterWaterTemplate({
+          communityId: this.form.communityId,
+          meterType: this.form.meterType
+        })
+        this.$message.success(this.$t('meterWater.downloadStarted'))
+      } catch (error) {
+        console.error('Failed to download template:', error)
+        this.$message.error(error.message || this.$t('common.downloadFailed'))
+      }
+    },
+    async handleImport() {
+      this.$refs.form.validate(async valid => {
+        if (!valid) return
+
+        if (!this.form.file) {
+          this.$message.warning(this.$t('meterWater.fileRequired'))
+          return
+        }
+
+        const formData = new FormData()
+        formData.append('uploadFile', this.form.file)
+        formData.append('communityId', this.form.communityId)
+        formData.append('feeTypeCd', this.form.feeTypeCd)
+        formData.append('configId', this.form.configId)
+        formData.append('meterType', this.form.meterType)
+        formData.append('importAdapt', 'importMeterWaterFee')
+
+        try {
+          const { data } = await importMeterWaterData(formData)
+          this.$message.success(this.$t('meterWater.importSuccess'))
+          this.dialogVisible = false
+          this.$emit('success', data.logId)
+        } catch (error) {
+          console.error('Failed to import meter water data:', error)
+          this.$message.error(error.message || this.$t('common.importFailed'))
+        }
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('meterWater.meterReadingImport2')"
+    :visible.sync="dialogVisible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+      label-position="right"
+    >
+      <el-form-item :label="$t('meterWater.feeType')" prop="feeTypeCd">
+        <el-select
+          v-model="form.feeTypeCd"
+          :placeholder="$t('meterWater.selectFeeType')"
+          style="width: 100%"
+          @change="handleFeeTypeChange"
+        >
+          <el-option
+            v-for="item in feeTypeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.feeItem')" prop="configId">
+        <el-select
+          v-model="form.configId"
+          :placeholder="$t('meterWater.selectFeeItem')"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in feeConfigs"
+            :key="item.configId"
+            :label="item.feeName"
+            :value="item.configId"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.meterType')" prop="meterType">
+        <el-select
+          v-model="form.meterType"
+          :placeholder="$t('meterWater.selectMeterType')"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in meterTypes"
+            :key="item.typeId"
+            :label="item.typeName"
+            :value="item.typeId"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.selectFile')" prop="file">
+        <el-upload
+          ref="upload"
+          :auto-upload="false"
+          :limit="1"
+          :on-change="handleFileChange"
+          :file-list="fileList"
+          accept=".xls,.xlsx"
+        >
+          <el-button size="small" type="primary">{{ $t('meterWater.selectFile') }}</el-button>
+          <div slot="tip" class="el-upload__tip">
+            {{ fileList.length > 0 ? fileList[0].name : $t('meterWater.fileRequired') }}
+          </div>
+        </el-upload>
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.downloadTemplate')">
+        <div>
+          {{ $t('meterWater.downloadTip') }}
+          <el-link type="primary" @click="handleDownloadTemplate">
+            {{ $t('meterWater.importTemplate') }}
+          </el-link>
+          {{ $t('meterWater.prepareData') }}
+          {{ $t('meterWater.dynamicFeeTip') }}
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleImport">{{ $t('common.import') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { importMeterWaterData, exportMeterWaterTemplate } from '@/api/fee/meterWaterManageApi'
+import { listFeeConfigs, listMeterTypes } from '@/api/fee/meterWaterManageApi'
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ImportMeterWaterFee2',
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        feeTypeCd: '',
+        configId: '',
+        meterType: '',
+        file: null,
+        communityId: ''
+      },
+      rules: {
+        feeTypeCd: [
+          { required: true, message: this.$t('meterWater.feeTypeRequired'), trigger: 'blur' }
+        ],
+        configId: [
+          { required: true, message: this.$t('meterWater.feeItemRequired'), trigger: 'blur' }
+        ],
+        meterType: [
+          { required: true, message: this.$t('meterWater.meterTypeRequired'), trigger: 'blur' }
+        ],
+        file: [
+          { required: true, message: this.$t('meterWater.fileRequired'), trigger: 'blur' }
+        ]
+      },
+      feeTypeOptions: [],
+      feeConfigs: [],
+      meterTypes: [],
+      fileList: []
+    }
+  },
+  created() {
+    this.form.communityId = getCommunityId()
+    this.loadFeeTypes()
+    this.loadMeterTypes()
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.fileList = []
+    },
+    async loadFeeTypes() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd')
+        this.feeTypeOptions = data.map(item => ({
+          value: item.value,
+          label: item.label
+        }))
+      } catch (error) {
+        console.error('Failed to load fee types:', error)
+      }
+    },
+    async loadMeterTypes() {
+      try {
+        const { data } = await listMeterTypes({
+          communityId: this.form.communityId,
+          page: 1,
+          row: 50
+        })
+        this.meterTypes = data
+      } catch (error) {
+        console.error('Failed to load meter types:', error)
+      }
+    },
+    async handleFeeTypeChange(feeTypeCd) {
+      try {
+        const { data } = await listFeeConfigs({
+          communityId: this.form.communityId,
+          feeTypeCd,
+          isDefault: 'F',
+          valid: '1',
+          page: 1,
+          row: 20
+        })
+        this.feeConfigs = data
+        this.form.configId = ''
+      } catch (error) {
+        console.error('Failed to load fee configs:', error)
+      }
+    },
+    handleFileChange(file) {
+      this.form.file = file.raw
+      this.fileList = [file]
+    },
+    async handleDownloadTemplate() {
+      if (!this.form.meterType) {
+        this.$message.warning(this.$t('meterWater.selectMeterTypeFirst'))
+        return
+      }
+
+      const meterType = this.meterTypes.find(item => item.typeId === this.form.meterType)
+      const feeName = meterType ? meterType.typeName : ''
+
+      try {
+        await exportMeterWaterTemplate({
+          communityId: this.form.communityId,
+          meterType: this.form.meterType,
+          feeName,
+          pagePath: 'exportMeterWater2'
+        })
+        this.$message.success(this.$t('meterWater.downloadStarted'))
+      } catch (error) {
+        console.error('Failed to download template:', error)
+        this.$message.error(error.message || this.$t('common.downloadFailed'))
+      }
+    },
+    async handleImport() {
+      this.$refs.form.validate(async valid => {
+        if (!valid) return
+
+        if (!this.form.file) {
+          this.$message.warning(this.$t('meterWater.fileRequired'))
+          return
+        }
+
+        const formData = new FormData()
+        formData.append('uploadFile', this.form.file)
+        formData.append('communityId', this.form.communityId)
+        formData.append('feeTypeCd', this.form.feeTypeCd)
+        formData.append('configId', this.form.configId)
+        formData.append('meterType', this.form.meterType)
+        formData.append('importAdapt', 'importMeterWaterFee')
+        formData.append('importMeterDynamic', 'true')
+
+        try {
+          const { data } = await importMeterWaterData(formData)
+          this.$message.success(this.$t('meterWater.importSuccess'))
+          this.dialogVisible = false
+          this.$emit('success', data.logId)
+        } catch (error) {
+          console.error('Failed to import meter water data:', error)
+          this.$message.error(error.message || this.$t('common.importFailed'))
+        }
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('meterWater.meterQRCode')"
+    :visible.sync="dialogVisible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+      label-position="right"
+    >
+      <el-form-item :label="$t('meterWater.feeType')" prop="feeTypeCd">
+        <el-select
+          v-model="form.feeTypeCd"
+          :placeholder="$t('meterWater.selectFeeType')"
+          style="width: 100%"
+          @change="handleFeeTypeChange"
+        >
+          <el-option
+            v-for="item in feeTypeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.feeItem')" prop="configId">
+        <el-select
+          v-model="form.configId"
+          :placeholder="$t('meterWater.selectFeeItem')"
+          style="width: 100%"
+          @change="generateQRCode"
+        >
+          <el-option
+            v-for="item in feeConfigs"
+            :key="item.configId"
+            :label="item.feeName"
+            :value="item.configId"
+          />
+        </el-select>
+        <div class="form-tip">
+          {{ $t('meterWater.feeItemTip') }}
+        </div>
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.meterType')" prop="meterType">
+        <el-select
+          v-model="form.meterType"
+          :placeholder="$t('meterWater.selectMeterType')"
+          style="width: 100%"
+          @change="generateQRCode"
+        >
+          <el-option
+            v-for="item in meterTypes"
+            :key="item.typeId"
+            :label="item.typeName"
+            :value="item.typeId"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('meterWater.room')">
+        <el-input
+          v-model="form.ownerName"
+          :placeholder="$t('meterWater.inputRoom')"
+          disabled
+        />
+      </el-form-item>
+
+      <el-form-item v-if="showQRCode" :label="$t('meterWater.qrCode')">
+        <div class="qr-code-container">
+          <div id="qrCodeCanvas" class="qr-code-canvas"></div>
+          <div class="qr-code-title">
+            {{ form.ownerName }}-{{ form.typeName }}
+          </div>
+          <div class="qr-code-tip">
+            {{ $t('meterWater.qrCodeTip') }}
+          </div>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import QRCode from 'qrcodejs2'
+import { listFeeConfigs, listMeterTypes } from '@/api/fee/meterWaterManageApi'
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'RoomMeterQrcode',
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        feeTypeCd: '',
+        configId: '',
+        meterType: '',
+        roomId: '',
+        ownerName: '',
+        typeName: '',
+        communityId: ''
+      },
+      rules: {
+        feeTypeCd: [
+          { required: true, message: this.$t('meterWater.feeTypeRequired'), trigger: 'blur' }
+        ],
+        configId: [
+          { required: true, message: this.$t('meterWater.feeItemRequired'), trigger: 'blur' }
+        ],
+        meterType: [
+          { required: true, message: this.$t('meterWater.meterTypeRequired'), trigger: 'blur' }
+        ]
+      },
+      feeTypeOptions: [],
+      feeConfigs: [],
+      meterTypes: [],
+      showQRCode: false,
+      qrCode: null
+    }
+  },
+  created() {
+    this.form.communityId = getCommunityId()
+    this.loadFeeTypes()
+    this.loadMeterTypes()
+  },
+  methods: {
+    open(params) {
+      this.resetForm()
+      if (params) {
+        this.form.roomId = params.roomId
+        this.form.ownerName = params.ownerName 
+          ? `${params.roomName}(${params.ownerName})` 
+          : params.roomName
+      }
+      this.dialogVisible = true
+    },
+    resetForm() {
+      this.form = {
+        feeTypeCd: '',
+        configId: '',
+        meterType: '',
+        roomId: '',
+        ownerName: '',
+        typeName: '',
+        communityId: getCommunityId()
+      }
+      this.showQRCode = false
+      this.$refs.form && this.$refs.form.resetFields()
+      this.clearQRCode()
+    },
+    handleClose() {
+      this.resetForm()
+    },
+    clearQRCode() {
+      if (this.qrCode) {
+        document.getElementById('qrCodeCanvas').innerHTML = ''
+        this.qrCode = null
+      }
+    },
+    async loadFeeTypes() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd')
+        this.feeTypeOptions = data.map(item => ({
+          value: item.value,
+          label: item.label
+        }))
+      } catch (error) {
+        console.error('Failed to load fee types:', error)
+      }
+    },
+    async loadMeterTypes() {
+      try {
+        const { data } = await listMeterTypes({
+          communityId: this.form.communityId,
+          page: 1,
+          row: 50
+        })
+        this.meterTypes = data
+      } catch (error) {
+        console.error('Failed to load meter types:', error)
+      }
+    },
+    async handleFeeTypeChange(feeTypeCd) {
+      try {
+        const { data } = await listFeeConfigs({
+          communityId: this.form.communityId,
+          feeTypeCd,
+          isDefault: 'F',
+          valid: '1',
+          page: 1,
+          row: 20
+        })
+        this.feeConfigs = data
+        this.form.configId = ''
+      } catch (error) {
+        console.error('Failed to load fee configs:', error)
+      }
+    },
+    generateQRCode() {
+      if (!this.form.configId || !this.form.meterType || !this.form.roomId) {
+        return
+      }
+
+      const meterType = this.meterTypes.find(item => item.typeId === this.form.meterType)
+      this.form.typeName = meterType ? meterType.typeName : ''
+
+      this.clearQRCode()
+
+      const propertyUrl = this.$store.getters.systemInfo.propertyUrl
+      const qrCodeUrl = `${propertyUrl}pages/meter/qrcodeMeter?configId=${this.form.configId}&meterType=${this.form.meterType}&roomId=${this.form.roomId}&communityId=${this.form.communityId}`
+
+      this.qrCode = new QRCode(document.getElementById('qrCodeCanvas'), {
+        text: qrCodeUrl,
+        width: 200,
+        height: 200,
+        colorDark: '#000000',
+        colorLight: '#ffffff',
+        correctLevel: QRCode.CorrectLevel.L
+      })
+
+      this.showQRCode = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.qr-code-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+
+  .qr-code-canvas {
+    margin-bottom: 10px;
+  }
+
+  .qr-code-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .qr-code-tip {
+    font-size: 14px;
+    color: #666;
+    text-align: center;
+    max-width: 300px;
+  }
+}
+
+.form-tip {
+  font-size: 12px;
+  color: #999;
+  margin-top: 5px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-select
+    v-model="selectedRoom"
+    :placeholder="$t('meterWater.selectRoom')"
+    filterable
+    clearable
+    style="width: 100%"
+    :disabled="!unitId"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="item in rooms"
+      :key="item.roomId"
+      :label="getRoomLabel(item)"
+      :value="item.roomId"
+    />
+  </el-select>
+</template>
+
+<script>
+import { queryRooms } from '@/api/fee/meterWaterManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'RoomSelect2',
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    unitId: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      rooms: [],
+      selectedRoom: this.value,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  watch: {
+    unitId: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.loadRooms(newVal)
+        } else {
+          this.rooms = []
+          this.selectedRoom = ''
+        }
+      }
+    },
+    value(newVal) {
+      this.selectedRoom = newVal
+    }
+  },
+  methods: {
+    async loadRooms(unitId) {
+      try {
+        const { data } = await queryRooms({
+          unitId,
+          communityId: this.communityId,
+          page: 1,
+          row: 200
+        })
+        this.rooms = data.rooms || []
+      } catch (error) {
+        console.error('Failed to load rooms:', error)
+      }
+    },
+    getRoomLabel(room) {
+      return room.ownerName 
+        ? `${room.roomNum}室(${room.ownerName})` 
+        : `${room.roomNum}室`
+    },
+    handleChange(value) {
+      const room = this.rooms.find(item => item.roomId === value)
+      if (room) {
+        this.$emit('change', {
+          roomId: value,
+          name: `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
+          link: this.getRoomLabel(room)
+        })
+      } else {
+        this.$emit('change', null)
+      }
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div class="room-tree-container">
+    <el-tree ref="tree" :data="treeData" node-key="id" :props="defaultProps" :highlight-current="true"
+      :expand-on-click-node="false" @node-click="handleNodeClick">
+      <span slot-scope="{ node, data }" class="custom-tree-node">
+        <span>
+          <i :class="data.icon" style="margin-right: 5px"></i>
+          {{ node.label }}
+        </span>
+      </span>
+    </el-tree>
+  </div>
+</template>
+
+<script>
+import { queryUnits, queryRoomsTree } from '@/api/fee/meterWaterManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'RoomTreeDiv',
+  data() {
+    return {
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'text'
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.loadTreeData()
+  },
+  methods: {
+    async loadTreeData() {
+      try {
+        const units = await queryUnits({
+          communityId: this.communityId
+        })
+        this.buildTreeData(units)
+      } catch (error) {
+        console.error('Failed to load tree data:', error)
+      }
+    },
+    buildTreeData(units) {
+      const treeMap = new Map()
+
+      // Build floor nodes
+      units.forEach(unit => {
+        if (!treeMap.has(unit.floorId)) {
+          treeMap.set(unit.floorId, {
+            id: `f_${unit.floorId}`,
+            floorId: unit.floorId,
+            floorNum: unit.floorNum,
+            icon: 'el-icon-office-building',
+            text: `${unit.floorNum}栋`,
+            children: []
+          })
+        }
+      })
+
+      // Build unit nodes
+      units.forEach(unit => {
+        const floorNode = treeMap.get(unit.floorId)
+        if (floorNode) {
+          floorNode.children.push({
+            id: `u_${unit.unitId}`,
+            unitId: unit.unitId,
+            unitNum: unit.unitNum,
+            icon: 'el-icon-connection',
+            text: `${unit.unitNum}单元`,
+            children: []
+          })
+        }
+      })
+
+      this.treeData = Array.from(treeMap.values())
+    },
+    async handleNodeClick(data) {
+      if (data.id.startsWith('u_')) {
+        await this.loadRooms(data)
+      } else if (data.id.startsWith('r_')) {
+        this.$emit('selectRoom', {
+          roomId: data.roomId,
+          roomName: data.roomName
+        })
+      }
+    },
+    async loadRooms(node) {
+      try {
+        const {rooms} = await queryRoomsTree({
+          unitId: node.unitId,
+          communityId: this.communityId,
+          page: 1,
+          row: 1000
+        })
+
+        const roomNodes = rooms.map(room => ({
+          id: `r_${room.roomId}`,
+          roomId: room.roomId,
+          roomName: `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
+          icon: 'el-icon-house',
+          text: room.ownerName
+            ? `${room.roomNum}室(${room.ownerName})`
+            : `${room.roomNum}室`
+        }))
+
+        // Update tree data
+        const floorNode = this.treeData.find(
+          item => item.id === `f_${node.floorId}`
+        )
+        if (floorNode) {
+          const unitNode = floorNode.children.find(
+            item => item.id === `u_${node.unitId}`
+          )
+          if (unitNode) {
+            this.$set(unitNode, 'children', roomNodes)
+            this.$refs.tree.updateKeyChildren(unitNode.id, roomNodes)
+
+            // Auto select first room
+            if (roomNodes.length > 0) {
+              this.$emit('selectRoom', {
+                roomId: roomNodes[0].roomId,
+                roomName: roomNodes[0].roomName
+              })
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load rooms:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.room-tree-container {
+  height: 100%;
+  overflow-y: auto;
+  padding: 10px;
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    padding: 5px 0;
+  }
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-select
+    v-model="selectedUnit"
+    :placeholder="$t('meterWater.selectUnit')"
+    filterable
+    clearable
+    style="width: 100%"
+    :disabled="!floorId"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="item in units"
+      :key="item.unitId"
+      :label="`${item.unitNum}单元`"
+      :value="item.unitId"
+    />
+  </el-select>
+</template>
+
+<script>
+import { queryUnits } from '@/api/fee/meterWaterManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'UnitSelect2',
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    floorId: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      units: [],
+      selectedUnit: this.value,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  watch: {
+    floorId: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.loadUnits(newVal)
+        } else {
+          this.units = []
+          this.selectedUnit = ''
+        }
+      }
+    },
+    value(newVal) {
+      this.selectedUnit = newVal
+    }
+  },
+  methods: {
+    async loadUnits(floorId) {
+      try {
+        const { data } = await queryUnits({
+          floorId,
+          communityId: this.communityId,
+          page: 1,
+          row: 50
+        })
+        this.units = data
+      } catch (error) {
+        console.error('Failed to load units:', error)
+      }
+    },
+    handleChange(value) {
+      const unit = this.units.find(item => item.unitId === value)
+      this.$emit('change', {
+        unitId: value,
+        unitNum: unit ? unit.unitNum : ''
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+import { messages as contractCreateFeeMessages } from '../views/fee/contractCreateFeeLang'
+import { messages as meterWaterManageMessages } from '../views/fee/meterWaterManageLang'
+export const messages = {
+    en: {
+        ...contractCreateFeeMessages.en,
+        ...meterWaterManageMessages.en,
+    },
+    zh: {
+        ...contractCreateFeeMessages.zh,
+        ...meterWaterManageMessages.zh,
+    }
+}
 \ No newline at end of file
@@ -146,6 +146,7 @@ import { messages as userI18n } from &#39;./userI18n&#39;
 import { messages as systemI18n } from './systemI18n'
 import { messages as communityI18n } from './communityI18n'
 import { messages as workI18n } from './workI18n'
+import { messages as feeI18n } from './feeI18n'
 Vue.use(VueI18n)
@@ -290,6 +291,7 @@ const messages = {
     ...systemI18n.en,
     ...communityI18n.en,
     ...workI18n.en,
+    ...feeI18n.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -428,6 +430,7 @@ const messages = {
     ...systemI18n.zh,
     ...communityI18n.zh,
     ...workI18n.zh,
+    ...feeI18n.zh,
   }
 }
+export default [
+    {
+        path:'/pages/property/contractCreateFee',
+        name:'/pages/property/contractCreateFee',
+        component: () => import('@/views/fee/contractCreateFeeList.vue')
+        },
+        {
+            path:'/pages/property/meterWaterManage',
+            name:'/pages/property/meterWaterManage',
+            component: () => import('@/views/fee/meterWaterManageList.vue')
+            },
+]
 \ No newline at end of file
@@ -16,6 +16,7 @@ import userRouter from &#39;./userRouter&#39;
 import systemRouter from './systemRouter'
 import communityRouter from './communityRouter'
 import workRouter from './workRouter'   
+import feeRouter from './feeRouter'
 Vue.use(VueRouter)
@@ -640,6 +641,7 @@ const routes = [
       ...systemRouter,
       ...communityRouter,
       ...workRouter,
+      ...feeRouter,
       // 其他子路由可以在这里添加
     ]
   },
+export const messages = {
+  en: {
+    contractCreateFee: {
+      search: {
+        title: 'Search Conditions',
+        contractCode: 'Contract Code',
+        contractNameLike: 'Contract Name',
+        contractType: 'Contract Type'
+      },
+      list: {
+        title: 'Contract Information',
+        batchCreate: 'Batch Create'
+      },
+      table: {
+        contractCode: 'Contract Code',
+        parentContractCode: 'Parent Contract Code',
+        contractName: 'Contract Name',
+        contractType: 'Contract Type',
+        partyB: 'Party B',
+        amount: 'Amount',
+        startTime: 'Start Time',
+        endTime: 'End Time',
+        operation: 'Operation',
+        payFee: 'Pay Fee',
+        viewDetail: 'Detail',
+        viewFee: 'View Fee'
+      },
+      fetchError: 'Failed to fetch contract data'
+    },
+    contractCreateFeeAdd: {
+      title: 'Create Fee',
+      feeTypeCd: 'Fee Type',
+      configId: 'Fee Item',
+      amount: 'Amount',
+      contractState: 'Contract State',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      selectFeeType: 'Please select fee type',
+      selectFeeConfig: 'Please select fee item',
+      inputAmount: 'Please input amount',
+      selectStartTime: 'Select start time',
+      selectEndTime: 'Select end time',
+      state2001: 'Pending Review',
+      state2003: 'Under Review',
+      state2005: 'Review Completed',
+      feeTypeRequired: 'Fee type is required',
+      configRequired: 'Fee item is required',
+      amountRequired: 'Amount is required',
+      startTimeRequired: 'Start time is required',
+      endTimeRequired: 'End time is required',
+      timeError: 'Start time must be earlier than end time',
+      success: 'Successfully created fees. Total: {total}, Success: {success}, Failed: {error}',
+      note: 'Note: Batch created fees will be displayed in the contract fee view'
+    }
+  },
+  zh: {
+    contractCreateFee: {
+      search: {
+        title: '查询条件',
+        contractCode: '合同编号',
+        contractNameLike: '合同名称',
+        contractType: '合同类型'
+      },
+      list: {
+        title: '合同信息',
+        batchCreate: '批量创建'
+      },
+      table: {
+        contractCode: '合同编号',
+        parentContractCode: '父合同编号',
+        contractName: '合同名称',
+        contractType: '合同类型',
+        partyB: '乙方',
+        amount: '合同金额',
+        startTime: '开始时间',
+        endTime: '结束时间',
+        operation: '操作',
+        payFee: '欠费缴费',
+        viewDetail: '详情',
+        viewFee: '查看费用'
+      },
+      fetchError: '获取合同数据失败'
+    },
+    contractCreateFeeAdd: {
+      title: '创建费用',
+      feeTypeCd: '费用类型',
+      configId: '收费项目',
+      amount: '收费金额',
+      contractState: '合同状态',
+      startTime: '计费起始时间',
+      endTime: '计费结束时间',
+      selectFeeType: '请选择费用类型',
+      selectFeeConfig: '请选择收费项目',
+      inputAmount: '请填写收费金额',
+      selectStartTime: '请填写计费起始时间',
+      selectEndTime: '请填写计费结束时间',
+      state2001: '待审核',
+      state2003: '审核中',
+      state2005: '审核完成',
+      feeTypeRequired: '费用类型不能为空',
+      configRequired: '费用项目不能为空',
+      amountRequired: '收费金额不能为空',
+      startTimeRequired: '计费起始时间不能为空',
+      endTimeRequired: '计费结束时间不能为空',
+      timeError: '计费起始时间必须小于计费终止时间',
+      success: '创建收费成功，总共[{total}]合同，成功[{success}],失败[{error}]',
+      note: '注：批量创建的费用在合同收费的查看费用中显示'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="contract-create-fee-container">
+    <!-- 查询条件 -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('contractCreateFee.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input
+            v-model.trim="searchForm.contractCode"
+            :placeholder="$t('contractCreateFee.search.contractCode')"
+            clearable
+          />
+        </el-col>
+        <el-col :span="6">
+          <el-input
+            v-model.trim="searchForm.contractNameLike"
+            :placeholder="$t('contractCreateFee.search.contractNameLike')"
+            clearable
+          />
+        </el-col>
+        <el-col :span="6">
+          <el-input
+            v-model.trim="searchForm.contractType"
+            :placeholder="$t('contractCreateFee.search.contractType')"
+            clearable
+          />
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="handleSearch">
+            <i class="el-icon-search"></i>
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="handleReset">
+            <i class="el-icon-refresh"></i>
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 合同信息 -->
+    <el-card class="list-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('contractCreateFee.list.title') }}</span>
+        <el-button
+          type="primary"
+          size="small"
+          @click="handleBatchCreate"
+        >
+          <i class="el-icon-plus"></i>
+          {{ $t('contractCreateFee.list.batchCreate') }}
+        </el-button>
+      </div>
+
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="contractCode"
+          :label="$t('contractCreateFee.table.contractCode')"
+          align="center"
+        />
+        <el-table-column
+          prop="parentContractCode"
+          :label="$t('contractCreateFee.table.parentContractCode')"
+          align="center"
+        >
+          <template slot-scope="scope">
+            {{ scope.row.parentContractCode || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="contractName"
+          :label="$t('contractCreateFee.table.contractName')"
+          align="center"
+        />
+        <el-table-column
+          prop="contractTypeName"
+          :label="$t('contractCreateFee.table.contractType')"
+          align="center"
+        />
+        <el-table-column
+          prop="bContacts"
+          :label="$t('contractCreateFee.table.partyB')"
+          align="center"
+        />
+        <el-table-column
+          prop="amount"
+          :label="$t('contractCreateFee.table.amount')"
+          align="center"
+        />
+        <el-table-column
+          prop="startTime"
+          :label="$t('contractCreateFee.table.startTime')"
+          align="center"
+        />
+        <el-table-column
+          prop="endTime"
+          :label="$t('contractCreateFee.table.endTime')"
+          align="center"
+        />
+        <el-table-column
+          :label="$t('common.operation')"
+          align="center"
+          width="220"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-if="scope.row.state !== '2002'"
+              size="mini"
+              @click="handlePayFee(scope.row)"
+            >
+              {{ $t('contractCreateFee.table.payFee') }}
+            </el-button>
+            <el-button size="mini" @click="handleViewDetail(scope.row)">
+              {{ $t('contractCreateFee.table.viewDetail') }}
+            </el-button>
+            <el-button size="mini" @click="handleViewFee(scope.row)">
+              {{ $t('contractCreateFee.table.viewFee') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        :current-page.sync="pagination.current"
+        :page-sizes="[10, 20, 30, 50]"
+        :page-size="pagination.size"
+        :total="pagination.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+
+    <!-- 创建费用弹窗 -->
+    <contract-create-fee-add ref="createFeeAdd" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { queryContract } from '@/api/fee/contractCreateFeeApi'
+import ContractCreateFeeAdd from '@/components/fee/contractCreateFeeAdd'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractCreateFeeList',
+  components: {
+    ContractCreateFeeAdd
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        contractCode: '',
+        contractNameLike: '',
+        contractType: ''
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          ...this.searchForm,
+          communityId: getCommunityId()
+        }
+        const { data, total } = await queryContract(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        this.$message.error(this.$t('contractCreateFee.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        contractCode: '',
+        contractNameLike: '',
+        contractType: ''
+      }
+      this.handleSearch()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    },
+    handleBatchCreate() {
+      this.$refs.createFeeAdd.open(null, true)
+    },
+    handlePayFee(row) {
+      this.$router.push({
+        path: '/property/owePayFeeOrder',
+        query: {
+          payObjId: row.contractId,
+          payObjType: '7777',
+          contractName: row.contractName
+        }
+      })
+    },
+    handleViewDetail(row) {
+      this.$router.push({
+        path: '/common/contractApplyDetail',
+        query: { contractId: row.contractId }
+      })
+    },
+    handleViewFee(row) {
+      this.$router.push({
+        path: '/contract/contractDetail',
+        query: {
+          contractId: row.contractId,
+          contractCode: row.contractCode
+        }
+      })
+    },
+    handleSuccess() {
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contract-create-fee-container {
+  padding: 20px;
+
+  .search-wrapper {
+    margin-bottom: 20px;
+
+    .el-row {
+      margin-bottom: -20px;
+    }
+
+    .el-col {
+      margin-bottom: 20px;
+    }
+  }
+
+  .list-wrapper {
+    .el-pagination {
+      margin-top: 20px;
+      text-align: right;
+    }
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en:{
+    meterWater: {
+      queryConditions: 'Query Conditions',
+      meterReadingInfo: 'Meter Reading Info',
+      meterId: 'Meter ID',
+      meterType: 'Meter Type',
+      objectName: 'Object Name',
+      preDegrees: 'Previous Degrees',
+      curDegrees: 'Current Degrees',
+      preReadingTime: 'Previous Reading Time',
+      curReadingTime: 'Current Reading Time',
+      createTime: 'Create Time',
+      operation: 'Operation',
+      readMeter: 'Read Meter',
+      qrCodeMeter: 'QR Code Meter',
+      import1: 'Import 1',
+      import2: 'Import 2',
+      selectMeterType: 'Please select meter type',
+      inputMeterId: 'Please input meter ID',
+      query: 'Query',
+      reset: 'Reset',
+      addMeterReading: 'Add Meter Reading',
+      editMeterReading: 'Edit Meter Reading',
+      confirmOperation: 'Please confirm your operation',
+      confirmDeleteMeterReading: 'Confirm to delete meter reading',
+      cancel: 'Cancel',
+      confirmDelete: 'Confirm Delete',
+      meterReadingImport: 'Meter Reading Import',
+      meterReadingImport2: 'Meter Reading Import 2',
+      feeType: 'Fee Type',
+      selectFeeType: 'Please select fee type',
+      feeItem: 'Fee Item',
+      selectFeeItem: 'Please select fee item',
+      feeItemTip: 'Note: Fee items with formula [(Current Degrees - Previous Degrees) * Price + Additional Fee]',
+      meterTypeRequired: 'Please select meter type',
+      building: 'Building',
+      unit: 'Unit',
+      room: 'Room',
+      feeObject: 'Fee Object',
+      inputRoom: 'Please input room',
+      inputPreDegrees: 'Please input previous degrees',
+      inputCurDegrees: 'Please input current degrees',
+      selectPreReadingTime: 'Please select previous reading time',
+      selectCurReadingTime: 'Please select current reading time',
+      price: 'Price',
+      inputPrice: 'Please input price',
+      remark: 'Remark',
+      inputRemark: 'Please input remark',
+      unitTip: 'Note: Unit 0 means shop',
+      save: 'Save',
+      selectFile: 'Select File',
+      fileRequired: 'Please select data file',
+      downloadTemplate: 'Download Template',
+      downloadTip: 'Please download',
+      importTemplate: 'Import Template',
+      prepareData: 'prepare data first, then upload to import',
+      dynamicFeeTip: 'Used when fee item is dynamic fee',
+      import: 'Import',
+      meterQRCode: 'Meter QR Code',
+      qrCode: 'QR Code',
+      qrCodeTip: 'Please screenshot and print, paste it to the meter, meter reader can scan quickly',
+      selectBuilding: 'Please select building',
+      selectUnit: 'Please select unit',
+      selectRoom: 'Please select room',
+      feeTypeRequired: 'Please select fee type',
+      feeItemRequired: 'Please select fee item',
+      preDegreesRequired: 'Please input previous degrees',
+      curDegreesRequired: 'Please input current degrees',
+      preReadingTimeRequired: 'Please select previous reading time',
+      curReadingTimeRequired: 'Please select current reading time',
+      degreesFormatError: 'Degrees format error',
+      degreesCompareError: 'Current degrees cannot be less than previous degrees',
+      remarkMaxLength: 'Remark cannot exceed 500 characters',
+      selectMeterTypeFirst: 'Please select meter type first',
+      downloadStarted: 'Download started',
+      importSuccess: 'Import success'
+    }
+  },
+  zh:{
+    meterWater: {
+      queryConditions: '查询条件',
+      meterReadingInfo: '抄表信息',
+      meterId: '表ID',
+      meterType: '表类型',
+      objectName: '对象名称',
+      preDegrees: '上期度数',
+      curDegrees: '本期度数',
+      preReadingTime: '上期读表时间',
+      curReadingTime: '本期读表时间',
+      createTime: '创建时间',
+      operation: '操作',
+      readMeter: '抄表',
+      qrCodeMeter: '二维码抄表',
+      import1: '抄表导入1',
+      import2: '抄表导入2',
+      selectMeterType: '请选择表类型',
+      inputMeterId: '请输入表ID',
+      query: '查询',
+      reset: '重置',
+      addMeterReading: '添加抄表',
+      editMeterReading: '修改抄表',
+      confirmOperation: '请确认您的操作',
+      confirmDeleteMeterReading: '确定删除抄表',
+      cancel: '点错了',
+      confirmDelete: '确认删除',
+      meterReadingImport: '抄表导入',
+      meterReadingImport2: '抄表导入2',
+      feeType: '费用类型',
+      selectFeeType: '请选择费用类型',
+      feeItem: '收费项目',
+      selectFeeItem: '请选择收费项目',
+      feeItemTip: '说明：显示公式为【(本期度数-上期度数)*单价+附加费】的费用项',
+      meterTypeRequired: '请选择抄表类型',
+      building: '楼栋',
+      unit: '单元',
+      room: '房屋',
+      feeObject: '收费对象',
+      inputRoom: '请填写房屋',
+      inputPreDegrees: '请输入上期度数',
+      inputCurDegrees: '请输入本期度数',
+      selectPreReadingTime: '请选择上期读表时间',
+      selectCurReadingTime: '请选择本期读表时间',
+      price: '单价',
+      inputPrice: '请输入单价',
+      remark: '备注',
+      inputRemark: '请输入备注',
+      unitTip: '注：单元选择为0表示为商铺',
+      save: '保存',
+      selectFile: '选择文件',
+      fileRequired: '请选择数据文件',
+      downloadTemplate: '下载模板',
+      downloadTip: '请先下载',
+      importTemplate: '导入模板',
+      prepareData: '准备数据后，上传导入',
+      dynamicFeeTip: '当收费项目为动态费用时使用',
+      import: '导入',
+      meterQRCode: '抄表二维码',
+      qrCode: '二维码',
+      qrCodeTip: '请截图打印后，粘贴到电表处，抄表人员扫码快速抄表',
+      selectBuilding: '请选择楼栋',
+      selectUnit: '请选择单元',
+      selectRoom: '请选择房屋',
+      feeTypeRequired: '请选择费用类型',
+      feeItemRequired: '请选择收费项目',
+      preDegreesRequired: '请输入上期度数',
+      curDegreesRequired: '请输入本期度数',
+      preReadingTimeRequired: '请选择上期读表时间',
+      curReadingTimeRequired: '请选择本期读表时间',
+      degreesFormatError: '度数格式错误',
+      degreesCompareError: '本期度数不能小于上期度数',
+      remarkMaxLength: '备注不能超过500个字符',
+      selectMeterTypeFirst: '请先选择抄表类型',
+      downloadStarted: '下载已开始',
+      importSuccess: '导入成功'
+    }
+  }
+  
+}
 \ No newline at end of file
+<template>
+  <div class="meter-water-manage-container">
+    <el-row :gutter="20">
+      <el-col :span="4" class="tree-container">
+        <room-tree-div ref="roomTree" @selectRoom="handleSelectRoom" />
+      </el-col>
+      <el-col :span="20">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>{{ $t('meterWater.queryConditions') }}</span>
+          </div>
+          <el-form :inline="true" :model="conditions" class="demo-form-inline">
+            <el-form-item :label="$t('meterWater.meterType')">
+              <el-select v-model="conditions.meterType" :placeholder="$t('meterWater.selectMeterType')" clearable
+                style="width: 100%">
+                <el-option v-for="item in meterTypes" :key="item.typeId" :label="item.typeName" :value="item.typeId" />
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('meterWater.meterId')">
+              <el-input v-model="conditions.waterId" :placeholder="$t('meterWater.inputMeterId')" clearable />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleQuery">{{
+                $t('common.query')
+              }}</el-button>
+              <el-button @click="handleReset">{{ $t('common.reset') }}</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <el-card class="box-card margin-top">
+          <div slot="header" class="clearfix">
+            <span>{{ $t('meterWater.meterReadingInfo') }}</span>
+            <div style="float: right">
+              <el-button v-if="conditions.objId" type="primary" size="small" @click="handleOpenAddMeter">
+                {{ $t('meterWater.readMeter') }}
+              </el-button>
+              <el-button type="text" size="small" @click="handleOpenMeterType">
+                {{ $t('meterWater.meterType') }}
+              </el-button>
+              <el-button v-if="conditions.objId" type="text" size="small" @click="handleOpenQrCode">
+                {{ $t('meterWater.qrCodeMeter') }}
+              </el-button>
+              <el-button type="text" size="small" style="margin-left: 10px" @click="handleOpenImport1">
+                <i class="el-icon-plus"></i>{{ $t('meterWater.import1') }}
+              </el-button>
+              <el-button type="text" size="small" style="margin-left: 10px" @click="handleOpenImport2">
+                <i class="el-icon-plus"></i>{{ $t('meterWater.import2') }}
+              </el-button>
+            </div>
+          </div>
+
+          <el-table :data="meterWaters" border style="width: 100%">
+            <el-table-column prop="waterId" :label="$t('meterWater.meterId')" align="center" />
+            <el-table-column prop="meterTypeName" :label="$t('meterWater.meterType')" align="center" />
+            <el-table-column prop="objName" :label="$t('meterWater.objectName')" align="center" />
+            <el-table-column prop="preDegrees" :label="$t('meterWater.preDegrees')" align="center" />
+            <el-table-column prop="curDegrees" :label="$t('meterWater.curDegrees')" align="center" />
+            <el-table-column prop="preReadingTime" :label="$t('meterWater.preReadingTime')" align="center" />
+            <el-table-column prop="curReadingTime" :label="$t('meterWater.curReadingTime')" align="center" />
+            <el-table-column prop="createTime" :label="$t('meterWater.createTime')" align="center" />
+            <el-table-column :label="$t('common.operation')" align="center" width="180">
+              <template slot-scope="scope">
+                <el-button type="text" size="small" @click="handleEdit(scope.row)">
+                  {{ $t('common.edit') }}
+                </el-button>
+                <el-button type="text" size="small" @click="handleDelete(scope.row)">
+                  {{ $t('common.delete') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <el-pagination :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+            :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 组件 -->
+    <add-meter-water ref="addMeterWater" @success="handleSuccess" />
+    <edit-meter-water ref="editMeterWater" @success="handleSuccess" />
+    <delete-meter-water ref="deleteMeterWater" @success="handleSuccess" />
+    <import-meter-water-fee ref="importMeterWaterFee" />
+    <import-meter-water-fee2 ref="importMeterWaterFee2" />
+    <room-meter-qrcode ref="roomMeterQrcode" />
+  </div>
+</template>
+
+<script>
+import {
+  listMeterWaters,
+  listMeterTypes
+} from '@/api/fee/meterWaterManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import RoomTreeDiv from '@/components/fee/roomTreeDiv'
+import AddMeterWater from '@/components/fee/addMeterWater'
+import EditMeterWater from '@/components/fee/editMeterWater'
+import DeleteMeterWater from '@/components/fee/deleteMeterWater'
+import ImportMeterWaterFee from '@/components/fee/importMeterWaterFee'
+import ImportMeterWaterFee2 from '@/components/fee/importMeterWaterFee2'
+import RoomMeterQrcode from '@/components/fee/roomMeterQrcode'
+
+export default {
+  name: 'MeterWaterManageList',
+  components: {
+    RoomTreeDiv,
+    AddMeterWater,
+    EditMeterWater,
+    DeleteMeterWater,
+    ImportMeterWaterFee,
+    ImportMeterWaterFee2,
+    RoomMeterQrcode
+  },
+  data() {
+    return {
+      conditions: {
+        waterId: '',
+        meterType: '',
+        roomNum: '',
+        objId: '',
+        page: 1,
+        row: 10,
+        communityId: ''
+      },
+      meterWaters: [],
+      meterTypes: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      roomName: ''
+    }
+  },
+  created() {
+    this.conditions.communityId = getCommunityId()
+    this.loadData()
+    this.loadMeterTypes()
+  },
+  methods: {
+    async loadData() {
+      try {
+        const { data, total } = await listMeterWaters(this.conditions)
+        this.meterWaters = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('Failed to load meter waters:', error)
+      }
+    },
+    async loadMeterTypes() {
+      try {
+        const { data } = await listMeterTypes({
+          communityId: this.conditions.communityId,
+          page: 1,
+          row: 100
+        })
+        this.meterTypes = data
+      } catch (error) {
+        console.error('Failed to load meter types:', error)
+      }
+    },
+    handleQuery() {
+      this.conditions.page = 1
+      this.loadData()
+    },
+    handleReset() {
+      this.conditions.waterId = ''
+      this.conditions.meterType = ''
+      this.conditions.roomNum = ''
+      this.loadData()
+    },
+    handleSizeChange(val) {
+      this.conditions.row = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.conditions.page = val
+      this.loadData()
+    },
+    handleSelectRoom({ roomId, roomName }) {
+      this.conditions.objId = roomId
+      this.roomName = roomName
+      this.loadData()
+    },
+    handleOpenAddMeter() {
+      this.$refs.addMeterWater.open({
+        roomId: this.conditions.objId,
+        roomName: this.roomName
+      })
+    },
+    handleEdit(row) {
+      this.$refs.editMeterWater.open(row)
+    },
+    handleDelete(row) {
+      this.$refs.deleteMeterWater.open(row)
+    },
+    handleOpenImport1() {
+      this.$refs.importMeterWaterFee.open()
+    },
+    handleOpenImport2() {
+      this.$refs.importMeterWaterFee2.open()
+    },
+    handleOpenQrCode() {
+      this.$refs.roomMeterQrcode.open({
+        roomId: this.conditions.objId,
+        roomName: this.roomName
+      })
+    },
+    handleOpenMeterType() {
+      this.$router.push('/fee/meterTypeManage')
+    },
+    handleSuccess() {
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.meter-water-manage-container {
+  padding: 20px;
+
+  .tree-container {
+    height: calc(100vh - 120px);
+    overflow-y: auto;
+    background: #fff;
+    padding: 10px;
+    border-radius: 4px;
+  }
+
+  .margin-top {
+    margin-top: 20px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: '';
+  }
+
+  .clearfix:after {
+    clear: both;
+  }
+}
+</style>
 \ No newline at end of file