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

84
public/cw_/index.html
View File

@ -53,7 +53,7 @@
} }
#playerBox { #playerBox {
height: 100%; height: 96%;
width: 100%; width: 100%;
} }
</style> </style>
@ -61,6 +61,10 @@
<body ontouchstart> <body ontouchstart>
<div id="playerBox"></div> <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"> <script type="text/javascript">
window.onload = function () { window.onload = function () {
self.player = new Player($("#playerBox")); self.player = new Player($("#playerBox"));
@ -104,7 +108,85 @@
} }
$("html>head>title").html(title); $("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> </script>
</body> </body>

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

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