Libt
/
multiple-police-situations
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

对讲代码 

对讲代码
This commit is contained in:
TimSpan 2024-08-12 11:08:14 +08:00
parent 8a9bf15895
commit fa100abc89
2 changed files with 191 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
public/cw_/index.html
View File

@ -53,7 +53,7 @@
}
#playerBox {
height: 100%;
height: 96%;
width: 100%;
}
</style>
@ -61,6 +61,10 @@
<body ontouchstart>
<div id="playerBox"></div>
<div>
<button class="layui-btn" id="talk-real-server">实时视频对讲(请配置URL)</button>
<!-- <input type="text" id="talkUrl" style="width: 600px" value="" /> -->
</div>
<script type="text/javascript">
window.onload = function () {
self.player = new Player($("#playerBox"));
@ -86,7 +90,7 @@
requestBody.useTLS = 1
}
// requestBody.useTLS = 1
let url = ' https://www.hndyjqrh.cn/api/multialarm/video/preview'
let url = 'https://www.hndyjqrh.cn/api/multialarm/video/preview'
axios({
method: 'post',
url,
@ -104,7 +108,85 @@
}
$("html>head>title").html(title);
var wsUrl = ''
document.getElementById("talk-real-server").onclick = function () {
console.log(1111);
axios({
method: 'post',
url: 'https://www.hndyjqrh.cn/api/multialarm/talk/channel',
data: { ...requestBody }
}).then(res => {
console.log('talk/channel', res);
wsUrl = res.data.data.videoUrl
}).catch(function (error) {
console.log(error)
})
if (wsUrl.length > 0) {
// 创建 WebSocket 连接
const socket = new WebSocket(wsUrl);
// 监听 WebSocket 连接的打开事件
socket.onopen = function (event) {
console.log('WebSocket 连接已打开');
// 获取麦克风的音频流
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
// 使用 AudioContext 处理音频数据
const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const processor = audioContext.createScriptProcessor(4096, 1, 1);
// 监听音频数据
processor.onaudioprocess = function (event) {
const audioData = event.inputBuffer.getChannelData(0);
const float32Array = new Float32Array(audioData);
// 将浮点音频数据转换为 16 位 PCM 格式
const int16Array = new Int16Array(float32Array.length);
for (let i = 0; i < float32Array.length; i++) {
int16Array[i] = float32Array[i] * 0x7FFF; // 将 [-1, 1] 映射到 [-32768, 32767]
}
// 发送音频数据
socket.send(int16Array.buffer);
console.log('音频数据已发送');
};
// 将音频流连接到处理器并开始处理
source.connect(processor);
processor.connect(audioContext.destination);
})
.catch(error => {
console.error('获取音频流失败:', error);
});
};
// 监听 WebSocket 收到消息事件
socket.onmessage = function (event) {
console.log('收到消息:', event.data);
};
// 监听 WebSocket 连接关闭事件
socket.onclose = function (event) {
console.log('WebSocket 连接已关闭');
};
// 监听 WebSocket 连接出错事件
socket.onerror = function (event) {
console.error('WebSocket 错误:', event);
};
}
// var playUrl = document.getElementById("realplayUrl").value;
// var talkUrl = document.getElementById("talkUrl").value;
// self.player.talkUrl = talkUrl;
// self.player.play(playUrl, true, "");
}
}
</script>
</body>

210
src/views/page/indexMim.vue
View File

