parent
8a9bf15895
commit
fa100abc89
|
@ -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"));
|
||||||
|
@ -86,7 +90,7 @@
|
||||||
requestBody.useTLS = 1
|
requestBody.useTLS = 1
|
||||||
}
|
}
|
||||||
// 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({
|
axios({
|
||||||
method: 'post',
|
method: 'post',
|
||||||
url,
|
url,
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -179,12 +179,12 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import 'echarts-gl'
|
import 'echarts-gl'
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import { getAreaCode } from './js/area'
|
import {getAreaCode} from './js/area'
|
||||||
import { JsonResult } from '@/axios'
|
import {JsonResult} from '@/axios'
|
||||||
import { Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick } from 'vue'
|
import {Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick} from 'vue'
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import api from '@/axios'
|
import api from '@/axios'
|
||||||
const { proxy } = getCurrentInstance() as any
|
const {proxy} = getCurrentInstance() as any
|
||||||
const day = proxy.day
|
const day = proxy.day
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// gettotal();
|
// gettotal();
|
||||||
|
@ -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 {
|
||||||
|
@ -512,7 +516,7 @@ const initMapdt = (data: any, podat: any, nameb: any) => {
|
||||||
var option = {
|
var option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
textStyle: { fontSize: '14', color: '#fff', fontFamily: 'Arial' },
|
textStyle: {fontSize: '14', color: '#fff', fontFamily: 'Arial'},
|
||||||
backgroundColor: '#092b6a',
|
backgroundColor: '#092b6a',
|
||||||
formatter: (params: any) => {
|
formatter: (params: any) => {
|
||||||
let datat = podat
|
let datat = podat
|
||||||
|
@ -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,22 +692,22 @@ 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: [
|
||||||
{ value: data1.alarmPointZone, name: '防区报警' },
|
{value: data1.alarmPointZone, name: '防区报警'},
|
||||||
{ 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)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue