代码提交
This commit is contained in:
parent
790b7d84ce
commit
8c38a2c9da
|
@ -12,4 +12,16 @@ export const GetLevelAlarm = (params) => {
|
|||
return axios.get('api/GetLevelAlarm', {
|
||||
params
|
||||
})
|
||||
};
|
||||
//获取昨天、今天报警数量
|
||||
export const getSecurityAlarmCount = (params) => {
|
||||
return axios.get('api/GetSecurityAlarmCount', {
|
||||
params
|
||||
})
|
||||
};
|
||||
//获取报警统计接口
|
||||
export const getAlarmStatistics = (params) => {
|
||||
return axios.get('api/GetAlarmStatistics', {
|
||||
params
|
||||
})
|
||||
};
|
|
@ -242,7 +242,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { GetLevelAlarm } from "../api/index";
|
||||
import { GetLevelAlarm, getAlarmStatistics } from "../api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
@ -377,7 +377,7 @@ export default {
|
|||
setTimeout(() => {
|
||||
this.cameraList = camera;
|
||||
}, 1000);
|
||||
this.warnSelect(0)
|
||||
this.warnSelect(0);
|
||||
},
|
||||
methods: {
|
||||
//选中图片
|
||||
|
@ -444,67 +444,51 @@ export default {
|
|||
},
|
||||
//设备左
|
||||
warningOne() {
|
||||
var myChart = this.$echarts.init(document.getElementById("warningOne"));
|
||||
let option = {
|
||||
legend: {
|
||||
show: true,
|
||||
align: "left",
|
||||
x: "45%",
|
||||
orient: "vertical",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "0.4rem",
|
||||
},
|
||||
data: [
|
||||
// {
|
||||
// name: "",
|
||||
// icon: "",
|
||||
// },
|
||||
{
|
||||
name: "消防报警",
|
||||
},
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
grid: {
|
||||
left: "13%",
|
||||
right: "4%",
|
||||
bottom: "15%",
|
||||
top: "17%",
|
||||
},
|
||||
xAxis: {
|
||||
data: ["温感", "烟感", "手动报警"],
|
||||
axisLine: {
|
||||
let data = [];
|
||||
let dataX = []
|
||||
getAlarmStatistics({
|
||||
Type: "消防",
|
||||
}).then((res) => {
|
||||
res.data.data.forEach((item, index) => {
|
||||
data.push(item.Count);
|
||||
dataX.push(item.Name)
|
||||
});
|
||||
var myChart = this.$echarts.init(document.getElementById("warningOne"));
|
||||
let option = {
|
||||
legend: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(66, 164, 255,0.3)",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: "0.4rem",
|
||||
// rotate: "45"
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "/次",
|
||||
minInterval: 1,
|
||||
nameTextStyle: {
|
||||
align: "left",
|
||||
x: "45%",
|
||||
orient: "vertical",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "0.4rem",
|
||||
},
|
||||
// scale: true,
|
||||
data: [
|
||||
// {
|
||||
// name: "",
|
||||
// icon: "",
|
||||
// },
|
||||
{
|
||||
name: "消防报警",
|
||||
},
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
grid: {
|
||||
left: "13%",
|
||||
right: "4%",
|
||||
bottom: "15%",
|
||||
top: "17%",
|
||||
},
|
||||
xAxis: {
|
||||
data: dataX,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(66, 164, 255,0.4)",
|
||||
color: "rgba(66, 164, 255,0.3)",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
|
@ -513,119 +497,129 @@ export default {
|
|||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: "0.4rem",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(66, 164, 255,0.5)",
|
||||
},
|
||||
// rotate: "45"
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "消防报警",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
zlevel: 2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "#01B1FF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#033BFF",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: "0.4rem",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "/次",
|
||||
minInterval: 1,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
position: "inside",
|
||||
fontSize: "0.4rem",
|
||||
},
|
||||
// scale: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(66, 164, 255,0.4)",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: "0.4rem",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(66, 164, 255,0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [90, 94, 98],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "消防报警",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
zlevel: 2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "#01B1FF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#033BFF",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: "0.4rem",
|
||||
color: "#fff",
|
||||
position: "inside",
|
||||
},
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
});
|
||||
},
|
||||
//设备右
|
||||
warningTwo() {
|
||||
var myChart = this.$echarts.init(document.getElementById("warningTwo"));
|
||||
let option = {
|
||||
legend: {
|
||||
show: true,
|
||||
align: "left",
|
||||
x: "45%",
|
||||
orient: "vertical",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "0.4rem",
|
||||
},
|
||||
data: [
|
||||
// {
|
||||
// name: "",
|
||||
// icon: "",
|
||||
// },
|
||||
{
|
||||
name: "设备报警",
|
||||
},
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
grid: {
|
||||
left: "13%",
|
||||
right: "4%",
|
||||
bottom: "15%",
|
||||
top: "17%",
|
||||
},
|
||||
xAxis: {
|
||||
data: ["空调", "照明", "电梯", "太阳灯"],
|
||||
axisLine: {
|
||||
let data = [];
|
||||
let dataX = []
|
||||
getAlarmStatistics({
|
||||
Type: "设备",
|
||||
}).then((res) => {
|
||||
res.data.data.forEach((item, index) => {
|
||||
data.push(item.Count);
|
||||
dataX.push(item.Name)
|
||||
});
|
||||
var myChart = this.$echarts.init(document.getElementById("warningTwo"));
|
||||
let option = {
|
||||
legend: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(66, 164, 255,0.3)",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: "0.4rem",
|
||||
// rotate: "45"
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "/次",
|
||||
minInterval: 1,
|
||||
nameTextStyle: {
|
||||
align: "left",
|
||||
x: "45%",
|
||||
orient: "vertical",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "0.4rem",
|
||||
},
|
||||
// scale: true,
|
||||
data: [
|
||||
// {
|
||||
// name: "",
|
||||
// icon: "",
|
||||
// },
|
||||
{
|
||||
name: "设备报警",
|
||||
},
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
grid: {
|
||||
left: "13%",
|
||||
right: "4%",
|
||||
bottom: "15%",
|
||||
top: "17%",
|
||||
},
|
||||
xAxis: {
|
||||
data: dataX,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(66, 164, 255,0.4)",
|
||||
color: "rgba(66, 164, 255,0.3)",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
|
@ -634,55 +628,81 @@ export default {
|
|||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: "0.4rem",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(66, 164, 255,0.5)",
|
||||
},
|
||||
// rotate: "45"
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "设备报警",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
zlevel: 2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "#01B1FF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#033BFF",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: "0.4rem",
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "/次",
|
||||
minInterval: 1,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
position: "inside",
|
||||
fontSize: "0.4rem",
|
||||
},
|
||||
// scale: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(66, 164, 255,0.4)",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: "0.4rem",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(66, 164, 255,0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [90, 100, 98, 97],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "设备报警",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
zlevel: 2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "#01B1FF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#033BFF",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: "0.4rem",
|
||||
color: "#fff",
|
||||
position: "inside",
|
||||
},
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
});
|
||||
},
|
||||
maintenanceLeft() {
|
||||
var myChart = this.$echarts.init(
|
||||
|
|
|
@ -147,7 +147,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { GetLevelAlarm } from "../api/index";
|
||||
import { GetLevelAlarm , getSecurityAlarmCount} from "../api/index";
|
||||
export default {
|
||||
name: "security",
|
||||
data() {
|
||||
|
@ -261,8 +261,17 @@ export default {
|
|||
this.getFireWarnList()
|
||||
// 获取安防告警
|
||||
this.getPoliceList()
|
||||
//获取安防统计今天昨天报警数量
|
||||
this.getAlarmCount()
|
||||
},
|
||||
methods: {
|
||||
//获取昨天今天的报警数量
|
||||
getAlarmCount(){
|
||||
getSecurityAlarmCount().then((res)=>{
|
||||
this.securityList[4].count = res.data.data.TodayCount
|
||||
this.securityList[5].count = res.data.data.YesterdayCount
|
||||
})
|
||||
},
|
||||
videoChange(index) {
|
||||
this.warnCameraList.forEach((item, i) => {
|
||||
item.icon = require("../assets/images/anFang/video.png");
|
||||
|
@ -321,6 +330,7 @@ export default {
|
|||
});
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
watch: {},
|
||||
components: {},
|
||||
|
|
Loading…
Reference in New Issue