开发我的小区下的功能

wuxw
1 parent ce5e1a2a
Showing 64 changed files with 8758 additions and 0 deletions
public/index.html
public/js/jessibuca/jessibuca.d.ts
public/js/jessibuca/jessibuca.js
public/js/jessibuca/renderer.js
src/api/car/carStructureApi.js
src/api/fee/payFeeQrcodeApi.js
src/api/machine/videoControlApi.js
src/api/room/listPropertyRightRegistrationDetailApi.js
src/api/room/propertyRightRegistrationManageApi.js
src/api/room/roomStructureApi.js
src/api/system/assetImportLogApi.js
src/api/system/assetImportLogDetailApi.js
src/api/system/downloadTempFileApi.js
src/api/system/feePrintPageManageApi.js
src/components/TestScript.vue
src/components/fee/addPayFeeQrcode.vue
src/components/fee/deletePayFeeQrcode.vue
src/components/fee/editPayFeeQrcode.vue
src/components/fee/viewPayFeeQrcode.vue
src/components/machine/cameraControlVideo.vue
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <!-- 全局脚本引入 -->
+  <script>
+    // 脚本加载错误处理
+    window.scriptLoadErrors = [];
+    
+    function handleScriptError(scriptName, error) {
+      console.error('脚本加载失败:', scriptName, error);
+      window.scriptLoadErrors.push({ name: scriptName, error: error.message });
+    }
+  </script>
+  <script src="https://map.qq.com/api/gljs?v=1.exp&key="></script>
+
+  <!-- Qs 库 - 主 CDN -->
+  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.3/qs.min.js" 
+          onerror="handleScriptError('Qs-bootcdn', new Error('bootcdn 加载失败'))"></script>
+  <script src="/js/jessibuca/jessibuca.js"></script>
+
+
+  
+  <!-- 可以在这里添加更多全局脚本 -->
+</head>
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
 \ No newline at end of file