@ -179,12 +179,12 @@
<script lang="ts" setup>
import 'echarts-gl'
// @ts-ignore
import { getAreaCode } from './js/area'
import { JsonResult } from '@/axios'
import { Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick } from 'vue'
import {getAreaCode} from './js/area'
import {JsonResult} from '@/axios'
import {Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick} from 'vue'
import * as echarts from 'echarts'
import api from '@/axios'
const { proxy } = getCurrentInstance() as any
const {proxy} = getCurrentInstance() as any
const day = proxy.day
onMounted(() => {
// gettotal();
@ -224,7 +224,7 @@ const config = reactive({
oddRowBGC: '#2C5784',
evenRowBGC: 'F3FDFF',
index: false,
align: ['left', 'left', 'left', 'center'],
align: ['left', 'left', 'left', 'center']
})
const i = ref(0)
@ -252,14 +252,18 @@ const hy = () => {
if (localStorage.getItem('nowCode') == JSON.parse(localStorage.getItem('user-stores'))['userInfo']['geoCode']) {
return
} else {
console.log(localStorage.getItem('nowCode'))
let fhcode = getAreaCode(localStorage.getItem('nowCode'))['codes'][0]
console.log(fhcode)
let ado = echarts.init(document.getElementById('myMap'))
ado.showLoading({
text: '地图加载中',
color: '#09A2DC', //设置加载颜色
textColor: '#09A2DC',
maskColor: 'rgba(255, 255, 255, 0.2)',
zlevel: 0,
zlevel: 0
})
// const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
@ -278,7 +282,7 @@ const hy = () => {
api
.post('multialarm/system/alarm/total', {
name: localStorage.getItem('loginname'),
parent: fhcode,
parent: fhcode
})
.then((res) => {
if (res.code == 0) {
@ -312,7 +316,7 @@ const config3 = reactive({
oddRowBGC: '#2C5784',
evenRowBGC: 'F3FDFF',
index: false,
align: ['left', 'center', 'center', 'center'],
align: ['left', 'center', 'center', 'center']
})
const getAi = (city: any, district: any, town: any) => {
api
@ -320,7 +324,7 @@ const getAi = (city: any, district: any, town: any) => {
name: localStorage.getItem('loginname'),
city: city == '湖南省' ? null : city,
district: district,
town: town,
town: town
})
.then((res: JsonResult<any>) => {
if (res.code == 0) {
@ -346,7 +350,7 @@ const getdayline = (city: any, district: any, town: any) => {
district: district,
town: town,
start: day().format('YYYY-MM-DD HH:mm:ss'),
before: 1,
before: 1
})
.then((res: JsonResult<any>) => {
if (res.code == 0) {
@ -376,7 +380,7 @@ const config2 = reactive({
oddRowBGC: '#2C5784',
evenRowBGC: 'F3FDFF',
index: false,
align: ['left', 'left', 'left', 'left'],
align: ['left', 'left', 'left', 'left']
})
const getaiyuji = (city: any, district: any, town: any) => {
api
@ -384,7 +388,7 @@ const getaiyuji = (city: any, district: any, town: any) => {
name: localStorage.getItem('loginname'),
city: city == '湖南省' ? '' : city,
district: district,
town: town,
town: town
})
.then((res: JsonResult<any>) => {
if (res.code == 0) {
@ -414,7 +418,7 @@ const get1 = (city: any, district: any, town: any) => {
name: localStorage.getItem('loginname'),
city: city,
district: district,
town: town,
town: town
})
.then((res) => {
if (res.code == 0) {
@ -431,7 +435,7 @@ const get3 = (city: any, district: any, town: any) => {
name: localStorage.getItem('loginname'),
city: city,
district: district,
town: town,
town: town
})
.then((res: JsonResult<any>) => {
if (res.code == 0) {
@ -447,13 +451,13 @@ const get3 = (city: any, district: any, town: any) => {
['金融机构', res.data[2]['total'], res.data[2]['lineOnTotal'], res.data[2]['lineOnTotal'] == 0 ? '0%' : (res.data[2]['lineOnTotal'] / res.data[2]['total']) * 100 + '%'],
['医疗单位', res.data[3]['total'], res.data[3]['lineOnTotal'], res.data[3]['lineOnTotal'] == 0 ? '0%' : (res.data[3]['lineOnTotal'] / res.data[3]['total']) * 100 + '%'],
['中小学', res.data[1]['total'], res.data[1]['lineOnTotal'], res.data[1]['lineOnTotal'] == 0 ? '0%' : (res.data[1]['lineOnTotal'] / res.data[1]['total']) * 100 + '%'],
['其他', res.data[4]['total'], res.data[4]['lineOnTotal'], res.data[4]['lineOnTotal'] == 0 ? '0%' : (res.data[4]['lineOnTotal'] / res.data[4]['total']) * 100 + '%'],
['其他', res.data[4]['total'], res.data[4]['lineOnTotal'], res.data[4]['lineOnTotal'] == 0 ? '0%' : (res.data[4]['lineOnTotal'] / res.data[4]['total']) * 100 + '%']
],
headerBGC: '#174F8A',
oddRowBGC: '#2C5784',
evenRowBGC: 'F3FDFF',
index: false,
align: ['left', 'left', 'left', 'left'],
align: ['left', 'left', 'left', 'left']
}
// initMap(res.data);
} else {
@ -512,7 +516,7 @@ const initMapdt = (data: any, podat: any, nameb: any) => {
var option = {
tooltip: {
trigger: 'item',
textStyle: { fontSize: '14', color: '#fff', fontFamily: 'Arial' },
textStyle: {fontSize: '14', color: '#fff', fontFamily: 'Arial'},
backgroundColor: '#092b6a',
formatter: (params: any) => {
let datat = podat
@ -522,7 +526,7 @@ const initMapdt = (data: any, podat: any, nameb: any) => {
} else {
return '<br /> 报警:' + itemWithId2.alarmCount + '<br /> 警情:' + itemWithId2.caseCount + ' <br /> AI预警:' + itemWithId2.aiCount
}
},
}
},
series: [
{
@ -534,32 +538,32 @@ const initMapdt = (data: any, podat: any, nameb: any) => {
viewControl: {
distance: 168, // 地图视角 控制初始大小
alpha: 180, // 倾斜角度
rotateSensitivity: 0,
rotateSensitivity: 0
},
label: {
show: true, // 是否显示名字
color: '#fff', // 文字颜色
fontSize: 15, // 文字大小
fontWeight: 'bold', // 文字大小
fontWeight: 'bold' // 文字大小
},
itemStyle: {
color: '#0A3E77', // 地图背景颜色
borderWidth: 1, // 分界线wdith
borderColor: '#a4d8f0', // 分界线颜色
opacity: 0.9,
opacity: 0.9
},
emphasis: {
label: {
show: true, // 是否显示高亮
textStyle: {
color: '#fff', // 高亮文字颜色
},
color: '#fff' // 高亮文字颜色
}
},
itemStyle: {
color: '#3a69c1', // 地图高亮颜色
borderWidth: 10, // 分界线wdith
borderColor: '#6BECF5', // 分界线颜色
},
borderColor: '#6BECF5' // 分界线颜色
}
},
light: {
@ -569,12 +573,12 @@ const initMapdt = (data: any, podat: any, nameb: any) => {
shadow: true,
shadowQuality: 'high',
alpha: 25, //
beta: 20,
beta: 20
},
ambient: {
color: '#fff',
intensity: 0.6,
},
intensity: 0.6
}
},
lines3D: {
show: true,
@ -582,18 +586,18 @@ const initMapdt = (data: any, podat: any, nameb: any) => {
{
coords: [
[111.51, 29.02], // 起点坐标
[109.22793, 29.12239], // 终点坐标
[109.22793, 29.12239] // 终点坐标
],
lineStyle: {
width: 2,
color: '#fff',
},
},
color: '#fff'
}
}
// 可以添加更多的线条
],
},
},
],
]
}
}
]
}
myChart.setOption(option)
@ -614,7 +618,7 @@ const initMapdt = (data: any, podat: any, nameb: any) => {
color: '#09A2DC', //设置加载颜色
textColor: '#09A2DC',
maskColor: 'rgba(255, 255, 255, 0.2)',
zlevel: 0,
zlevel: 0
})
get1(x.name, '', '')
get3(x.name, '', '')
@ -639,7 +643,7 @@ const initMapdt = (data: any, podat: any, nameb: any) => {
api
.post('multialarm/system/alarm/total', {
name: localStorage.getItem('loginname'),
parent: item.code,
parent: item.code
})
.then((res) => {
if (res.code == 0) {
@ -661,7 +665,7 @@ const initMap = (data1: any) => {
const myChart = echarts.init(domMap)
var option = {
tooltip: {
trigger: 'item',
trigger: 'item'
},
legend: {
top: '15px',
@ -670,8 +674,8 @@ const initMap = (data1: any) => {
type: 'scroll',
itemHeight: 5,
textStyle: {
color: '#fff',
},
color: '#fff'
}
},
series: [
{
@ -680,7 +684,7 @@ const initMap = (data1: any) => {
avoidLabelOverlap: false,
label: {
show: false,
position: 'right',
position: 'right'
},
emphasis: {
@ -688,22 +692,22 @@ const initMap = (data1: any) => {
show: true,
fontSize: 12,
fontWeight: 'bold',
color: '#fff',
},
color: '#fff'
}
},
labelLine: {
show: true,
show: true
},
center: ['35%', '50%'],
data: [
{ value: data1.alarmPointZone, name: '防区报警' },
{ value: data1.alarmPointTalk, name: '对讲报警' },
{ value: data1.mdevTotal, name: '移动报警' },
{ value: data1.alarmPointPushButton, name: '一键报警' },
{ value: data1.ipcTotal, name: '报警复合' },
],
},
],
{value: data1.alarmPointZone, name: '防区报警'},
{value: data1.alarmPointTalk, name: '对讲报警'},
{value: data1.mdevTotal, name: '移动报警'},
{value: data1.alarmPointPushButton, name: '一键报警'},
{value: data1.ipcTotal, name: '报警复合'}
]
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
@ -714,18 +718,18 @@ const initMap1 = (data1: any) => {
const myChart = echarts.init(domMap)
var option = {
tooltip: {
trigger: 'item',
trigger: 'item'
},
xAxis: {
type: 'category',
splitLine: {
show: false, //去掉网格线
show: false //去掉网格线
},
axisLine: {
//这是y轴文字颜色
lineStyle: {
color: '#fff',
},
color: '#fff'
}
},
data: ['党政机关', '金融机构', '医疗单位', '中小学', '其他'],
axisLabel: {
@ -735,28 +739,28 @@ const initMap1 = (data1: any) => {
txt = val.substr(0, 4) + '...'
}
return txt
},
},
}
}
},
grid: {
top: '8%',
left: '1%',
right: '1%',
bottom: '3%',
containLabel: true,
containLabel: true
},
yAxis: {
type: 'value',
axisLine: {
//这是y轴文字颜色
lineStyle: {
color: '#fff',
},
color: '#fff'
}
},
splitLine: {
// 设置x轴轴线相关配置
show: false, // 不显示x轴轴线
},
show: false // 不显示x轴轴线
}
},
series: [
{
@ -768,17 +772,17 @@ const initMap1 = (data1: any) => {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#0386F6', // 起始颜色（红）
color: '#0386F6' // 起始颜色（红）
},
{
offset: 1,
color: '#0FBBC4', // 结束颜色（蓝）
},
]),
},
},
},
],
color: '#0FBBC4' // 结束颜色（蓝）
}
])
}
}
}
]
}
myChart.setOption(option)
}
@ -799,48 +803,48 @@ const initMap2 = (arr: any) => {
trigger: 'item',
formatter: (params: any) => {
return '警情数量:' + params.seriesIndex + '<br /> 报警次数:' + params.data
},
}
},
grid: {
top: '15%',
left: '1%',
right: '1%',
bottom: '3%',
containLabel: true,
containLabel: true
},
legend: {
data: [
{
name: '报警次数',
textStyle: {
color: '#fff',
},
color: '#fff'
}
},
{
name: '警情数量',
textStyle: {
color: '#fff',
},
},
],
color: '#fff'
}
}
]
},
xAxis: [
{
type: 'category',
splitLine: {
show: false, //去掉网格线
show: false //去掉网格线
},
data: time,
axisLine: {
//这是y轴文字颜色
lineStyle: {
color: '#fff',
},
color: '#fff'
}
},
axisPointer: {
type: 'shadow',
},
},
type: 'shadow'
}
}
],
yAxis: [
{
@ -851,31 +855,31 @@ const initMap2 = (arr: any) => {
interval: 50,
splitLine: {
// 设置x轴轴线相关配置
show: false, // 不显示x轴轴线
show: false // 不显示x轴轴线
},
axisLine: {
//这是y轴文字颜色
lineStyle: {
color: '#fff',
},
color: '#fff'
}
},
axisLabel: {
formatter: '{value}次',
},
formatter: '{value}次'
}
},
{
type: 'value',
min: 0,
splitLine: {
// 设置x轴轴线相关配置
show: false, // 不显示x轴轴线
show: false // 不显示x轴轴线
},
max: 25,
interval: 5,
axisLabel: {
formatter: '',
},
},
formatter: ''
}
}
],
series: [
{
@ -884,13 +888,13 @@ const initMap2 = (arr: any) => {
tooltip: {
valueFormatter: function (value: any) {
// return value + ' ml';
},
}
},
barWidth: '24%',
itemStyle: {
color: '#3F7AD1', // 设置折线的颜色为红色
color: '#3F7AD1' // 设置折线的颜色为红色
},
data: data1,
data: data1
},
{
name: '警情数量',
@ -900,14 +904,14 @@ const initMap2 = (arr: any) => {
tooltip: {
valueFormatter: function (value: any) {
// return value + '°C';
},
}
},
itemStyle: {
color: '#81A2CF', // 设置折线的颜色为红色
color: '#81A2CF' // 设置折线的颜色为红色
},
data: data2,
},
],
data: data2
}
]
}
myChart.setOption(option)
}