parent
8a9bf15895
commit
fa100abc89
|
|
@ -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"));
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -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,11 +692,11 @@ const initMap = (data1: any) => {
|
|||
show: true,
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
},
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
show: true
|
||||
},
|
||||
center: ['35%', '50%'],
|
||||
data: [
|
||||
|
|
@ -700,10 +704,10 @@ const initMap = (data1: any) => {
|
|||
{value: data1.alarmPointTalk, name: '对讲报警'},
|
||||
{value: data1.mdevTotal, name: '移动报警'},
|
||||
{value: data1.alarmPointPushButton, name: '一键报警'},
|
||||
{ value: data1.ipcTotal, 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)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue