func-split

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 func-split@2.0.3-RELEASE

（根据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;

}

<style>   ### **登录** 引入： import Login from 'func-split/src/components/loginView/login.vue' 使用： //ipaddr_NODE_ENV 调度ip login(){ this.$router.push({ path: "/index" });//登录成功跳到主页面 }, //登录前要进行7443和60002端口的授权 例如：https://172.19.0.61:60002 https://172.19.0.61:7443 Attributes | 参数 | 说明 | 类型 | 举例 | | --------------- | ------------------ | ------ | ------------------------------- | | ipaddr_NODE_ENV | 调度服务ip。必填。 | string | :ipaddr_NODE_ENV="'172.19.0.61' | | loginTitle | 设置标题 | string | | | customStyle | 登录的整体样式 | object | | | customBtnStyle | 登录按钮的样式 | object | | 修改图标：在public目录下替换掉logo_funcSplit.png 名字不变 event | 事件名 | 说明 | 参数 | | ---------- | ---------------- | ---- | | splitLogin | 登录时触发的事件 | | ## **单呼** 引入： components:{ CallView:()=>import('func-split/src/components/callView/call.vue'), } 使用： //showCallView为是否显示单呼 Attributes | 参数 | 说明 | 类型 | 举例 | | ---------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | | customStyle | 单呼模块的样式 | object | :customStyle="{top: '50px',left:'755px'}" | | emptyDescription | 通话记录为空时展示的文字 | string | | | emptyImage | 通话记录为空时展示的图片源 | string | :emptyImage='require("")' | | navList | 修改最近通话/拨号两处的文字、图片源、激活图片源(badge 不要改动) | array | [{name: '最近通话', icon: require(''), acitveIcon: require(''), badge: 0},{name: '拨号', icon: require(''), acitveIcon: require(''), badge: 0}] | | navListColor | 修改最近通话/拨号两处激活状态时的文字颜色 | string | | | audioCallImage | 拨号页面中语音单呼的图片源 | string | | | videoCallImage | 拨号页面中视频单呼的图片源 | string | | \### 语音/视频单呼按钮样式 直接穿透修改/deep/ 或者 >>> /*拨打页面 语音单呼和视频单呼按钮样式 */ <style scoped> .callviewFuncSplit /deep/ .section .keypad .call{ ​ background-color: #ad7547; } .callviewFuncSplit /deep/ .section .keypad .call:active { background-color: #ee7606; } </style>

会议

引入：

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);

}

</style>

机构数

引入：

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; 

}

</style>

监控

引入：

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; 

}

