BS调度台模块化demo使用手册

1、前提：

参考func-split-example中的配置

1. 把func-split-example 项目public目录中的文件放到开发项目中public下；

（如不使用我们的地图组件，可以不添加bmap文件夹）

2. 在开发项目中public/index.html中引入js文件

3. func-split-example vue.config.js中的配置和代理加到开发项目中；

*注意:项目必须是https环境，本地项目配置方法如下：

4. 在main.js中引入splitMain.js文件；

5. home.vue中以下代码相应放至开发项目中

(界面刷新后自动登录)

2、运行项目：

1. 在func-split-example下执行npm i

2. npm install [email protected]

（根据BS调度台和调度机版本选择版本）

3. 在开发项目下执行npm run serve 启动项目

3、功能：

必须引入incomCalls组件，全局引入，只引入一次。

来电

引入：

components:{

incomCalls:()=>import('func-split/src/components/incomCalls/incomCalls.vue'),

}

使用：

Attributes

| 参数 | 说明 | 类型 | 举例 | | ------------ | ---------------- | ------ | --------------------- | | answerBtnWrt | 接听按钮文字描述 | string | answerBtnWrt='answer' | | hangupBtnWrt | 挂断按钮文字描述 | string | |

修改来电接听和挂断按钮样式修改 直接穿透修改

<style scoped>  

/* 来电 接听和挂断按钮样式 */

.incomCallFuncSplit /deep/ .cancel {

color: #5e5a5a;

background: #00ffc8;

}

.incomCallFuncSplit /deep/ .confirm {

background: #05186d;

color: #9eac51d7;

}

会议

引入：

components:{

conference:()=>import('func-split/src/components/meeting/conference.vue'),

}

使用：

<conference class="conferenceFuncSplit" v-if="showConference "

:customStyle="{top: '0px',left:'800px'}"

:makeConfStyle="{position:'absolute',top: '0px',left:'330px'}"/>

//showConference 为是否显示会议

Attributes

| 参数 | 说明 | 类型 | 举例 | | ---------------- | ---------------------------- | ------ | -------------------------------- | | emptyImage | 当前没有会议时展示的图片源 | string | :emptyImage='require("")' | | emptyDescription | 当前没有会议时展示的文字说明 | string | emptyDescription='no conference' | | audioConfImg | 语音会议按钮图片源 | string | | | videoConfImg | 视频会议按钮图片源 | string | | | customStyle | 会议组件的样式修改 | object | | | makeConfStyle | 预约会议、会议详情的样式修改 | object | | | makeConfBtnWrt | 预约会议按钮文字说明 | string | |

### 语音/视频会议按钮样式 直接穿透修改

<style scpoed>  

/* 语音会议按钮 */

.conferenceFuncSplit /deep/ button.btn-audio-conf{

background: #8b8c91;/按钮背景/

color: #ca2e2e;/文字颜色/

/**······· */

}

/* 语音会议按钮点击后的颜色设计 */

.conferenceFuncSplit /deep/ button.btn-audio-conf:active{

background: rgb(56, 56, 77);

}

机构数

引入：

components:{

mechanismTree:()=>import('func-split/src/components/mechanismTree/index.vue')

}

使用：

<mechanismTree class="mechanismTreeFuncSplit" v-if="showMechanismTree "

style="position:absolute;top:50px;left:100px"/>

//showMechanismTree 为是否显示机构数

Attributes

| 参数 | 说明 | 类型 | 举例 | | ------------ | ---------------------- | ------ | --------------------------- | | phonebookImg | 机构数通讯录按钮图片源 | string | :phonebookImg='require("")' | | searchImg | 机构数搜索按钮图片源 | string | |

### 机构数样式 直接穿透修改

<style scoped>  

/搜索按钮样式/

.mechanismTreeFuncSplit /deep/ .search .btn {

	background: #ffda33; 

	border-radius: 0px 8px 8px 0px; 

}

监控

引入：

components:{

surveillance:()=>import('func-split/src/components/surveillance/surveillance.vue')

}

使用：

//showSurveillance 为是否显示监控

Attributes

| 参数 | 说明 | 类型 | 举例 | | ------------------- | ------------------------- | ------ | ---------------------------- | | serchPlaceholder | 搜索placeholder的文字提示 | string | serchPlaceholder='搜索' | | serchClearImg | 搜索时清空字符的图片源 | string | :serchClearImg='require("")' | | searchImg | 搜索按钮图片源 | string | | | searchEmptyImg | 搜索为空展示的图片源 | string | | | previerName | 修改'预览'解码器名称 | string | previerName='preview111' | | closeAllImg | 关闭所有监控画面图片源 | string | | | mutiscreenImg | 打开分屏设置图片源 | string | | | mutiscreenActiveImg | 分屏设置图片源 | string | | | fullscreenImg | 全屏图片源 | string | |

### 监控样式 直接穿透修改

<style scoped>  

/* 机构树搜索按钮样式 */

.surveillanceFuncSplit /deep/ .iptActive .ipt-icon {

background: #f08648;

border-radius: 5px;

}

/* 监控预览/解码器按钮样式 */

.surveillanceFuncSplit /deep/ .header .header-left ul li{

height: 30px;

}

/* 监控当前解码器按钮样式 */

.surveillanceFuncSplit /deep/ .header .header-left ul li.active {

	color: #c09d00; 

	border-color: #c02d00; 

}

直接给某用户发信息

<button @click="sendMsgByNumber">直接给3002发消息

直接和用户进行会议

<button @click="handlemakeConference">直接进行会议

打开预约会议模块

<button @click="handlescheduleConference">打开预约会议

根据组号码发起对讲

<button @click="handlemakeIntercom">直接发起对讲

和指定成员进行临时对讲

<button @click="handlemakeTempIntercom">发起临时对讲