开发完成水电抄表

wuxw
1 parent cd8d442f
Showing 18 changed files with 2911 additions and 134 deletions
public/js/jessibuca/jessibuca.d.ts
public/js/jessibuca/jessibuca.js
public/js/jessibuca/renderer.js
src/api/fee/meterTypeManageApi.js
src/components/fee/addMeterType.vue
src/components/fee/addMeterWater.vue
src/components/fee/deleteMeterType.vue
src/components/fee/editMeterType.vue
src/components/fee/importMeterWaterFee.vue
src/components/fee/importMeterWaterFee2.vue
src/components/fee/roomMeterQrcode.vue
src/components/fee/roomTreeDiv.vue → src/components/room/roomTreeDiv.vue
src/i18n/feeI18n.js
src/router/feeRouter.js
src/router/index.js
src/views/fee/meterTypeManageLang.js
src/views/fee/meterTypeManageList.vue
src/views/fee/meterWaterManageList.vue
+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,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';
+        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 listMeterType(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/meterType.listMeterType',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加抄表类型
+export function saveMeterType(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/meterType.saveMeterType',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新抄表类型
+export function updateMeterType(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/meterType.updateMeterType',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除抄表类型
+export function deleteMeterType(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/meterType.deleteMeterType',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('meterTypeManage.addTitle')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('meterTypeManage.typeName')" prop="typeName">
+        <el-input
+          v-model="form.typeName"
+          :placeholder="$t('meterTypeManage.typeNamePlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('meterTypeManage.remark')" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          :rows="3"
+          :placeholder="$t('meterTypeManage.remarkPlaceholder')"
+        />
+      </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.confirm') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveMeterType } from '@/api/fee/meterTypeManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddMeterType',
+  data() {
+    return {
+      visible: false,
+      form: {
+        typeName: '',
+        remark: '',
+        communityId: ''
+      },
+      rules: {
+        typeName: [
+          { required: true, message: this.$t('meterTypeManage.typeNameRequired'), trigger: 'blur' },
+          { max: 12, message: this.$t('meterTypeManage.typeNameMaxLength'), trigger: 'blur' }
+        ],
+        remark: [
+          { required: true, message: this.$t('meterTypeManage.remarkRequired'), trigger: 'blur' },
+          { max: 200, message: this.$t('meterTypeManage.remarkMaxLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.form.communityId = getCommunityId()
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.resetFields()
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await saveMeterType(this.form)
+            this.$message.success(this.$t('meterTypeManage.addSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(error.message || this.$t('meterTypeManage.addFailed'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
@@ -202,7 +202,6 @@ export default {
         price: 0,
         communityId: getCommunityId()
       }
-      this.$refs.form && this.$refs.form.resetFields()
     },
     handleClose() {
       this.resetForm()
@@ -211,7 +210,7 @@ export default {
       try {
         const data = await getDict('pay_fee_config', 'fee_type_cd')
         this.feeTypeOptions = data.map(item => ({
-          value: item.value,
+          value: item.name,
           label: item.label
         }))
       } catch (error) {
+<template>
+  <el-dialog
+    :title="$t('meterTypeManage.deleteTitle')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div class="delete-content">
+      <p>{{ $t('meterTypeManage.deleteConfirm') }}</p>
+      <p class="delete-tip">{{ $t('meterTypeManage.deleteTip') }}</p>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleConfirm" :loading="loading">{{ $t('common.confirm') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteMeterType } from '@/api/fee/meterTypeManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteMeterType',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      form: {
+        typeId: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.form = {
+        typeId: row.typeId,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+      this.loading = false
+    },
+    async handleConfirm() {
+      try {
+        this.loading = true
+        await deleteMeterType(this.form)
+        this.$message.success(this.$t('meterTypeManage.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(error.message || this.$t('meterTypeManage.deleteFailed'))
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.delete-content {
+  text-align: center;
+  padding: 20px 0;
+}
+.delete-tip {
+  color: #f56c6c;
+  margin-top: 10px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('meterTypeManage.editTitle')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('meterTypeManage.typeId')" prop="typeId">
+        <el-input v-model="form.typeId" disabled />
+      </el-form-item>
+      <el-form-item :label="$t('meterTypeManage.typeName')" prop="typeName">
+        <el-input
+          v-model="form.typeName"
+          :placeholder="$t('meterTypeManage.typeNamePlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('meterTypeManage.remark')" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          :rows="3"
+          :placeholder="$t('meterTypeManage.remarkPlaceholder')"
+        />
+      </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.confirm') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { updateMeterType } from '@/api/fee/meterTypeManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditMeterType',
+  data() {
+    return {
+      visible: false,
+      form: {
+        typeId: '',
+        typeName: '',
+        remark: '',
+        communityId: ''
+      },
+      rules: {
+        typeId: [
+          { required: true, message: this.$t('meterTypeManage.typeIdRequired'), trigger: 'blur' }
+        ],
+        typeName: [
+          { required: true, message: this.$t('meterTypeManage.typeNameRequired'), trigger: 'blur' },
+          { max: 12, message: this.$t('meterTypeManage.typeNameMaxLength'), trigger: 'blur' }
+        ],
+        remark: [
+          { required: true, message: this.$t('meterTypeManage.remarkRequired'), trigger: 'blur' },
+          { max: 200, message: this.$t('meterTypeManage.remarkMaxLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.form = {
+        ...row,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate()
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await updateMeterType(this.form)
+            this.$message.success(this.$t('meterTypeManage.editSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(error.message || this.$t('meterTypeManage.editFailed'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
@@ -147,8 +147,8 @@ export default {
       try {
         const data = await getDict('pay_fee_config', 'fee_type_cd')
         this.feeTypeOptions = data.map(item => ({
-          value: item.value,
-          label: item.label
+          value: item.statusCd,
+          label: item.name
         }))
       } catch (error) {
         console.error('Failed to load fee types:', error)
@@ -148,8 +148,8 @@ export default {
       try {
         const data = await getDict('pay_fee_config', 'fee_type_cd')
         this.feeTypeOptions = data.map(item => ({
-          value: item.value,
-          label: item.label
+          value: item.statusCd,
+          label: item.name
         }))
       } catch (error) {
         console.error('Failed to load fee types:', error)
 <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-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 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 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') }}
@@ -48,27 +19,14 @@
       </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 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-input v-model="form.ownerName" :placeholder="$t('meterWater.inputRoom')" disabled />
       </el-form-item>
  
       <el-form-item v-if="showQRCode" :label="$t('meterWater.qrCode')">
@@ -138,8 +96,8 @@ export default {
       this.resetForm()
       if (params) {
         this.form.roomId = params.roomId
-        this.form.ownerName = params.ownerName 
-          ? `${params.roomName}(${params.ownerName})` 
+        this.form.ownerName = params.ownerName
+          ? `${params.roomName}(${params.ownerName})`
           : params.roomName
       }
       this.dialogVisible = true
@@ -155,7 +113,6 @@ export default {
         communityId: getCommunityId()
       }
       this.showQRCode = false
-      this.$refs.form && this.$refs.form.resetFields()
       this.clearQRCode()
     },
     handleClose() {
@@ -171,8 +128,8 @@ export default {
       try {
         const data = await getDict('pay_fee_config', 'fee_type_cd')
         this.feeTypeOptions = data.map(item => ({
-          value: item.value,
-          label: item.label
+          value: item.statusCd,
+          label: item.name
         }))
       } catch (error) {
         console.error('Failed to load fee types:', error)
@@ -41,45 +41,44 @@ export default {
         this.buildTreeData(units)
       } catch (error) {
         console.error('Failed to load tree data:', error)
+        this.$message.error(this.$t('roomTree.loadError'))
       }
     },
     buildTreeData(units) {
-      const treeMap = new Map()
+      const floorMap = {}
  
-      // Build floor nodes
+      // Build floor nodes and unit nodes
       units.forEach(unit => {
-        if (!treeMap.has(unit.floorId)) {
-          treeMap.set(unit.floorId, {
+        if (!floorMap[unit.floorId]) {
+          floorMap[unit.floorId] = {
             id: `f_${unit.floorId}`,
             floorId: unit.floorId,
             floorNum: unit.floorNum,
-            icon: 'el-icon-office-building',
-            text: `${unit.floorNum}栋`,
+            icon: "/img/floor.png",
+            text: `${unit.floorNum}${this.$t('room.floorUnitTree.building')}`,
             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: []
-          })
-        }
+        floorMap[unit.floorId].children.push({
+          id: `u_${unit.unitId}`,
+          unitId: unit.unitId,
+          unitNum: unit.unitNum,
+          floorId: unit.floorId, // Add floorId reference
+          icon: "/img/unit.png",
+          text: `${unit.unitNum}${this.$t('room.floorUnitTree.unit')}`,
+          children: []
+        })
       })
  
-      this.treeData = Array.from(treeMap.values())
+      this.treeData = Object.values(floorMap)
     },
-    async handleNodeClick(data) {
+    async handleNodeClick(data, node) {
       if (data.id.startsWith('u_')) {
-        await this.loadRooms(data)
+        if (!node.expanded) {
+          await this.loadRooms(data, node)
+          node.expanded = true
+        }
       } else if (data.id.startsWith('r_')) {
         this.$emit('selectRoom', {
           roomId: data.roomId,
@@ -87,48 +86,32 @@ export default {
         })
       }
     },
-    async loadRooms(node) {
+    async loadRooms(unitData, node) {
       try {
-        const {rooms} = await queryRoomsTree({
-          unitId: node.unitId,
+        const { rooms } = await queryRoomsTree({
+          unitId: unitData.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}室`
-        }))
+        if (rooms && rooms.length > 0) {
+          const roomNodes = rooms.map(room => ({
+            id: `r_${room.roomId}`,
+            roomId: room.roomId,
+            roomName: `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
+            icon: "/img/room.png",
+            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
-              })
-            }
-          }
+          // Update the node's children
+          this.$set(node.data, 'children', roomNodes)
         }
       } catch (error) {
         console.error('Failed to load rooms:', error)
+        this.$message.error(this.$t('roomTree.loadRoomError'))
       }
     }
   }
 import { messages as contractCreateFeeMessages } from '../views/fee/contractCreateFeeLang'
 import { messages as meterWaterManageMessages } from '../views/fee/meterWaterManageLang'
+import { messages as meterTypeManageMessages } from '../views/fee/meterTypeManageLang'
 export const messages = {
     en: {
         ...contractCreateFeeMessages.en,
         ...meterWaterManageMessages.en,
+        ...meterTypeManageMessages.en,
     },
     zh: {
         ...contractCreateFeeMessages.zh,
         ...meterWaterManageMessages.zh,
+        ...meterTypeManageMessages.zh,
     }
 }
 \ No newline at end of file
 export default [
     {
-        path:'/pages/property/contractCreateFee',
-        name:'/pages/property/contractCreateFee',
+        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')
-            },
+    },
+    {
+        path: '/pages/property/meterWaterManage',
+        name: '/pages/property/meterWaterManage',
+        component: () => import('@/views/fee/meterWaterManageList.vue')
+    },
+    {
+        path: '/views/fee/meterTypeManage',
+        name: '/views/fee/meterTypeManage',
+        component: () => import('@/views/fee/meterTypeManageList.vue')
+    },
 ]
 \ No newline at end of file
@@ -688,7 +688,7 @@ const router = new VueRouter({
 // 路由守卫
 router.beforeEach((to, from, next) => {
   // 排除静态资源路径
-  if (to.path.startsWith('/img/') || to.path.startsWith('/static/')) {
+  if (to.path.startsWith('/img/') || to.path.startsWith('/static/') || to.path.startsWith('/js/')) {
     return next(); // 直接放行
   }
   if (to.path.endsWith('.xlsx')) {
+export const messages = {
+  en: {
+    meterTypeManage: {
+      title: 'Meter Type Management',
+      typeId: 'Meter Type ID',
+      typeName: 'Name',
+      remark: 'Description',
+      createTime: 'Create Time',
+      operation: 'Operation',
+      tip: 'If a property has multiple electricity/water meters, you can create multiple types here, e.g. Electricity Meter 1, Electricity Meter 2',
+      addTitle: 'Add Meter Type',
+      editTitle: 'Edit Meter Type',
+      deleteTitle: 'Confirm Operation',
+      deleteConfirm: 'Are you sure to delete this meter type?',
+      deleteTip: 'This operation cannot be undone!',
+      typeNamePlaceholder: 'Required, please enter name',
+      remarkPlaceholder: 'Required, please enter description',
+      typeNameRequired: 'Name is required',
+      typeNameMaxLength: 'Name cannot exceed 12 characters',
+      remarkRequired: 'Description is required',
+      remarkMaxLength: 'Description cannot exceed 200 characters',
+      typeIdRequired: 'Meter Type ID is required',
+      addSuccess: 'Added successfully',
+      addFailed: 'Failed to add',
+      editSuccess: 'Updated successfully',
+      editFailed: 'Failed to update',
+      deleteSuccess: 'Deleted successfully',
+      deleteFailed: 'Failed to delete',
+      fetchError: 'Failed to fetch data'
+    }
+  },
+  zh: {
+    meterTypeManage: {
+      title: '抄表类型管理',
+      typeId: '抄表类型ID',
+      typeName: '名称',
+      remark: '说明',
+      createTime: '创建时间',
+      operation: '操作',
+      tip: '如果一个房屋有多个电表水表可以在这里新建多个 比如电表1 电表2',
+      addTitle: '添加抄表类型',
+      editTitle: '修改抄表类型',
+      deleteTitle: '确认操作',
+      deleteConfirm: '确定删除该抄表类型吗？',
+      deleteTip: '此操作不可撤销！',
+      typeNamePlaceholder: '必填，请填写名称',
+      remarkPlaceholder: '必填，请填写说明',
+      typeNameRequired: '名称不能为空',
+      typeNameMaxLength: '名称不能超过12个字符',
+      remarkRequired: '说明不能为空',
+      remarkMaxLength: '说明不能超过200个字符',
+      typeIdRequired: '抄表类型ID不能为空',
+      addSuccess: '添加成功',
+      addFailed: '添加失败',
+      editSuccess: '修改成功',
+      editFailed: '修改失败',
+      deleteSuccess: '删除成功',
+      deleteFailed: '删除失败',
+      fetchError: '获取数据失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="meter-type-manage-container">
+    <el-card class="box-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('meterTypeManage.title') }}</span>
+        <div class="header-tools">
+          <el-button type="primary" size="small" @click="openAddMeterTypeModal">
+            <i class="el-icon-plus"></i>{{ $t('common.add') }}
+          </el-button>
+          <el-button size="small" @click="goBack">{{ $t('common.back') }}</el-button>
+        </div>
+      </div>
+
+      <el-table v-loading="loading" :data="meterTypeList" border style="width: 100%">
+        <el-table-column prop="typeId" :label="$t('meterTypeManage.typeId')" align="center" />
+        <el-table-column prop="typeName" :label="$t('meterTypeManage.typeName')" align="center" />
+        <el-table-column prop="remark" :label="$t('meterTypeManage.remark')" align="center" />
+        <el-table-column prop="createTime" :label="$t('meterTypeManage.createTime')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="openEditMeterTypeModal(scope.row)">{{ $t('common.edit') }}</el-button>
+            <el-button size="mini" type="danger" @click="openDeleteMeterTypeModal(scope.row)">{{ $t('common.delete')
+              }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="18" class="text-left">
+          <div>{{ $t('meterTypeManage.tip') }}</div>
+        </el-col>
+        <el-col :span="6">
+          <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-col>
+      </el-row>
+    </el-card>
+
+    <add-meter-type ref="addMeterType" @success="handleSuccess" />
+    <edit-meter-type ref="editMeterType" @success="handleSuccess" />
+    <delete-meter-type ref="deleteMeterType" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { listMeterType } from '@/api/fee/meterTypeManageApi'
+import AddMeterType from '@/components/fee/addMeterType'
+import EditMeterType from '@/components/fee/editMeterType'
+import DeleteMeterType from '@/components/fee/deleteMeterType'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'MeterTypeManageList',
+  components: {
+    AddMeterType,
+    EditMeterType,
+    DeleteMeterType
+  },
+  data() {
+    return {
+      loading: false,
+      meterTypeList: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          communityId: this.communityId
+        }
+        const { data, total } = await listMeterType(params)
+        this.meterTypeList = data
+        this.pagination.total = total
+      } catch (error) {
+        this.$message.error(this.$t('meterTypeManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    openAddMeterTypeModal() {
+      this.$refs.addMeterType.open()
+    },
+    openEditMeterTypeModal(row) {
+      this.$refs.editMeterType.open(row)
+    },
+    openDeleteMeterTypeModal(row) {
+      this.$refs.deleteMeterType.open(row)
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.meter-type-manage-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .header-tools {
+    float: right;
+    margin-top: -5px;
+  }
+
+  .margin-top {
+    margin-top: 20px;
+  }
+}
+</style>
 \ No newline at end of file
@@ -6,7 +6,7 @@
       </el-col>
       <el-col :span="20">
         <el-card class="box-card">
-          <div slot="header" class="clearfix">
+          <div slot="header" class="flex justify-between">
             <span>{{ $t('meterWater.queryConditions') }}</span>
           </div>
           <el-form :inline="true" :model="conditions" class="demo-form-inline">
@@ -29,7 +29,7 @@
         </el-card>
  
         <el-card class="box-card margin-top">
-          <div slot="header" class="clearfix">
+          <div slot="header" class="flex justify-between">
             <span>{{ $t('meterWater.meterReadingInfo') }}</span>
             <div style="float: right">
               <el-button v-if="conditions.objId" type="primary" size="small" @click="handleOpenAddMeter">
@@ -94,7 +94,7 @@ import {
   listMeterTypes
 } from '@/api/fee/meterWaterManageApi'
 import { getCommunityId } from '@/api/community/communityApi'
-import RoomTreeDiv from '@/components/fee/roomTreeDiv'
+import RoomTreeDiv from '@/components/room/roomTreeDiv'
 import AddMeterWater from '@/components/fee/addMeterWater'
 import EditMeterWater from '@/components/fee/editMeterWater'
 import DeleteMeterWater from '@/components/fee/deleteMeterWater'
@@ -209,7 +209,7 @@ export default {
       })
     },
     handleOpenMeterType() {
-      this.$router.push('/fee/meterTypeManage')
+      this.$router.push('/views/fee/meterTypeManage')
     },
     handleSuccess() {
       this.loadData()