This commit is contained in:
chengdandan 2023-04-19 17:50:15 +08:00
commit 83c46fe83f
3 changed files with 241 additions and 199 deletions

View File

@ -12,4 +12,16 @@ export const GetLevelAlarm = (params) => {
return axios.get('api/GetLevelAlarm', { return axios.get('api/GetLevelAlarm', {
params params
}) })
};
//获取昨天、今天报警数量
export const getSecurityAlarmCount = (params) => {
return axios.get('api/GetSecurityAlarmCount', {
params
})
};
//获取报警统计接口
export const getAlarmStatistics = (params) => {
return axios.get('api/GetAlarmStatistics', {
params
})
}; };

View File

@ -242,7 +242,7 @@
</template> </template>
<script> <script>
import { GetLevelAlarm } from "../api/index"; import { GetLevelAlarm, getAlarmStatistics } from "../api/index";
export default { export default {
data() { data() {
return { return {
@ -377,7 +377,7 @@ export default {
setTimeout(() => { setTimeout(() => {
this.cameraList = camera; this.cameraList = camera;
}, 1000); }, 1000);
this.warnSelect(0) this.warnSelect(0);
}, },
methods: { methods: {
// //
@ -444,67 +444,51 @@ export default {
}, },
// //
warningOne() { warningOne() {
var myChart = this.$echarts.init(document.getElementById("warningOne")); let data = [];
let option = { let dataX = []
legend: { getAlarmStatistics({
show: true, Type: "消防",
align: "left", }).then((res) => {
x: "45%", res.data.data.forEach((item, index) => {
orient: "vertical", data.push(item.Count);
textStyle: { dataX.push(item.Name)
color: "#fff", });
fontSize: "0.4rem", var myChart = this.$echarts.init(document.getElementById("warningOne"));
}, let option = {
data: [ legend: {
// {
// name: "",
// icon: "",
// },
{
name: "消防报警",
},
],
},
tooltip: {
show: true,
},
grid: {
left: "13%",
right: "4%",
bottom: "15%",
top: "17%",
},
xAxis: {
data: ["温感", "烟感", "手动报警"],
axisLine: {
show: true, show: true,
lineStyle: { align: "left",
color: "rgba(66, 164, 255,0.3)", x: "45%",
}, orient: "vertical",
}, textStyle: {
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: "0.4rem",
// rotate: "45"
},
},
yAxis: [
{
type: "value",
name: "/次",
minInterval: 1,
nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: "0.4rem", 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: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(66, 164, 255,0.4)", color: "rgba(66, 164, 255,0.3)",
}, },
}, },
axisTick: { axisTick: {
@ -513,119 +497,129 @@ export default {
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: "0.4rem", fontSize: "0.4rem",
}, // rotate: "45"
splitLine: {
show: true,
lineStyle: {
color: "rgba(66, 164, 255,0.5)",
},
}, },
}, },
], yAxis: [
series: [ {
{ type: "value",
name: "消防报警", name: "/次",
type: "bar", minInterval: 1,
barWidth: 20, nameTextStyle: {
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", 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], ],
}, series: [
], {
}; name: "消防报警",
myChart.setOption(option); 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() { warningTwo() {
var myChart = this.$echarts.init(document.getElementById("warningTwo")); let data = [];
let option = { let dataX = []
legend: { getAlarmStatistics({
show: true, Type: "设备",
align: "left", }).then((res) => {
x: "45%", res.data.data.forEach((item, index) => {
orient: "vertical", data.push(item.Count);
textStyle: { dataX.push(item.Name)
color: "#fff", });
fontSize: "0.4rem", var myChart = this.$echarts.init(document.getElementById("warningTwo"));
}, let option = {
data: [ legend: {
// {
// name: "",
// icon: "",
// },
{
name: "设备报警",
},
],
},
tooltip: {
show: true,
},
grid: {
left: "13%",
right: "4%",
bottom: "15%",
top: "17%",
},
xAxis: {
data: ["空调", "照明", "电梯", "太阳灯"],
axisLine: {
show: true, show: true,
lineStyle: { align: "left",
color: "rgba(66, 164, 255,0.3)", x: "45%",
}, orient: "vertical",
}, textStyle: {
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: "0.4rem",
// rotate: "45"
},
},
yAxis: [
{
type: "value",
name: "/次",
minInterval: 1,
nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: "0.4rem", 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: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(66, 164, 255,0.4)", color: "rgba(66, 164, 255,0.3)",
}, },
}, },
axisTick: { axisTick: {
@ -634,55 +628,81 @@ export default {
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: "0.4rem", fontSize: "0.4rem",
}, // rotate: "45"
splitLine: {
show: true,
lineStyle: {
color: "rgba(66, 164, 255,0.5)",
},
}, },
}, },
], yAxis: [
series: [ {
{ type: "value",
name: "设备报警", name: "/次",
type: "bar", minInterval: 1,
barWidth: 20, nameTextStyle: {
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", 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], ],
}, series: [
], {
}; name: "设备报警",
myChart.setOption(option); 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() { maintenanceLeft() {
var myChart = this.$echarts.init( var myChart = this.$echarts.init(

View File

@ -147,7 +147,7 @@
</template> </template>
<script> <script>
import { GetLevelAlarm } from "../api/index"; import { GetLevelAlarm , getSecurityAlarmCount} from "../api/index";
export default { export default {
name: "security", name: "security",
data() { data() {
@ -261,8 +261,17 @@ export default {
this.getFireWarnList() this.getFireWarnList()
// //
this.getPoliceList() this.getPoliceList()
//
this.getAlarmCount()
}, },
methods: { methods: {
//
getAlarmCount(){
getSecurityAlarmCount().then((res)=>{
this.securityList[4].count = res.data.data.TodayCount
this.securityList[5].count = res.data.data.YesterdayCount
})
},
videoChange(index) { videoChange(index) {
this.warnCameraList.forEach((item, i) => { this.warnCameraList.forEach((item, i) => {
item.icon = require("../assets/images/anFang/video.png"); item.icon = require("../assets/images/anFang/video.png");
@ -321,6 +330,7 @@ export default {
}); });
}); });
}, },
}, },
watch: {}, watch: {},
components: {}, components: {},