<style>   ## **关于** 引入： components:{ aboutMe:()=>import('func-split/src/components/aboutMe/aboutMe.vue'), } 使用： //showAboutme 为是否显示关于的内容 Attributes | 参数 | 说明 | 类型 | 举例 | | --------------- | -------------------- | ------ | ------------------------------------------------------------ | | customImgStyle | img图标样式 | object | :customImgStyle="{position:'absolute',top:'40px',right:'300px'}" | | customMainStyle | 信息样式 | object | :customMainStyle="{position:'absolute',top:'120px',right:'300px'}" | | aboutAvatarImg | img图标修改图片源 | string | :aboutAvatarImg='require("./logo_funcSplit.png")' | | aboutCloseImg | 修改关闭信息图片源 | string | | | unAttendedImg | 修改无人值守的图片源 | string | | | historyImg | 修改历史记录的图片源 | string | | | settingImg | 修改设置的图片源 | string | | event | 事件名 | 说明 | 参数 | | ------ | ---------------- | ---- | | logOut | 登出时触发的事件 | | \### 关于 样式设置 直接穿透修改    /* 退出按钮样式设置 */ .aboutMeFuncSplit /deep/ .btn-logout {} /*hover时的效果*/ .aboutMeFuncSplit /deep/ .btn-logout:hover {} /* 无人值守/历史记录/设置···hover样式 */ .aboutMeFuncSplit /deep/ .about-me .op-item:not(.logout):hover {} &lt;style>   ## **地图** 引入： components:{ Baidumap:()=>import('func-split/src/components/map/baidumap.vue'), } 使用： <!-- fenceViewStyle电子围栏样式 --> <Baidumap class="mapFuncSplit" v-if="showMap " ref="baiduMap" :customImgStyle="{position:'absolute',top:'20px',right:'400px'}" :fenceViewStyle='{}'/> //showMap 为是否显示关于的内容 Attributes | 参数 | 说明 | 类型 | 举例 | | ----------------- | ------------------ | ------ | ------------------------- | | mapToolWrt | '地图工具'文字修改 | string | mapToolWrt ='map tool' | | mapToolImg | '地图工具'图片修改 | string | :mapToolImg='require("")' | | toolMoveImg | 移动工具图片修改 | string | | | toolMoveWrt | 移动工具文字修改 | string | | | toolLayerImg | 筛选工具图片修改 | string | | | toolLayerWrt | 筛选工具文字修改 | string | | | toolRectSelectImg | 框选工具图片修改 | string | | | toolRectSelectWrt | 框选工具文字修改 | string | | | toolFenceImg | 电子围栏图片修改 | string | | | toolFenceWrt | 电子围栏文字修改 | string | | Fence Attributes | 参数 | 说明 | 类型 | 举例 | | -------------- | -------------------------- | ------ | ---- | | fenceTitle | 标题修改 | string | | | emptyFenceImg | 无电子围栏时图片 | string | | | emptyFenceWrt | 无电子围栏时文字说明 | string | | | radioChecked | 电子围栏radio 被点击图片 | string | | | radioUnchecked | 电子围栏radio 未被点击图片 | string | | \### 地图工具 样式设置 直接穿透修改 <style scoped>   /* 地图工具点击后出现的图片 */ .mapFuncSplit /deep/ .tool-map:active img.toolimg { content: url(./logo_transparent.png); } /* 电子围栏按钮样式修改 */ .mapFuncSplit /deep/ .fenceDialog .buttons button{ color: #e41313; } /* 电子围栏点击 新增电子围栏按钮 新增、删除、重命名按钮-样式修改 */ .mapFuncSplit /deep/ .fenceDialog .buttons button:active{ color: rgb(230, 65, 65); background: #e3e62a; } /* 没有选中电子围栏时 删除和重命名按钮 的样式修改不 */ .mapFuncSplit /deep/ .fenceDialog .buttons button:disabled{ color: rgb(87, 75, 128); } &lt;style>   ## **消息** 引入： components:{ chat:()=>import('func-split/src/components/message/chat.vue') } 使用： <chat class="chatFuncSplit" ref="chatBox" v-if="showChat" v-model="showChat" @close="showChat=false" :customImgStyle="{position:'absolute',top:'40px'}"> </chat> //showChat为是否显示消息模块 Attributes | 参数 | 说明 | 类型 | 举例 | | ---------------- | ---------------------------- | ------ | -------------------------------------------------- | | customImgStyle | 消息组件样式 | object | :customImgStyle="{position:'absolute',top:'40px'}" | | chatTitle | 消息组件title修改 | string | chatTitle='chat' | | emptyMessageImg | 修改无消息时显示的图片源 | string | :emptyMessageImg='require("")' | | emptyDescription | 修改无消息时的文字说明 | string | | | newMsgSessionWrt | 修改无消息时新建消息回话文字 | string | newMsgSessionWrt='new message session' | | openFileImg | 修改文件发送图片源 | string | | | recordImg | 修改录音发送图片源 | string | | | recordingImg | 修改正在录音中的图片源 | string | | | VideoCaptureImg | 修改拍照发送的图片源 | string | | | addMsgSessionImg | 修改添加消息的图片源 | string | | event | 事件名 | 说明 | 参数 | | ------ | ------------------------ | ---- | | close | 关闭消息组件时触发的事件 | | \### 无消息-新建消息回话样式修改 直接穿透修改 <style scoped>   /* 无消息-新建消息回话样式修改 */ .chatFuncSplit /deep/ .content.empty > div.empty .open {} /* 发送按钮样式 */ .chatFuncSplit /deep/ .chat .btn_send {} /* 发送按钮active样式 */ .chatFuncSplit /deep/ .chat .btn_send:active {} &lt;style>   ## **对讲** 引入： components:{ intercom:()=>import('func-split/src/components/intercom/intercom.vue'), } 使用： <intercom class="intercomFuncSplit" v-if="showIntercom" v-model="showIntercom"> </intercom> //showIntercom为是否显示对讲模块 Attributes | 参数 | 说明 | 类型 | 举例 | | ---------------- | ---------------------- | ------ | ------------------------------------ | | emptyIntercomImg | 修改对讲组为空时的图片 | string | :emptyIntercomImg='require("")' | | emptyDescription | 修改对讲组为空的描述 | string | emptyDescription='no intercom group' | | intercomOn | 修改对讲中的图片 | string | | | intercomOff | 修改对讲空闲时的图片 | string | | \### 对讲样式修改 直接穿透修改 <style scoped>   /* 对讲中· 左边animation样式 */ .intercomFuncSplit /deep/ .pat1 .circle-left{ border: 6px solid #49b3bb; } .intercomFuncSplit /deep/ .patLeftAnim { background: rgba(52, 235, 6, 0.2); } /* 对讲中· 右边animation样式 */ .intercomFuncSplit /deep/ .pat2 .circle-right{ border: 8px solid #bb7c49; } .intercomFuncSplit /deep/ .patRightAnim { background: rgba(119, 236, 10, 0.2); } &lt;style>  ## **预案** 引入： components:{ plan:()=>import('func-split/src/components/plan/plan.vue') } 使用： <plan class="planFuncSplit" v-if="showPlan" v-model="showPlan" @close="showPlan=false"/> //showPlan为是否显示预案模块 Attributes | 参数 | 说明 | 类型 | 举例 | | ---------------- | ------------------------ | ------ | ---------------------------- | | planTitle | 修改预案组件的标题 | string | planTitle='plan' | | radioChecked | 修改预案radio 被点击图片 | string | :radioChecked ='require("")' | | radioUnchecked | 修改预案radio 点击图片 | string | | | emptyPlanImg | 修改未配置预案 图片 | string | | | emptyDescription | 修改未配置预案文字说明 | string | | | startPlanWrt | 修改执行预案按钮文字 | string | | | customStyle | 修改预案整体样式 | string | | \### 修改预案类型样式修改 直接穿透修改 <style scoped>     /* 修改预案类型的样式 */ .planFuncSplit /deep/ .planlist li .info .type{ color: #95e62a; border: 1px solid #e68e2a;/*no*/ } /* 执行预案按钮样式 */ .planFuncSplit>>> footer .buttons button{ color: #e74444; } /* 执行预案按钮disabled样式 */ .planFuncSplit>>> footer .buttons button:disabled{ color: rgb(45, 187, 45); } /* 执行预案按钮被点击active样式 */ .planFuncSplit>>> footer .buttons button:active{ border: none; color: rgb(212, 52, 52); background: #e6d92a; } /*或者这种写法 planspt和planDialog属于同一级*/ /*提高优先级 */ .planFuncSplit.planDialog >>> .buttons button{ color: #e74444; } &lt;style>  ## **直接单呼某用户** <button @click="callByNumber">直接拨打给3002</button> <incomCalls class="incomCallFuncSplit" ref='incomCallSplit'/> &lt;script> callByNumber(){ this.$nextTick(()=>{ // 参数1：视频单呼true 语音单呼false // 参数2：拨打的号码 this.$refs.incomCallSplit.makeCall(true,'3002') }) } &lt;/script> <h2><strong>直接给某用户发信息</strong></h2> <p>&lt;button @click=&quot;sendMsgByNumber&quot;&gt;直接给3002发消息</button></p> <incomCalls class="incomCallFuncSplit" ref='incomCallSplit'/> &lt;script> sendMsgByNumber(){ this.$nextTick(()=>{ ​ // 参数：发送消息号码 ​ this.$refs.incomCallSplit.sendMsgByNumber('3002') }) } &lt;/script> <h2><strong>直接和用户进行会议</strong></h2> <input type="text" v-model="makeConfMember" placeholder="会议成员之间用','隔开"> <p>&lt;button @click=&quot;handlemakeConference&quot;&gt;直接进行会议</button></p> <incomCalls class="incomCallFuncSplit" ref='incomCallSplit'/> &lt;script>   handlemakeConference(){ var members = this.makeConfMember.split(","); this.$nextTick(()=>{ ​ // 参数1：会议成员 ​ // 参数2：视频单呼true 语音单呼false ​ this.$refs.incomCallSplit.handlemakeConference(members,true) }) } &lt;/script> <h2><strong>打开预约会议模块</strong></h2> <p>&lt;button @click=&quot;handlescheduleConference&quot;&gt;打开预约会议</button></p> <incomCalls class="incomCallFuncSplit" ref='incomCallSplit'/> &lt;script>   handlescheduleConference() { this.$nextTick(() => { var detail = { title: 'test', //会议主题 isVideo: false, //入会时，是否打开摄像头 true是 false否 ​ time: '2032-01-01 12:12:12', //开始时间 members: [2000, 333, 222] //参会人，传数组 } //不传detail可以直接在界面上进行设置 this.$refs.incomCallSplit.handlescheduleConference(detail); }); } &lt;/script> <h2><strong>根据组号码发起对讲</strong></h2> <input type="text" v-model="intercomGroupNum" placeholder="请输入对讲组号码" /> <p>&lt;button @click=&quot;handlemakeIntercom&quot;&gt;直接发起对讲</button></p> <incomCalls class="incomCallFuncSplit" ref='incomCallSplit' /> &lt;script> handlemakeIntercom() { this.$nextTick(() => { // 登录账号需要在该对讲组中才可以发起对讲 this.$refs.incomCallSplit.handleStartIntercom(this.intercomGroupNum); }); } &lt;/script> <h2><strong>和指定成员进行临时对讲</strong></h2> <input type="text" v-model="tempintercomGroupNum" placeholder="成员之间用','隔开"/> <p>&lt;button @click=&quot;handlemakeTempIntercom&quot;&gt;发起临时对讲</button></p> <incomCalls class="incomCallFuncSplit" ref='incomCallSplit' /> &lt;script> handlemakeTempIntercom() { var members = this.tempintercomGroupNum.split(","); this.$nextTick(() => { //成员需要和登录账号在同一组中 this.$refs.incomCallSplit.handleStartTempIntercom(members); }); } &lt;/script>