+declare namespace Jessibuca {
+
+    /** 超时信息 */
+    enum TIMEOUT {
+        /** 当play()的时候，如果没有数据返回 */
+        loadingTimeout = 'loadingTimeout',
+        /** 当播放过程中，如果超过timeout之后没有数据渲染 */
+        delayTimeout = 'delayTimeout',
+    }
+
+    /** 错误信息 */
+    enum ERROR {
+        /** 播放错误，url 为空的时候，调用 play 方法 */
+        playError = 'playError',
+        /** http 请求失败 */
+        fetchError = 'fetchError',
+        /** websocket 请求失败 */
+        websocketError = 'websocketError',
+        /** webcodecs 解码 h265 失败 */
+        webcodecsH265NotSupport = 'webcodecsH265NotSupport',
+        /** mediaSource 解码 h265 失败 */
+        mediaSourceH265NotSupport = 'mediaSourceH265NotSupport',
+        /** wasm 解码失败 */
+        wasmDecodeError = 'wasmDecodeError',
+    }
+
+    interface Config {
+        /**
+         * 播放器容器
+         * *  若为 string ，则底层调用的是 document.getElementById('id')
+         * */
+        container: HTMLElement | string;
+        /**
+         * 设置最大缓冲时长，单位秒，播放器会自动消除延迟
+         */
+        videoBuffer?: number;
+        /**
+         * worker地址
+         * *  默认引用的是根目录下面的decoder.js文件 ，decoder.js 与 decoder.wasm文件必须是放在同一个目录下面。 */
+        decoder?: string;
+        /**
+         * 是否不使用离屏模式（提升渲染能力）
+         */
+        forceNoOffscreen?: boolean;
+        /**
+         * 是否开启当页面的'visibilityState'变为'hidden'的时候，自动暂停播放。
+         */
+        hiddenAutoPause?: boolean;
+        /**
+         * 是否有音频，如果设置`false`，则不对音频数据解码，提升性能。
+         */
+        hasAudio?: boolean;
+        /**
+         * 设置旋转角度，只支持，0(默认)，180，270 三个值
+         */
+        rotate?: boolean;
+        /**
+         * 1. 当为`true`的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。 等同于 `setScaleMode(1)`
+         * 2. 当为`false`的时候：视频画面完全填充canvas区域,画面会被拉伸。等同于 `setScaleMode(0)`
+         */
+        isResize?: boolean;
+        /**
+         * 1. 当为`true`的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全。等同于 `setScaleMode(2)`
+         */
+        isFullResize?: boolean;
+        /**
+         * 1. 当为`true`的时候：ws协议不检验是否以.flv为依据，进行协议解析。
+         */
+        isFlv?: boolean;
+        /**
+         * 是否开启控制台调试打
+         */
+        debug?: boolean;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件
+         */
+        timeout?: number;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
+         */
+        heartTimeout?: number;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
+         */
+        loadingTimeout?: number;
+        /**
+         * 是否支持屏幕的双击事件，触发全屏，取消全屏事件
+         */
+        supportDblclickFullscreen?: boolean;
+        /**
+         * 是否显示网
+         */
+        showBandwidth?: boolean;
+        /**
+         * 配置操作按钮
+         */
+        operateBtns?: {
+            /** 是否显示全屏按钮 */
+            fullscreen?: boolean;
+            /** 是否显示截图按钮 */
+            screenshot?: boolean;
+            /** 是否显示播放暂停按钮 */
+            play?: boolean;
+            /** 是否显示声音按钮 */
+            audio?: boolean;
+            /** 是否显示录制按 */
+            record?: boolean;
+        };
+        /**
+         * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
+         */
+        keepScreenOn?: boolean;
+        /**
+         * 是否开启声音，默认是关闭声音播放的
+         */
+        isNotMute?: boolean;
+        /**
+         * 加载过程中文案
+         */
+        loadingText?: string;
+        /**
+         * 背景图片
+         */
+        background?: string;
+        /**
+         * 是否开启MediaSource硬解码
+         * * 视频编码只支持H.264视频（Safari on iOS不支持）
+         * * 不支持 forceNoOffscreen 为 false (开启离屏渲染)
+         */
+        useMSE?: boolean;
+        /**
+         * 是否开启Webcodecs硬解码
+         * *  视频编码只支持H.264视频 (需在chrome 94版本以上，需要https或者localhost环境)
+         * *  支持 forceNoOffscreen 为 false （开启离屏渲染)
+         * */
+        useWCS?: boolean;
+        /**
+         * 是否开启键盘快捷键
+         * 目前支持的键盘快捷键有：esc -> 退出全屏；arrowUp -> 声音增加；arrowDown -> 声音减少；
+         */
+        hotKey?: boolean;
+        /**
+         *  在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
+         *  设置为false 则直接关闭播放，抛出Error 异常，设置为true 则会自动切换成wasm模式播放。
+         */
+        autoWasm?: boolean;
+        /**
+         * heartTimeout 心跳超时之后自动再播放,不再抛出异常，而直接重新播放视频地址。
+         */
+        heartTimeoutReplay?: boolean,
+        /**
+         * heartTimeoutReplay 从试次数，超过之后，不再自动播放
+         */
+        heartTimeoutReplayTimes?: number,
+        /**
+         * loadingTimeout loading之后自动再播放,不再抛出异常，而直接重新播放视频地址。
+         */
+        loadingTimeoutReplay?: boolean,
+        /**
+         * heartTimeoutReplay 从试次数，超过之后，不再自动播放
+         */
+        loadingTimeoutReplayTimes?: number
+        /**
+         * wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
+         */
+        wasmDecodeErrorReplay?: boolean,
+        /**
+         * https://github.com/langhuihui/jessibuca/issues/152 解决方案
+         * 例如：WebGL图像预处理默认每次取4字节的数据，但是540x960分辨率下的U、V分量宽度是540/2=270不能被4整除，导致绿屏。
+         */
+        openWebglAlignment?: boolean
+    }
+}
+
+
+declare class Jessibuca {
+
+    constructor(config?: Jessibuca.Config);
+
+    /**
+     * 是否开启控制台调试打印
+     @example
+     // 开启
+     jessibuca.setDebug(true)
+     // 关闭
+     jessibuca.setDebug(false)
+     */
+    setDebug(flag: boolean): void;
+
+    /**
+     * 静音
+     @example
+     jessibuca.mute()
+     */
+    mute(): void;
+
+    /**
+     * 取消静音
+     @example
+     jessibuca.cancelMute()
+     */
+    cancelMute(): void;
+
+    /**
+     * 留给上层用户操作来触发音频恢复的方法。
+     *
+     * iPhone，chrome等要求自动播放时，音频必须静音，需要由一个真实的用户交互操作来恢复，不能使用代码。
+     *
+     * https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
+     */
+    audioResume(): void;
+
+    /**
+     *
+     * 设置超时时长, 单位秒
+     * 在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
+
+     @example
+     jessibuca.setTimeout(10)
+
+     jessibuca.on('timeout',function(){
+        //
+    });
+     */
+    setTimeout(): void;
+
+    /**
+     * @param mode
+     *      0 视频画面完全填充canvas区域,画面会被拉伸  等同于参数 `isResize` 为false
+     *
+     *      1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 `isResize` 为true
+     *
+     *      2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 `isFullResize` 为true
+     @example
+     jessibuca.setScaleMode(0)
+
+     jessibuca.setScaleMode(1)
+
+     jessibuca.setScaleMode(2)
+     */
+    setScaleMode(mode: number): void;
+
+    /**
+     * 暂停播放
+     *
+     * 可以在pause 之后，再调用 `play()`方法就继续播放之前的流。
+     @example
+     jessibuca.pause().then(()=>{
+        console.log('pause success')
+
+        jessibuca.play().then(()=>{
+
+        }).catch((e)=>{
+
+        })
+
+    }).catch((e)=>{
+        console.log('pause error',e);
+    })
+     */
+    pause(): Promise<void>;
+
+    /**
+     * 关闭视频,不释放底层资源
+     @example
+     jessibuca.close();
+     */
+    close(): void;
+
+    /**
+     * 关闭视频，释放底层资源
+     @example
+     jessibuca.destroy()
+     */
+    destroy(): void;
+
+    /**
+     * 清理画布为黑色背景
+     @example
+     jessibuca.clearView()
+     */
+    clearView(): void;
+
+    /**
+     * 播放视频
+     @example
+
+     jessibuca.play('url').then(()=>{
+        console.log('play success')
+    }).catch((e)=>{
+        console.log('play error',e)
+    })
+     //
+     jessibuca.play()
+     */
+    play(url?: string): Promise<void>;
+
+    /**
+     * 重新调整视图大小
+     */
+    resize(): void;
+
+    /**
+     * 设置最大缓冲时长，单位秒，播放器会自动消除延迟。
+     *
+     * 等同于 `videoBuffer` 参数。
+     *
+     @example
+     // 设置 200ms 缓冲
+     jessibuca.setBufferTime(0.2)
+     */
+    setBufferTime(time: number): void;
+
+    /**
+     * 设置旋转角度，只支持，0(默认) ，180，270 三个值。
+     *
+     * > 可用于实现监控画面小窗和全屏效果，由于iOS没有全屏API，此方法可以模拟页面内全屏效果而且多端效果一致。   *
+     @example
+     jessibuca.setRotate(0)
+
+     jessibuca.setRotate(90)
+
+     jessibuca.setRotate(270)
+     */
+    setRotate(deg: number): void;
+
+    /**
+     *
+     * 设置音量大小，取值0 — 1
+     *
+     * > 区别于 mute 和 cancelMute 方法，虽然设置setVolume(0) 也能达到 mute方法，但是mute 方法是不调用底层播放音频的，能提高性能。而setVolume(0)只是把声音设置为0 ，以达到效果。
+     * @param volume 当为0时，完全无声;当为1时，最大音量，默认值
+     @example
+     jessibuca.setVolume(0.2)
+
+     jessibuca.setVolume(0)
+
+     jessibuca.setVolume(1)
+     */
+    setVolume(volume: number): void;
+
+    /**
+     * 返回是否加载完毕
+     @example
+     var result = jessibuca.hasLoaded()
+     console.log(result) // true
+     */
+    hasLoaded(): boolean;
+
+    /**
+     * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。
+     * H5目前在chrome\edge 84, android chrome 84及以上有原生亮屏API, 需要是https页面
+     * 其余平台为模拟实现，此时为兼容实现，并不保证所有浏览器都支持
+     @example
+     jessibuca.setKeepScreenOn()
+     */
+    setKeepScreenOn(): boolean;
+
+    /**
+     * 全屏(取消全屏)播放视频
+     @example
+     jessibuca.setFullscreen(true)
+     //
+     jessibuca.setFullscreen(false)
+     */
+    setFullscreen(flag: boolean): void;
+
+    /**
+     *
+     * 截图，调用后弹出下载框保存截图
+     * @param filename 可选参数, 保存的文件名, 默认 `时间戳`
+     * @param format   可选参数, 截图的格式，可选png或jpeg或者webp ,默认 `png`
+     * @param quality  可选参数, 当格式是jpeg或者webp时，压缩质量，取值0 ~ 1 ,默认 `0.92`
+     * @param type 可选参数, 可选download或者base64或者blob，默认`download`
+
+     @example
+
+     jessibuca.screenshot("test","png",0.5)
+
+     const base64 = jessibuca.screenshot("test","png",0.5,'base64')
+
+     const fileBlob = jessibuca.screenshot("test",'blob')
+     */
+    screenshot(filename?: string, format?: string, quality?: number, type?: string): void;
+
+    /**
+     * 开始录制。
+     * @param fileName 可选，默认时间戳
+     * @param fileType 可选，默认webm，支持webm 和mp4 格式
+
+     @example
+     jessibuca.startRecord('xxx','webm')
+     */
+    startRecord(fileName: string, fileType: string): void;
+
+    /**
+     * 暂停录制并下载。
+     @example
+     jessibuca.stopRecordAndSave()
+     */
+    stopRecordAndSave(): void;
+
+    /**
+     * 返回是否正在播放中状态。
+     @example
+     var result = jessibuca.isPlaying()
+     console.log(result) // true
+     */
+    isPlaying(): boolean;
+
+    /**
+     *   返回是否静音。
+     @example
+     var result = jessibuca.isMute()
+     console.log(result) // true
+     */
+    isMute(): boolean;
+
+    /**
+     * 返回是否正在录制。
+     @example
+     var result = jessibuca.isRecording()
+     console.log(result) // true
+     */
+    isRecording(): boolean;
+
+
+    /**
+     * 监听 jessibuca 初始化事件
+     * @example
+     * jessibuca.on("load",function(){console.log('load')})
+     */
+    on(event: 'load', callback: () => void): void;
+
+    /**
+     * 视频播放持续时间，单位ms
+     * @example
+     * jessibuca.on('timeUpdate',function (ts) {console.log('timeUpdate',ts);})
+     */
+    on(event: 'timeUpdate', callback: () => void): void;
+
+    /**
+     * 当解析出视频信息时回调，2个回调参数
+     * @example
+     * jessibuca.on("videoInfo",function(data){console.log('width:',data.width,'height:',data.width)})
+     */
+    on(event: 'videoInfo', callback: (data: {
+        /** 视频宽 */
+        width: number;
+        /** 视频高 */
+        height: number;
+    }) => void): void;
+
+    /**
+     * 当解析出音频信息时回调，2个回调参数
+     * @example
+     * jessibuca.on("audioInfo",function(data){console.log('numOfChannels:',data.numOfChannels,'sampleRate',data.sampleRate)})
+     */
+    on(event: 'audioInfo', callback: (data: {
+        /** 声频通道 */
+        numOfChannels: number;
+        /** 采样率 */
+        sampleRate: number;
+    }) => void): void;
+
+    /**
+     * 信息，包含错误信息
+     * @example
+     * jessibuca.on("log",function(data){console.log('data:',data)})
+     */
+    on(event: 'log', callback: () => void): void;
+
+    /**
+     * 错误信息
+     * @example
+     * jessibuca.on("error",function(error){
+        if(error === Jessibuca.ERROR.fetchError){
+            //
+        }
+        else if(error === Jessibuca.ERROR.webcodecsH265NotSupport){
+            //
+        }
+        console.log('error:',error)
+    })
+     */
+    on(event: 'error', callback: (err: Jessibuca.ERROR) => void): void;
+
+    /**
+     * 当前网速， 单位KB 每秒1次,
+     * @example
+     * jessibuca.on("kBps",function(data){console.log('kBps:',data)})
+     */
+    on(event: 'kBps', callback: (value: number) => void): void;
+
+    /**
+     * 渲染开始
+     * @example
+     * jessibuca.on("start",function(){console.log('start render')})
+     */
+    on(event: 'start', callback: () => void): void;
+
+    /**
+     * 当设定的超时时间内无数据返回,则回调
+     * @example
+     * jessibuca.on("timeout",function(error){console.log('timeout:',error)})
+     */
+    on(event: 'timeout', callback: (error: Jessibuca.TIMEOUT) => void): void;
+
+    /**
+     * 当play()的时候，如果没有数据返回，则回调
+     * @example
+     * jessibuca.on("loadingTimeout",function(){console.log('timeout')})
+     */
+    on(event: 'loadingTimeout', callback: () => void): void;
+
+    /**
+     * 当播放过程中，如果超过timeout之后没有数据渲染，则抛出异常。
+     * @example
+     * jessibuca.on("delayTimeout",function(){console.log('timeout')})
+     */
+    on(event: 'delayTimeout', callback: () => void): void;
+
+    /**
+     * 当前是否全屏
+     * @example
+     * jessibuca.on("fullscreen",function(flag){console.log('is fullscreen',flag)})
+     */
+    on(event: 'fullscreen', callback: () => void): void;
+
+    /**
+     * 触发播放事件
+     * @example
+     * jessibuca.on("play",function(flag){console.log('play')})
+     */
+    on(event: 'play', callback: () => void): void;
+
+    /**
+     * 触发暂停事件
+     * @example
+     * jessibuca.on("pause",function(flag){console.log('pause')})
+     */
+    on(event: 'pause', callback: () => void): void;
+
+    /**
+     * 触发声音事件，返回boolean值
+     * @example
+     * jessibuca.on("mute",function(flag){console.log('is mute',flag)})
+     */
+    on(event: 'mute', callback: () => void): void;
+
+    /**
+     * 流状态统计，流开始播放后回调，每秒1次。
+     * @example
+     * jessibuca.on("stats",function(s){console.log("stats is",s)})
+     */
+    on(event: 'stats', callback: (stats: {
+        /** 当前缓冲区时长，单位毫秒 */
+        buf: number;
+        /** 当前视频帧率 */
+        fps: number;
+        /** 当前音频码率，单位byte */
+        abps: number;
+        /** 当前视频码率，单位byte */
+        vbps: number;
+        /** 当前视频帧pts，单位毫秒 */
+        ts: number;
+    }) => void): void;
+
+    /**
+     * 渲染性能统计，流开始播放后回调，每秒1次。
+     * @param performance 0: 表示卡顿,1: 表示流畅,2: 表示非常流程
+     * @example
+     * jessibuca.on("performance",function(performance){console.log("performance is",performance)})
+     */
+    on(event: 'performance', callback: (performance: 0 | 1 | 2) => void): void;
+
+    /**
+     * 录制开始的事件
+
+     * @example
+     * jessibuca.on("recordStart",function(){console.log("record start")})
+     */
+    on(event: 'recordStart', callback: () => void): void;
+
+    /**
+     * 录制结束的事件
+
+     * @example
+     * jessibuca.on("recordEnd",function(){console.log("record end")})
+     */
+    on(event: 'recordEnd', callback: () => void): void;
+
+    /**
+     * 录制的时候，返回的录制时长，1s一次
+
+     * @example
+     * jessibuca.on("recordingTimestamp",function(timestamp){console.log("recordingTimestamp is",timestamp)})
+     */
+    on(event: 'recordingTimestamp', callback: (timestamp: number) => void): void;
+
+    /**
+     * 监听调用play方法 经过 初始化-> 网络请求-> 解封装 -> 解码 -> 渲染 一系列过程的时间消耗
+     * @param event
+     * @param callback
+     */
+    on(event: 'playToRenderTimes', callback: (times: {
+        playInitStart: number, // 1 初始化
+        playStart: number, // 2 初始化
+        streamStart: number, // 3 网络请求
+        streamResponse: number, // 4 网络请求
+        demuxStart: number, // 5 解封装
+        decodeStart: number, // 6 解码
+        videoStart: number, // 7 渲染
+        playTimestamp: number,// playStart- playInitStart
+        streamTimestamp: number,// streamStart - playStart
+        streamResponseTimestamp: number,// streamResponse - streamStart
+        demuxTimestamp: number, // demuxStart - streamResponse
+        decodeTimestamp: number, // decodeStart - demuxStart
+        videoTimestamp: number,// videoStart - decodeStart
+        allTimestamp: number // videoStart - playInitStart
+    }) => void): void
+
+    /**
+     * 监听方法
+     *
+     @example
+
+     jessibuca.on("load",function(){console.log('load')})
+     */
+    on(event: string, callback: Function): void;
+
+}
+
+export default Jessibuca;
+!(function () {
+    /**
+     * @param opt
+     *        container: DOM 容器
+     *        contextOptions：
+     *        videoBuffer：
+     *        forceNoGL：
+     *        isNotMute：
+     *        decoder：
+     * @constructor
+     */
+    function Jessibuca(opt) {
+        this._opt = opt;
+
+        if (typeof opt.container === "string") {
+            this._opt.container = document.getElementById(opt.container);
+        }
+        if (!this._opt.container) {
+            throw new Error('Jessibuca need container option');
+            return;
+        }
+
+        this._canvasElement = document.createElement("canvas");
+        this._canvasElement.style.position = "absolute";
+        this._canvasElement.style.top = 0;
+        this._canvasElement.style.left = 0;
+        this._opt.container.appendChild(this._canvasElement);
+        this._container = this._opt.container;
+        this._container.style.overflow = "hidden";
+        this._containerOldPostion = {
+            position: this._container.style.position,
+            top: this._container.style.top,
+            left: this._container.style.left,
+            width: this._container.style.width,
+            height: this._container.style.height
+        }
+        if (this._containerOldPostion.position != "absolute") {
+            this._container.style.position = "relative"
+        }
+        this._opt.videoBuffer = opt.videoBuffer || 0;
+        this._opt.text = opt.text || '';
+        //
+        this._opt.isResize = opt.isResize === false ? opt.isResize : true;
+        this._opt.isFullResize = opt.isFullResize === true ? opt.isFullResize : false;
+        this._opt.isDebug = opt.debug === true;
+        this._opt.timeout = typeof opt.timeout === 'number' ? opt.timeout : 30;
+        this._opt.supportDblclickFullscreen = opt.supportDblclickFullscreen === true;
+        this._opt.showBandwidth = opt.showBandwidth === true;
+        this._opt.operateBtns = Object.assign({
+            fullscreen: false,
+            screenshot: false,
+            play: false,
+            audio: false
+        }, opt.operateBtns || {});
+        this._opt.keepScreenOn = opt.keepScreenOn === true;
+
+        if (!opt.forceNoGL) this._initContextGL();
+        this._audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        this._audioEnabled(true);
+        if (!opt.isNotMute) this._audioEnabled(false);
+        if (this._contextGL) {
+            this._initProgram();
+            this._initBuffers();
+            this._initTextures();
+        }
+        this._onresize = () => this.resize();
+        this._onfullscreenchange = () => this._fullscreenchange();
+        window.addEventListener("resize", this._onresize);
+        document.addEventListener('fullscreenchange', this._onfullscreenchange);
+        this._decoderWorker = new Worker(opt.decoder || 'ff.js')
+        var _this = this;
+        this._hasLoaded = false;
+        this._stats = {
+            buf: 0,
+            fps: 0,
+            abps: '',
+            vbps: '',
+            ts: ''
+        };
+
+        if (this._opt.supportDblclickFullscreen) {
+            this._canvasElement.addEventListener('dblclick', function () {
+                _this.fullscreen = !_this.fullscreen;
+            }, false);
+        }
+        this.onPlay = noop;
+        this.onPause = noop;
+        this.onRecord = noop;
+        this.onFullscreen = noop;
+        this.onMute = noop;
+        this.onLoad = noop;
+        this.onLog = noop;
+        this.onError = noop;
+        this.onTimeUpdate = noop;
+        this.onInitSize = noop;
+        this._onMessage();
+        this._initDom();
+        this._initStatus();
+        this._initEventListener();
+        this._hideBtns();
+        //
+        this._initWakeLock();
+        this._enableWakeLock();
+    };
+
+    function noop() {
+
+    }
+
+    Jessibuca.prototype._initDom = function () {
+        var playBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAARVJREFUSMe9laEOglAUhs+5k9lJFpsJ5QWMJoNGbEY0mEy+gr6GNo0a3SiQCegMRILzGdw4hl+Cd27KxPuXb2zA/91z2YXoGRERkX4fvN3A2QxUiv4dFM3n8jZRBLbbVfd+ubJuF4xjiCyXkksueb1uSKCIZYGLBTEx8ekEoV7PkICeVgs8HiGyXoO2bUigCDM4HoPnM7bI8wwJ6Gk0sEXbLSay30Oo2TQkoGcwgFCSQMhxDAvoETEscDiQkJC4LjMz8+XyZ4HrFYWjEQqHQ1asWGWZfmdFAsVINxuw00HhbvfpydpvxWkKTqdYaRCUfUPJCdzv4Gr1uqfli0tOIAzByUT/iCrL6+84y3Bw+D6ui5Ou+jwA8FnIO++FACgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDEtMDhUMTY6NDI6NTMrMDg6MDCKP7wnAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAw+2IEmwAAAEl0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fZ2Y3MDBzN2IzZncvYm9mYW5nLnN2Z8fICi0AAAAASUVORK5CYII=';
+        var pauseBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAHVJREFUSMftkCESwCAMBEOnCtdXVMKHeC7oInkEeQJXkRoEZWraipxZc8lsQqQZBACAlIS1oqGhhTCdu3oyxyyMcdRf79c5J7SWDBky+z4173rbJvR+VF/e/qwKqIAKqMBDgZyFzAQCoZTpxq7HLDyOrw/9b07l3z4dDnI2IAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0wMS0wOFQxNjo0Mjo1MyswODowMIo/vCcAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMDEtMDhUMTY6NDI6NTMrMDg6MDD7YgSbAAAASnRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl9nZjcwMHM3YjNmdy96YW50aW5nLnN2ZxqNZJkAAAAASUVORK5CYII=';
+        var screenshotBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAaxJREFUSMfNlLFOAkEQhmevAZMjR6OGRBJKsFBzdkYNpYSaWkopIOFRCBWh1ieA+ALGRgutjK0HzV2H5SX7W/zsmY3cnTEhcZovOzcz9+/s7Ir8d4OGht7fBwAgjvEri2OTl1ffSf0xAMBxRIkS1e3Se3+vcszEMe/6OqmT/aN2m1wsNu/o5YVsNHI7BgA4PCRfXzfXCwKy1RLbcXZG9nrkzc12jvT8nPU/PtatOThgAx8fuS4WyZ0de2e+T87n5OcnuVqRsxl5cpImQDnKUc7DA1fVqpimZCu+vCSjiNH9PlmpJNTQ0INBErfeafZRAakC6FWKfH9nwU7H/l6rGdqCOx3y7c3U+aOARsMMp+1vNskwTLjulB23XJL1epqA9OshIiKeJxAIoug7UyA4OuLi6Ynr52deu+NjOy4MSc9Ln8rMDpTLybBpaOjdXbJUIqdTm8a/t2fn/RSQewR24HicTLmGhnbdzcPquvYtGY3+PIR24UKBUXd35v6Sk4lN47+9NXm/FBAEedfGTjw9JYdDm76fm6+hoS8ujGAxT6L9Im7bTKeurvIEb92+AES1b6x283XSAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAwij+8JwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wMS0wOFQxNjo0Mjo1MyswODowMPtiBJsAAABJdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX2dmNzAwczdiM2Z3L2NhbWVyYS5zdmeyubWEAAAAAElFTkSuQmCC';
+        var fullscreenBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAALZJREFUSMftVbsORUAQVSj8DomChvh3lU5CoSVCQq2RObeYu8XG3deVoHCak81kds7Oaz3vxRcAAMwztOg6vX9d6/3XFQQC+b7iAoFhYE7Tvx9EIFAcy/ftO3MQGAQkCfM4MmeZWyajiLnvmYuCeduMAuSzvRBVYNluFHCssSgFp7Sq9ALKkjnPf9ubRtkDL27HNT3QtsY9cAjsNAVheHIKBOwD2wpxFHDbJpwmaHH2L1iWx+2BDy8RbXXtqbRBAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAwij+8JwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wMS0wOFQxNjo0Mjo1MyswODowMPtiBJsAAABTdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX2dmNzAwczdiM2Z3L3F1YW5waW5nenVpZGFodWEuc3ZnTBoI7AAAAABJRU5ErkJggg==';
+        var minScreenBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAYJJREFUSMfdVbGKwkAQnQn+geAfWBixUTsVgp3YGKxSWflVNmIjARULwc5KO40ipNHWRgs/wGLniucKa+Jd5ODuuGle5u3szGRmd5bor4iIiMhuB3Sc+HXXBdp2/Lpta7v4dccRJUrUdhtNQIkSVa3C8HwG1uumg34f2OnEB+h0tF1Sv5b+YIsttpZLEhKSdhvscPi8IXFF74GJiYnHY7Cex8zMvFgkbInjmJnv98kqoO30vmhLtaRMB60WtEbDNDudgMUiKiQSzfjOMzFxoQAyCPSfw7/nQZ/PUYnpNGV6OR6BmYzJbzYIoBQCzGaRBDQvJCTdLnTLolg5HN5t6f8V1h/oUT4PrVKJWBotmEzQw+vV3J9Ow851P2/BaoX9Yfh0BrJZYKlk8uUyHOpDeLuBHwzMBJtN2PV6IPUhXK9Nf5cLMAxfluanrmGkRBggtRo03wfq66P/6CsJAnOg+f6rgfZI4BGYiYlHIx048eR6krcnq34kkj1GuVz8+jceo9+SD5A8yGh8CTq7AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAwij+8JwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wMS0wOFQxNjo0Mjo1MyswODowMPtiBJsAAABNdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX2dmNzAwczdiM2Z3L3p1aXhpYW9odWEuc3ZnoCFr0AAAAABJRU5ErkJggg==';
+        var quietBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAR9JREFUSMfVlD0LglAYhe9VkwgNihpsjbYQf4JTS7+iuaGxpcGfJjS0NFRLk2NDi6MogafhJGRIX9yEzvJwrx/nvPd9VYh/F3LkyBuN2g3J1QoAgCQhPe/Hxq5Lo+0WlfJ9dYYAgGaTDAIyy/BUnwcwWJlhcLnZkN2ugIBAuy2kkEL2ep8F73S4kjfFcfn6cMj9KLodrWVBiXyf75tMyOOR+4MBOZ8XLXzorboA5UpnM/J0Ivd7+vX7xX2asqGpVKtFXi5sqWmypXefrfIWAACmU/JwKCoun8hu9zA0uk6u13wgirg+n7+bAcsibbt6SB3n9TQXPxwAwHJJpum7M6BcDDQa0SgMaw9QPkJNIxcLMo4ZcDz+eYDqQFLWbqxKV57EtW1WtMbmAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAwij+8JwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wMS0wOFQxNjo0Mjo1MyswODowMPtiBJsAAABKdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX2dmNzAwczdiM2Z3L2ppbmd5aW4uc3ZnIlMYaQAAAABJRU5ErkJggg==';
+        var playAudioBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAU5JREFUSMftkzGKwlAURf9PULBQwULSCKK1bZAgNuoaFFyAC3AdZg0uQCwshWzAShEEO7Gy0soUCu9Occ3An5nMGCfdzGsO7+Xy3/03iVL/lbAAACiVIBCI77O37Vi9QCDZbEqLm03ycEBUAoHk818v7nYpul5Jz4tf8HBKYa1mcjwmbzd8rG8NFIsU7ffk8UjmcjE3XK+RtB4G2PT75GbDeblMttumfjSKMRCGLxsQCKTReE9KIJDJxDw/SmKxiOZWWh+ntrSlre2WXRAorbTSrZapip7X66kbMKtQUFBQCENznsmQ93vqBhh5r8fO85jAcsnIrcce1yV3uxgD8zl5uZgU+dGBVlrp6GbTKRPwffaDAek45Gz2/M0AAJ0OeTol+w0rFYrOZ3K1MhNJEjEAwHF4cBA8Z8B1zcXV6msv+JMR2yaHQ1LrXx/8Z+sNRxsWcwZeb6UAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDEtMDhUMTY6NDI6NTMrMDg6MDCKP7wnAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAw+2IEmwAAAEt0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fZ2Y3MDBzN2IzZncvc2hlbmd5aW4uc3ZnFog1MQAAAABJRU5ErkJggg==';
+        var recordBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAPRJREFUSMflVDEOwjAQO0e8gr2sZYVunREbD6ISfAgmkBjpC/hBEQ+AtTWD6QAI0gBlqRfLp+TiXC5n1nXgMUCS5HBoNBqj6IOMMFwuEpsNAABl6d3HihWrOJaBsuRPkGW+c929HAxuYefb6L+R0ZgkMrJYiItCnCT1sl5Y1jwXj0bNniJNJWqujfX7LyrwJh8AYDxWgulU0dPp20IFlxoODm61kpE4VnS9/puBXyPYgH7LbKY3PhwUnUw+NdC4CdW9+71UgyZspwIBB9No3O0klktxUahyx+Pz+lYG0Xzu84lXRqTqwRQAGAzns8R223gUdxZXGcAK5Hp0ClIAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDEtMDhUMTY6NDI6NTMrMDg6MDCKP7wnAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTAxLTA4VDE2OjQyOjUzKzA4OjAw+2IEmwAAAE50RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fZ2Y3MDBzN2IzZncvbHV6aGlzaGlwaW4uc3Zn5Zd7GQAAAABJRU5ErkJggg==';
+        var recordingBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAahJREFUSMdjYBjpgBFd4NZK+f+soQYG//T+yzFuUFUl2cApjEWM/758UZvysPDn3127GBkZGBgY/v4l6ICb9xTWsRbp6/9f9W8N44Jz5xgCGI4wfGFiIttrR/5n/3/U3KyR8rj8t0RdHS5lcAv+//yXzzhZTY1ii2FAmsGZocna+maD3GnWY62tNzbJBbDOffLkxie5eJYwa2uYMhaigzb2/zyGguPH/y9mTGKYYGlJUIMiYxDjHCen/4oMDAxznJzg4k8Z/jP+l5LCCAFCQP30Y5dfXVZWDI7/zzIs8PNjNGJ4/7/r+XNKA4rkoNZ4/lj0V9TmzUxJv0J+F+jrM3YyvPq/acsWujmA2oBkB9y4LifLxhoa+teAzYFtwtWr/8sZxBj9fHxo7oCbprJ72MqOHWNgZGBkYFy1isGGoZahTFSU0hAgOhcQnfph4P7/df9T9u1jPMn4nyHmxIn/bAzLGe7GxTHsZyj+f+zpUwYGBmmG6bQsiMr+L/v/rqlJY9Njm9889fW4lGEUxXCHwAomUgH3vxBG8c+f1WWf9P98sns3oaJ4FAAAbtWqHTT84QYAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDEtMDhUMTY6MzU6MjMrMDg6MDBLHbvEAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTAxLTA4VDE2OjM1OjIzKzA4OjAwOkADeAAAAE50RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fcTM1YTFhNHBtY2MvbHV6aGlzaGlwaW4uc3Zn6xlv1QAAAABJRU5ErkJggg==';
+        var gifBase64 = 'data:image/gif;base64,R0lGODlhgACAAKIAAP///93d3bu7u5mZmQAA/wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBQAEACwCAAIAfAB8AAAD/0i63P4wygYqmDjrzbtflvWNZGliYXiubKuloivPLlzReD7al+7/Eh5wSFQIi8hHYBkwHUmD6CD5YTJLz49USuVYraRsZ7vtar7XnQ1Kjpoz6LRHvGlz35O4nEPP2O94EnpNc2sef1OBGIOFMId/inB6jSmPdpGScR19EoiYmZobnBCIiZ95k6KGGp6ni4wvqxilrqBfqo6skLW2YBmjDa28r6Eosp27w8Rov8ekycqoqUHODrTRvXsQwArC2NLF29UM19/LtxO5yJd4Au4CK7DUNxPebG4e7+8n8iv2WmQ66BtoYpo/dvfacBjIkITBE9DGlMvAsOIIZjIUAixliv9ixYZVtLUos5GjwI8gzc3iCGghypQqrbFsme8lwZgLZtIcYfNmTJ34WPTUZw5oRxdD9w0z6iOpO15MgTh1BTTJUKos39jE+o/KS64IFVmsFfYT0aU7capdy7at27dw48qdS7eu3bt480I02vUbX2F/JxYNDImw4GiGE/P9qbhxVpWOI/eFKtlNZbWXuzlmG1mv58+gQ4seTbq06dOoU6vGQZJy0FNlMcV+czhQ7SQmYd8eMhPs5BxVdfcGEtV3buDBXQ+fURxx8oM6MT9P+Fh6dOrH2zavc13u9JXVJb520Vp8dvC76wXMuN5Sepm/1WtkEZHDefnzR9Qvsd9+/wi8+en3X0ntYVcSdAE+UN4zs7ln24CaLagghIxBaGF8kFGoIYV+Ybghh841GIyI5ICIFoklJsigihmimJOLEbLYIYwxSgigiZ+8l2KB+Ml4oo/w8dijjcrouCORKwIpnJIjMnkkksalNeR4fuBIm5UEYImhIlsGCeWNNJphpJdSTlkml1jWeOY6TnaRpppUctcmFW9mGSaZceYopH9zkjnjUe59iR5pdapWaGqHopboaYua1qije67GJ6CuJAAAIfkEBQUABAAsCgACAFcAMAAAA/9Iutz+ML5Ag7w46z0r5WAoSp43nihXVmnrdusrv+s332dt4Tyo9yOBUJD6oQBIQGs4RBlHySSKyczVTtHoidocPUNZaZAr9F5FYbGI3PWdQWn1mi36buLKFJvojsHjLnshdhl4L4IqbxqGh4gahBJ4eY1kiX6LgDN7fBmQEJI4jhieD4yhdJ2KkZk8oiSqEaatqBekDLKztBG2CqBACq4wJRi4PZu1sA2+v8C6EJexrBAD1AOBzsLE0g/V1UvYR9sN3eR6lTLi4+TlY1wz6Qzr8u1t6FkY8vNzZTxaGfn6mAkEGFDgL4LrDDJDyE4hEIbdHB6ESE1iD4oVLfLAqPETIsOODwmCDJlv5MSGJklaS6khAQAh+QQFBQAEACwfAAIAVwAwAAAD/0i63P5LSAGrvTjrNuf+YKh1nWieIumhbFupkivPBEzR+GnnfLj3ooFwwPqdAshAazhEGUXJJIrJ1MGOUamJ2jQ9QVltkCv0XqFh5IncBX01afGYnDqD40u2z76JK/N0bnxweC5sRB9vF34zh4gjg4uMjXobihWTlJUZlw9+fzSHlpGYhTminKSepqebF50NmTyor6qxrLO0L7YLn0ALuhCwCrJAjrUqkrjGrsIkGMW/BMEPJcphLgDaABjUKNEh29vdgTLLIOLpF80s5xrp8ORVONgi8PcZ8zlRJvf40tL8/QPYQ+BAgjgMxkPIQ6E6hgkdjoNIQ+JEijMsasNY0RQix4gKP+YIKXKkwJIFF6JMudFEAgAh+QQFBQAEACw8AAIAQgBCAAAD/kg0PPowykmrna3dzXvNmSeOFqiRaGoyaTuujitv8Gx/661HtSv8gt2jlwIChYtc0XjcEUnMpu4pikpv1I71astytkGh9wJGJk3QrXlcKa+VWjeSPZHP4Rtw+I2OW81DeBZ2fCB+UYCBfWRqiQp0CnqOj4J1jZOQkpOUIYx/m4oxg5cuAaYBO4Qop6c6pKusrDevIrG2rkwptrupXB67vKAbwMHCFcTFxhLIt8oUzLHOE9Cy0hHUrdbX2KjaENzey9Dh08jkz8Tnx83q66bt8PHy8/T19vf4+fr6AP3+/wADAjQmsKDBf6AOKjS4aaHDgZMeSgTQcKLDhBYPEswoA1BBAgAh+QQFBQAEACxOAAoAMABXAAAD7Ei6vPOjyUkrhdDqfXHm4OZ9YSmNpKmiqVqykbuysgvX5o2HcLxzup8oKLQQix0UcqhcVo5ORi+aHFEn02sDeuWqBGCBkbYLh5/NmnldxajX7LbPBK+PH7K6narfO/t+SIBwfINmUYaHf4lghYyOhlqJWgqDlAuAlwyBmpVnnaChoqOkpaanqKmqKgGtrq+wsbA1srW2ry63urasu764Jr/CAb3Du7nGt7TJsqvOz9DR0tPU1TIA2ACl2dyi3N/aneDf4uPklObj6OngWuzt7u/d8fLY9PXr9eFX+vv8+PnYlUsXiqC3c6PmUUgAACH5BAUFAAQALE4AHwAwAFcAAAPpSLrc/m7IAau9bU7MO9GgJ0ZgOI5leoqpumKt+1axPJO1dtO5vuM9yi8TlAyBvSMxqES2mo8cFFKb8kzWqzDL7Xq/4LB4TC6bz1yBes1uu9uzt3zOXtHv8xN+Dx/x/wJ6gHt2g3Rxhm9oi4yNjo+QkZKTCgGWAWaXmmOanZhgnp2goaJdpKGmp55cqqusrZuvsJays6mzn1m4uRAAvgAvuBW/v8GwvcTFxqfIycA3zA/OytCl0tPPO7HD2GLYvt7dYd/ZX99j5+Pi6tPh6+bvXuTuzujxXens9fr7YPn+7egRI9PPHrgpCQAAIfkEBQUABAAsPAA8AEIAQgAAA/lIutz+UI1Jq7026h2x/xUncmD5jehjrlnqSmz8vrE8u7V5z/m5/8CgcEgsGo/IpHLJbDqf0Kh0ShBYBdTXdZsdbb/Yrgb8FUfIYLMDTVYz2G13FV6Wz+lX+x0fdvPzdn9WeoJGAYcBN39EiIiKeEONjTt0kZKHQGyWl4mZdREAoQAcnJhBXBqioqSlT6qqG6WmTK+rsa1NtaGsuEu6o7yXubojsrTEIsa+yMm9SL8osp3PzM2cStDRykfZ2tfUtS/bRd3ewtzV5pLo4eLjQuUp70Hx8t9E9eqO5Oku5/ztdkxi90qPg3x2EMpR6IahGocPCxp8AGtigwQAIfkEBQUABAAsHwBOAFcAMAAAA/9Iutz+MMo36pg4682J/V0ojs1nXmSqSqe5vrDXunEdzq2ta3i+/5DeCUh0CGnF5BGULC4tTeUTFQVONYAs4CfoCkZPjFar83rBx8l4XDObSUL1Ott2d1U4yZwcs5/xSBB7dBMBhgEYfncrTBGDW4WHhomKUY+QEZKSE4qLRY8YmoeUfkmXoaKInJ2fgxmpqqulQKCvqRqsP7WooriVO7u8mhu5NacasMTFMMHCm8qzzM2RvdDRK9PUwxzLKdnaz9y/Kt8SyR3dIuXmtyHpHMcd5+jvWK4i8/TXHff47SLjQvQLkU+fG29rUhQ06IkEG4X/Rryp4mwUxSgLL/7IqFETB8eONT6ChCFy5ItqJomES6kgAQAh+QQFBQAEACwKAE4AVwAwAAAD/0i63A4QuEmrvTi3yLX/4MeNUmieITmibEuppCu3sDrfYG3jPKbHveDktxIaF8TOcZmMLI9NyBPanFKJp4A2IBx4B5lkdqvtfb8+HYpMxp3Pl1qLvXW/vWkli16/3dFxTi58ZRcChwIYf3hWBIRchoiHiotWj5AVkpIXi4xLjxiaiJR/T5ehoomcnZ+EGamqq6VGoK+pGqxCtaiiuJVBu7yaHrk4pxqwxMUzwcKbyrPMzZG90NGDrh/JH8t72dq3IN1jfCHb3L/e5ebh4ukmxyDn6O8g08jt7tf26ybz+m/W9GNXzUQ9fm1Q/APoSWAhhfkMAmpEbRhFKwsvCsmosRIHx444PoKcIXKkjIImjTzjkQAAIfkEBQUABAAsAgA8AEIAQgAAA/VIBNz+8KlJq72Yxs1d/uDVjVxogmQqnaylvkArT7A63/V47/m2/8CgcEgsGo/IpHLJbDqf0Kh0Sj0FroGqDMvVmrjgrDcTBo8v5fCZki6vCW33Oq4+0832O/at3+f7fICBdzsChgJGeoWHhkV0P4yMRG1BkYeOeECWl5hXQ5uNIAOjA1KgiKKko1CnqBmqqk+nIbCkTq20taVNs7m1vKAnurtLvb6wTMbHsUq4wrrFwSzDzcrLtknW16tI2tvERt6pv0fi48jh5h/U6Zs77EXSN/BE8jP09ZFA+PmhP/xvJgAMSGBgQINvEK5ReIZhQ3QEMTBLAAAh+QQFBQAEACwCAB8AMABXAAAD50i6DA4syklre87qTbHn4OaNYSmNqKmiqVqyrcvBsazRpH3jmC7yD98OCBF2iEXjBKmsAJsWHDQKmw571l8my+16v+CweEwum8+hgHrNbrvbtrd8znbR73MVfg838f8BeoB7doN0cYZvaIuMjY6PkJGSk2gClgJml5pjmp2YYJ6dX6GeXaShWaeoVqqlU62ir7CXqbOWrLafsrNctjIDwAMWvC7BwRWtNsbGFKc+y8fNsTrQ0dK3QtXAYtrCYd3eYN3c49/a5NVj5eLn5u3s6e7x8NDo9fbL+Mzy9/T5+tvUzdN3Zp+GBAAh+QQJBQAEACwCAAIAfAB8AAAD/0i63P4wykmrvTjrzbv/YCiOZGmeaKqubOu+cCzPdArcQK2TOL7/nl4PSMwIfcUk5YhUOh3M5nNKiOaoWCuWqt1Ou16l9RpOgsvEMdocXbOZ7nQ7DjzTaeq7zq6P5fszfIASAYUBIYKDDoaGIImKC4ySH3OQEJKYHZWWi5iZG0ecEZ6eHEOio6SfqCaqpaytrpOwJLKztCO2jLi1uoW8Ir6/wCHCxMG2x7muysukzb230M6H09bX2Nna29zd3t/g4cAC5OXm5+jn3Ons7eba7vHt2fL16tj2+QL0+vXw/e7WAUwnrqDBgwgTKlzIsKHDh2gGSBwAccHEixAvaqTYcFCjRoYeNyoM6REhyZIHT4o0qPIjy5YTTcKUmHImx5cwE85cmJPnSYckK66sSAAj0aNIkypdyrSp06dQo0qdSrWq1atYs2rdyrWr169gwxZJAAA7';
+        var playBigBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwEAYAAAAHkiXEAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAByBJREFUeNrlXFlIVV0U3vsaaINmZoX0YAR6y8oGMkKLoMESSjBoUJEoIogoIggigoryIQoKGqi3Roh6TKGBIkNEe6hMgzTNKLPSUlMrNdvrf/juurlP5zpc7znb+r+X755pn7W+Pe+9zpVimIEUKVKJiUIKKWRqKs5OmwZOTBQkSFBUFK5HR+tPt7WBOzpwX3U1jquqwGVleK6iQkoppSQy7a8xEBERLVwIPnsWXF9PrqCxEXzxInjpUrDH47YO0h2hw8JwtG4deN8+8OzZA0vl7Vt/iZZCCtnUhPPt7fp9o0fjvpgYHHu9uD8+Hsdsh52hggTV1uLg2DHwpUvSIz3S093ttE4hB5qSxYuRAc+f910im5vBFy6As7LALORQ7RgzBullZIBPngQ3NPRt1+vXeH7NGtN69u8oERFFRIDPnQMrZe8YZ0huLhwMDzdjb1gYC4zj4uKAeaFIkbpxAwfWvse48FOngp89s7eeS1p2Nlg63vQF7Y8iRWrlSthZXR2wZhAR0dy55gwlIqI5c8AfPtgbeuUKHIqKMi3soP3z1UzwiRP2NbqtDbxsmXuGacK3tOgG/fwJ3rbNtIDO+J2ZiQzp6ND97uzE+RUrHDaAmxprif/+HQasXm1aKKcBPxcsADc1/VEjFClS8+eH7oXcuSpSpJ480V/Y0wPOyjItjNtgofWmiPHuHa7Hxg79RUT0e1Rjxb/X1ASnDw9vf/3S9bl1K/iEFSlSixbZdz7Xr5t2fLgBuuTn2xfUjRsHmVBYGNg6gWpo+FtHNU4DuowYAZ3Ky+11GzOm/4SIiGjDBvuczM52zAHua4iI6OpVcGEheO1a8PCdP/j9CNRyKFKk9u4doBDWCRXXBOcE0GekgVBUhPuSk00LPTAdCwp0+3n0GBER4AFenbQiJ8cdg7dvpwGB5xunT4PHjTMtuL0/qan29q9fH+AB62jnyxe31moGlwFWNDbCzq1bcez+snLffr14odtrMzrCBet6/Pnz7hoabAZY8fgxT5iGRwbs36/b19kJHjnS49+BEkIIMXmy/vjt26YdCA4pKdgHKC2Fo5cvh2xiFBTu3NGPw8Ox/5CW5tG3/hi8VffokRmDQwUeNOTlwc/KSmRIbq67djx9Cm5p+W2akEKmpfnaSt5zZdTXY8+0udmQcg5h0iQwD3MfPgRPn+7UG6GjUjiqrNSver0eVIWEBP85EiSIN7H/dSxZAuY1roMHHRt02OqamOhrgnoN46SQQn76ZFoad8Hj8kOH4D/PZJOSQvYKW11jYnxNkHWK3NFhWhKz8HrB9+7xaCU06fYKIiBBgiIjfRlgHTf/j+NlNMTFgceOHXJSJEgQ9wXCVyOk9AlvLfEDWDT6X+DAAXSiHz8OOSkppJCRkfrJ9vYR+NHaql8wNV42jVevUFJ37kQ8kHX8PlRMmOD/SYIEtbZ69IAkvsATs38dP36ADx8GJyc7IzyD+xbhqxE1Nb4a8PKlfiE+HsOxyEgYZI1A+9tRUADetQtNTF2dU29CJ84Twhkz9KtVVb4+oKxMvxAWxjM101KFBvX1qNmbNkHwNWucFl4HT/QmTvSfIkGCSks9HC2MsxxzyTekp5uWLjh0dYHz88FeL2ry5ctm7LHq2NMD7rXUg6rC0cKM9+/BfQS1hghDXg1VpEjdvasvLpqHf3VWs/P+/QA3Lltm75jz8T7BZQAvn9tscJgWXpEiNWuWvd2bNwcQwONbnq6p0R8oLnYnA7Zs6Vvw7m7Yd/z4gDe5DQH2Xrum29/SwoObfh7cts1egFWrnDU4Lg785g2Ytx4LC2H4zJmmhe3XD5+dsJsD1xhHjgwwgfBwPFBXpydQXe3uFqXzfU9o7ZUSXFRkX/IHMcENGKXgixY27fBwA8TZudO+5dixY4gJ37xpyQVfvEtmpmnHTQMFMiUFevBeL6OkZMg1GQlER4P5wwTGt29g65bmvw/4HShanD+5mjIlxC+cNw/cKxqYw7RDHZY9TOEXXpEiVVurC8+jtJUrnTNAkSK1fDle2NWlG9DeDs7IMC2UM35zU2Mt8Urhel6eywalp+vCMzhM++hRDlo1LeCg/dNGNdy5Wtt4LvEuCv+HodqHCu/e2Y8Cyss5aNW0sAPzh8fx1uEkgyMGHWxqgjM8NhYGWoNSraMnvm6+89aXDHjmap1AMUpKcD9/+D2MAYNzcsD9fRDNsZMcwsedfehiPJFeUhJ4925wWVnfdvFHiDt2gEM/MXT+rwp47UMKKeT27Ti7Zw+YA6UCgbdKKyr8cTVSSCEbG3Ge/5yDwWtD48fjfv6rAl7C6LUeb4uvX8FnzuD5U6ewjP35s9M6uQaUJP4Qgz8E4SbJ2sk5BV5jevAAvHmzqS9/hs0XJxBi1CgOWtVjVnlHKSEB16Oj/wgoE0L8LsFcM169AldV8Q4UjouKULKtNch9/AdsEf6XQYgIsAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0wMS0xMlQxMTo1NjowNSswODowMGcMj/QAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMDEtMTJUMTE6NTY6MDUrMDg6MDAWUTdIAAAASXRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl9wZHMzeWYxNGczYi9ib2Zhbmcuc3Zn11us5wAAAABJRU5ErkJggg==';
+
+        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 queryFloorAndUnits(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/floor.queryFloorAndUnits',
+      method: 'get',
+      params: {
+        ...params,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询车位结构列表
+export function listCarStructure(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/car.listCarStructure',
+      method: 'get',
+      params: {
+        ...params,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data,
+        total: res.total
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取当前小区ID
+export function getCurrentCommunityId() {
+  return getCommunityId()
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+// 获取支付二维码列表
+export function listPayFeeQrcode(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payFeeQrcode.listPayFeeQrcode',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加支付二维码
+export function savePayFeeQrcode(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payFeeQrcode.savePayFeeQrcode',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新支付二维码
+export function updatePayFeeQrcode(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payFeeQrcode.updatePayFeeQrcode',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除支付二维码
+export function deletePayFeeQrcode(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payFeeQrcode.deletePayFeeQrcode',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+// 获取监控区域列表
+export function getMonitorAreas(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/iot.getOpenApi',
+      method: 'get',
+      params: {
+        ...params,
+        iotApiCode: 'listMonitorAreaBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取监控设备列表
+export function getMonitorMachines(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/iot.getOpenApi',
+      method: 'get',
+      params: {
+        ...params,
+        iotApiCode: 'listMonitorMachineBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取视频播放地址
+export function getPlayVideoUrl(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/iot.getOpenApi',
+      method: 'get',
+      params: {
+        ...params,
+        iotApiCode: 'getPlayVideoUrlBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+/**
+ * 获取产权登记详情列表
+ * @param {Object} params 查询参数
+ * @returns {Promise} 
+ */
+export function listPropertyRightRegistrationDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/propertyRightRegistrationDetail.listPropertyRightRegistrationDetail',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 更新产权登记详情
+ * @param {Object} data 更新数据
+ * @returns {Promise}
+ */
+export function updatePropertyRightRegistrationDetail(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/propertyRightRegistrationDetail.updatePropertyRightRegistrationDetail',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取产权登记详情
+ * @param {String} prrdId 详情ID
+ * @returns {Promise}
+ */
+export function getPropertyRightRegistrationDetail(prrdId) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/propertyRightRegistrationDetail.getPropertyRightRegistrationDetail',
+      method: 'get',
+      params: { prrdId }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+/**
+ * 获取产权登记列表
+ * @param {Object} params 查询参数
+ * @returns {Promise}
+ */
+export function listPropertyRightRegistration(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/propertyRightRegistration.listPropertyRightRegistration',
+      method: 'get',
+      params: {
+        ...params,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data,
+        total: res.total,
+        records: res.records
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 添加产权登记
+ * @param {Object} data 产权登记数据
+ * @returns {Promise}
+ */
+export function savePropertyRightRegistration(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/propertyRightRegistration.savePropertyRightRegistration',
+      method: 'post',
+      data: {
+        ...data,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 更新产权登记
+ * @param {Object} data 更新数据
+ * @returns {Promise}
+ */
+export function updatePropertyRightRegistration(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/propertyRightRegistration.updatePropertyRightRegistration',
+      method: 'post',
+      data: {
+        ...data,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 删除产权登记
+ * @param {String} prrId 产权登记ID
+ * @returns {Promise}
+ */
+export function deletePropertyRightRegistration(prrId) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/propertyRightRegistration.deletePropertyRightRegistration',
+      method: 'post',
+      data: {
+        prrId,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+/**
+ * 查询楼层和单元树数据
+ * @returns {Promise}
+ */
+export function queryFloorAndUnits() {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/floor.queryFloorAndUnits',
+      method: 'get',
+      params: {
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 查询房间结构列表
+ * @param {Object} params 查询参数
+ * @param {number} params.page 页码
+ * @param {number} params.row 每页条数
+ * @param {string} params.unitId 单元ID
+ * @returns {Promise}
+ */
+export function listRoomStructure(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.listRoomStructure',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data,
+        total: res.total
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取房间状态字典
+ * @returns {Promise}
+ */
+export function getRoomStateDict() {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dict.getDict',
+      method: 'get',
+      params: {
+        dictType: 'room_state'
+      }
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+/**
+ * Query asset import logs
+ * @param {Object} params
+ * @param {number} params.page - Page number
+ * @param {number} params.row - Page size
+ * @param {string} params.communityId - Community ID
+ * @returns {Promise} Promise object represents the import logs
+ */
+export function queryAssetImportLog(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/assetImportLog/queryAssetImportLog',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+/**
+ * 查询资产导入日志详情
+ * @param {Object} params 查询参数
+ * @returns {Promise} 请求Promise
+ */
+export function queryAssetImportLogDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/assetImportLogDetail/queryAssetImportLogDetail',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 查询资产导入日志类型
+ * @param {Object} params 查询参数
+ * @returns {Promise} 请求Promise
+ */
+export function queryAssetImportLogType(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/log.queryAssetImportLogType',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取下载文件列表
+export function listUserDownloadFile(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/userDownloadFile.listUserDownloadFile',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除下载文件
+export function deleteUserDownloadFile(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/userDownloadFile.deleteUserDownloadFile',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取收据模板列表
+export function listFeePrintPage(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintPage.listFeePrintPage',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取收据页面模板列表
+export function listFeePrintPageTemplate(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintPageTemplate.listFeePrintPageTemplate',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加收据模板
+export function saveFeePrintPage(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintPage.saveFeePrintPage',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新收据模板
+export function updateFeePrintPage(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintPage.updateFeePrintPage',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除收据模板
+export function deleteFeePrintPage(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintPage.deleteFeePrintPage',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新收据模板状态
+export function updateFeePrintPageState(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintPage.updateFeePrintPage',
+      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>
+  <div class="test-script">
+    <h3>全局脚本测试</h3>
+    <div class="test-results">
+      <p><strong>Qs 库状态:</strong> {{ qsStatus }}</p>
+      <p><strong>Qs 版本:</strong> {{ qsVersion }}</p>
+      <p><strong>测试结果:</strong> {{ testResult }}</p>
+    </div>
+    <el-button @click="testQs" type="primary">测试 Qs 功能</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TestScript',
+  data() {
+    return {
+      qsStatus: '检查中...',
+      qsVersion: '未知',
+      testResult: '未测试'
+    }
+  },
+  mounted() {
+    this.checkQsStatus()
+  },
+  methods: {
+    checkQsStatus() {
+      // 检查全局 Qs
+      if (typeof window.Qs !== 'undefined') {
+        this.qsStatus = '已加载'
+        this.qsVersion = window.Qs.VERSION || '未知版本'
+      } else {
+        this.qsStatus = '未加载'
+      }
+      
+      // 检查 Vue 原型上的 Qs
+      if (this.$qs) {
+        this.qsStatus += ' (Vue 原型已挂载)'
+      }
+    },
+    testQs() {
+      try {
+        // 测试 Qs 功能
+        const testObj = { name: 'test', value: 123 }
+        const queryString = this.$qs.stringify(testObj)
+        const parsedObj = this.$qs.parse(queryString)
+        
+        this.testResult = `成功! 序列化: ${queryString}, 解析: ${JSON.stringify(parsedObj)}`
+        console.log('Qs 测试成功:', { queryString, parsedObj })
+      } catch (error) {
+        this.testResult = `失败: ${error.message}`
+        console.error('Qs 测试失败:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.test-script {
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin: 20px;
+}
+
+.test-results {
+  margin: 15px 0;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+
+.test-results p {
+  margin: 5px 0;
+}
+</style> 
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('payFeeQrcode.add.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+    >
+      <el-form-item
+        :label="$t('payFeeQrcode.form.qrcodeName')"
+        prop="qrcodeName"
+      >
+        <el-input
+          v-model="form.qrcodeName"
+          :placeholder="$t('payFeeQrcode.placeholder.qrcodeName')"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('payFeeQrcode.form.queryWay')"
+        prop="queryWay"
+      >
+        <el-select
+          v-model="form.queryWay"
+          :placeholder="$t('payFeeQrcode.placeholder.queryWay')"
+          style="width:100%"
+        >
+          <el-option
+            v-for="item in queryWayOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('payFeeQrcode.form.smsValidate')"
+        prop="smsValidate"
+      >
+        <el-select
+          v-model="form.smsValidate"
+          :placeholder="$t('payFeeQrcode.placeholder.smsValidate')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('common.yes')"
+            value="ON"
+          />
+          <el-option
+            :label="$t('common.no')"
+            value="OFF"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('payFeeQrcode.form.customFee')"
+        prop="customFee"
+      >
+        <el-select
+          v-model="form.customFee"
+          :placeholder="$t('payFeeQrcode.placeholder.customFee')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('common.yes')"
+            value="ON"
+          />
+          <el-option
+            :label="$t('common.no')"
+            value="OFF"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('payFeeQrcode.form.preFee')"
+        prop="preFee"
+      >
+        <el-select
+          v-model="form.preFee"
+          :placeholder="$t('payFeeQrcode.placeholder.preFee')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('common.yes')"
+            value="ON"
+          />
+          <el-option
+            :label="$t('common.no')"
+            value="OFF"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('payFeeQrcode.form.content')"
+        prop="content"
+      >
+        <el-input
+          v-model="form.content"
+          type="textarea"
+          :rows="3"
+          :placeholder="$t('payFeeQrcode.placeholder.content')"
+        />
+      </el-form-item>
+    </el-form>
+
+    <span 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>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { savePayFeeQrcode } from '@/api/fee/payFeeQrcodeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddPayFeeQrcode',
+  data() {
+    return {
+      visible: false,
+      form: {
+        qrcodeName: '',
+        queryWay: '',
+        smsValidate: 'OFF',
+        customFee: 'OFF',
+        preFee: 'OFF',
+        content: '',
+        state: 'ON',
+        feeType: 'OWNER',
+        communityId: ''
+      },
+      rules: {
+        qrcodeName: [
+          { required: true, message: this.$t('payFeeQrcode.rules.qrcodeName'), trigger: 'blur' },
+          { max: 128, message: this.$t('payFeeQrcode.rules.qrcodeNameMax'), trigger: 'blur' }
+        ],
+        queryWay: [
+          { required: true, message: this.$t('payFeeQrcode.rules.queryWay'), trigger: 'change' }
+        ],
+        smsValidate: [
+          { required: true, message: this.$t('payFeeQrcode.rules.smsValidate'), trigger: 'change' }
+        ],
+        customFee: [
+          { required: true, message: this.$t('payFeeQrcode.rules.customFee'), trigger: 'change' }
+        ],
+        preFee: [
+          { required: true, message: this.$t('payFeeQrcode.rules.preFee'), trigger: 'change' }
+        ],
+        content: [
+          { required: true, message: this.$t('payFeeQrcode.rules.content'), trigger: 'blur' }
+        ]
+      },
+      queryWayOptions: [
+        { value: '1001', label: this.$t('payFeeQrcode.queryWay.byPhone') },
+        { value: '2002', label: this.$t('payFeeQrcode.queryWay.byHouse') },
+        { value: '3003', label: this.$t('payFeeQrcode.queryWay.byBoth') }
+      ]
+    }
+  },
+  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 savePayFeeQrcode(this.form)
+            this.$message.success(this.$t('payFeeQrcode.message.addSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(error.message || this.$t('payFeeQrcode.message.addFailed'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('payFeeQrcode.delete.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div class="text-center">
+      <i class="el-icon-warning" style="font-size: 60px; color: #E6A23C;"></i>
+      <p style="margin: 20px 0; font-size: 16px;">
+        {{ $t('payFeeQrcode.delete.confirmText') }}
+      </p>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button
+        type="primary"
+        @click="handleConfirm"
+      >
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deletePayFeeQrcode } from '@/api/fee/payFeeQrcodeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeletePayFeeQrcode',
+  data() {
+    return {
+      visible: false,
+      currentData: {
+        pfqId: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.visible = true
+      this.currentData = {
+        pfqId: data.pfqId,
+        communityId: getCommunityId()
+      }
+    },
+    handleClose() {
+      this.currentData = {
+        pfqId: '',
+        communityId: ''
+      }
+    },
+    async handleConfirm() {
+      try {
+        await deletePayFeeQrcode(this.currentData)
+        this.$message.success(this.$t('payFeeQrcode.message.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(error.message || this.$t('payFeeQrcode.message.deleteFailed'))
+      }
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('payFeeQrcode.edit.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+    >
+      <el-form-item
+        :label="$t('payFeeQrcode.form.qrcodeName')"
+        prop="qrcodeName"
+      >
+        <el-input
+          v-model="form.qrcodeName"
+          :placeholder="$t('payFeeQrcode.placeholder.qrcodeName')"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('payFeeQrcode.form.queryWay')"
+        prop="queryWay"
+      >
+        <el-select
+          v-model="form.queryWay"
+          :placeholder="$t('payFeeQrcode.placeholder.queryWay')"
+          style="width:100%"
+        >
+          <el-option
+            v-for="item in queryWayOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('payFeeQrcode.form.smsValidate')"
+        prop="smsValidate"
+      >
+        <el-select
+          v-model="form.smsValidate"
+          :placeholder="$t('payFeeQrcode.placeholder.smsValidate')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('common.yes')"
+            value="ON"
+          />
+          <el-option
+            :label="$t('common.no')"
+            value="OFF"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('payFeeQrcode.form.customFee')"
+        prop="customFee"
+      >
+        <el-select
+          v-model="form.customFee"
+          :placeholder="$t('payFeeQrcode.placeholder.customFee')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('common.yes')"
+            value="ON"
+          />
+          <el-option
+            :label="$t('common.no')"
+            value="OFF"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('payFeeQrcode.form.preFee')"
+        prop="preFee"
+      >
+        <el-select
+          v-model="form.preFee"
+          :placeholder="$t('payFeeQrcode.placeholder.preFee')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('common.yes')"
+            value="ON"
+          />
+          <el-option
+            :label="$t('common.no')"
+            value="OFF"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('payFeeQrcode.form.content')"
+        prop="content"
+      >
+        <el-input
+          v-model="form.content"
+          type="textarea"
+          :rows="3"
+          :placeholder="$t('payFeeQrcode.placeholder.content')"
+        />
+      </el-form-item>
+    </el-form>
+
+    <span 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>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { updatePayFeeQrcode } from '@/api/fee/payFeeQrcodeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditPayFeeQrcode',
+  data() {
+    return {
+      visible: false,
+      form: {
+        pfqId: '',
+        qrcodeName: '',
+        queryWay: '',
+        smsValidate: '',
+        customFee: '',
+        preFee: '',
+        content: '',
+        state: '',
+        feeType: '',
+        communityId: ''
+      },
+      rules: {
+        qrcodeName: [
+          { required: true, message: this.$t('payFeeQrcode.rules.qrcodeName'), trigger: 'blur' },
+          { max: 128, message: this.$t('payFeeQrcode.rules.qrcodeNameMax'), trigger: 'blur' }
+        ],
+        queryWay: [
+          { required: true, message: this.$t('payFeeQrcode.rules.queryWay'), trigger: 'change' }
+        ],
+        smsValidate: [
+          { required: true, message: this.$t('payFeeQrcode.rules.smsValidate'), trigger: 'change' }
+        ],
+        customFee: [
+          { required: true, message: this.$t('payFeeQrcode.rules.customFee'), trigger: 'change' }
+        ],
+        preFee: [
+          { required: true, message: this.$t('payFeeQrcode.rules.preFee'), trigger: 'change' }
+        ],
+        content: [
+          { required: true, message: this.$t('payFeeQrcode.rules.content'), trigger: 'blur' },
+          { max: 512, message: this.$t('payFeeQrcode.rules.contentMax'), trigger: 'blur' }
+        ],
+        pfqId: [
+          { required: true, message: this.$t('payFeeQrcode.rules.pfqId'), trigger: 'blur' }
+        ]
+      },
+      queryWayOptions: [
+        { value: '1001', label: this.$t('payFeeQrcode.queryWay.byPhone') },
+        { value: '2002', label: this.$t('payFeeQrcode.queryWay.byHouse') },
+        { value: '3003', label: this.$t('payFeeQrcode.queryWay.byBoth') }
+      ]
+    }
+  },
+  methods: {
+    open(data) {
+      this.visible = true
+      this.form = { ...data }
+      this.form.communityId = getCommunityId()
+      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 updatePayFeeQrcode(this.form)
+            this.$message.success(this.$t('payFeeQrcode.message.editSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(error.message || this.$t('payFeeQrcode.message.editFailed'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('payFeeQrcode.view.title')"
+    :visible.sync="visible"
+    width="400px"
+    @close="handleClose"
+  >
+    <div class="text-center">
+      <div id="qrcode" style="width: 200px; height: 200px; margin: 0 auto;"></div>
+      <p style="margin: 15px 0; font-size: 16px; font-weight: bold;">
+        {{ form.qrcodeName }}
+      </p>
+      <p style="color: #999;">
+        {{ $t('payFeeQrcode.view.tip') }}
+      </p>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.close') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import QRCode from 'qrcodejs2'
+
+export default {
+  name: 'ViewPayFeeQrcode',
+  data() {
+    return {
+      visible: false,
+      form: {
+        qrcodeName: '',
+        qrCodeUrl: ''
+      },
+      qrcode: null
+    }
+  },
+  methods: {
+    open(data) {
+      this.visible = true
+      this.form = { ...data }
+      this.$nextTick(() => {
+        this.generateQRCode()
+      })
+    },
+    handleClose() {
+      if (this.qrcode) {
+        this.qrcode.clear()
+        document.getElementById('qrcode').innerHTML = ''
+      }
+      this.form = {
+        qrcodeName: '',
+        qrCodeUrl: ''
+      }
+    },
+    generateQRCode() {
+      if (this.qrcode) {
+        this.qrcode.clear()
+        document.getElementById('qrcode').innerHTML = ''
+      }
+      
+      if (this.form.qrCodeUrl) {
+        this.qrcode = new QRCode(document.getElementById('qrcode'), {
+          text: this.form.qrCodeUrl,
+          width: 200,
+          height: 200,
+          colorDark: '#000000',
+          colorLight: '#ffffff',
+          correctLevel: QRCode.CorrectLevel.L
+        })
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.qrcode) {
+      this.qrcode.clear()
+    }
+  }
+}
+</script>
+
+<style scoped>
+#qrcode {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #eee;
+  padding: 10px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div class="camera-control-video">
+    <el-row>
+      <el-col :span="12">
+        <h3>{{ $t('cameraControlVideo.camera') }}</h3>
+      </el-col>
+      <el-col :span="12" class="text-right">
+        <el-button-group>
+          <el-button size="small" :type="cameraControlVideoInfo.cameraCount === 4 ? 'primary' : ''"
+            @click="_changeCount(4)">
+            {{ $t('cameraControlVideo.fourWay') }}
+          </el-button>
+          <el-button size="small" :type="cameraControlVideoInfo.cameraCount === 6 ? 'primary' : ''"
+            @click="_changeCount(6)">
+            {{ $t('cameraControlVideo.sixWay') }}
+          </el-button>
+        </el-button-group>
+      </el-col>
+    </el-row>
+    <el-row class="margin-top">
+      <template v-if="cameraControlVideoInfo.cameraCount === 4">
+        <el-col v-for="(item, index) in cameraControlVideoInfo.machines" :key="index" :span="12">
+          <div class="form-group">
+            <div :id="item.id" style="border: 1px solid #dee2e6;">
+              <img width="100%" src="/img/init.jpg" height="300px" style="border: 1;" />
+            </div>
+            <div class="flex justify-between margin-top-sm" style="font-size: 14px;">
+              <div class="margin-left-sm">
+                <i class="el-icon-bell" style="color: #007bff;"></i>{{ item.machineName }}
+              </div>
+              <el-button size="small" type="primary" @click="_openSelectVideo(item)">
+                {{ $t('common.select') }}
+              </el-button>
+            </div>
+          </div>
+        </el-col>
+      </template>
+      <template v-else-if="cameraControlVideoInfo.cameraCount === 6">
+        <el-col v-for="(item, index) in cameraControlVideoInfo.machines" :key="index" :span="8">
+          <div class="form-group">
+            <div :id="item.id" style="border: 1px solid #dee2e6;">
+              <img width="100%" src="/img/init.jpg" height="300px" style="border: 1;" />
+            </div>
+            <div class="flex justify-between margin-top-sm" style="font-size: 14px;">
+              <div class="margin-left-sm">
+                <i class="el-icon-bell" style="color: #007bff;"></i>{{ item.machineName }}
+              </div>
+              <el-button size="small" type="primary" @click="_openSelectVideo(item)">
+                {{ $t('common.select') }}
+              </el-button>
+            </div>
+          </div>
+        </el-col>
+      </template>
+    </el-row>
+    <select-video-machine ref="selectVideoMachine" />
+  </div>
+</template>
+
+<script>
+import SelectVideoMachine from './selectVideoMachine.vue'
+
+export default {
+  name: 'CameraControlVideo',
+  components: {
+    SelectVideoMachine
+  },
+  data() {
+    return {
+      cameraControlVideoInfo: {
+        machines: [],
+        cameraCount: 4
+      }
+    }
+  },
+  created() {
+    const cameraCount = this.$route.query.cameraCount
+    if (cameraCount) {
+      this.cameraControlVideoInfo.cameraCount = parseInt(cameraCount)
+    }
+    this._initCamera()
+  },
+  methods: {
+    _initCamera() {
+      const machines = []
+      const cameraCount = this.cameraControlVideoInfo.cameraCount
+      for (let i = 0; i < cameraCount; i++) {
+        machines.push({
+          id: 'cameraVideo' + (i + 1) + 'Div',
+          machineName: '',
+          url: ''
+        })
+      }
+      this.cameraControlVideoInfo.machines = machines
+    },
+    _openSelectVideo(item) {
+      item.callback = (machine) => {
+        item.machineName = machine.machineName
+        if (item.jessibuca) {
+          try {
+            item.jessibuca.destroy()
+          } catch (err) {
+            console.error(err)
+          }
+        }
+        this.$refs.selectVideoMachine.getPlayVideoUrl(machine.machineId)
+          .then(url => {
+            const image = document.getElementById(item.id)
+            const jessibuca = new window.Jessibuca({
+              container: image,
+              videoBuffer: 0.2,
+              isResize: false,
+              text: "",
+              loadingText: "",
+              useMSE: false,
+              debug: false,
+              isNotMute: false,
+              supportDblclickFullscreen: true,
+              operateBtns: {
+                fullscreen: true,
+                screenshot: true,
+                play: true,
+                audio: false,
+                recorder: false
+              },
+            })
+            item.jessibuca = jessibuca
+            jessibuca.play(url)
+          })
+          .catch(error => {
+            console.error(error)
+            this.$message.error(this.$t('cameraControlVideo.getVideoUrlError'))
+          })
+      }
+      this.$refs.selectVideoMachine.open(item)
+    },
+    _changeCount(count) {
+      this.cameraControlVideoInfo.cameraCount = count
+      this.$router.push({
+        path: this.$route.path,
+        query: { cameraCount: count }
+      })
+      this._initCamera()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.camera-control-video {
+  padding: 20px;
+  padding-top: 0;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-sm {
+  margin-top: 10px;
+}
+
+.margin-left-sm {
+  margin-left: 10px;
+}
+
+.flex {
+  display: flex;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog 
+    :visible.sync="dialogVisible" 
+    :title="$t('selectVideoMachine.title')"
+    width="80%"
+    @close="handleClose"
+  >
+    <el-row>
+      <el-col :span="12" class="border-right">
+        <div class="text-center">
+          {{ $t('selectVideoMachine.monitorArea') }}
+        </div>
+        <div class="padding padding-top-xs">
+          <div 
+            v-for="(item,index) in selectVideoMachineInfo.areas" 
+            :key="index"
+            class="padding overflow-hidden"
+            :class="{'select': selectVideoMachineInfo.maId === item.maId}"
+            @click="_changeArea(item)"
+          >
+            <div>{{item.maName}}</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="text-center">
+          {{ $t('selectVideoMachine.camera') }}
+        </div>
+        <div class="padding padding-top-xs">
+          <div 
+            v-for="(item,index) in selectVideoMachineInfo.machines" 
+            :key="index"
+            class="padding overflow-hidden"
+            :class="{'select': selectVideoMachineInfo.machineId === item.machineId}"
+            @click="_changeMachine(item)"
+          >
+            <div>{{item.machineName}}</div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+import { getMonitorAreas, getMonitorMachines, getPlayVideoUrl } from '@/api/machine/videoControlApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'SelectVideoMachine',
+  data() {
+    return {
+      dialogVisible: false,
+      selectVideoMachineInfo: {
+        areas: [],
+        machines: [],
+        maId: '',
+        machineId: '',
+        curMachine: {}
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(machine) {
+      this._clearSelectVideoMachine()
+      this.selectVideoMachineInfo.curMachine = machine
+      this._loadSelectAreas()
+      this.dialogVisible = true
+    },
+    async getPlayVideoUrl(machineId) {
+      const params = {
+        page: 1,
+        row: 1,
+        communityId: this.communityId,
+        machineId: machineId
+      }
+      const res = await getPlayVideoUrl(params)
+      return res.data
+    },
+    async _loadSelectAreas() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.communityId
+        }
+        const res = await getMonitorAreas(params)
+        this.selectVideoMachineInfo.areas = res.data
+        if (res.data.length > 0) {
+          this._changeArea(res.data[0])
+        }
+      } catch (error) {
+        this.$message.error(this.$t('selectVideoMachine.loadAreasError'))
+      }
+    },
+    async _loadSelectVideoMachines() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.communityId,
+          maId: this.selectVideoMachineInfo.maId
+        }
+        const res = await getMonitorMachines(params)
+        this.selectVideoMachineInfo.machines = res.data
+      } catch (error) {
+        this.$message.error(this.$t('selectVideoMachine.loadMachinesError'))
+      }
+    },
+    _changeArea(area) {
+      this.selectVideoMachineInfo.maId = area.maId
+      this._loadSelectVideoMachines()
+    },
+    _changeMachine(machine) {
+      this.selectVideoMachineInfo.machineId = machine.machineId
+      this.selectVideoMachineInfo.curMachine.callback(machine)
+      this.handleClose()
+    },
+    _clearSelectVideoMachine() {
+      this.selectVideoMachineInfo = {
+        areas: [],
+        machines: [],
+        maId: '',
+        machineId: '',
+        curMachine: {}
+      }
+    },
+    handleClose() {
+      this.dialogVisible = false
+      this._clearSelectVideoMachine()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.border-right {
+  border-right: 1px solid #dee2e6;
+}
+.text-center {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.padding {
+  padding: 10px;
+}
+.padding-top-xs {
+  padding-top: 5px;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.select {
+  background-color: #f5f7fa;
+  color: #409eff;
+  cursor: pointer;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog :title="$t('propertyRightRegistration.add.title')" :visible.sync="visible" width="70%"
+    @close="handleClose">
+    <el-form ref="form" :model="formData" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.add.floor')" prop="floorId"
+            :rules="[{ required: true, message: $t('propertyRightRegistration.add.floorRequired'), trigger: 'change' }]">
+            <el-select v-model="formData.floorId" :placeholder="$t('propertyRightRegistration.add.floorPlaceholder')"
+              style="width:100%" @change="handleFloorChange">
+              <el-option v-for="item in floors" :key="item.floorId"
+                :label="`${item.floorNum}${$t('propertyRightRegistration.add.floorUnit')}`" :value="item.floorId" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.add.unit')" prop="unitId"
+            :rules="[{ required: true, message: $t('propertyRightRegistration.add.unitRequired'), trigger: 'change' }]">
+            <el-select v-model="formData.unitId" :placeholder="$t('propertyRightRegistration.add.unitPlaceholder')"
+              style="width:100%" @change="handleUnitChange">
+              <el-option v-for="item in units" :key="item.unitId"
+                :label="`${item.unitNum}${$t('propertyRightRegistration.add.unitUnit')}`" :value="item.unitId" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.add.room')" prop="roomId"
+            :rules="[{ required: true, message: $t('propertyRightRegistration.add.roomRequired'), trigger: 'change' }]">
+            <el-select v-model="formData.roomId" :placeholder="$t('propertyRightRegistration.add.roomPlaceholder')"
+              style="width:100%">
+              <el-option v-for="item in rooms" :key="item.roomId" :label="item.roomNum" :value="item.roomId" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.add.name')" prop="name" :rules="[
+            { required: true, message: $t('propertyRightRegistration.add.nameRequired'), trigger: 'blur' },
+            { min: 2, max: 64, message: $t('propertyRightRegistration.add.nameLength'), trigger: 'blur' }
+          ]">
+            <el-input v-model.trim="formData.name" :placeholder="$t('propertyRightRegistration.add.namePlaceholder')" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.add.link')" prop="link"
+            :rules="[{ required: true, message: $t('propertyRightRegistration.add.linkRequired'), trigger: 'blur' }]">
+            <el-input v-model.trim="formData.link" :placeholder="$t('propertyRightRegistration.add.linkPlaceholder')" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.add.idCard')" prop="idCard" :rules="[
+            { required: true, message: $t('propertyRightRegistration.add.idCardRequired'), trigger: 'blur' },
+          ]">
+            <el-input v-model.trim="formData.idCard"
+              :placeholder="$t('propertyRightRegistration.add.idCardPlaceholder')" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item :label="$t('propertyRightRegistration.add.address')" prop="address" :rules="[
+        { required: true, message: $t('propertyRightRegistration.add.addressRequired'), trigger: 'blur' },
+        { max: 255, message: $t('propertyRightRegistration.add.addressMax'), trigger: 'blur' }
+      ]">
+        <el-input v-model.trim="formData.address"
+          :placeholder="$t('propertyRightRegistration.add.addressPlaceholder')" />
+      </el-form-item>
+
+      <el-form-item :label="$t('propertyRightRegistration.add.idCardPhotos')" prop="idCardPhotos"
+        :rules="[{ required: true, message: $t('propertyRightRegistration.add.idCardPhotosRequired'), trigger: 'change' }]">
+        <upload-image-url ref="idCardUpload" :image-count="2" @notifyUploadCoverImage="handleIdCardChange" />
+        <p class="tip">{{ $t('propertyRightRegistration.add.idCardPhotosTip') }}</p>
+      </el-form-item>
+
+      <el-form-item :label="$t('propertyRightRegistration.add.housePurchasePhotos')" prop="housePurchasePhotos"
+        :rules="[{ required: true, message: $t('propertyRightRegistration.add.housePurchasePhotosRequired'), trigger: 'change' }]">
+        <upload-image-url ref="housePurchaseUpload" :image-count="10" @notifyUploadCoverImage="handleHousePurchaseChange" />
+        <p class="tip">{{ $t('propertyRightRegistration.add.housePurchasePhotosTip') }}</p>
+      </el-form-item>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.add.isTrue')" prop="isTrue"
+            :rules="[{ required: true, message: $t('propertyRightRegistration.add.isTrueRequired'), trigger: 'change' }]">
+            <el-select v-model="formData.isTrue" :placeholder="$t('propertyRightRegistration.add.isTruePlaceholder')"
+              style="width:100%" @change="handleIsTrueChange">
+              <el-option :label="$t('common.yes')" value="true" />
+              <el-option :label="$t('common.no')" value="false" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="formData.isTrue === 'true'" :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.add.repairPhotos')" prop="repairPhotos"
+            :rules="[{ required: true, message: $t('propertyRightRegistration.add.repairPhotosRequired'), trigger: 'change' }]">
+            <upload-image-url ref="repairUpload" :image-count="3" @notifyUploadCoverImage="handleRepairChange" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.add.flag')" prop="flag"
+            :rules="[{ required: true, message: $t('propertyRightRegistration.add.flagRequired'), trigger: 'change' }]">
+            <el-select v-model="formData.flag" :placeholder="$t('propertyRightRegistration.add.flagPlaceholder')"
+              style="width:100%" @change="handleFlagChange">
+              <el-option :label="$t('common.yes')" value="0" />
+              <el-option :label="$t('common.no')" value="1" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="formData.flag === '0'" :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.add.deedTaxPhotos')" prop="deedTaxPhotos"
+            :rules="[{ required: true, message: $t('propertyRightRegistration.add.deedTaxPhotosRequired'), trigger: 'change' }]">
+            <upload-image-url ref="deedTaxUpload" :image-count="3" @notifyUploadCoverImage="handleDeedTaxChange" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </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 { getCommunityId } from '@/api/community/communityApi'
+import { getFloors, getUnits, queryRooms } from '@/api/room/roomApi'
+import { savePropertyRightRegistration } from '@/api/room/propertyRightRegistrationManageApi'
+import UploadImageUrl from '@/components/upload/UploadImageUrl'
+
+export default {
+  name: 'AddPropertyRightRegistration',
+  components: {
+    UploadImageUrl
+  },
+  data() {
+    return {
+      visible: false,
+      formData: {
+        prrId: '',
+        roomId: '',
+        floorId: '',
+        unitId: '',
+        name: '',
+        link: '',
+        idCard: '',
+        address: '',
+        isTrue: '',
+        flag: '',
+        state: '0',
+        idCardPhotos: [],
+        housePurchasePhotos: [],
+        repairPhotos: [],
+        deedTaxPhotos: [],
+        communityId: getCommunityId()
+      },
+      floors: [],
+      units: [],
+      rooms: []
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.getFloors()
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.resetFields()
+        this.$refs.idCardUpload && this.$refs.idCardUpload.clearImages()
+        this.$refs.housePurchaseUpload && this.$refs.housePurchaseUpload.clearImages()
+        this.$refs.repairUpload && this.$refs.repairUpload.clearImages()
+        this.$refs.deedTaxUpload && this.$refs.deedTaxUpload.clearImages()
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.formData = {
+        prrId: '',
+        roomId: '',
+        floorId: '',
+        unitId: '',
+        name: '',
+        link: '',
+        idCard: '',
+        address: '',
+        isTrue: '',
+        flag: '',
+        state: '0',
+        idCardPhotos: [],
+        housePurchasePhotos: [],
+        repairPhotos: [],
+        deedTaxPhotos: [],
+        communityId: getCommunityId()
+      }
+    },
+    async getFloors() {
+      try {
+        const params = {
+          communityId: this.formData.communityId,
+          page: 1,
+          row: 50
+        }
+        const data = await getFloors(params)
+        this.floors = data.apiFloorDataVoList || []
+      } catch (error) {
+        console.error('获取楼栋数据失败:', error)
+      }
+    },
+    async handleFloorChange(floorId) {
+      try {
+        const params = {
+          floorId,
+          communityId: this.formData.communityId,
+          page: 1,
+          row: 50
+        }
+        const data = await getUnits(params)
+        this.units = data || []
+        this.formData.unitId = ''
+        this.rooms = []
+        this.formData.roomId = ''
+      } catch (error) {
+        console.error('获取单元数据失败:', error)
+      }
+    },
+    async handleUnitChange(unitId) {
+      try {
+        const params = {
+          unitId,
+          communityId: this.formData.communityId,
+          page: 1,
+          row: 50
+        }
+        const data = await queryRooms(params)
+        this.rooms = data.rooms || []
+        this.formData.roomId = ''
+      } catch (error) {
+        console.error('获取房间数据失败:', error)
+      }
+    },
+    handleIsTrueChange(val) {
+      if (val !== 'true') {
+        this.formData.repairPhotos = []
+        this.$refs.repairUpload && this.$refs.repairUpload.clearImages()
+      }
+    },
+    handleFlagChange(val) {
+      if (val !== '0') {
+        this.formData.deedTaxPhotos = []
+        this.$refs.deedTaxUpload && this.$refs.deedTaxUpload.clearImages()
+      }
+    },
+    handleIdCardChange(photos) {
+      this.formData.idCardPhotos = photos
+    },
+    handleHousePurchaseChange(photos) {
+      this.formData.housePurchasePhotos = photos
+    },
+    handleRepairChange(photos) {
+      this.formData.repairPhotos = photos
+    },
+    handleDeedTaxChange(photos) {
+      this.formData.deedTaxPhotos = photos
+    },
+
+    async handleSubmit() {
+      try {
+        await this.$refs.form.validate()
+        this.loading = true
+
+        const params = {
+          ...this.formData,
+          idCardPhotos: this.formData.idCardPhotos,
+          housePurchasePhotos: this.formData.housePurchasePhotos,
+          repairPhotos: this.formData.repairPhotos,
+          deedTaxPhotos: this.formData.deedTaxPhotos
+        }
+
+        await savePropertyRightRegistration(params)
+        this.$message.success(this.$t('propertyRightRegistration.add.success'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        console.error('保存失败:', error)
+        if (error !== 'validate') {
+          this.$message.error(this.$t('propertyRightRegistration.add.error'))
+        }
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tip {
+  color: #999;
+  font-size: 12px;
+  margin-top: 5px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('propertyRightRegistration.delete.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="visible = false"
+  >
+    <div class="delete-content">
+      <p>{{ $t('propertyRightRegistration.delete.confirm') }}</p>
+      <p class="delete-tip">{{ $t('propertyRightRegistration.delete.tip') }}</p>
+    </div>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="danger" @click="handleConfirm">{{ $t('common.confirm') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { deletePropertyRightRegistration } from '@/api/room/propertyRightRegistrationManageApi'
+
+export default {
+  name: 'DeletePropertyRightRegistration',
+  data() {
+    return {
+      visible: false,
+      deleteData: {
+        prrId: '',
+        communityId: getCommunityId()
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.visible = true
+      this.deleteData = {
+        prrId: data.prrId,
+        communityId: getCommunityId()
+      }
+    },
+    async handleConfirm() {
+      try {
+        const res = await deletePropertyRightRegistration(this.deleteData)
+        if (res.code === 0) {
+          this.$message.success(this.$t('propertyRightRegistration.delete.success'))
+          this.visible = false
+          this.$emit('success')
+        } else {
+          this.$message.error(res.msg || this.$t('propertyRightRegistration.delete.error'))
+        }
+      } catch (error) {
+        console.error('删除失败:', error)
+        this.$message.error(this.$t('propertyRightRegistration.delete.error'))
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.delete-content {
+  text-align: center;
+  font-size: 16px;
+  padding: 20px 0;
+}
+
+.delete-tip {
+  color: #f56c6c;
+  margin-top: 10px;
+  font-size: 14px;
+}
+
+.dialog-footer {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog :title="$t('propertyRightRegistration.edit.title')" :visible.sync="visible" width="70%"
+    @close="handleClose">
+    <el-form ref="form" :model="formData" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.edit.floor')" prop="floorId"
+            :rules="[{ required: true, message: $t('propertyRightRegistration.edit.floorRequired'), trigger: 'change' }]">
+            <el-select v-model="formData.floorId" :placeholder="$t('propertyRightRegistration.edit.floorPlaceholder')"
+              style="width:100%" @change="handleFloorChange">
+              <el-option v-for="item in floors" :key="item.floorId"
+                :label="`${item.floorNum}${$t('propertyRightRegistration.edit.floorUnit')}`" :value="item.floorId" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.edit.unit')" prop="unitId"
+            :rules="[{ required: true, message: $t('propertyRightRegistration.edit.unitRequired'), trigger: 'change' }]">
+            <el-select v-model="formData.unitId" :placeholder="$t('propertyRightRegistration.edit.unitPlaceholder')"
+              style="width:100%" @change="handleUnitChange">
+              <el-option v-for="item in units" :key="item.unitId"
+                :label="`${item.unitNum}${$t('propertyRightRegistration.edit.unitUnit')}`" :value="item.unitId" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.edit.room')" prop="roomId"
+            :rules="[{ required: true, message: $t('propertyRightRegistration.edit.roomRequired'), trigger: 'change' }]">
+            <el-select v-model="formData.roomId" :placeholder="$t('propertyRightRegistration.edit.roomPlaceholder')"
+              style="width:100%">
+              <el-option v-for="item in rooms" :key="item.roomId" :label="item.roomNum" :value="item.roomId" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.edit.name')" prop="name" :rules="[
+            { required: true, message: $t('propertyRightRegistration.edit.nameRequired'), trigger: 'blur' },
+            { min: 2, max: 64, message: $t('propertyRightRegistration.edit.nameLength'), trigger: 'blur' }
+          ]">
+            <el-input v-model.trim="formData.name"
+              :placeholder="$t('propertyRightRegistration.edit.namePlaceholder')" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.edit.link')" prop="link"
+            :rules="[{ required: true, message: $t('propertyRightRegistration.edit.linkRequired'), trigger: 'blur' }]">
+            <el-input v-model.trim="formData.link"
+              :placeholder="$t('propertyRightRegistration.edit.linkPlaceholder')" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('propertyRightRegistration.edit.idCard')" prop="idCard" :rules="[
+            { required: true, message: $t('propertyRightRegistration.edit.idCardRequired'), trigger: 'blur' },
+          ]">
+            <el-input v-model.trim="formData.idCard"
+              :placeholder="$t('propertyRightRegistration.edit.idCardPlaceholder')" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item :label="$t('propertyRightRegistration.edit.address')" prop="address" :rules="[
+        { required: true, message: $t('propertyRightRegistration.edit.addressRequired'), trigger: 'blur' },
+        { max: 255, message: $t('propertyRightRegistration.edit.addressMax'), trigger: 'blur' }
+      ]">
+        <el-input v-model.trim="formData.address"
+          :placeholder="$t('propertyRightRegistration.edit.addressPlaceholder')" />
+      </el-form-item>
+
+      <div 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-form>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { getFloors, getUnits, queryRooms } from '@/api/room/roomApi'
+import { updatePropertyRightRegistration } from '@/api/room/propertyRightRegistrationManageApi'
+
+export default {
+  name: 'EditPropertyRightRegistration',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        prrId: '',
+        roomId: '',
+        floorId: '',
+        unitId: '',
+        name: '',
+        link: '',
+        idCard: '',
+        address: '',
+        communityId: getCommunityId()
+      },
+      floors: [],
+      units: [],
+      rooms: []
+    }
+  },
+  methods: {
+    open(data) {
+      this.visible = true
+      this.formData = {
+        prrId: data.prrId,
+        roomId: data.roomId,
+        floorId: data.floorId,
+        unitId: data.unitId,
+        name: data.name,
+        link: data.link,
+        idCard: data.idCard,
+        address: data.address,
+        communityId: getCommunityId()
+      }
+      this.getFloors()
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    async getFloors() {
+      try {
+        const params = {
+          communityId: this.formData.communityId,
+          page: 1,
+          row: 50
+        }
+        const data = await getFloors(params)
+        this.floors = data.apiFloorDataVoList || []
+        this.getUnits()
+      } catch (error) {
+        console.error('获取楼栋数据失败:', error)
+      }
+    },
+    async getUnits() {
+      try {
+        const params = {
+          floorId: this.formData.floorId,
+          communityId: this.formData.communityId,
+          page: 1,
+          row: 50
+        }
+        const data = await getUnits(params)
+        this.units = data || []
+        this.getRooms()
+      } catch (error) {
+        console.error('获取单元数据失败:', error)
+      }
+    },
+    async getRooms() {
+      try {
+        const params = {
+          unitId: this.formData.unitId,
+          communityId: this.formData.communityId,
+          page: 1,
+          row: 50
+        }
+        const data = await queryRooms(params)
+        this.rooms = data.rooms || []
+      } catch (error) {
+        console.error('获取房间数据失败:', error)
+      }
+    },
+    handleFloorChange(floorId) {
+      this.formData.unitId = ''
+      this.formData.roomId = ''
+      this.units = []
+      this.rooms = []
+      if (floorId) {
+        this.getUnits()
+      }
+    },
+    handleUnitChange(unitId) {
+      this.formData.roomId = ''
+      this.rooms = []
+      if (unitId) {
+        this.getRooms()
+      }
+    },
+   
+    async handleSubmit() {
+      try {
+        await this.$refs.form.validate()
+
+        const params = {
+          ...this.formData,
+          flag: '0' // 0表示修改操作
+        }
+
+        const res = await updatePropertyRightRegistration(params)
+        if (res.code === 0) {
+          this.$message.success(this.$t('propertyRightRegistration.edit.success'))
+          this.visible = false
+          this.$emit('success')
+        } else {
+          this.$message.error(res.msg || this.$t('propertyRightRegistration.edit.error'))
+        }
+      } catch (error) {
+        if (error !== 'validate') {
+          console.error('修改失败:', error)
+          this.$message.error(this.$t('propertyRightRegistration.edit.error'))
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog-footer {
+  text-align: right;
+  margin-top: 20px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog :title="$t('propertyRightDetail.edit.title')" :visible.sync="visible" width="70%"
+    :before-close="handleClose">
+    <el-form ref="form" :model="editPropertyRightRegistrationDetailInfo" label-width="120px">
+      <el-form-item :label="$t('propertyRightDetail.edit.materialType')">
+        <el-input v-model="editPropertyRightRegistrationDetailInfo.securitiesName"
+          :placeholder="$t('propertyRightDetail.edit.materialTypePlaceholder')" disabled />
+      </el-form-item>
+
+      <template v-if="editPropertyRightRegistrationDetailInfo.securities === '001'">
+        <el-form-item :label="$t('propertyRightDetail.edit.idCardPhoto')">
+          <upload-image-url ref="idCardUpload" :image-count="2" @notifyUploadCoverImage="handleIdCardImageChange" />
+          <p class="help-block">*{{ $t('propertyRightDetail.edit.idCardPhotoTip') }}*</p>
+        </el-form-item>
+      </template>
+
+      <template v-if="editPropertyRightRegistrationDetailInfo.securities === '002'">
+        <el-form-item :label="$t('propertyRightDetail.edit.houseContract')">
+          <upload-image-url ref="housePurchaseUpload" :image-count="10" @notifyUploadCoverImage="handleHousePurchaseImageChange" />
+          <p class="help-block">*{{ $t('propertyRightDetail.edit.houseContractTip') }}*</p>
+        </el-form-item>
+      </template>
+
+      <template v-if="editPropertyRightRegistrationDetailInfo.securities === '003'">
+        <el-form-item :label="$t('propertyRightDetail.edit.repairFund')">
+          <el-select v-model="editPropertyRightRegistrationDetailInfo.isTrue" style="width: 100%"
+            :placeholder="$t('propertyRightDetail.edit.repairFundPlaceholder')">
+            <el-option value="" disabled :label="$t('propertyRightDetail.edit.repairFundPlaceholder')" />
+            <el-option :label="$t('common.yes')" value="true" />
+            <el-option :label="$t('common.no')" value="false" />
+          </el-select>
+        </el-form-item>
+
+        <template v-if="editPropertyRightRegistrationDetailInfo.isTrue === 'true'">
+          <el-form-item :label="$t('propertyRightDetail.edit.repairFundPhoto')">
+            <upload-image-url ref="repairUpload" :image-count="3" @notifyUploadCoverImage="handleRepairImageChange" />
+          </el-form-item>
+        </template>
+      </template>
+
+      <template v-if="editPropertyRightRegistrationDetailInfo.securities === '004'">
+        <el-form-item :label="$t('propertyRightDetail.edit.deedTax')">
+          <el-select v-model="editPropertyRightRegistrationDetailInfo.isTrue" style="width: 100%"
+            :placeholder="$t('propertyRightDetail.edit.deedTaxPlaceholder')">
+            <el-option value="" disabled :label="$t('propertyRightDetail.edit.deedTaxPlaceholder')" />
+            <el-option :label="$t('common.yes')" value="true" />
+            <el-option :label="$t('common.no')" value="false" />
+          </el-select>
+        </el-form-item>
+
+        <template v-if="editPropertyRightRegistrationDetailInfo.isTrue === 'true'">
+          <el-form-item :label="$t('propertyRightDetail.edit.deedTaxPhoto')">
+            <upload-image-url ref="deedTaxUpload" :image-count="3" @notifyUploadCoverImage="handleDeedTaxImageChange" />
+          </el-form-item>
+        </template>
+      </template>
+
+      <el-form-item class="dialog-footer">
+        <el-button type="primary" @click="editPropertyRightRegistrationDetail">
+          <i class="el-icon-check"></i>
+          {{ $t('common.save') }}
+        </el-button>
+        <el-button @click="handleClose">
+          <i class="el-icon-close"></i>
+          {{ $t('common.cancel') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { updatePropertyRightRegistrationDetail } from '@/api/room/listPropertyRightRegistrationDetailApi'
+import UploadImageUrl from '@/components/upload/UploadImageUrl'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditPropertyRightRegistrationDetail',
+  components: {
+    UploadImageUrl
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      editPropertyRightRegistrationDetailInfo: {
+        prrdId: '',
+        prrId: '',
+        securities: '',
+        securitiesName: '',
+        idCardUrl: '',
+        housePurchaseUrl: '',
+        repairUrl: '',
+        deedTaxUrl: '',
+        isTrue: '',
+        idCardPhotos: [],
+        housePurchasePhotos: [],
+        repairPhotos: [],
+        deedTaxPhotos: [],
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.resetForm()
+      this.editPropertyRightRegistrationDetailInfo = { ...row }
+      this.editPropertyRightRegistrationDetailInfo.communityId = getCommunityId()
+      this.loadPhotos()
+      this.visible = true
+    },
+    loadPhotos() {
+      if (this.editPropertyRightRegistrationDetailInfo.securities === '001' && this.editPropertyRightRegistrationDetailInfo.idCardUrl) {
+        const urls = this.editPropertyRightRegistrationDetailInfo.idCardUrl.trim()
+        if (urls) {
+          this.$refs.idCardUpload.setImages(urls.split(','))
+        }
+      }
+      if (this.editPropertyRightRegistrationDetailInfo.securities === '002' && this.editPropertyRightRegistrationDetailInfo.housePurchaseUrl) {
+        const urls = this.editPropertyRightRegistrationDetailInfo.housePurchaseUrl.trim()
+        if (urls) {
+          this.$refs.housePurchaseUpload.setImages(urls.split(','))
+        }
+      }
+      if (this.editPropertyRightRegistrationDetailInfo.securities === '003' && this.editPropertyRightRegistrationDetailInfo.repairUrl) {
+        const urls = this.editPropertyRightRegistrationDetailInfo.repairUrl.trim()
+        if (urls) {
+          this.$refs.repairUpload.setImages(urls.split(','))
+        }
+      }
+      if (this.editPropertyRightRegistrationDetailInfo.securities === '004' && this.editPropertyRightRegistrationDetailInfo.deedTaxUrl) {
+        const urls = this.editPropertyRightRegistrationDetailInfo.deedTaxUrl.trim()
+        if (urls) {
+          this.$refs.deedTaxUpload.setImages(urls.split(','))
+        }
+      }
+    },
+    handleIdCardImageChange(photos) {
+      this.editPropertyRightRegistrationDetailInfo.idCardPhotos = photos
+    },
+    handleHousePurchaseImageChange(photos) {
+      this.editPropertyRightRegistrationDetailInfo.housePurchasePhotos = photos
+    },
+    handleRepairImageChange(photos) {
+      this.editPropertyRightRegistrationDetailInfo.repairPhotos = photos
+    },
+    handleDeedTaxImageChange(photos) {
+      this.editPropertyRightRegistrationDetailInfo.deedTaxPhotos = photos
+    },
+    editPropertyRightRegistrationDetail() {
+      if (!this.validateForm()) {
+        return
+      }
+
+      const params = { ...this.editPropertyRightRegistrationDetailInfo }
+      if (params.securities === '001') {
+        params.idCardUrl = params.idCardPhotos && params.idCardPhotos.length > 0 ? params.idCardPhotos.join(',') : ''
+      } else if (params.securities === '002') {
+        params.housePurchaseUrl = params.housePurchasePhotos && params.housePurchasePhotos.length > 0 ? params.housePurchasePhotos.join(',') : ''
+      } else if (params.securities === '003') {
+        params.repairUrl = params.repairPhotos && params.repairPhotos.length > 0 ? params.repairPhotos.join(',') : ''
+      } else if (params.securities === '004') {
+        params.deedTaxUrl = params.deedTaxPhotos && params.deedTaxPhotos.length > 0 ? params.deedTaxPhotos.join(',') : ''
+      }
+
+      updatePropertyRightRegistrationDetail(params)
+        .then(() => {
+          this.$message.success(this.$t('common.updateSuccess'))
+          this.$emit('success')
+          this.handleClose()
+        })
+        .catch(error => {
+          this.$message.error(error.message || this.$t('common.updateFailed'))
+        })
+    },
+    validateForm() {
+      if (!this.editPropertyRightRegistrationDetailInfo.securities) {
+        this.$message.error(this.$t('propertyRightDetail.edit.materialTypeRequired'))
+        return false
+      }
+      return true
+    },
+    handleClose() {
+      this.visible = false
+    },
+    resetForm() {
+      this.editPropertyRightRegistrationDetailInfo = {
+        prrdId: '',
+        prrId: '',
+        securities: '',
+        securitiesName: '',
+        idCardUrl: '',
+        housePurchaseUrl: '',
+        repairUrl: '',
+        deedTaxUrl: '',
+        isTrue: '',
+        idCardPhotos: [],
+        housePurchasePhotos: [],
+        repairPhotos: [],
+        deedTaxPhotos: [],
+        communityId: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer {
+  text-align: right;
+  margin-top: 20px;
+}
+
+.help-block {
+  color: #f56c6c;
+  font-size: 12px;
+  margin-top: 5px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog :title="$t('propertyRightRegistration.examine.title')" :visible.sync="visible" width="50%"
+    @close="handleClose">
+    <el-form ref="form" :model="formData" label-width="120px">
+      <el-form-item :label="$t('propertyRightRegistration.examine.room')">
+        <el-input v-model="formData.allNum" disabled
+          :placeholder="$t('propertyRightRegistration.examine.roomPlaceholder')" />
+      </el-form-item>
+
+      <el-form-item :label="$t('propertyRightRegistration.examine.state')" prop="state"
+        :rules="[{ required: true, message: $t('propertyRightRegistration.examine.stateRequired'), trigger: 'change' }]">
+        <el-select v-model="formData.state" :placeholder="$t('propertyRightRegistration.examine.statePlaceholder')"
+          style="width:100%">
+          <el-option v-for="item in stateOptions" :key="item.statusCd" :label="item.name" :value="item.statusCd"
+            :disabled="item.statusCd === '0'" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('propertyRightRegistration.examine.remark')">
+        <el-input v-model="formData.remark" type="textarea" :rows="3"
+          :placeholder="$t('propertyRightRegistration.examine.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 { getDict ,getCommunityId} from '@/api/community/communityApi'
+import { updatePropertyRightRegistration } from '@/api/room/propertyRightRegistrationManageApi'
+
+export default {
+  name: 'ExaminePropertyRightRegistration',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        prrId: '',
+        roomId: '',
+        floorNum: '',
+        unitNum: '',
+        roomNum: '',
+        allNum: '',
+        state: '',
+        remark: '',
+        flag: '1'
+      },
+      stateOptions: []
+    }
+  },
+  methods: {
+    async open(data) {
+      this.visible = true
+      await this.getStateOptions()
+
+      this.formData = {
+        prrId: data.prrId,
+        roomId: data.roomId,
+        floorNum: data.floorNum,
+        unitNum: data.unitNum,
+        roomNum: data.roomNum,
+        allNum: `${data.floorNum}-${data.unitNum}-${data.roomNum}`,
+        state: data.state === '0' ? '' : data.state,
+        remark: data.remark || '',
+        flag: '1'
+      }
+    },
+    async getStateOptions() {
+      try {
+        this.stateOptions = await getDict('property_right_registration', 'state')
+      } catch (error) {
+        console.error('获取审核状态失败:', error)
+        this.$message.error(this.$t('propertyRightRegistration.examine.fetchStateError'))
+      }
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.formData = {
+        prrId: '',
+        roomId: '',
+        floorNum: '',
+        unitNum: '',
+        roomNum: '',
+        allNum: '',
+        state: '',
+        remark: '',
+        flag: '1'
+      }
+    },
+    async handleSubmit() {
+      try {
+        await this.$refs.form.validate()
+
+        const params = {
+          ...this.formData,
+          communityId: getCommunityId()
+        }
+
+        const res = await updatePropertyRightRegistration(params)
+        if (res.code === 0) {
+          this.$message.success(this.$t('propertyRightRegistration.examine.success'))
+          this.visible = false
+          this.$emit('success')
+        } else {
+          this.$message.error(res.msg || this.$t('propertyRightRegistration.examine.error'))
+        }
+      } catch (error) {
+        if (error !== 'validate') {
+          console.error('审核失败:', error)
+          this.$message.error(this.$t('propertyRightRegistration.examine.error'))
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-card class="tree-card">
+    <el-tree
+      ref="tree"
+      :data="treeData"
+      :props="defaultProps"
+      node-key="id"
+      :default-expanded-keys="defaultExpandedKeys"
+      :highlight-current="true"
+      @node-click="handleNodeClick"
+    >
+      <template #default="{ node, data }">
+        <span class="custom-tree-node">
+          <img v-if="data.icon" :src="data.icon" class="tree-icon" />
+          <span>{{ node.label }}</span>
+        </span>
+      </template>
+    </el-tree>
+  </el-card>
+</template>
+
+<script>
+import { queryFloorAndUnits } from '@/api/room/roomStructureApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FloorUnitAllTree',
+  props: {
+    callBackListener: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      floorUnitTreeInfo: {
+        units: [],
+        floorId: ''
+      },
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'text'
+      },
+      defaultExpandedKeys: [],
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.loadFloorAndUnits()
+  },
+  methods: {
+    async loadFloorAndUnits() {
+      try {
+        const params = {
+          communityId: this.communityId
+        }
+        const data = await queryFloorAndUnits(params)
+        this.floorUnitTreeInfo.units = data
+        this.initTreeData()
+      } catch (error) {
+        console.error('Failed to load floor and units:', error)
+      }
+    },
+    initTreeData() {
+      this.treeData = this.doTreeData()
+      if (this.treeData.length > 0 && this.treeData[0].children) {
+        this.defaultExpandedKeys = [this.treeData[0].id]
+      }
+    },
+    doTreeData() {
+      const treeData = []
+      const units = this.floorUnitTreeInfo.units
+      
+      // Build first level menu (floors)
+      units.forEach(item => {
+        const existingFloor = treeData.find(floor => floor.floorId === item.floorId)
+        if (!existingFloor) {
+          const floorItem = {
+            id: `f_${item.floorId}`,
+            floorId: item.floorId,
+            floorNum: item.floorNum,
+            icon: "/img/floor.png",
+            text: `${item.floorNum}${this.$t('floorUnitTree.building')}(${item.floorName})`,
+            children: this.doTreeChildrenData(item.floorId)
+          }
+          treeData.push(floorItem)
+        }
+      })
+      
+      return treeData
+    },
+    doTreeChildrenData(floorId) {
+      const children = []
+      const units = this.floorUnitTreeInfo.units
+      
+      units.forEach(item => {
+        if (item.floorId === floorId && item.unitId) {
+          children.push({
+            id: `u_${item.unitId}`,
+            unitId: item.unitId,
+            text: `${item.unitNum}${this.$t('floorUnitTree.unit')}`,
+            icon: "/img/unit.png"
+          })
+        }
+      })
+      
+      return children
+    },
+    handleNodeClick(data) {
+      if (data.id.startsWith('f_')) {
+        this.$emit('switchFloor', {
+          floorId: data.floorId
+        })
+      } else {
+        this.$emit('switchUnit', {
+          unitId: data.unitId
+        })
+      }
+    },
+    refreshTree(params) {
+      if (params) {
+        this.floorUnitTreeInfo.floorId = params.floorId
+      }
+      this.loadFloorAndUnits()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-card {
+  height: 100%;
+  
+  .custom-tree-node {
+    display: flex;
+    align-items: center;
+    
+    .tree-icon {
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+    }
+  }
+  
+  :deep(.el-tree-node__content) {
+    height: 36px;
+  }
+}
+</style>
 \ No newline at end of file
+<template>
+  <div class="upload-image-wrapper">
+    <div v-for="(image, index) in photos" :key="index" class="image-preview">
+      <el-image
+        :src="getImageUrl(image)"
+        fit="cover"
+        class="preview-image"
+        :preview-src-list="previewList"
+      >
+        <div slot="error" class="image-error">
+          <img src="/img/noPhoto.jpg" class="error-image">
+        </div>
+      </el-image>
+      <i class="el-icon-delete delete-icon" @click="removeImage(index)"></i>
+    </div>
+
+    <div 
+      v-if="photos.length < imageCount"
+      class="upload-button"
+      @click="triggerUpload"
+    >
+      <i class="el-icon-plus"></i>
+    </div>
+
+    <input
+      type="file"
+      ref="fileInput"
+      accept="image/*"
+      class="file-input"
+      @change="handleFileChange"
+    />
+  </div>
+</template>
+
+<script>
+import { uploadFile } from '@/api/common'
+
+export default {
+  name: 'UploadImageUrl',
+  props: {
+    imageCount: {
+      type: Number,
+      default: 99
+    }
+  },
+  data() {
+    return {
+      photos: [],    // 用于显示的图片数组
+      photosUrl: []  // 包含fileId和url的对象数组
+    }
+  },
+  computed: {
+    previewList() {
+      return this.photos.map(item => this.getImageUrl(item))
+    }
+  },
+  methods: {
+    getImageUrl(item) {
+      if (typeof item === 'string') {
+        if (item.startsWith('http') || item.startsWith('https') || item.startsWith('data:')) {
+          return item
+        }
+        return `/callComponent/download/getFile/file?fileId=${item}&communityId=-1&time=${new Date()}`
+      }
+      return item.url || ''
+    },
+    triggerUpload() {
+      this.$refs.fileInput.click()
+    },
+    handleFileChange(event) {
+      const file = event.target.files[0]
+      if (!file) return
+
+      if (file.size > 2 * 1024 * 1024) {
+        this.$message.error(this.$t('upload.imageSizeLimit'))
+        return
+      }
+
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        const base64Image = e.target.result
+        this.photos.push(base64Image)
+        this.uploadFile(file)
+      }
+      reader.readAsDataURL(file)
+      event.target.value = null
+    },
+    uploadFile(file) {
+      const formData = new FormData()
+      formData.append('uploadFile', file)
+      formData.append('communityId', this.$store.getters.communityId)
+
+      uploadFile(formData)
+        .then(response => {
+          const newPhoto = {
+            fileId: response.data.fileId,
+            url: response.data.url
+          }
+          this.photosUrl.push(newPhoto)
+          this.$emit('change', this.photosUrl)
+        })
+        .catch(error => {
+          this.$message.error(error.message || this.$t('upload.failed'))
+          this.photos.pop()
+        })
+    },
+    removeImage(index) {
+      this.photos.splice(index, 1)
+      this.photosUrl.splice(index, 1)
+      this.$emit('change', this.photosUrl)
+    },
+    setPhotos(photos) {
+      this.photos = [...photos]
+      this.photosUrl = photos.map(photo => ({
+        fileId: photo,
+        url: `/callComponent/download/getFile/file?fileId=${photo}&communityId=-1&time=${new Date()}`
+      }))
+      this.$emit('change', this.photosUrl)
+    },
+    clear() {
+      this.photos = []
+      this.photosUrl = []
+      this.$emit('change', this.photosUrl)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-image-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+
+  .image-preview {
+    position: relative;
+    width: 100px;
+    height: 100px;
+
+    .preview-image {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #dcdfe6;
+      border-radius: 4px;
+    }
+
+    .delete-icon {
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      font-size: 16px;
+      color: #f56c6c;
+      background: #fff;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+  }
+
+  .upload-button {
+    width: 100px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px dashed #c0ccda;
+    border-radius: 4px;
+    background-color: #fbfdff;
+    color: #8c939d;
+    font-size: 28px;
+    cursor: pointer;
+
+    &:hover {
+      border-color: #409eff;
+    }
+  }
+
+  .file-input {
+    display: none;
+  }
+
+  .image-error {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f5f7fa;
+
+    .error-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
+</style>
 \ No newline at end of file
+<template>
+  <div class="image-viewer" v-show="visible" @click.self="close">
+    <div class="image-container">
+      <el-image
+        :src="imageUrl"
+        fit="contain"
+        :style="{width: imgWidth + 'px', height: imgHeight + 'px'}"
+      >
+        <div slot="error" class="image-error">
+          <img src="/img/noPhoto.jpg" :style="{width: imgWidth + 'px', height: imgHeight + 'px'}">
+        </div>
+      </el-image>
+      <i class="el-icon-close close-icon" @click="close"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ViewImage',
+  data() {
+    return {
+      visible: false,
+      imageUrl: '',
+      imgWidth: 800,
+      imgHeight: 600
+    }
+  },
+  methods: {
+    open(url) {
+      this.imageUrl = url
+      this.visible = true
+      this.calculateImageSize(url)
+      document.body.style.overflow = 'hidden'
+    },
+    close() {
+      this.visible = false
+      this.imageUrl = ''
+      document.body.style.overflow = ''
+    },
+    calculateImageSize(url) {
+      const img = new Image()
+      img.src = url
+      img.onload = () => {
+        const maxWidth = window.innerWidth * 0.8
+        const maxHeight = window.innerHeight * 0.8
+        const ratio = img.width / img.height
+        
+        if (img.width > maxWidth) {
+          this.imgWidth = maxWidth
+          this.imgHeight = maxWidth / ratio
+        } else if (img.height > maxHeight) {
+          this.imgHeight = maxHeight
+          this.imgWidth = maxHeight * ratio
+        } else {
+          this.imgWidth = img.width
+          this.imgHeight = img.height
+        }
+      }
+      img.onerror = () => {
+        this.imgWidth = 800
+        this.imgHeight = 600
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.image-viewer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .image-container {
+    position: relative;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 4px;
+    max-width: 90vw;
+    max-height: 90vh;
+
+    .close-icon {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      font-size: 24px;
+      color: #f56c6c;
+      cursor: pointer;
+      z-index: 1;
+      background-color: rgba(255, 255, 255, 0.7);
+      border-radius: 50%;
+      padding: 5px;
+    }
+  }
+
+  .image-error {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f5f7fa;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('feePrintPageManage.add.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="formData"
+      :rules="rules"
+      label-width="120px"
+    >
+      <el-form-item
+        :label="$t('feePrintPageManage.add.pageName')"
+        prop="pageName"
+      >
+        <el-input
+          v-model="formData.pageName"
+          :placeholder="$t('feePrintPageManage.add.pageNamePlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('feePrintPageManage.add.template')"
+        prop="pageUrl"
+      >
+        <el-select
+          v-model="formData.pageUrl"
+          :placeholder="$t('feePrintPageManage.add.templatePlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            v-for="item in templates"
+            :key="item.templateId"
+            :label="item.name"
+            :value="item.templateId"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button
+        type="primary"
+        :loading="loading"
+        @click="handleSubmit"
+      >
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { saveFeePrintPage, listFeePrintPageTemplate } from '@/api/system/feePrintPageManageApi'
+
+export default {
+  name: 'AddFeePrintPage',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      communityId: '',
+      formData: {
+        pageName: '',
+        pageUrl: '',
+        communityId: ''
+      },
+      templates: [],
+      rules: {
+        pageName: [
+          { required: true, message: this.$t('feePrintPageManage.validate.pageNameRequired'), trigger: 'blur' },
+          { max: 128, message: this.$t('feePrintPageManage.validate.pageNameMaxLength'), trigger: 'blur' }
+        ],
+        pageUrl: [
+          { required: true, message: this.$t('feePrintPageManage.validate.templateRequired'), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.communityId = getCommunityId()
+      this.formData.communityId = this.communityId
+      this.getTemplates()
+      this.visible = true
+    },
+    async getTemplates() {
+      try {
+        const params = {
+          page: 1,
+          row: 50,
+          communityId: this.communityId
+        }
+        const { data } = await listFeePrintPageTemplate(params)
+        this.templates = data
+      } catch (error) {
+        console.error('获取模板列表失败:', error)
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            this.loading = true
+            await saveFeePrintPage(this.formData)
+            this.$message.success(this.$t('feePrintPageManage.add.success'))
+            this.$emit('success')
+            this.visible = false
+          } catch (error) {
+            console.error('添加失败:', error)
+          } finally {
+            this.loading = false
+          }
+        }
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.formData = {
+        pageName: '',
+        pageUrl: '',
+        communityId: this.communityId
+      }
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('deleteDownloadTempFile.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div style="text-align: center;">
+      <p>{{ $t('deleteDownloadTempFile.confirmMessage') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('deleteDownloadTempFile.cancel') }}</el-button>
+      <el-button type="primary" @click="handleDelete">{{ $t('deleteDownloadTempFile.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteUserDownloadFile } from '@/api/system/downloadTempFileApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteDownloadTempFile',
+  data() {
+    return {
+      visible: false,
+      currentFile: null
+    }
+  },
+  methods: {
+    open(file) {
+      this.currentFile = file
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+      this.currentFile = null
+    },
+    async handleDelete() {
+      try {
+        const params = {
+          ...this.currentFile,
+          communityId: getCommunityId()
+        }
+        await deleteUserDownloadFile(params)
+        this.$emit('success')
+        this.$message.success(this.$t('deleteDownloadTempFile.deleteSuccess'))
+        this.handleClose()
+      } catch (error) {
+        this.$message.error(this.$t('deleteDownloadTempFile.deleteFailed'))
+      }
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('feePrintPageManage.delete.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div class="delete-content">
+      <i class="el-icon-warning" style="color:#E6A23C;font-size:24px;vertical-align:middle;"></i>
+      <span style="margin-left:10px;vertical-align:middle;">
+        {{ $t('feePrintPageManage.delete.confirmText') }}
+      </span>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button
+        type="primary"
+        :loading="loading"
+        @click="handleConfirm"
+      >
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { deleteFeePrintPage } from '@/api/system/feePrintPageManageApi'
+
+export default {
+  name: 'DeleteFeePrintPage',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      communityId: '',
+      currentRow: {
+        pageId: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.communityId = getCommunityId()
+      this.currentRow = {
+        pageId: row.pageId,
+        communityId: this.communityId
+      }
+      this.visible = true
+    },
+    async handleConfirm() {
+      try {
+        this.loading = true
+        await deleteFeePrintPage(this.currentRow)
+        this.$message.success(this.$t('feePrintPageManage.delete.success'))
+        this.$emit('success')
+        this.visible = false
+      } catch (error) {
+        console.error('删除失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleClose() {
+      this.currentRow = {
+        pageId: '',
+        communityId: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.delete-content {
+  padding: 10px 20px;
+  font-size: 16px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('feePrintPageManage.edit.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="formData"
+      :rules="rules"
+      label-width="120px"
+    >
+      <el-form-item
+        :label="$t('feePrintPageManage.edit.pageName')"
+        prop="pageName"
+      >
+        <el-input
+          v-model="formData.pageName"
+          :placeholder="$t('feePrintPageManage.edit.pageNamePlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('feePrintPageManage.edit.template')"
+        prop="pageUrl"
+      >
+        <el-select
+          v-model="formData.pageUrl"
+          :placeholder="$t('feePrintPageManage.edit.templatePlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            v-for="item in templates"
+            :key="item.templateId"
+            :label="item.name"
+            :value="item.templateId"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button
+        type="primary"
+        :loading="loading"
+        @click="handleSubmit"
+      >
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { updateFeePrintPage, listFeePrintPageTemplate } from '@/api/system/feePrintPageManageApi'
+
+export default {
+  name: 'EditFeePrintPage',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      communityId: '',
+      formData: {
+        pageId: '',
+        pageName: '',
+        pageUrl: '',
+        communityId: ''
+      },
+      templates: [],
+      rules: {
+        pageName: [
+          { required: true, message: this.$t('feePrintPageManage.validate.pageNameRequired'), trigger: 'blur' },
+          { max: 128, message: this.$t('feePrintPageManage.validate.pageNameMaxLength'), trigger: 'blur' }
+        ],
+        pageUrl: [
+          { required: true, message: this.$t('feePrintPageManage.validate.templateRequired'), trigger: 'change' }
+        ],
+        pageId: [
+          { required: true, message: this.$t('feePrintPageManage.validate.pageIdRequired'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.communityId = getCommunityId()
+      this.formData = {
+        pageId: row.pageId,
+        pageName: row.pageName,
+        pageUrl: row.pageUrl,
+        communityId: this.communityId
+      }
+      this.getTemplates()
+      this.visible = true
+    },
+    async getTemplates() {
+      try {
+        const params = {
+          page: 1,
+          row: 50,
+          communityId: this.communityId
+        }
+        const { data } = await listFeePrintPageTemplate(params)
+        this.templates = data
+      } catch (error) {
+        console.error('获取模板列表失败:', error)
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            this.loading = true
+            await updateFeePrintPage(this.formData)
+            this.$message.success(this.$t('feePrintPageManage.edit.success'))
+            this.$emit('success')
+            this.visible = false
+          } catch (error) {
+            console.error('更新失败:', error)
+          } finally {
+            this.loading = false
+          }
+        }
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.formData = {
+        pageId: '',
+        pageName: '',
+        pageUrl: '',
+        communityId: this.communityId
+      }
+    }
+  }
+}
+</script>
 \ No newline at end of file
+# UploadImageUrl 组件文档
+
+## 组件概述
+
+`UploadImageUrl` 是一个图片上传组件，支持上传本地图片并显示预览，同时可以删除已上传的图片。
+
+## 基本用法
+
+```vue
+<template>
+  <upload-image-url 
+    :image-count="3" 
+    @notifyUploadCoverImage="handleImageUpload"
+  />
+</template>
+
+<script>
+import UploadImageUrl from '@/components/staff/UploadImageUrl.vue'
+
+export default {
+  components: {
+    UploadImageUrl
+  },
+  methods: {
+    handleImageUpload(urls) {
+      // 处理上传后的图片URL数组
+      console.log(urls)
+    }
+  }
+}
+</script>
+```
+
+## Props
+
+| 参数名      | 说明               | 类型     | 默认值 |
+|------------|--------------------|----------|--------|
+| imageCount | 允许上传的最大图片数量 | Number   | 1      |
+
+## Events
+
+| 事件名                | 说明                     | 回调参数               |
+|----------------------|--------------------------|-----------------------|
+| notifyUploadCoverImage | 图片上传或删除时触发      | 当前所有图片的URL数组 |
+
+## 方法
+
+通过 ref 可以调用组件的方法：
+
+```vue
+<template>
+  <upload-image-url ref="uploader" />
+</template>
+
+<script>
+export default {
+  methods: {
+    clearImages() {
+      this.$refs.uploader.clearImages()
+    },
+    setImages(images) {
+      this.$refs.uploader.setImages(images)
+    }
+  }
+}
+</script>
+```
+
+| 方法名       | 说明                     | 参数                     |
+|-------------|--------------------------|--------------------------|
+| clearImages | 清空所有已上传的图片      | 无                       |
+| setImages   | 设置要显示的图片          | images: Array<string> (图片URL数组) |
+
+## 样式定制
+
+组件使用 SCSS 编写样式，可以通过以下类名进行样式覆盖：
+
+- `.upload-image-container` - 整个上传容器
+- `.image-item` - 单个图片项容器
+- `.delete-icon` - 删除按钮
+- `.upload-button` - 上传按钮
+
+## 注意事项
+
+1. 组件限制上传图片大小不超过 2MB
+2. 上传的图片会自动转换为 base64 格式进行预览
+3. 组件内部会维护两个数组：
+   - `photos`: 用于预览的图片数组（包含 base64 数据）
+   - `photosUrl`: 上传后的图片 URL 数组
+4. 当图片 URL 以 `http` 开头时，组件会直接使用该 URL 进行显示
+5. 当图片数据包含 `base64,` 时，组件会将其视为 base64 数据进行显示
+
+## 示例
+
+### 基本使用
+
+```vue
+<upload-image-url />
+```
+
+### 限制上传数量
+
+```vue
+<upload-image-url :image-count="5" />
+```
+
+### 获取上传结果
+
+```vue
+<template>
+  <upload-image-url @notifyUploadCoverImage="handleUpload" />
+</template>
+
+<script>
+export default {
+  methods: {
+    handleUpload(urls) {
+      console.log('上传的图片URL:', urls)
+      // 可以将这些URL保存到表单数据中
+    }
+  }
+}
+</script>
+```
+
+### 设置初始图片
+
+```vue
+<template>
+  <upload-image-url ref="uploader" />
+</template>
+
+<script>
+export default {
+  mounted() {
+    // 设置初始图片
+    this.$refs.uploader.setImages([
+      'https://example.com/image1.jpg',
+      'https://example.com/image2.jpg'
+    ])
+  }
+}
+</script>
+```
+
+### 清空图片
+
+```vue
+<template>
+  <upload-image-url ref="uploader" />
+  <button @click="clear">清空图片</button>
+</template>
+
+<script>
+export default {
+  methods: {
+    clear() {
+      this.$refs.uploader.clearImages()
+    }
+  }
+}
+</script>
+```
 \ No newline at end of file
@@ -11,6 +11,7 @@ export const messages = {
         delete: 'Delete',
         confirm: 'Confirm',
         cancel: 'Cancel',
+        close: 'Close',
         back: 'Back',
         warning: 'Warning',
         deleteConfirm: 'Are you sure to delete this record?',
@@ -50,6 +51,7 @@ export const messages = {
         print:'Print',
         year:'Year',
         month:'Month',
+        examine:'Examine',
       }
     },
     zh: {
@@ -64,6 +66,7 @@ export const messages = {
         delete: '删除',
         confirm: '确定',
         cancel: '取消',
+        close: '关闭',
         back: '返回',
         warning: '警告',
         deleteConfirm: '确定要删除这条记录吗？',
@@ -103,6 +106,7 @@ export const messages = {
         print:'打印',
         year:'年',
         month:'月',
+        examine:'审核',
       }
     }
   } 
 \ No newline at end of file
+import { messages as roomStructureMessages } from '../views/room/roomStructureLang'
+import { messages as carStructureMessages } from '../views/car/carStructureLang'
+import { messages as propertyRightRegistrationManageMessages } from '../views/room/propertyRightRegistrationManageLang'
+import { messages as listPropertyRightRegistrationDetailMessages } from '../views/room/listPropertyRightRegistrationDetailLang'
+export const messages = {
+    en: {
+        ...roomStructureMessages.en,
+        ...carStructureMessages.en,
+        ...propertyRightRegistrationManageMessages.en,
+        ...listPropertyRightRegistrationDetailMessages.en,
+    },
+    zh: {
+        ...roomStructureMessages.zh,
+        ...carStructureMessages.zh,
+        ...propertyRightRegistrationManageMessages.zh,
+        ...listPropertyRightRegistrationDetailMessages.zh,
+    }
+}
 \ No newline at end of file
@@ -144,6 +144,7 @@ import { messages as carI18n } from &#39;./carI18n&#39;
 import { messages as scmI18n } from './scmI18n'
 import { messages as userI18n } from './userI18n'
 import { messages as systemI18n } from './systemI18n'
+import { messages as communityI18n } from './communityI18n'
  
 Vue.use(VueI18n)
  
@@ -286,6 +287,7 @@ const messages = {
     ...scmI18n.en,
     ...userI18n.en,
     ...systemI18n.en,
+    ...communityI18n.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -422,6 +424,7 @@ const messages = {
     ...scmI18n.zh,
     ...userI18n.zh,
     ...systemI18n.zh,
+    ...communityI18n.zh,
   }
 }
  
@@ -7,6 +7,7 @@ import { messages as equipmentAccountMessages } from &#39;../views/machine/equipment
 import { messages as addEquipmentAccountMessages } from '../views/machine/addEquipmentAccountLang'
 import { messages as editEquipmentAccountMessages } from '../views/machine/editEquipmentAccountLang'
 import { messages as equipmentAccountDetailMessages } from '../views/machine/equipmentAccountDetailLang'
+import { messages as videoControlMessages } from '../views/machine/videoControlLang'
 export const messages ={
     en:{
         ...machineTypeTreeManageMessages.en,
@@ -18,6 +19,7 @@ export const messages ={
         ...accessControlInoutMessages.en,
         ...machinePrinterManageMessages.en,
         ...printerRuleMessages.en,
+        ...videoControlMessages.en,
     },
     zh:{    
         ...machineTypeTreeManageMessages.zh,
@@ -29,5 +31,6 @@ export const messages ={
         ...accessControlInoutMessages.zh, 
         ...machinePrinterManageMessages.zh,
         ...printerRuleMessages.zh,
+        ...videoControlMessages.zh,
     }
 }
 \ No newline at end of file
@@ -6,6 +6,12 @@ import { messages as paymentPoolMessages } from &#39;../views/system/paymentPoolLang
 import { messages as operateDataLogMessages } from '../views/system/operateDataLogLang'
 import { messages as historyFeeDetailImportMessages } from '../views/system/historyFeeDetailImportLang'
 import { messages as feePrintSpecManageMessages } from '../views/system/feePrintSpecManageLang'
+import { messages as feePrintPageManageMessages } from '../views/system/feePrintPageManageLang'
+import { messages as downloadTempFileMessages } from '../views/system/downloadTempFileLang'
+import { messages as assetImportLogMessages } from '../views/system/assetImportLogLang'
+import { messages as assetImportLogDetailMessages } from '../views/system/assetImportLogDetailLang'
+import { messages as payFeeQrcodeMessages } from '../views/fee/payFeeQrcodeLang'
+
 export const messages = {
     en: {
         ...communitySettingManageMessages.en,
@@ -16,6 +22,11 @@ export const messages = {
         ...operateDataLogMessages.en,
         ...historyFeeDetailImportMessages.en,
         ...feePrintSpecManageMessages.en,
+        ...feePrintPageManageMessages.en,
+        ...downloadTempFileMessages.en,
+        ...assetImportLogMessages.en,
+        ...assetImportLogDetailMessages.en,
+        ...payFeeQrcodeMessages.en,
     },
     zh: {
         ...communitySettingManageMessages.zh,
@@ -26,5 +37,10 @@ export const messages = {
         ...operateDataLogMessages.zh,
         ...historyFeeDetailImportMessages.zh,
         ...feePrintSpecManageMessages.zh,
+        ...feePrintPageManageMessages.zh,
+        ...downloadTempFileMessages.zh,
+        ...assetImportLogMessages.zh,
+        ...assetImportLogDetailMessages.zh,
+        ...payFeeQrcodeMessages.zh,
     }
 }
 \ No newline at end of file
@@ -6,6 +6,12 @@ import &#39;element-ui/lib/theme-chalk/index.css&#39;
 import i18n from './i18n'
 import {getCommunityName,getCommunityId} from '@/api/community/communityApi'
  
+// 验证全局脚本是否正确加载
+console.log('检查全局脚本加载状态:')
+console.log('Qs 库:', typeof window.Qs !== 'undefined' ? '已加载' : '未加载')
+if (typeof window.Qs !== 'undefined') {
+  console.log('Qs 版本:', window.Qs.VERSION || '未知版本')
+}
  
 Vue.prototype.getCommunityId = function(){
   return getCommunityId()
+export default [
+    {
+        path: '/pages/property/roomStructure',
+        name: '/pages/property/roomStructure',
+        component: () => import('@/views/room/roomStructureList.vue')
+    },
+    {
+        path: '/pages/property/carStructure',
+        name: '/pages/property/carStructure',
+        component: () => import('@/views/car/carStructureList.vue')
+    },
+    {
+        path: '/pages/property/propertyRightRegistrationManage',
+        name: '/pages/property/propertyRightRegistrationManage',
+        component: () => import('@/views/room/propertyRightRegistrationManageList.vue')
+    },
+    {
+        path: '/views/room/listPropertyRightRegistrationDetail',
+        name: '/views/room/listPropertyRightRegistrationDetail',
+        component: () => import('@/views/room/listPropertyRightRegistrationDetailList.vue')
+    },
+]
 \ No newline at end of file
@@ -14,6 +14,7 @@ import carRouter from &#39;./carRouter&#39;
 import scmRouter from './scmRouter'
 import userRouter from './userRouter'
 import systemRouter from './systemRouter'
+import communityRouter from './communityRouter'
  
 Vue.use(VueRouter)
  
@@ -636,6 +637,7 @@ const routes = [
       ...scmRouter,
       ...userRouter,
       ...systemRouter,
+      ...communityRouter,
       // 其他子路由可以在这里添加
     ]
   },
@@ -49,4 +49,9 @@ export default [
         name: '/pages/print/printerRule',
         component: () => import('@/views/machine/printerRuleList.vue')
     },
+    {
+        path: '/pages/property/videoControl',
+        name: '/pages/property/videoControl',
+        component: () => import('@/views/machine/videoControlList.vue')
+    },
 ]
 \ No newline at end of file
@@ -49,4 +49,29 @@ export default [
         name: '/pages/property/feePrintSpecManage',
         component: () => import('@/views/system/feePrintSpecManageList.vue')
     },
+    {
+        path: '/pages/property/feePrintPageManage',
+        name: '/pages/property/feePrintPageManage',
+        component: () => import('@/views/system/feePrintPageManageList.vue')
+    },
+    {
+        path: '/pages/property/downloadTempFile',
+        name: '/pages/property/downloadTempFile',
+        component: () => import('@/views/system/downloadTempFileList.vue')
+    },
+    {
+        path: '/pages/property/assetImportLog',
+        name: '/pages/property/assetImportLog',
+        component: () => import('@/views/system/assetImportLogList.vue')
+    },
+    {
+        path: '/views/system/assetImportLogDetail',
+        name: '/views/system/assetImportLogDetail',
+        component: () => import('@/views/system/assetImportLogDetailList.vue')
+    },
+    {
+        path: '/pages/fee/payFeeQrcode',
+        name: '/pages/fee/payFeeQrcode',
+        component: () => import('@/views/fee/payFeeQrcodeList.vue')
+    },
 ]
 \ No newline at end of file
+export const messages = {
+  en: {
+    carStructure: {
+      noOwner: 'No Owner',
+      oweAmount: 'Arrears',
+      yuan: 'Yuan',
+      searchPlaceholder: 'Please enter house number building-unit-room such as 1-1-1',
+      fetchError: 'Failed to fetch car structure data'
+    },
+    floorUnitTree: {
+      noBuilding: 'No building currently',
+      building: 'Building',
+      unit: 'Unit',
+      fetchError: 'Failed to fetch floor and unit data'
+    }
+  },
+  zh: {
+    carStructure: {
+      noOwner: '无',
+      oweAmount: '欠费',
+      yuan: '元',
+      searchPlaceholder: '请输入房屋编号 楼栋-单元-房屋 如1-1-1',
+      fetchError: '获取车位结构数据失败'
+    },
+    floorUnitTree: {
+      noBuilding: '当前没有楼栋',
+      building: '栋',
+      unit: '单元',
+      fetchError: '获取楼栋单元数据失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="car-structure-container">
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <floor-unit-tree ref="floorUnitTree" @switchFloorUnit="switchFloorUnit" />
+      </el-col>
+      <el-col :span="20">
+        <el-card class="box-card margin-bottom car-list-card">
+          <el-row :gutter="10" class="margin-top">
+            <el-col v-for="(car, index) in carStructureInfo.cars" :key="index" :span="4"
+              class="text-center margin-bottom padding car-card" :style="{ 'background-color': getBgColor(car) }"
+              @dblclick.native="toSimplifyAcceptance(car)">
+              <div>{{ car.areaNum }}-{{ car.num }}</div>
+              <div>{{ car.carNum }}</div>
+              <div>{{ car.floorNum }}-{{ car.unitNum }}-{{ car.roomNum }}</div>
+              <div>{{ car.ownerName || $t('carStructure.noOwner') }}</div>
+              <div>
+                <span>{{ $t('carStructure.oweAmount') }}</span>：{{ car.oweAmount }}
+                <span>{{ $t('carStructure.yuan') }}</span>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import floorUnitTree from '@/components/room/floorUnitTree'
+import { listCarStructure } from '@/api/car/carStructureApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'CarStructureList',
+  components: {
+    floorUnitTree
+  },
+  data() {
+    return {
+      carStructureInfo: {
+        cars: []
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    switchFloorUnit(data) {
+      if (!data.unitId) {
+        return
+      }
+      this.loadCars(data.unitId)
+    },
+    async loadCars(unitId) {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          unitId: unitId,
+          communityId: this.communityId
+        }
+        const { data } = await listCarStructure(params)
+        this.carStructureInfo.cars = data
+      } catch (error) {
+        this.$message.error(this.$t('carStructure.fetchError'))
+      }
+    },
+    getBgColor(car) {
+      if (!car.ownerName) {
+        return "#1AB394"
+      }
+      if (car.oweAmount > 0) {
+        return "#DC3545"
+      }
+      return "#1296db"
+    },
+    toSimplifyAcceptance(car) {
+      const date = new Date()
+      this.$store.dispatch('app/saveData', {
+        key: "JAVA110_IS_BACK",
+        value: date.getTime()
+      })
+      this.$store.dispatch('app/saveData', {
+        key: 'simplifyAcceptanceSearch',
+        value: {
+          searchType: '1',
+          searchValue: `${car.floorNum}-${car.unitNum}-${car.roomNum}`,
+          searchPlaceholder: this.$t('carStructure.searchPlaceholder')
+        }
+      })
+      this.$router.push('/pages/property/simplifyAcceptance?tab=业务受理')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.car-structure-container {
+  padding: 20px;
+
+  .car-list-card {
+    height: 100%;
+    min-height: calc(100vh - 120px);
+  }
+
+  .car-card {
+    color: #fff;
+    border-radius: 5px;
+    cursor: pointer;
+    min-height: 120px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    transition: all 0.3s;
+
+    &:hover {
+      transform: scale(1.05);
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .margin-top {
+    margin-top: 10px;
+  }
+
+  .margin-bottom {
+    margin-bottom: 20px;
+  }
+
+  .padding {
+    padding: 10px;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    payFeeQrcode: {
+      search: {
+        title: 'Search Condition',
+        qrcodeName: 'QR Code Name'
+      },
+      list: {
+        title: 'Payment QR Code List'
+      },
+      table: {
+        qrcodeName: 'Name',
+        queryWay: 'Query Method',
+        smsValidate: 'Validation',
+        customFee: 'Custom Payment',
+        feeType: 'Display Fee',
+        state: 'Status',
+        createStaffName: 'Creator',
+        createTime: 'Create Time'
+      },
+      queryWay: {
+        byPhone: 'By Owner Phone',
+        byHouse: 'By House',
+        byBoth: 'By House or Owner Phone'
+      },
+      feeType: {
+        owner: 'Owner Fee',
+        house: 'House Fee'
+      },
+      operation: {
+        viewQrcode: 'QR Code'
+      },
+      form: {
+        qrcodeName: 'Name',
+        queryWay: 'Query Method',
+        smsValidate: 'Validation',
+        customFee: 'Custom Payment',
+        preFee: 'Prepayment',
+        content: 'Prompt Content'
+      },
+      placeholder: {
+        qrcodeName: 'Please enter name',
+        queryWay: 'Please select query method',
+        smsValidate: 'Please select validation',
+        customFee: 'Please select custom payment',
+        preFee: 'Please select prepayment',
+        content: 'Please enter prompt content'
+      },
+      rules: {
+        qrcodeName: 'Name cannot be empty',
+        qrcodeNameMax: 'Name cannot exceed 128 characters',
+        queryWay: 'Please select query method',
+        smsValidate: 'Please select validation',
+        customFee: 'Please select custom payment',
+        preFee: 'Please select prepayment',
+        content: 'Prompt content cannot be empty',
+        contentMax: 'Prompt content cannot exceed 512 characters',
+        pfqId: 'ID cannot be empty'
+      },
+      add: {
+        title: 'Add Payment QR Code'
+      },
+      edit: {
+        title: 'Edit Payment QR Code'
+      },
+      delete: {
+        title: 'Delete Confirmation',
+        confirmText: 'Are you sure to delete this payment QR code?'
+      },
+      view: {
+        title: 'Payment QR Code',
+        tip: 'Please take a screenshot and post it at the cashier'
+      },
+      message: {
+        addSuccess: 'Added successfully',
+        addFailed: 'Failed to add',
+        editSuccess: 'Modified successfully',
+        editFailed: 'Failed to modify',
+        deleteSuccess: 'Deleted successfully',
+        deleteFailed: 'Failed to delete',
+        fetchError: 'Failed to get data'
+      }
+    }
+  },
+  zh: {
+    payFeeQrcode: {
+      search: {
+        title: '查询条件',
+        qrcodeName: '二维码名称'
+      },
+      list: {
+        title: '支付二维码列表'
+      },
+      table: {
+        qrcodeName: '名称',
+        queryWay: '查询方式',
+        smsValidate: '验证',
+        customFee: '自定义缴费',
+        feeType: '展示费用',
+        state: '状态',
+        createStaffName: '创建人',
+        createTime: '创建时间'
+      },
+      queryWay: {
+        byPhone: '按业主手机号',
+        byHouse: '按房屋',
+        byBoth: '按房屋或者业主手机号'
+      },
+      feeType: {
+        owner: '业主费用',
+        house: '房屋费用'
+      },
+      operation: {
+        viewQrcode: '二维码'
+      },
+      form: {
+        qrcodeName: '名称',
+        queryWay: '查询方式',
+        smsValidate: '验证',
+        customFee: '自定义缴费',
+        preFee: '预交费',
+        content: '提示内容'
+      },
+      placeholder: {
+        qrcodeName: '请输入名称',
+        queryWay: '请选择查询方式',
+        smsValidate: '请选择验证',
+        customFee: '请选择自定义缴费',
+        preFee: '请选择预交费',
+        content: '请输入提示内容'
+      },
+      rules: {
+        qrcodeName: '名称不能为空',
+        qrcodeNameMax: '名称不能超过128个字符',
+        queryWay: '请选择查询方式',
+        smsValidate: '请选择验证',
+        customFee: '请选择自定义缴费',
+        preFee: '请选择预交费',
+        content: '提示内容不能为空',
+        contentMax: '提示内容不能超过512个字符',
+        pfqId: '编号不能为空'
+      },
+      add: {
+        title: '添加支付二维码'
+      },
+      edit: {
+        title: '修改支付二维码'
+      },
+      delete: {
+        title: '删除确认',
+        confirmText: '确定删除该支付二维码吗？'
+      },
+      view: {
+        title: '支付二维码',
+        tip: '请截图贴在收银台'
+      },
+      message: {
+        addSuccess: '添加成功',
+        addFailed: '添加失败',
+        editSuccess: '修改成功',
+        editFailed: '修改失败',
+        deleteSuccess: '删除成功',
+        deleteFailed: '删除失败',
+        fetchError: '获取数据失败'
+      }
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="pay-fee-qrcode-container">
+    <!-- Search Condition -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('payFeeQrcode.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="searchForm.qrcodeName" :placeholder="$t('payFeeQrcode.search.qrcodeName')" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="handleSearch">
+            <i class="el-icon-search"></i>
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="handleReset">
+            <i class="el-icon-refresh"></i>
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- Data List -->
+    <el-card class="list-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('payFeeQrcode.list.title') }}</span>
+        <el-button type="primary" size="small" class="float-right" @click="handleAdd">
+          <i class="el-icon-plus"></i>
+          {{ $t('common.add') }}
+        </el-button>
+      </div>
+
+      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+        <el-table-column prop="qrcodeName" :label="$t('payFeeQrcode.table.qrcodeName')" align="center" />
+        <el-table-column prop="queryWay" :label="$t('payFeeQrcode.table.queryWay')" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.queryWay === '1001'">
+              {{ $t('payFeeQrcode.queryWay.byPhone') }}
+            </span>
+            <span v-else-if="scope.row.queryWay === '2002'">
+              {{ $t('payFeeQrcode.queryWay.byHouse') }}
+            </span>
+            <span v-else>
+              {{ $t('payFeeQrcode.queryWay.byBoth') }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="smsValidate" :label="$t('payFeeQrcode.table.smsValidate')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.smsValidate === 'ON' ? $t('common.yes') : $t('common.no') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="customFee" :label="$t('payFeeQrcode.table.customFee')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.customFee === 'ON' ? $t('common.yes') : $t('common.no') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="feeType" :label="$t('payFeeQrcode.table.feeType')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.feeType === 'OWNER' ? $t('payFeeQrcode.feeType.owner') : $t('payFeeQrcode.feeType.house') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="state" :label="$t('payFeeQrcode.table.state')" align="center">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.state === 'ON' ? 'success' : 'danger'">
+              {{ scope.row.state === 'ON' ? $t('common.enabled') : $t('common.disabled') }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createStaffName" :label="$t('payFeeQrcode.table.createStaffName')" align="center" />
+        <el-table-column prop="createTime" :label="$t('payFeeQrcode.table.createTime')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="250">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleView(scope.row)">
+              {{ $t('payFeeQrcode.operation.viewQrcode') }}
+            </el-button>
+            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
+              {{ $t('common.delete') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+        :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+
+    <!-- Components -->
+    <add-pay-fee-qrcode ref="addDialog" @success="handleSuccess" />
+    <edit-pay-fee-qrcode ref="editDialog" @success="handleSuccess" />
+    <delete-pay-fee-qrcode ref="deleteDialog" @success="handleSuccess" />
+    <view-pay-fee-qrcode ref="viewDialog" />
+  </div>
+</template>
+
+<script>
+import { listPayFeeQrcode } from '@/api/fee/payFeeQrcodeApi'
+import AddPayFeeQrcode from '@/components/fee/addPayFeeQrcode'
+import EditPayFeeQrcode from '@/components/fee/editPayFeeQrcode'
+import DeletePayFeeQrcode from '@/components/fee/deletePayFeeQrcode'
+import ViewPayFeeQrcode from '@/components/fee/viewPayFeeQrcode'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'PayFeeQrcodeList',
+  components: {
+    AddPayFeeQrcode,
+    EditPayFeeQrcode,
+    DeletePayFeeQrcode,
+    ViewPayFeeQrcode
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        qrcodeName: '',
+        customFee: '',
+        preFee: ''
+      },
+      tableData: [],
+      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,
+          qrcodeName: this.searchForm.qrcodeName,
+          communityId: this.communityId
+        }
+        const { data, total } = await listPayFeeQrcode(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        this.$message.error(this.$t('payFeeQrcode.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        qrcodeName: '',
+        customFee: '',
+        preFee: ''
+      }
+      this.handleSearch()
+    },
+    handleAdd() {
+      this.$refs.addDialog.open()
+    },
+    handleEdit(row) {
+      this.$refs.editDialog.open(row)
+    },
+    handleDelete(row) {
+      this.$refs.deleteDialog.open(row)
+    },
+    handleView(row) {
+      this.$refs.viewDialog.open(row)
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pay-fee-qrcode-container {
+  padding: 20px;
+
+  .search-wrapper {
+    margin-bottom: 20px;
+
+    .el-input {
+      width: 100%;
+    }
+  }
+
+  .list-wrapper {
+    .float-right {
+      float: right;
+    }
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    videoControl: {
+      title: 'Video Control'
+    },
+    cameraControlVideo: {
+      camera: 'Camera',
+      fourWay: 'Four Way',
+      sixWay: 'Six Way',
+      getVideoUrlError: 'Failed to get video URL'
+    },
+    selectVideoMachine: {
+      title: 'Select Video Machine',
+      monitorArea: 'Monitor Area',
+      camera: 'Camera',
+      loadAreasError: 'Failed to load monitor areas',
+      loadMachinesError: 'Failed to load monitor machines'
+    }
+  },
+  zh: {
+    videoControl: {
+      title: '视频控制'
+    },
+    cameraControlVideo: {
+      camera: '摄像头',
+      fourWay: '四路',
+      sixWay: '六路',
+      getVideoUrlError: '获取视频地址失败'
+    },
+    selectVideoMachine: {
+      title: '选择视频设备',
+      monitorArea: '监控区域',
+      camera: '摄像头',
+      loadAreasError: '加载监控区域失败',
+      loadMachinesError: '加载监控设备失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="video-control-container">
+    <el-card class="box-card">
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <camera-control-video ref="cameraControl" />
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import CameraControlVideo from '@/components/machine/cameraControlVideo.vue'
+
+export default {
+  name: 'VideoControlList',
+  components: {
+    CameraControlVideo
+  },
+  data() {
+    return {
+      communityId: ''
+    }
+  },
+  created() {
+    this.getCommunityId()
+  },
+  methods: {
+    async getCommunityId() {
+      try {
+        const { getCommunityId } = await import('@/api/community/communityApi')
+        this.communityId = getCommunityId()
+      } catch (error) {
+        console.error('Failed to get communityId:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.video-control-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .clearfix {
+    font-size: 18px;
+    font-weight: bold;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    propertyRightDetail: {
+      title: 'Property Registration Details',
+      table: {
+        id: 'ID',
+        materialType: 'Material Type',
+        isPayment: 'Payment Status',
+        image: 'Images',
+        createTime: 'Create Time',
+        operation: 'Operations'
+      },
+      edit: {
+        title: 'Edit Property Registration',
+        materialType: 'Material Type',
+        materialTypePlaceholder: 'Required, please enter material type',
+        materialTypeRequired: 'Material type is required',
+        idCardPhoto: 'ID Card Photos',
+        idCardPhotoTip: 'Please upload front and back photos of ID card',
+        houseContract: 'House Purchase Contract',
+        houseContractTip: 'Please upload up to 10 house purchase contract photos',
+        repairFund: 'Repair Fund Payment',
+        repairFundPlaceholder: 'Please select repair fund payment status',
+        repairFundPhoto: 'Repair Fund Proof',
+        deedTax: 'Deed Tax Payment',
+        deedTaxPlaceholder: 'Please select deed tax payment status',
+        deedTaxPhoto: 'Deed Tax Proof'
+      },
+      fetchError: 'Failed to fetch property registration details'
+    }
+  },
+  zh: {
+    propertyRightDetail: {
+      title: '产权登记详情',
+      table: {
+        id: 'ID',
+        materialType: '材料类型',
+        isPayment: '是否缴费',
+        image: '图片',
+        createTime: '创建时间',
+        operation: '操作'
+      },
+      edit: {
+        title: '修改产权登记',
+        materialType: '材料类型',
+        materialTypePlaceholder: '必填，请填写材料类型',
+        materialTypeRequired: '材料类型不能为空',
+        idCardPhoto: '身份证照片',
+        idCardPhotoTip: '请上传正反两张身份证照片',
+        houseContract: '购房合同',
+        houseContractTip: '请上传不超过十张购房合同照片',
+        repairFund: '维修基金缴纳',
+        repairFundPlaceholder: '请选择维修基金缴纳状态',
+        repairFundPhoto: '维修基金证明',
+        deedTax: '契税缴纳',
+        deedTaxPlaceholder: '请选择契税缴纳状态',
+        deedTaxPhoto: '契税证明'
+      },
+      fetchError: '获取产权登记详情失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="property-right-detail-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <div class="card-header">
+          <div>
+            <span>{{ listPropertyRightRegistrationDetailInfo.conditions.floorNum }}-{{
+              listPropertyRightRegistrationDetailInfo.conditions.unitNum }}-{{
+                listPropertyRightRegistrationDetailInfo.conditions.roomNum }}</span>
+            <span>{{ $t('propertyRightDetail.title') }}</span>
+          </div>
+          <div class="card-tools">
+            <el-button type="primary" size="small" @click="_goBack">
+              <i class="el-icon-close"></i>
+              <span>{{ $t('common.back') }}</span>
+            </el-button>
+          </div>
+        </div>
+      </div>
+
+      <el-table :data="listPropertyRightRegistrationDetailInfo.propertyRightRegistrationDetails" border
+        style="width: 100%" v-loading="loading">
+        <el-table-column prop="prrdId" :label="$t('propertyRightDetail.table.id')" align="center" />
+        <el-table-column prop="securitiesName" :label="$t('propertyRightDetail.table.materialType')" align="center" />
+        <el-table-column :label="$t('propertyRightDetail.table.isPayment')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.isTrue === '-1' ? '--' : scope.row.isTrue === 'true' ? $t('common.yes') : $t('common.no') }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('propertyRightDetail.table.image')" align="center">
+          <template slot-scope="scope">
+            <div v-if="scope.row.securities === '001'">
+              <div v-for="(item, index) in scope.row.idCardUrlShow" :key="index" class="image-container"
+                @click="showImg(item)">
+                <el-image :src="item" :preview-src-list="scope.row.idCardUrlShow" fit="cover"
+                  style="width: 50px; height: 50px">
+                  <div slot="error" class="image-slot">
+                    <img src="/img/noPhoto.jpg" style="width: 50px; height: 50px">
+                  </div>
+                </el-image>
+                <img src="/img/icon-bigimg.png" class="preview-icon">
+              </div>
+            </div>
+            <div v-else-if="scope.row.securities === '002'">
+              <div v-for="(item, index) in scope.row.housePurchaseUrlShow" :key="index" class="image-container"
+                @click="showImg(item)">
+                <el-image :src="item" :preview-src-list="scope.row.housePurchaseUrlShow" fit="cover"
+                  style="width: 50px; height: 50px">
+                  <div slot="error" class="image-slot">
+                    <img src="/img/noPhoto.jpg" style="width: 50px; height: 50px">
+                  </div>
+                </el-image>
+                <img src="/img/icon-bigimg.png" class="preview-icon">
+              </div>
+            </div>
+            <div v-else-if="scope.row.securities === '003'">
+              <div v-for="(item, index) in scope.row.repairUrlShow" :key="index" class="image-container"
+                @click="showImg(item)">
+                <el-image :src="item" :preview-src-list="scope.row.repairUrlShow" fit="cover"
+                  style="width: 50px; height: 50px">
+                  <div slot="error" class="image-slot">
+                    <img src="/img/noPhoto.jpg" style="width: 50px; height: 50px">
+                  </div>
+                </el-image>
+                <img src="/img/icon-bigimg.png" class="preview-icon">
+              </div>
+            </div>
+            <div v-else-if="scope.row.securities === '004'">
+              <div v-for="(item, index) in scope.row.deedTaxUrlShow" :key="index" class="image-container"
+                @click="showImg(item)">
+                <el-image :src="item" :preview-src-list="scope.row.deedTaxUrlShow" fit="cover"
+                  style="width: 50px; height: 50px">
+                  <div slot="error" class="image-slot">
+                    <img src="/img/noPhoto.jpg" style="width: 50px; height: 50px">
+                  </div>
+                </el-image>
+                <img src="/img/icon-bigimg.png" class="preview-icon">
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('propertyRightDetail.table.createTime')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="_openEditPropertyRightRegistrationDetailModel(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+        :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+
+    <edit-property-right-registration-detail ref="editPropertyRightRegistrationDetail" @success="handleSuccess" />
+    <view-image ref="viewImage" />
+  </div>
+</template>
+
+<script>
+import { listPropertyRightRegistrationDetail } from '@/api/room/listPropertyRightRegistrationDetailApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import EditPropertyRightRegistrationDetail from '@/components/room/editPropertyRightRegistrationDetail'
+import ViewImage from '@/components/system/viewImage'
+
+export default {
+  name: 'ListPropertyRightRegistrationDetail',
+  components: {
+    EditPropertyRightRegistrationDetail,
+    ViewImage
+  },
+  data() {
+    return {
+      loading: false,
+      listPropertyRightRegistrationDetailInfo: {
+        propertyRightRegistrationDetails: [],
+        conditions: {
+          prrId: '',
+          securities: '',
+          floorNum: '',
+          unitNum: '',
+          roomNum: '',
+          isTrue: '',
+          communityId: ''
+        }
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.listPropertyRightRegistrationDetailInfo.conditions.communityId = getCommunityId()
+    this.listPropertyRightRegistrationDetailInfo.conditions.prrId = this.$route.query.prrId
+    this.listPropertyRightRegistrationDetailInfo.conditions.floorNum = this.$route.query.floorNum
+    this.listPropertyRightRegistrationDetailInfo.conditions.unitNum = this.$route.query.unitNum
+    this.listPropertyRightRegistrationDetailInfo.conditions.roomNum = this.$route.query.roomNum
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          ...this.listPropertyRightRegistrationDetailInfo.conditions
+        }
+        const { data, total } = await listPropertyRightRegistrationDetail(params)
+        this.listPropertyRightRegistrationDetailInfo.propertyRightRegistrationDetails = data.map(item => {
+          if (item.securities === '001' && item.idCardUrl) {
+            item.idCardUrl = item.idCardUrl.split(',')
+            item.idCardUrlShow = item.idCardUrl.map(url => `/callComponent/download/getFile/file?fileId=${url}&communityId=-1&time=${new Date()}`)
+          }
+          if (item.securities === '002' && item.housePurchaseUrl) {
+            item.housePurchaseUrl = item.housePurchaseUrl.split(',')
+            item.housePurchaseUrlShow = item.housePurchaseUrl.map(url => `/callComponent/download/getFile/file?fileId=${url}&communityId=-1&time=${new Date()}`)
+          }
+          if (item.securities === '003' && item.repairUrl) {
+            item.repairUrl = item.repairUrl.split(',')
+            item.repairUrlShow = item.repairUrl.map(url => `/callComponent/download/getFile/file?fileId=${url}&communityId=-1&time=${new Date()}`)
+          }
+          if (item.securities === '004' && item.deedTaxUrl) {
+            item.deedTaxUrl = item.deedTaxUrl.split(',')
+            item.deedTaxUrlShow = item.deedTaxUrl.map(url => `/callComponent/download/getFile/file?fileId=${url}&communityId=-1&time=${new Date()}`)
+          }
+          return item
+        })
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('propertyRightDetail.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.getList()
+    },
+    _openEditPropertyRightRegistrationDetailModel(row) {
+      this.$refs.editPropertyRightRegistrationDetail.open(row)
+    },
+    showImg(url) {
+      this.$refs.viewImage.open(url)
+    },
+    _goBack() {
+      this.$router.go(-1)
+    },
+    handleSuccess() {
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.property-right-detail-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      span {
+        font-size: 18px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .image-container {
+    position: relative;
+    display: inline-block;
+    margin-right: 10px;
+
+    .preview-icon {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  zh: {
+    propertyRightRegistration: {
+      search: {
+        title: '查询条件',
+        roomId: '房屋ID',
+        allNum: '房屋编号(楼栋-单元-房屋)',
+        name: '姓名',
+        link: '联系方式',
+        idCard: '身份证号',
+        address: '地址',
+        state: '审核状态',
+        floor: '楼栋',
+        unit: '单元'
+      },
+      list: {
+        title: '房屋产权'
+      },
+      table: {
+        prrId: '房屋产权ID',
+        roomId: '房屋ID',
+        roomNum: '房屋编号',
+        name: '姓名',
+        link: '联系方式',
+        idCard: '身份证号',
+        address: '地址',
+        state: '状态'
+      },
+      add: {
+        title: '添加产权登记',
+        floor: '楼栋',
+        floorRequired: '请选择楼栋',
+        floorPlaceholder: '请选择楼栋',
+        floorUnit: '号楼',
+        unit: '单元',
+        unitRequired: '请选择单元',
+        unitPlaceholder: '请选择单元',
+        unitUnit: '单元',
+        room: '房屋',
+        roomRequired: '请选择房屋',
+        roomPlaceholder: '请选择房屋',
+        name: '姓名',
+        nameRequired: '请输入姓名',
+        namePlaceholder: '请输入姓名',
+        nameLength: '姓名长度在2到64个字符之间',
+        link: '联系方式',
+        linkRequired: '请输入联系方式',
+        linkPlaceholder: '请输入联系方式',
+        idCard: '身份证号',
+        idCardRequired: '请输入身份证号',
+        idCardPlaceholder: '请输入身份证号',
+        idCardFormatError: '身份证格式不正确',
+        address: '地址',
+        addressRequired: '请输入地址',
+        addressPlaceholder: '请输入地址',
+        addressMax: '地址长度不能超过255个字符',
+        idCardPhotos: '身份证照片',
+        idCardPhotosRequired: '请上传身份证照片',
+        idCardPhotosTip: '*请上传正反两张身份证照片*',
+        housePurchasePhotos: '购房合同照片',
+        housePurchasePhotosRequired: '请上传购房合同照片',
+        housePurchasePhotosTip: '*请上传不超过十张购房合同图片*',
+        isTrue: '维修基金是否缴纳',
+        isTrueRequired: '请选择维修基金是否缴纳',
+        isTruePlaceholder: '请选择维修基金是否缴纳',
+        repairPhotos: '维修基金照片',
+        repairPhotosRequired: '请上传维修基金照片',
+        flag: '契税是否缴纳',
+        flagRequired: '请选择契税是否缴纳',
+        flagPlaceholder: '请选择契税是否缴纳',
+        deedTaxPhotos: '契税证明照片',
+        deedTaxPhotosRequired: '请上传契税证明照片',
+        success: '添加成功',
+        error: '添加失败'
+      },
+      edit: {
+        title: '修改产权登记',
+        floor: '楼栋',
+        floorRequired: '请选择楼栋',
+        floorPlaceholder: '请选择楼栋',
+        floorUnit: '号楼',
+        unit: '单元',
+        unitRequired: '请选择单元',
+        unitPlaceholder: '请选择单元',
+        unitUnit: '单元',
+        room: '房屋',
+        roomRequired: '请选择房屋',
+        roomPlaceholder: '请选择房屋',
+        name: '姓名',
+        nameRequired: '请输入姓名',
+        namePlaceholder: '请输入姓名',
+        nameLength: '姓名长度在2到64个字符之间',
+        link: '联系方式',
+        linkRequired: '请输入联系方式',
+        linkPlaceholder: '请输入联系方式',
+        idCard: '身份证号',
+        idCardRequired: '请输入身份证号',
+        idCardPlaceholder: '请输入身份证号',
+        idCardFormatError: '身份证格式不正确',
+        address: '地址',
+        addressRequired: '请输入地址',
+        addressPlaceholder: '请输入地址',
+        addressMax: '地址长度不能超过255个字符',
+        success: '修改成功',
+        error: '修改失败'
+      },
+      examine: {
+        title: '产权登记审核',
+        room: '房屋',
+        roomPlaceholder: '房屋信息',
+        state: '状态',
+        stateRequired: '请选择状态',
+        statePlaceholder: '请选择状态',
+        remark: '审核意见',
+        remarkPlaceholder: '请输入审核意见',
+        success: '审核成功',
+        error: '审核失败',
+        fetchStateError: '获取审核状态失败'
+      },
+      delete: {
+        title: '删除确认',
+        confirm: '确定删除该房屋产权登记信息吗？',
+        tip: '删除后将无法恢复，请谨慎操作！',
+        success: '删除成功',
+        error: '删除失败'
+      },
+      fetchError: '获取数据失败'
+    },
+  },
+  en: {
+    propertyRightRegistration: {
+      search: {
+        title: 'Search Conditions',
+        roomId: 'Room ID',
+        allNum: 'Room Number(Building-Unit-Room)',
+        name: 'Name',
+        link: 'Contact',
+        idCard: 'ID Card',
+        address: 'Address',
+        state: 'Audit Status',
+        floor: 'Building',
+        unit: 'Unit'
+      },
+      list: {
+        title: 'Property Right'
+      },
+      table: {
+        prrId: 'Property Right ID',
+        roomId: 'Room ID',
+        roomNum: 'Room Number',
+        name: 'Name',
+        link: 'Contact',
+        idCard: 'ID Card',
+        address: 'Address',
+        state: 'Status'
+      },
+      add: {
+        title: 'Add Property Registration',
+        floor: 'Building',
+        floorRequired: 'Please select building',
+        floorPlaceholder: 'Please select building',
+        floorUnit: 'Building',
+        unit: 'Unit',
+        unitRequired: 'Please select unit',
+        unitPlaceholder: 'Please select unit',
+        unitUnit: 'Unit',
+        room: 'Room',
+        roomRequired: 'Please select room',
+        roomPlaceholder: 'Please select room',
+        name: 'Name',
+        nameRequired: 'Please enter name',
+        namePlaceholder: 'Please enter name',
+        nameLength: 'Name length should be between 2 and 64 characters',
+        link: 'Contact',
+        linkRequired: 'Please enter contact',
+        linkPlaceholder: 'Please enter contact',
+        idCard: 'ID Card',
+        idCardRequired: 'Please enter ID card',
+        idCardPlaceholder: 'Please enter ID card',
+        idCardFormatError: 'Invalid ID card format',
+        address: 'Address',
+        addressRequired: 'Please enter address',
+        addressPlaceholder: 'Please enter address',
+        addressMax: 'Address length cannot exceed 255 characters',
+        idCardPhotos: 'ID Card Photos',
+        idCardPhotosRequired: 'Please upload ID card photos',
+        idCardPhotosTip: '*Please upload front and back photos of ID card*',
+        housePurchasePhotos: 'House Purchase Contract Photos',
+        housePurchasePhotosRequired: 'Please upload house purchase contract photos',
+        housePurchasePhotosTip: '*Please upload up to ten house purchase contract photos*',
+        isTrue: 'Maintenance Fund Paid',
+        isTrueRequired: 'Please select whether maintenance fund is paid',
+        isTruePlaceholder: 'Please select whether maintenance fund is paid',
+        repairPhotos: 'Maintenance Fund Photos',
+        repairPhotosRequired: 'Please upload maintenance fund photos',
+        flag: 'Deed Tax Paid',
+        flagRequired: 'Please select whether deed tax is paid',
+        flagPlaceholder: 'Please select whether deed tax is paid',
+        deedTaxPhotos: 'Deed Tax Certificate Photos',
+        deedTaxPhotosRequired: 'Please upload deed tax certificate photos',
+        success: 'Added successfully',
+        error: 'Failed to add'
+      },
+      edit: {
+        title: 'Edit Property Registration',
+        floor: 'Building',
+        floorRequired: 'Please select building',
+        floorPlaceholder: 'Please select building',
+        floorUnit: 'Building',
+        unit: 'Unit',
+        unitRequired: 'Please select unit',
+        unitPlaceholder: 'Please select unit',
+        unitUnit: 'Unit',
+        room: 'Room',
+        roomRequired: 'Please select room',
+        roomPlaceholder: 'Please select room',
+        name: 'Name',
+        nameRequired: 'Please enter name',
+        namePlaceholder: 'Please enter name',
+        nameLength: 'Name length should be between 2 and 64 characters',
+        link: 'Contact',
+        linkRequired: 'Please enter contact',
+        linkPlaceholder: 'Please enter contact',
+        idCard: 'ID Card',
+        idCardRequired: 'Please enter ID card',
+        idCardPlaceholder: 'Please enter ID card',
+        idCardFormatError: 'Invalid ID card format',
+        address: 'Address',
+        addressRequired: 'Please enter address',
+        addressPlaceholder: 'Please enter address',
+        addressMax: 'Address length cannot exceed 255 characters',
+        success: 'Updated successfully',
+        error: 'Failed to update'
+      },
+      examine: {
+        title: 'Property Registration Audit',
+        room: 'Room',
+        roomPlaceholder: 'Room information',
+        state: 'Status',
+        stateRequired: 'Please select status',
+        statePlaceholder: 'Please select status',
+        remark: 'Audit Opinion',
+        remarkPlaceholder: 'Please enter audit opinion',
+        success: 'Audit successful',
+        error: 'Audit failed',
+        fetchStateError: 'Failed to get audit status'
+      },
+      delete: {
+        title: 'Delete Confirmation',
+        confirm: 'Are you sure to delete this property registration?',
+        tip: 'The data cannot be recovered after deletion, please operate carefully!',
+        success: 'Deleted successfully',
+        error: 'Failed to delete'
+      },
+      fetchError: 'Failed to fetch data'
+    }
+  }
+
+}
 \ No newline at end of file
+<template>
+  <div class="property-right-registration-container">
+    <!-- 查询条件 -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('propertyRightRegistration.search.title') }}</span>
+        <el-button type="text" style="float: right; padding: 3px 0" @click="toggleMoreCondition">
+          {{ showMoreCondition ? $t('common.hide') : $t('common.more') }}
+        </el-button>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="searchForm.roomId" :placeholder="$t('propertyRightRegistration.search.roomId')"
+            clearable />
+        </el-col>
+        <el-col :span="8">
+          <el-input v-model="searchForm.allNum" :placeholder="$t('propertyRightRegistration.search.allNum')"
+            clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="searchForm.name" :placeholder="$t('propertyRightRegistration.search.name')" clearable />
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary" @click="handleSearch">
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="handleReset">
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+
+      <!-- 更多查询条件 -->
+      <div v-show="showMoreCondition">
+        <el-row :gutter="20" class="mt-20">
+          <el-col :span="6">
+            <el-input v-model="searchForm.link" :placeholder="$t('propertyRightRegistration.search.link')" clearable />
+          </el-col>
+          <el-col :span="8">
+            <el-input v-model="searchForm.idCard" :placeholder="$t('propertyRightRegistration.search.idCard')"
+              clearable />
+          </el-col>
+          <el-col :span="6">
+            <el-input v-model="searchForm.address" :placeholder="$t('propertyRightRegistration.search.address')"
+              clearable />
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" class="mt-20">
+          <el-col :span="6">
+            <el-select v-model="searchForm.state" :placeholder="$t('propertyRightRegistration.search.state')"
+              style="width:100%">
+              <el-option v-for="item in states" :key="item.statusCd" :label="item.name" :value="item.statusCd" />
+            </el-select>
+          </el-col>
+          <el-col :span="8">
+            <el-select v-model="searchForm.floorId" :placeholder="$t('propertyRightRegistration.search.floor')"
+              style="width:100%" @change="handleFloorChange">
+              <el-option v-for="item in floors" :key="item.floorId" :label="item.floorName" :value="item.floorId" />
+            </el-select>
+          </el-col>
+          <el-col :span="6">
+            <el-select v-model="searchForm.unitId" :placeholder="$t('propertyRightRegistration.search.unit')"
+              style="width:100%">
+              <el-option v-for="item in units" :key="item.unitId"
+                :label="`${item.unitNum}${$t('propertyRightRegistration.unit')}`" :value="item.unitId" />
+            </el-select>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+
+    <!-- 数据列表 -->
+    <el-card class="list-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('propertyRightRegistration.list.title') }}</span>
+        <el-button type="primary" size="small" style="float: right" @click="handleAdd">
+          <i class="el-icon-plus" />
+          {{ $t('common.add') }}
+        </el-button>
+      </div>
+
+      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+        <el-table-column prop="prrId" :label="$t('propertyRightRegistration.table.prrId')" align="center" />
+        <el-table-column prop="roomId" :label="$t('propertyRightRegistration.table.roomId')" align="center" />
+        <el-table-column :label="$t('propertyRightRegistration.table.roomNum')" align="center">
+          <template slot-scope="scope">
+            {{ `${scope.row.floorNum}-${scope.row.unitNum}-${scope.row.roomNum}` }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" :label="$t('propertyRightRegistration.table.name')" align="center" />
+        <el-table-column prop="link" :label="$t('propertyRightRegistration.table.link')" align="center" />
+        <el-table-column prop="idCard" :label="$t('propertyRightRegistration.table.idCard')" align="center" />
+        <el-table-column prop="address" :label="$t('propertyRightRegistration.table.address')" align="center" />
+        <el-table-column prop="stateName" :label="$t('propertyRightRegistration.table.state')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="300">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.state !== '1'" size="mini" @click="handleExamine(scope.row)">
+              {{ $t('common.examine') }}
+            </el-button>
+            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button size="mini" type="info" @click="handleDetail(scope.row)">
+              {{ $t('common.detail') }}
+            </el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
+              {{ $t('common.delete') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+        :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+
+    <!-- 子组件 -->
+    <add-property-right-registration ref="addForm" @success="handleSuccess" />
+    <examine-property-right-registration ref="examineForm" @success="handleSuccess" />
+    <edit-property-right-registration ref="editForm" @success="handleSuccess" />
+    <delete-property-right-registration ref="deleteForm" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import { listPropertyRightRegistration } from '@/api/room/propertyRightRegistrationManageApi'
+import { queryFloors, queryUnits } from '@/api/room/roomApi'
+import AddPropertyRightRegistration from '@/components/room/addPropertyRightRegistration'
+import ExaminePropertyRightRegistration from '@/components/room/examinePropertyRightRegistration'
+import EditPropertyRightRegistration from '@/components/room/editPropertyRightRegistration'
+import DeletePropertyRightRegistration from '@/components/room/deletePropertyRightRegistration'
+
+export default {
+  name: 'PropertyRightRegistrationManageList',
+  components: {
+    AddPropertyRightRegistration,
+    ExaminePropertyRightRegistration,
+    EditPropertyRightRegistration,
+    DeletePropertyRightRegistration
+  },
+  data() {
+    return {
+      loading: false,
+      showMoreCondition: false,
+      searchForm: {
+        roomId: '',
+        allNum: '',
+        name: '',
+        link: '',
+        idCard: '',
+        address: '',
+        state: '',
+        floorId: '',
+        unitId: '',
+        communityId: ''
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      states: [],
+      floors: [],
+      units: []
+    }
+  },
+  created() {
+    this.searchForm.communityId = getCommunityId()
+    this.getList()
+    this.getDictData()
+    this.getFloors()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.searchForm,
+          page: this.pagination.current,
+          row: this.pagination.size
+        }
+
+        // 处理allNum
+        if (params.allNum && params.allNum.split('-').length === 3) {
+          const [floorNum, unitNum, roomNum] = params.allNum.split('-')
+          params.floorNum = floorNum.trim()
+          params.unitNum = unitNum.trim()
+          params.roomNum = roomNum.trim()
+        } else {
+          params.floorNum = ''
+          params.unitNum = ''
+          params.roomNum = ''
+        }
+
+        const { data, total } = await listPropertyRightRegistration(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('获取列表失败:', error)
+        this.$message.error(this.$t('propertyRightRegistration.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    async getDictData() {
+      try {
+        this.states = await getDict('property_right_registration', 'state')
+      } catch (error) {
+        console.error('获取字典数据失败:', error)
+      }
+    },
+    async getFloors() {
+      try {
+        const params = {
+          communityId: this.searchForm.communityId,
+          page: 1,
+          row: 50
+        }
+        const data = await queryFloors(params)
+        this.floors = data.apiFloorDataVoList || []
+      } catch (error) {
+        console.error('获取楼栋数据失败:', error)
+      }
+    },
+    async handleFloorChange(floorId) {
+      try {
+        const params = {
+          floorId,
+          communityId: this.searchForm.communityId,
+          page: 1,
+          row: 50
+        }
+        const data = await queryUnits(params)
+        this.units = data || []
+        this.searchForm.unitId = ''
+      } catch (error) {
+        console.error('获取单元数据失败:', error)
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        roomId: '',
+        allNum: '',
+        name: '',
+        link: '',
+        idCard: '',
+        address: '',
+        state: '',
+        floorId: '',
+        unitId: '',
+        communityId: getCommunityId()
+      }
+      this.units = []
+      this.handleSearch()
+    },
+    toggleMoreCondition() {
+      this.showMoreCondition = !this.showMoreCondition
+    },
+    handleAdd() {
+      this.$refs.addForm.open()
+    },
+    handleExamine(row) {
+      this.$refs.examineForm.open(row)
+    },
+    handleEdit(row) {
+      this.$refs.editForm.open(row)
+    },
+    handleDetail(row) {
+      this.$router.push({
+        path: '/views/room/listPropertyRightRegistrationDetail',
+        query: {
+          prrId: row.prrId,
+          floorNum: row.floorNum,
+          unitNum: row.unitNum,
+          roomNum: row.roomNum
+        }
+      })
+    },
+    handleDelete(row) {
+      this.$refs.deleteForm.open(row)
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.property-right-registration-container {
+  padding: 0;
+  margin: 0;
+
+  .search-wrapper {
+    margin-bottom: 20px;
+
+    .el-row {
+      margin-bottom: 20px;
+    }
+
+    .mt-20 {
+      margin-top: 20px;
+    }
+  }
+
+  .list-wrapper {
+    .el-pagination {
+      margin-top: 20px;
+      text-align: right;
+    }
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    roomStructure: {
+      noOwner: 'None',
+      owe: 'Debt',
+      yuan: 'Yuan',
+      searchPlaceholder: 'Please enter room number like 1-1-1',
+      building: 'Building',
+      unit: 'Unit'
+    }
+  },
+  zh: {
+    roomStructure: {
+      noOwner: '无',
+      owe: '欠费',
+      yuan: '元',
+      searchPlaceholder: '请输入房屋编号 楼栋-单元-房屋 如1-1-1',
+      building: '栋',
+      unit: '单元'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="room-structure-container">
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <floor-unit-tree ref="floorUnitTree"  @switchFloorUnit="switchFloorUnit" />
+      </el-col>
+      <el-col :span="20">
+        <el-card v-if="roomStructureInfo.layerRoomCount < 5" class="room-list-card">
+          <el-row :gutter="10">
+            <el-col v-for="(room, index) in roomStructureInfo.rooms" :key="index" :xs="12" :sm="8" :md="6" :lg="4"
+              :xl="3" class="room-item">
+              <div class="room-card" :style="{ 'background-color': getBgColor(room) }"
+                @dblclick="toSimplifyAcceptance(room)">
+                <div class="room-number">{{ room.floorNum }}-{{ room.unitNum }}-{{ room.roomNum }}</div>
+                <div class="room-state">{{ room.stateName }}</div>
+                <div class="room-owner">{{ room.ownerName || $t('roomStructure.noOwner') }}</div>
+                <div class="room-debt">
+                  <span>{{ $t('roomStructure.owe') }}</span>：{{ room.oweAmount }}
+                  <span>{{ $t('roomStructure.yuan') }}</span>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card v-else class="room-list-card">
+          <div v-for="(val, key, index) in roomStructureInfo.parkRooms" :key="index">
+            <div class="floor-title">{{ key }}F</div>
+            <el-row :gutter="10" class="floor-row">
+              <el-col v-for="(room, index) in val" :key="index" :xs="12" :sm="8" :md="6" :lg="4" :xl="3"
+                class="room-item">
+                <div class="room-card" :style="{ 'background-color': getBgColor(room) }"
+                  @dblclick="toSimplifyAcceptance(room)">
+                  <div class="room-number">{{ room.floorNum }}-{{ room.unitNum }}-{{ room.roomNum }}</div>
+                  <div class="room-state">{{ room.stateName }}</div>
+                  <div class="room-owner">{{ room.ownerName || $t('roomStructure.noOwner') }}</div>
+                  <div class="room-debt">
+                    <span>{{ $t('roomStructure.owe') }}</span>：{{ room.oweAmount }}
+                    <span>{{ $t('roomStructure.yuan') }}</span>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import floorUnitTree from '@/components/room/floorUnitTree'
+import { listRoomStructure } from '@/api/room/roomStructureApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'RoomStructureList',
+  components: {
+    floorUnitTree
+  },
+  data() {
+    return {
+      roomStructureInfo: {
+        rooms: [],
+        parkRooms: {},
+        layerRoomCount: 4
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    handleSwitchUnit(params) {
+      this.loadRooms(params.unitId)
+    },
+    switchFloorUnit(data) {
+      if (!data.unitId) {
+        return
+      }
+      this.loadRooms(data.unitId)
+    },
+    async loadRooms(unitId) {
+      this.roomStructureInfo.rooms = []
+      this.roomStructureInfo.parkRooms = {}
+
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          unitId: unitId,
+          communityId: this.communityId
+        }
+
+        const { data } = await listRoomStructure(params)
+        this.roomStructureInfo.rooms = data
+        this.supportPark()
+      } catch (error) {
+        console.error('Failed to load rooms:', error)
+      }
+    },
+    getBgColor(room) {
+      if (room.oweAmount > 0) {
+        return "#DC3545"
+      }
+      if (!room.ownerName) {
+        return "#1AB394"
+      }
+      if (room.state === '2001') {
+        return '#1296db'
+      }
+      if (room.state === '2003') {
+        return '#4C8CDE'
+      }
+      if (room.state === '2005') {
+        return '#085DC9'
+      }
+      if (room.state === '2004') {
+        return '#9DBFEA'
+      }
+      if (room.state === '2006') {
+        return '#365A87'
+      }
+      if (room.state === '2007') {
+        return '#1053A8'
+      }
+      if (room.state === '2008') {
+        return '#4E79AF'
+      }
+      if (room.state === '2009') {
+        return '#5B81B1'
+      }
+      return "#1296db"
+    },
+    toSimplifyAcceptance(room) {
+      const date = new Date()
+      this.$store.dispatch('app/saveData', {
+        key: "JAVA110_IS_BACK",
+        value: date.getTime()
+      })
+      this.$store.dispatch('app/saveData', {
+        key: 'simplifyAcceptanceSearch',
+        value: {
+          searchType: '1',
+          searchValue: `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
+          searchPlaceholder: this.$t('roomStructure.searchPlaceholder')
+        }
+      })
+      this.$router.push('/pages/property/simplifyAcceptance?tab=业务受理')
+    },
+    supportPark() {
+      const parkRooms = this.roomStructureInfo.parkRooms
+      if (!this.roomStructureInfo.rooms || this.roomStructureInfo.rooms.length < 1) {
+        return
+      }
+
+      this.roomStructureInfo.rooms.forEach(item => {
+        if (!parkRooms[item.layer]) {
+          parkRooms[item.layer] = []
+        }
+        parkRooms[item.layer].push(item)
+      })
+
+      this.roomStructureInfo.parkRooms = parkRooms
+      if (Object.keys(parkRooms).length > 0) {
+        this.roomStructureInfo.layerRoomCount = parkRooms[Object.keys(parkRooms)[0]].length
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.room-structure-container {
+  padding: 20px;
+  height: 100%;
+
+  .room-list-card {
+    margin-bottom: 20px;
+    min-height: calc(100vh - 120px);
+
+    .floor-title {
+      font-size: 16px;
+      font-weight: bold;
+      padding: 10px 0;
+    }
+
+    .floor-row {
+      margin-bottom: 20px;
+    }
+
+    .room-item {
+      margin-bottom: 10px;
+    }
+
+    .room-card {
+      color: #fff;
+      border-radius: 5px;
+      padding: 10px;
+      cursor: pointer;
+      transition: all 0.3s;
+      height: 100%;
+
+      &:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
+      .room-number {
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+
+      .room-state,
+      .room-owner,
+      .room-debt {
+        margin-bottom: 3px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    assetImportLogDetail: {
+      title: 'Import Details',
+      importTime: 'Import Time',
+      status: 'Status',
+      description: 'Description',
+      all: 'All',
+      waitingImport: 'Waiting Import',
+      success: 'Success',
+      failed: 'Failed',
+      refresh: 'Refresh',
+      back: 'Back'
+    }
+  },
+  zh: {
+    assetImportLogDetail: {
+      title: '导入详情',
+      importTime: '导入时间',
+      status: '状态',
+      description: '描述',
+      all: '全部',
+      waitingImport: '待导入',
+      success: '成功',
+      failed: '失败',
+      refresh: '刷新',
+      back: '返回'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="animated fadeInRight ecommerce">
+    <el-row>
+      <el-col :span="4" class="padding-r-0">
+        <div class="border-radius">
+          <div class="margin-xs-r treeview attendance-staff">
+            <ul class="list-group text-center border-radius">
+              <li class="list-group-item node-orgTree" v-for="(item, index) in assetImportLogDetailInfo.states"
+                :key="index" @click="swatchDetailState(item)"
+                :class="{ 'vc-node-selected': assetImportLogDetailInfo.state === item.value }">
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="20">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>{{ $t('assetImportLogDetail.title') }}</span>
+            <div class="ibox-tools" style="float: right;">
+              <el-button type="primary" size="small" @click="queryAssetImportLogDetail()">
+                {{ $t('common.refresh') }}
+              </el-button>
+              <el-button size="small" @click="_goBack()">
+                {{ $t('common.back') }}
+              </el-button>
+            </div>
+          </div>
+          <el-table :data="assetImportLogDetailInfo.logs" border style="width: 100%" v-loading="loading">
+            <el-table-column v-for="(item, index) in assetImportLogDetailInfo.logTypes" :key="index"
+              :label="item.logColumn" align="center">
+              <template slot-scope="scope">
+                <div class="textAuto" style="max-width: 200px;">
+                  {{ scope.row[item.logProperty] }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('assetImportLogDetail.importTime')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.createTime }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('assetImportLogDetail.status')" align="center">
+              <template slot-scope="scope">
+                <span v-if="scope.row.state === 'W'">{{ $t('assetImportLogDetail.waitingImport') }}</span>
+                <span v-else-if="scope.row.state === 'C'">{{ $t('assetImportLogDetail.success') }}</span>
+                <span v-else>{{ $t('assetImportLogDetail.failed') }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('assetImportLogDetail.description')" align="center">
+              <template slot-scope="scope">
+                <div class="textAuto" style="max-width: 200px;">
+                  {{ scope.row.message }}
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+            :current-page="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+            layout="total, sizes, prev, pager, next, jumper" :total="assetImportLogDetailInfo.total"
+            class="pagination"></el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { queryAssetImportLogDetail, queryAssetImportLogType } from '@/api/system/assetImportLogDetailApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AssetImportLogDetailList',
+  data() {
+    return {
+      loading: false,
+      assetImportLogDetailInfo: {
+        logs: [],
+        logTypes: [],
+        states: [
+          { name: this.$t('assetImportLogDetail.all'), value: '' },
+          { name: this.$t('assetImportLogDetail.waitingImport'), value: 'W' },
+          { name: this.$t('assetImportLogDetail.success'), value: 'C' },
+          { name: this.$t('assetImportLogDetail.failed'), value: 'F' }
+        ],
+        total: 0,
+        records: 1,
+        logId: '',
+        logType: '',
+        state: ''
+      },
+      page: {
+        current: 1,
+        size: 10
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  mounted() {
+    this.assetImportLogDetailInfo.logId = this.$route.query.logId
+    this.assetImportLogDetailInfo.logType = this.$route.query.logType
+    this.queryAssetImportLogType()
+  },
+  methods: {
+    async _listAssetImportLogDetails(page, size) {
+      try {
+        this.loading = true
+        const params = {
+          page: page,
+          row: size,
+          logId: this.assetImportLogDetailInfo.logId,
+          communityId: this.communityId,
+          state: this.assetImportLogDetailInfo.state
+        }
+        const { data, total } = await queryAssetImportLogDetail(params)
+        this.assetImportLogDetailInfo.logs = data
+        this.assetImportLogDetailInfo.total = total
+      } catch (error) {
+        console.error('请求失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async queryAssetImportLogType() {
+      try {
+        const params = {
+          logType: this.assetImportLogDetailInfo.logType
+        }
+        const { data } = await queryAssetImportLogType(params)
+        this.assetImportLogDetailInfo.logTypes = data
+        this._listAssetImportLogDetails(this.page.current, this.page.size)
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+    _goBack() {
+      this.$router.go(-1)
+    },
+    queryAssetImportLogDetail() {
+      this._listAssetImportLogDetails(this.page.current, this.page.size)
+    },
+    swatchDetailState(item) {
+      this.assetImportLogDetailInfo.state = item.value
+      this._listAssetImportLogDetails(this.page.current, this.page.size)
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listAssetImportLogDetails(this.page.current, val)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._listAssetImportLogDetails(val, this.page.size)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.animated {
+  padding: 15px;
+}
+
+.padding-r-0 {
+  padding-right: 0;
+}
+
+.border-radius {
+  border-radius: 4px;
+}
+
+.margin-xs-r {
+  margin-right: 5px;
+}
+
+.list-group {
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  cursor: pointer;
+}
+
+.list-group-item:hover {
+  background-color: #f5f5f5;
+}
+
+.vc-node-selected {
+  background-color: #409EFF;
+  color: #fff;
+}
+
+.textAuto {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pagination {
+  margin-top: 15px;
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    assetImportLog: {
+      title: 'Batch Import Log',
+      logId: 'Import ID',
+      logTypeName: 'Import Type',
+      waitCount: 'Pending Count',
+      successCount: 'Success Count',
+      errorCount: 'Failed Count',
+      state: 'Status',
+      stateW: 'Pending',
+      stateC: 'Completed',
+      stateP: 'Processing',
+      createTime: 'Import Time',
+      remark: 'Remark',
+      fetchError: 'Failed to fetch import logs'
+    }
+  },
+  zh: {
+    assetImportLog: {
+      title: '批量导入日志',
+      logId: '导入编号',
+      logTypeName: '导入类型',
+      waitCount: '待导入数',
+      successCount: '成功数量',
+      errorCount: '失败数量',
+      state: '状态',
+      stateW: '待导入',
+      stateC: '已完成',
+      stateP: '处理中',
+      createTime: '导入时间',
+      remark: '备注',
+      fetchError: '获取导入日志失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="asset-import-log-container animated fadeInRight">
+    <el-card class="box-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('assetImportLog.title') }}</span>
+        <div class="header-tools">
+          <el-button type="primary" size="small" @click="_queryData">
+            <i class="el-icon-refresh"></i>{{ $t('common.refresh') }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-row :gutter="20">
+        <el-col :span="24"> 
+          <el-table v-loading="loading" :data="assetImportLogInfo.logs" border style="width: 100%">
+            <el-table-column prop="logId" :label="$t('assetImportLog.logId')" align="center" />
+            <el-table-column prop="logTypeName" :label="$t('assetImportLog.logTypeName')" align="center" />
+            <el-table-column prop="waitCount" :label="$t('assetImportLog.waitCount')" align="center" />
+            <el-table-column prop="successCount" :label="$t('assetImportLog.successCount')" align="center" />
+            <el-table-column prop="errorCount" :label="$t('assetImportLog.errorCount')" align="center" />
+            <el-table-column prop="state" :label="$t('assetImportLog.state')" align="center">
+              <template slot-scope="scope">
+                <span v-if="scope.row.state === 'W'">{{ $t('assetImportLog.stateW') }}</span>
+                <span v-else-if="scope.row.state === 'C'">{{ $t('assetImportLog.stateC') }}</span>
+                <span v-else>{{ $t('assetImportLog.stateP') }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" :label="$t('assetImportLog.createTime')" align="center" />
+            <el-table-column prop="remark" :label="$t('assetImportLog.remark')" align="center" />
+            <el-table-column :label="$t('common.operation')" align="center" width="150">
+              <template slot-scope="scope">
+                <el-button size="mini" @click="_openDetail(scope.row)">{{ $t('common.detail') }}</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+            :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" />
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { queryAssetImportLog } from '@/api/system/assetImportLogApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AssetImportLogList',
+  data() {
+    return {
+      loading: false,
+      assetImportLogInfo: {
+        logs: [],
+        total: 0
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this._listAssetImportLogs(this.page.current, this.page.size)
+  },
+  methods: {
+    async _listAssetImportLogs(page, size) {
+      try {
+        this.loading = true
+        const params = {
+          page,
+          row: size,
+          communityId: this.communityId
+        }
+        const { data, total } = await queryAssetImportLog(params)
+        this.assetImportLogInfo.logs = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('assetImportLog.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    _queryData() {
+      this.page.current = 1
+      this._listAssetImportLogs(this.page.current, this.page.size)
+    },
+    _openDetail(log) {
+      this.$router.push({
+        path: '/views/system/assetImportLogDetail',
+        query: {
+          logId: log.logId,
+          logType: log.logType
+        }
+      })
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listAssetImportLogs(this.page.current, this.page.size)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._listAssetImportLogs(this.page.current, this.page.size)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.asset-import-log-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .header-tools {
+    float: right;
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    downloadTempFile: {
+      title: 'Download Center',
+      refresh: 'Refresh',
+      name: 'Name',
+      fileType: 'File Type',
+      downloadUser: 'Downloader',
+      downloadTime: 'Download Time',
+      status: 'Status',
+      remark: 'Remark',
+      operation: 'Operation',
+      download: 'Download',
+      delete: 'Delete',
+      fetchError: 'Failed to fetch file list'
+    },
+    deleteDownloadTempFile: {
+      title: 'Please confirm your operation',
+      confirmMessage: 'Are you sure to delete this file?',
+      cancel: 'Cancel',
+      confirm: 'Confirm Delete',
+      deleteSuccess: 'File deleted successfully',
+      deleteFailed: 'Failed to delete file'
+    }
+  },
+  zh: {
+    downloadTempFile: {
+      title: '下载中心',
+      refresh: '刷新',
+      name: '名称',
+      fileType: '文件类型',
+      downloadUser: '下载人',
+      downloadTime: '下载时间',
+      status: '状态',
+      remark: '备注',
+      operation: '操作',
+      download: '下载',
+      delete: '删除',
+      fetchError: '获取文件列表失败'
+    },
+    deleteDownloadTempFile: {
+      title: '请确认您的操作',
+      confirmMessage: '确定删除该文件吗？',
+      cancel: '取消',
+      confirm: '确认删除',
+      deleteSuccess: '文件删除成功',
+      deleteFailed: '文件删除失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="download-temp-file-container">
+    <el-card class="box-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('downloadTempFile.title') }}</span>
+        <el-button type="primary" size="mini" style="float: right;" @click="_queryDownloadTempFileMethod">
+          {{ $t('downloadTempFile.refresh') }}
+        </el-button>
+      </div>
+
+      <el-table v-loading="loading" :data="downloadTempFileInfo.files" border style="width: 100%">
+        <el-table-column prop="name" :label="$t('downloadTempFile.name')" align="center" />
+        <el-table-column prop="fileTypeName" :label="$t('downloadTempFile.fileType')" align="center" />
+        <el-table-column prop="downloadUserName" :label="$t('downloadTempFile.downloadUser')" align="center" />
+        <el-table-column prop="createTime" :label="$t('downloadTempFile.downloadTime')" align="center" />
+        <el-table-column prop="stateName" :label="$t('downloadTempFile.status')" align="center" />
+        <el-table-column prop="remark" :label="$t('downloadTempFile.remark')" align="center" />
+        <el-table-column :label="$t('downloadTempFile.operation')" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.state === '3003'" size="mini" type="primary" @click="_downLoadFile(scope.row)">
+              {{ $t('downloadTempFile.download') }}
+            </el-button>
+            <el-button v-if="scope.row.state === '3003' || scope.row.state === '4004'" size="mini" type="danger"
+              @click="_openDeleteFileModel(scope.row)">
+              {{ $t('downloadTempFile.delete') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+        :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+
+    <delete-download-temp-file ref="deleteDialog" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { listUserDownloadFile } from '@/api/system/downloadTempFileApi'
+import DeleteDownloadTempFile from '@/components/system/deleteDownloadTempFile'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DownloadTempFileList',
+  components: {
+    DeleteDownloadTempFile
+  },
+  data() {
+    return {
+      loading: false,
+      downloadTempFileInfo: {
+        files: [],
+        conditions: {
+          communityId: '',
+          page: 1,
+          row: 10
+        }
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.downloadTempFileInfo.conditions.communityId = getCommunityId()
+    this._listFiles(this.page.current, this.page.size)
+  },
+  methods: {
+    async _listFiles(page, size) {
+      try {
+        this.loading = true
+        this.downloadTempFileInfo.conditions.page = page
+        this.downloadTempFileInfo.conditions.row = size
+
+        const { data, total } = await listUserDownloadFile(this.downloadTempFileInfo.conditions)
+        this.downloadTempFileInfo.files = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('downloadTempFile.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    _downLoadFile(file) {
+      if (!file.tempUrl) {
+        this.$message.error(this.$t('downloadTempFile.downloadFailed'))
+        return
+      }
+      window.open(file.downloadUrl, '_blank')
+    },
+    _openDeleteFileModel(file) {
+      this.$refs.deleteDialog.open(file)
+    },
+    _queryDownloadTempFileMethod() {
+      this.page.current = 1
+      this._listFiles(this.page.current, this.page.size)
+    },
+    handleSuccess() {
+      this._listFiles(this.page.current, this.page.size)
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listFiles(this.page.current, val)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._listFiles(val, this.page.size)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.download-temp-file-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    feePrintPageManage: {
+      search: {
+        title: 'Search Conditions',
+        pageId: 'Receipt ID',
+        pageName: 'Name',
+        state: 'Status',
+        all: 'All',
+        enabled: 'Enabled',
+        disabled: 'Disabled'
+      },
+      list: {
+        title: 'Receipt Template'
+      },
+      table: {
+        pageId: 'Receipt ID',
+        pageName: 'Name',
+        communityId: 'Community ID',
+        templateName: 'Receipt Page',
+        state: 'Status',
+        enabled: 'Enabled',
+        disabled: 'Disabled',
+        operation: 'Operation'
+      },
+      add: {
+        title: 'Add Receipt Template',
+        pageName: 'Name',
+        pageNamePlaceholder: 'Please enter name',
+        template: 'Receipt Page',
+        templatePlaceholder: 'Please select receipt page',
+        success: 'Add successfully'
+      },
+      edit: {
+        title: 'Edit Receipt Template',
+        pageName: 'Name',
+        pageNamePlaceholder: 'Please enter name',
+        template: 'Receipt Page',
+        templatePlaceholder: 'Please select receipt page',
+        success: 'Update successfully'
+      },
+      delete: {
+        title: 'Delete Confirmation',
+        confirmText: 'Are you sure to delete this receipt template?',
+        success: 'Delete successfully'
+      },
+      validate: {
+        pageNameRequired: 'Name is required',
+        pageNameMaxLength: 'Name cannot exceed 128 characters',
+        templateRequired: 'Receipt page is required',
+        pageIdRequired: 'Receipt ID is required'
+      },
+      fetchError: 'Failed to fetch data'
+    }
+  },
+  zh: {
+    feePrintPageManage: {
+      search: {
+        title: '查询条件',
+        pageId: '收据ID',
+        pageName: '名称',
+        state: '状态',
+        all: '全部',
+        enabled: '启用',
+        disabled: '停用'
+      },
+      list: {
+        title: '收据模板'
+      },
+      table: {
+        pageId: '收据ID',
+        pageName: '名称',
+        communityId: '小区ID',
+        templateName: '收据页面',
+        state: '状态',
+        enabled: '启用',
+        disabled: '停用',
+        operation: '操作'
+      },
+      add: {
+        title: '添加收据模板',
+        pageName: '名称',
+        pageNamePlaceholder: '请输入名称',
+        template: '收据页面',
+        templatePlaceholder: '请选择收据页面',
+        success: '添加成功'
+      },
+      edit: {
+        title: '修改收据模板',
+        pageName: '名称',
+        pageNamePlaceholder: '请输入名称',
+        template: '收据页面',
+        templatePlaceholder: '请选择收据页面',
+        success: '修改成功'
+      },
+      delete: {
+        title: '删除确认',
+        confirmText: '确定删除该收据模板吗？',
+        success: '删除成功'
+      },
+      validate: {
+        pageNameRequired: '名称不能为空',
+        pageNameMaxLength: '名称不能超过128个字符',
+        templateRequired: '收据页面不能为空',
+        pageIdRequired: '收据ID不能为空'
+      },
+      fetchError: '获取数据失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="fee-print-page-manage-container">
+    <!-- 查询条件 -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('feePrintPageManage.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="searchForm.pageId" :placeholder="$t('feePrintPageManage.search.pageId')" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="searchForm.pageName" :placeholder="$t('feePrintPageManage.search.pageName')" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="searchForm.state" :placeholder="$t('feePrintPageManage.search.state')" style="width:100%">
+            <el-option :label="$t('feePrintPageManage.search.all')" value="" />
+            <el-option :label="$t('feePrintPageManage.search.enabled')" value="T" />
+            <el-option :label="$t('feePrintPageManage.search.disabled')" value="F" />
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="handleSearch">
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="handleReset">
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 收据模板列表 -->
+    <el-card class="list-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('feePrintPageManage.list.title') }}</span>
+        <el-button type="primary" size="small" style="float:right" @click="handleAdd">
+          {{ $t('common.add') }}
+        </el-button>
+      </div>
+
+      <el-table v-loading="loading" :data="tableData" border style="width:100%">
+        <el-table-column prop="pageId" :label="$t('feePrintPageManage.table.pageId')" align="center" />
+        <el-table-column prop="pageName" :label="$t('feePrintPageManage.table.pageName')" align="center" />
+        <el-table-column prop="communityId" :label="$t('feePrintPageManage.table.communityId')" align="center" />
+        <el-table-column prop="templateName" :label="$t('feePrintPageManage.table.templateName')" align="center" />
+        <el-table-column :label="$t('feePrintPageManage.table.state')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.state === 'T' ? $t('feePrintPageManage.table.enabled') :
+              $t('feePrintPageManage.table.disabled') }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.operation')" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button v-if="scope.row.state === 'F'" size="mini" type="success" @click="handleEnable(scope.row)">
+              {{ $t('common.enabled') }}
+            </el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
+              {{ $t('common.delete') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+        :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+
+    <!-- 添加弹窗 -->
+    <add-fee-print-page ref="addDialog" @success="handleSuccess" />
+
+    <!-- 编辑弹窗 -->
+    <edit-fee-print-page ref="editDialog" @success="handleSuccess" />
+
+    <!-- 删除弹窗 -->
+    <delete-fee-print-page ref="deleteDialog" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { listFeePrintPage, updateFeePrintPageState } from '@/api/system/feePrintPageManageApi'
+import AddFeePrintPage from '@/components/system/addFeePrintPage'
+import EditFeePrintPage from '@/components/system/editFeePrintPage'
+import DeleteFeePrintPage from '@/components/system/deleteFeePrintPage'
+
+export default {
+  name: 'FeePrintPageManageList',
+  components: {
+    AddFeePrintPage,
+    EditFeePrintPage,
+    DeleteFeePrintPage
+  },
+  data() {
+    return {
+      loading: false,
+      communityId: '',
+      searchForm: {
+        pageId: '',
+        pageName: '',
+        state: ''
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  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,
+          ...this.searchForm
+        }
+        const { data, total } = await listFeePrintPage(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        this.$message.error(this.$t('feePrintPageManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        pageId: '',
+        pageName: '',
+        state: ''
+      }
+      this.handleSearch()
+    },
+    handleAdd() {
+      this.$refs.addDialog.open()
+    },
+    handleEdit(row) {
+      this.$refs.editDialog.open(row)
+    },
+    handleEnable(row) {
+      // TODO: 启用逻辑
+      console.log(row)
+      updateFeePrintPageState({
+        pageId: row.pageId,
+        state: 'T'
+      }).then(() => {
+        this.$message.success(this.$t('feePrintPageManage.enableSuccess'))
+        this.getList()
+      })
+    },
+    handleDelete(row) {
+      this.$refs.deleteDialog.open(row)
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fee-print-page-manage-container {
+  padding: 20px;
+
+  .search-wrapper {
+    margin-bottom: 20px;
+
+    .el-row {
+      margin-bottom: 20px;
+    }
+  }
+
+  .list-wrapper {
+    margin-bottom: 20px;
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
 \ No newline at end of file