forked from integrated_whb/integrated_whb_vue
bi页人员定位，ai视频分析完成
parent
7724a93c30
commit
aa5c41e8ba
|
|
@ -0,0 +1,33 @@
|
|||
import { post } from "@/request/axios.js";
|
||||
|
||||
export const getPersonnelTypeCount = (params) =>
|
||||
post("/map/getPersonnelTypeCount", params); // 人员类型统计
|
||||
export const getAlarmTypeCount = (params) =>
|
||||
post("/map/getAlarmTypeCount", params); // 告警类型统计
|
||||
export const getPersonnelPositioningCount = (params) =>
|
||||
post("/map/getPersonnelPositioningCount", params); // 人员定位情况
|
||||
// 八项作业
|
||||
export const getEightWorkEcharts = (params) =>
|
||||
post("/map/Eight/getEcharts", params); // 安全作业情况统计
|
||||
export const getSafetyStatusStatistics = (params) =>
|
||||
post("/map/Eight/findFormCount", params); // 安全作业状态统计
|
||||
// 摄像头
|
||||
export const getCameraAlarmCount = (params) =>
|
||||
post("/map/getCameraAlarmCount", params); // 摄像头告警数
|
||||
export const getCameraAlarmTypeCount = (params) =>
|
||||
post("/map/getCameraAlarmTypeCount", params); // 报警类型
|
||||
|
||||
export const getCameraAlarmTimeCount = (params) =>
|
||||
post("/map/getCameraAlarmTimeCount", params); // 告警时间趋势
|
||||
export const getCameraAlarmSourceCount = (params) =>
|
||||
post("/map/getCameraAlarmSourceCount", params); // 告警来源
|
||||
export const getAiWarningList = (params) =>
|
||||
post(
|
||||
"/aiwarning/list?currentPage=" +
|
||||
params.currentPage +
|
||||
"&showCount=" +
|
||||
params.showCount,
|
||||
params
|
||||
); // ai报警列表
|
||||
export const getCameraTopToShow = (params) =>
|
||||
post("/map/getCameraTopToShow", params); // bi页播放摄像头信息
|
||||
|
|
@ -9,5 +9,7 @@ export const getVideoManagerView = (params) =>
|
|||
post("/videomanager/goEdit", params); // 台账添加
|
||||
export const setVideoManagerDelete = (params) =>
|
||||
post("/videomanager/delete", params); // 删除
|
||||
export const setUpToBi = (params) =>
|
||||
post("/videomanager/editZhiding", params); // 删除
|
||||
export const setVideoManagerEdit = (params) =>
|
||||
post("/videomanager/edit", params);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="option">
|
||||
<div
|
||||
class="list"
|
||||
v-for="(item, index) in block1OptionsList"
|
||||
v-for="(item, index) in data.block1OptionsList"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item.img" alt="" class="img" />
|
||||
|
|
@ -21,12 +21,12 @@
|
|||
<div class="option">
|
||||
<div
|
||||
class="list"
|
||||
v-for="(item, index) in block2OptionsList"
|
||||
v-for="(item, index) in data.block2OptionsList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="name">{{ item.label }}</div>
|
||||
<div class="num">
|
||||
<count-up :end-val="item.count"></count-up>
|
||||
<count-up :end-val="item.total"></count-up>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,27 +34,16 @@
|
|||
<div class="block3">
|
||||
<layout-title title="人员定位情况" />
|
||||
<div class="option">
|
||||
<div class="tab_list">
|
||||
<div
|
||||
class="list"
|
||||
v-for="(item, index) in tabsList"
|
||||
:class="['item', { active: index === tabIndex }]"
|
||||
:key="index"
|
||||
@click="tabIndex = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="tr">
|
||||
<div class="td">姓名</div>
|
||||
<div class="td">职务</div>
|
||||
<div class="td">卡号</div>
|
||||
<div class="td">电量</div>
|
||||
</div>
|
||||
<div class="tr" v-for="(item, index) in block3List" :key="index">
|
||||
<div class="tr" v-for="(item, index) in data.block3List" :key="index">
|
||||
<div class="td">{{ item.name }}</div>
|
||||
<div class="td">{{ item.Office }}</div>
|
||||
<div class="td">{{ item.electricity }}</div>
|
||||
<div class="td">{{ item.cardNo }}</div>
|
||||
<div class="td">{{ item.stset + "%" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -64,107 +53,134 @@
|
|||
<script setup>
|
||||
import LayoutTitle from "./title.vue";
|
||||
import CountUp from "vue-countup-v3";
|
||||
import { ref } from "vue";
|
||||
import { nextTick, reactive } from "vue";
|
||||
import {
|
||||
getPersonnelTypeCount,
|
||||
getAlarmTypeCount,
|
||||
getPersonnelPositioningCount,
|
||||
} from "@/request/bi/mapApi.js";
|
||||
|
||||
const block1OptionsList = [
|
||||
{
|
||||
img: new URL("/src/assets/images/map/img1.png", import.meta.url).href,
|
||||
label: "人员",
|
||||
count: 3500,
|
||||
},
|
||||
{
|
||||
img: new URL("/src/assets/images/map/img2.png", import.meta.url).href,
|
||||
label: "相关方人员",
|
||||
count: 3500,
|
||||
},
|
||||
{
|
||||
img: new URL("/src/assets/images/map/img3.png", import.meta.url).href,
|
||||
label: "外来人员",
|
||||
count: 3500,
|
||||
},
|
||||
];
|
||||
const block2OptionsList = [
|
||||
{
|
||||
label: "滞留报警",
|
||||
count: 3500,
|
||||
},
|
||||
{
|
||||
label: "越界报警",
|
||||
count: 235,
|
||||
},
|
||||
{
|
||||
label: "超员报警",
|
||||
count: 569,
|
||||
},
|
||||
{
|
||||
label: "缺员报警",
|
||||
count: 569,
|
||||
},
|
||||
{
|
||||
label: "静止报警",
|
||||
count: 423,
|
||||
},
|
||||
{
|
||||
label: "串岗报警",
|
||||
count: 789,
|
||||
},
|
||||
{
|
||||
label: "一键告警",
|
||||
count: 236,
|
||||
},
|
||||
{
|
||||
label: "聚集告警",
|
||||
count: 214,
|
||||
},
|
||||
{
|
||||
label: "作业告警",
|
||||
count: 852,
|
||||
},
|
||||
];
|
||||
const block3List = [
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
];
|
||||
const tabsList = ["人员", "相关方人员", "外来人员"];
|
||||
const tabIndex = ref(0);
|
||||
const data = reactive({
|
||||
block1OptionsList: [
|
||||
{
|
||||
img: new URL("/src/assets/images/map/img1.png", import.meta.url).href,
|
||||
label: "全部人员",
|
||||
count: 3500,
|
||||
},
|
||||
],
|
||||
block2OptionsList: [
|
||||
{
|
||||
label: "滞留报警",
|
||||
count: 3500,
|
||||
},
|
||||
{
|
||||
label: "越界报警",
|
||||
count: 235,
|
||||
},
|
||||
{
|
||||
label: "超员报警",
|
||||
count: 569,
|
||||
},
|
||||
{
|
||||
label: "缺员报警",
|
||||
count: 569,
|
||||
},
|
||||
{
|
||||
label: "静止报警",
|
||||
count: 423,
|
||||
},
|
||||
{
|
||||
label: "串岗报警",
|
||||
count: 789,
|
||||
},
|
||||
{
|
||||
label: "一键告警",
|
||||
count: 236,
|
||||
},
|
||||
{
|
||||
label: "聚集告警",
|
||||
count: 214,
|
||||
},
|
||||
{
|
||||
label: "作业告警",
|
||||
count: 852,
|
||||
},
|
||||
],
|
||||
block3List: [
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
{
|
||||
name: "赵一诺",
|
||||
Office: "大堂经理",
|
||||
electricity: "30%",
|
||||
},
|
||||
],
|
||||
});
|
||||
const getPersonnelData = async () => {
|
||||
const resData = await getPersonnelTypeCount();
|
||||
await nextTick(() => {
|
||||
data.block1OptionsList.forEach((item) => {
|
||||
item.count = resData.userCount;
|
||||
});
|
||||
});
|
||||
};
|
||||
const getAlarmTypeData = async () => {
|
||||
const resData = await getAlarmTypeCount();
|
||||
const dataList = resData.data.data.data;
|
||||
// (1=滞留报警,2=串岗报警,3=超员报警,4=缺员报警,5=静止报警,6=一键报警,7=越界报警,8=聚集告警 )
|
||||
dataList.forEach((item) => {
|
||||
if (item.type === "1") item.label = "滞留报警";
|
||||
if (item.type === "2") item.label = "串岗报警";
|
||||
if (item.type === "3") item.label = "超员报警";
|
||||
if (item.type === "4") item.label = "缺员报警";
|
||||
if (item.type === "5") item.label = "静止报警";
|
||||
if (item.type === "6") item.label = "一键报警";
|
||||
if (item.type === "7") item.label = "越界报警";
|
||||
if (item.type === "8") item.label = "聚集告警";
|
||||
});
|
||||
data.block2OptionsList = dataList;
|
||||
};
|
||||
const getPositionData = async () => {
|
||||
const resData = await getPersonnelPositioningCount();
|
||||
console.log(resData.data.rows);
|
||||
data.block3List = resData.data.rows;
|
||||
};
|
||||
getPersonnelData();
|
||||
getAlarmTypeData();
|
||||
getPositionData();
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -50,6 +50,11 @@ import CountUp from "vue-countup-v3";
|
|||
import { onMounted, reactive } from "vue";
|
||||
import echarts1 from "../js/echarts1.js";
|
||||
import echarts2 from "../js/echarts2.js";
|
||||
import {
|
||||
getCameraAlarmCount,
|
||||
getCameraAlarmTimeCount,
|
||||
getCameraAlarmTypeCount,
|
||||
} from "@/request/bi/mapApi.js";
|
||||
|
||||
const data = reactive({
|
||||
block1OptionsList: [
|
||||
|
|
@ -87,9 +92,54 @@ const data = reactive({
|
|||
},
|
||||
],
|
||||
});
|
||||
const getCameraAlarmData = async () => {
|
||||
const resData = await getCameraAlarmCount();
|
||||
let allAlarm = 0;
|
||||
let disposed = 0;
|
||||
resData.CameraAlarmCount.forEach((item) => {
|
||||
allAlarm += item.count;
|
||||
if (item.type === 3) {
|
||||
disposed = item.count;
|
||||
}
|
||||
data.block1OptionsList[0].count = allAlarm;
|
||||
data.block1OptionsList[1].count = allAlarm - disposed;
|
||||
data.block1OptionsList[2].count = disposed;
|
||||
});
|
||||
};
|
||||
const getCameraAlarmTimeData = async () => {
|
||||
const resData = await getCameraAlarmTimeCount();
|
||||
echarts2(
|
||||
"main2",
|
||||
resData.varList.monthStrList,
|
||||
resData.varList.accumulatedList,
|
||||
resData.varList.monthList
|
||||
);
|
||||
};
|
||||
const getCameraAlarmTypeData = async () => {
|
||||
const resData = await getCameraAlarmTypeCount();
|
||||
const leg = [];
|
||||
const cont = [];
|
||||
resData.varList.forEach((item) => {
|
||||
leg.push(item.TYPE);
|
||||
cont.push(item.PERCENTAGE);
|
||||
});
|
||||
echarts1("main1", leg, cont);
|
||||
};
|
||||
getCameraAlarmData();
|
||||
getCameraAlarmTimeData();
|
||||
getCameraAlarmTypeData();
|
||||
onMounted(() => {
|
||||
echarts1("main1");
|
||||
echarts2("main2");
|
||||
echarts1(
|
||||
"main1",
|
||||
["烟雾", "水电", "烟雾", "烟雾", "烟雾"],
|
||||
[12.2, 15, 11, 8, 16]
|
||||
);
|
||||
echarts2(
|
||||
"main2",
|
||||
["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
[393, 831, 933, 1200, 1386, 1721, 2027],
|
||||
[393, 438, 102, 267, 186, 315, 316]
|
||||
);
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,89 +1,132 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="block1">
|
||||
<div class="video">
|
||||
<img src="/src/assets/images/map/img16.png" alt="" />
|
||||
<div v-if="data.videoSrc" class="video">
|
||||
<iframe
|
||||
:src="data.videoSrc.VIDEOURL"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
<!-- <img src="/src/assets/images/map/img16.png" alt="" />-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="block2">
|
||||
<layout-title title="实时告警监控" />
|
||||
<div class="options">
|
||||
<div
|
||||
class="option mb-10"
|
||||
v-for="(item, index) in data.block1OptionsList"
|
||||
:key="index"
|
||||
v-infinite-scroll="load"
|
||||
:infinite-scroll-disabled="disabled"
|
||||
class="scroll"
|
||||
>
|
||||
<div class="img">
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
<div class="info" :class="item.type === 1 ? '' : 'bg_blue'">
|
||||
<div class="title">
|
||||
<div class="tit">{{ item.title }}</div>
|
||||
<div class="ico">
|
||||
<img :src="item.type === 1 ? item.img1 : item.img2" alt="" />
|
||||
</div>
|
||||
<div
|
||||
class="option mb-10"
|
||||
v-for="(item, index) in data.block1OptionsList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="img">
|
||||
<img :src="VITE_FILE_URL + item.IMG_PATH" alt="" />
|
||||
</div>
|
||||
<div class="info" :class="item.ISTRUE === 3 ? '' : 'bg_blue'">
|
||||
<div class="title">
|
||||
<div class="tit">{{ item.TYPE }}</div>
|
||||
<div class="ico">
|
||||
<img
|
||||
:src="item.ISTRUE === 3 ? data.img1 : data.img2"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time">{{ item.WARNING_TIME }}</div>
|
||||
<div class="text">{{ "摄像头名称" + item.VIDEONAME }}</div>
|
||||
<div class="text">{{ "摄像头编号" + item.CODE }}</div>
|
||||
</div>
|
||||
<div class="time">{{ item.time }}</div>
|
||||
<div class="text">{{ item.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LayoutTitle from "./title.vue";
|
||||
import { reactive } from "vue";
|
||||
import { reactive, computed } from "vue";
|
||||
import { getAiWarningList, getCameraTopToShow } from "@/request/bi/mapApi.js";
|
||||
const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
|
||||
|
||||
const data = reactive({
|
||||
img1: new URL("/src/assets/images/map/img17.png", import.meta.url).href,
|
||||
img2: new URL("/src/assets/images/map/img18.png", import.meta.url).href,
|
||||
videoSrc: {},
|
||||
loading: false,
|
||||
currentPage: 1,
|
||||
totalPage: 1,
|
||||
block1OptionsList: [
|
||||
{
|
||||
img: new URL("/src/assets/images/map/img16.png", import.meta.url).href,
|
||||
img1: new URL("/src/assets/images/map/img17.png", import.meta.url).href,
|
||||
img2: new URL("/src/assets/images/map/img18.png", import.meta.url).href,
|
||||
title: "未戴安全帽",
|
||||
time: "2023-08-09 15:14:23",
|
||||
text: "告警源：油品库包装裤袋",
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
img: new URL("/src/assets/images/map/img16.png", import.meta.url).href,
|
||||
img1: new URL("/src/assets/images/map/img17.png", import.meta.url).href,
|
||||
img2: new URL("/src/assets/images/map/img18.png", import.meta.url).href,
|
||||
title: "未戴安全帽",
|
||||
time: "2023-08-09 15:14:23",
|
||||
text: "告警源：油品库包装裤袋",
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
img: new URL("/src/assets/images/map/img16.png", import.meta.url).href,
|
||||
img1: new URL("/src/assets/images/map/img17.png", import.meta.url).href,
|
||||
img2: new URL("/src/assets/images/map/img18.png", import.meta.url).href,
|
||||
title: "未戴安全帽",
|
||||
time: "2023-08-09 15:14:23",
|
||||
text: "告警源：油品库包装裤袋",
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
img: new URL("/src/assets/images/map/img16.png", import.meta.url).href,
|
||||
img1: new URL("/src/assets/images/map/img17.png", import.meta.url).href,
|
||||
img2: new URL("/src/assets/images/map/img18.png", import.meta.url).href,
|
||||
title: "未戴安全帽",
|
||||
time: "2023-08-09 15:14:23",
|
||||
text: "告警源：油品库包装裤袋",
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
img: new URL("/src/assets/images/map/img16.png", import.meta.url).href,
|
||||
img1: new URL("/src/assets/images/map/img17.png", import.meta.url).href,
|
||||
img2: new URL("/src/assets/images/map/img18.png", import.meta.url).href,
|
||||
title: "未戴安全帽",
|
||||
time: "2023-08-09 15:14:23",
|
||||
text: "告警源：油品库包装裤袋",
|
||||
type: 2,
|
||||
},
|
||||
// {
|
||||
// img: new URL("/src/assets/images/map/img16.png", import.meta.url).href,
|
||||
// title: "未戴安全帽",
|
||||
// time: "2023-08-09 15:14:23",
|
||||
// text: "告警源：油品库包装裤袋",
|
||||
// type: 1,
|
||||
// },
|
||||
// {
|
||||
// img: new URL("/src/assets/images/map/img16.png", import.meta.url).href,
|
||||
// title: "未戴安全帽",
|
||||
// time: "2023-08-09 15:14:23",
|
||||
// text: "告警源：油品库包装裤袋",
|
||||
// type: 1,
|
||||
// },
|
||||
// {
|
||||
// img: new URL("/src/assets/images/map/img16.png", import.meta.url).href,
|
||||
// title: "未戴安全帽",
|
||||
// time: "2023-08-09 15:14:23",
|
||||
// text: "告警源：油品库包装裤袋",
|
||||
// type: 1,
|
||||
// },
|
||||
// {
|
||||
// img: new URL("/src/assets/images/map/img16.png", import.meta.url).href,
|
||||
// title: "未戴安全帽",
|
||||
// time: "2023-08-09 15:14:23",
|
||||
// text: "告警源：油品库包装裤袋",
|
||||
// type: 1,
|
||||
// },
|
||||
// {
|
||||
// img: new URL("/src/assets/images/map/img16.png", import.meta.url).href,
|
||||
// title: "未戴安全帽",
|
||||
// time: "2023-08-09 15:14:23",
|
||||
// text: "告警源：油品库包装裤袋",
|
||||
// type: 2,
|
||||
// },
|
||||
],
|
||||
});
|
||||
const getAiWarningData = async () => {
|
||||
const resData = await getAiWarningList({
|
||||
currentPage: data.currentPage,
|
||||
showCount: 10,
|
||||
});
|
||||
resData.varList.forEach((item) => {
|
||||
data.block1OptionsList.push(item);
|
||||
});
|
||||
data.totalPage = resData.page.totalPage;
|
||||
data.loading = false;
|
||||
};
|
||||
const getCameraTopToShowData = async () => {
|
||||
const resData = await getCameraTopToShow();
|
||||
data.videoSrc = resData.pd;
|
||||
};
|
||||
|
||||
// 无限滚动
|
||||
const disabled = computed(() => {
|
||||
return noMore.value;
|
||||
});
|
||||
const load = () => {
|
||||
data.loading = true;
|
||||
data.currentPage += 1;
|
||||
getAiWarningData();
|
||||
};
|
||||
const noMore = computed(() => {
|
||||
return data.currentPage >= data.totalPage;
|
||||
});
|
||||
getAiWarningData();
|
||||
getCameraTopToShowData();
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
|
|
@ -129,7 +172,30 @@ const data = reactive({
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
.scroll {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: rgba(2, 30, 81, 0.851);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tr {
|
||||
&:nth-child(odd) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.option {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ import LayoutTitle from "./title.vue";
|
|||
import CountUp from "vue-countup-v3";
|
||||
import { onMounted, reactive } from "vue";
|
||||
import echarts5 from "../js/echarts5.js";
|
||||
|
||||
// import { getSafetyStatusStatistics } from "@/request/bi/mapApi.js";
|
||||
const data = reactive({
|
||||
block1OptionsList: [
|
||||
{
|
||||
|
|
@ -132,6 +132,11 @@ const data = reactive({
|
|||
onMounted(() => {
|
||||
echarts5("main1");
|
||||
});
|
||||
// const getSafetyStatusData = async () => {
|
||||
// const resData = await getSafetyStatusStatistics();
|
||||
// console.log(resData);
|
||||
// };
|
||||
// getSafetyStatusData();
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import * as echarts from "echarts";
|
||||
import { tryOnMounted, tryOnUnmounted } from "@vueuse/core";
|
||||
let myChart1;
|
||||
function echarts1(id) {
|
||||
function echarts1(id, legend, echartCount) {
|
||||
myChart1 = echarts.init(document.querySelector(`#${id}`));
|
||||
function xWrapText(params, num = 2) {
|
||||
let newParamsName = "";
|
||||
|
|
@ -25,8 +25,8 @@ function echarts1(id) {
|
|||
}
|
||||
return newParamsName;
|
||||
}
|
||||
const legend = ["烟雾", "水电", "烟雾", "烟雾", "烟雾"];
|
||||
const echartCount = [12, 15, 11, 8, 16];
|
||||
// const legend = ["烟雾", "水电", "烟雾", "烟雾", "烟雾"];
|
||||
// const echartCount = [12, 15, 11, 8, 16];
|
||||
const option = {
|
||||
backgroundColor: "",
|
||||
grid: {
|
||||
|
|
@ -62,8 +62,10 @@ function echarts1(id) {
|
|||
fontSize: 10,
|
||||
},
|
||||
formatter(params) {
|
||||
const res = xWrapText(params, 6);
|
||||
return params.length > 15 ? `${res.slice(0, 15)}...` : res;
|
||||
// const res = xWrapText(params, 6);
|
||||
xWrapText(params, 6);
|
||||
// return params.length > 15 ? `${res.slice(0, 15)}...` : res;
|
||||
return "";
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import * as echarts from "echarts";
|
||||
import { tryOnMounted, tryOnUnmounted } from "@vueuse/core";
|
||||
let myChart2;
|
||||
function echarts2(id) {
|
||||
function echarts2(id, month, accumulated, currentMonth) {
|
||||
myChart2 = echarts.init(document.querySelector(`#${id}`));
|
||||
const option = {
|
||||
backgroundColor: "",
|
||||
|
|
@ -15,7 +15,7 @@ function echarts2(id) {
|
|||
},
|
||||
legend: {
|
||||
icon: "circle",
|
||||
data: ["累计推荐", "本月推荐"],
|
||||
data: ["累计趋势", "当月趋势"],
|
||||
textStyle: {
|
||||
color: "#999999",
|
||||
borderColor: "#fff",
|
||||
|
|
@ -38,11 +38,13 @@ function echarts2(id) {
|
|||
color: "#d1e6eb",
|
||||
margin: 15,
|
||||
},
|
||||
interval: 0,
|
||||
rotate: 30,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
data: month,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -73,7 +75,7 @@ function echarts2(id) {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: "累计推荐",
|
||||
name: "累计趋势",
|
||||
type: "line",
|
||||
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
||||
showAllSymbol: true,
|
||||
|
|
@ -111,10 +113,10 @@ function echarts2(id) {
|
|||
shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
|
||||
shadowBlur: 20, // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
},
|
||||
data: [393, 438, 485, 631, 689, 824, 987],
|
||||
data: accumulated,
|
||||
},
|
||||
{
|
||||
name: "本月推荐",
|
||||
name: "当月趋势",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
tooltip: {
|
||||
|
|
@ -123,7 +125,7 @@ function echarts2(id) {
|
|||
itemStyle: {
|
||||
color: "#1492FF",
|
||||
},
|
||||
data: [200, 382, 102, 267, 186, 315, 316],
|
||||
data: currentMonth,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="type === 'edit' ? '审核' : '新增'"
|
||||
:before-close="fnClose"
|
||||
>
|
||||
<el-dialog v-model="visible" :before-close="fnClose">
|
||||
<el-form ref="formRef" :rules="rules" :model="form" label-width="150px">
|
||||
<el-form-item label="监控设备名称" prop="VIDEONAME">
|
||||
<el-input v-model="form.VIDEONAME" disabled />
|
||||
|
|
@ -105,10 +101,6 @@ const options = [
|
|||
value: 2,
|
||||
label: "否",
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: "请选择",
|
||||
},
|
||||
];
|
||||
const data = reactive({
|
||||
videoDialog: {
|
||||
|
|
|
|||
|
|
@ -3,18 +3,30 @@
|
|||
<el-card>
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
label-width="50px"
|
||||
label-width="120px"
|
||||
@submit.prevent="fnResetPagination"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="KEYWORDS">
|
||||
<el-form-item label="请输入关键字" prop="KEYWORDS">
|
||||
<el-input
|
||||
v-model="searchForm.KEYWORDS"
|
||||
placeholder="请输入关键字"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="请选择是否审核" prop="ISTRUE">
|
||||
<el-select v-model="searchForm.ISTRUE" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button type="primary" native-type="submit">搜索</el-button>
|
||||
|
|
@ -61,13 +73,12 @@
|
|||
<el-table-column label="操作" width="250">
|
||||
<template v-slot="{ row }">
|
||||
<el-button
|
||||
v-if="row.ISTRUE === 3"
|
||||
type="primary"
|
||||
text
|
||||
link
|
||||
@click="fnAddOrEdit(row.AIWARNING_ID, 'edit')"
|
||||
>
|
||||
审核
|
||||
{{ row.ISTRUE === 3 ? "审核" : "编辑" }}
|
||||
</el-button>
|
||||
<el-button type="primary" text link @click="fnDeleteAiWarning(row)">
|
||||
删除
|
||||
|
|
@ -87,10 +98,6 @@
|
|||
:type="data.addDialog.type"
|
||||
@get-data="fnResetPagination"
|
||||
/>
|
||||
<video-view
|
||||
v-model:visible="data.videoDialog.visible"
|
||||
:src="data.videoDialog.src"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -108,6 +115,20 @@ import Add from "./components/add.vue";
|
|||
import { nextTick, reactive } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { debounce } from "throttle-debounce";
|
||||
const options = [
|
||||
{
|
||||
value: 1,
|
||||
label: "真实报警",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "忽略报警",
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: "未审核",
|
||||
},
|
||||
];
|
||||
|
||||
const data = reactive({
|
||||
addDialog: {
|
||||
|
|
@ -166,6 +187,7 @@ const fnAddOrEdit = async (AIWARNING_ID, type) => {
|
|||
data.addDialog.type = type;
|
||||
if (type === "edit") {
|
||||
const resData = await getAiWarningView({ AIWARNING_ID });
|
||||
if (resData.pd.ISTRUE === 3) resData.pd.ISTRUE = 1;
|
||||
data.addDialog.form = resData.pd;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -41,6 +41,15 @@
|
|||
<el-table-column prop="CODE" label="监控设备编码" />
|
||||
<el-table-column label="操作" width="250">
|
||||
<template v-slot="{ row }">
|
||||
<el-button
|
||||
v-if="row.ISSHOW === 0"
|
||||
type="primary"
|
||||
text
|
||||
link
|
||||
@click="fnUpToBi(row.VIDEOMANAGER_ID)"
|
||||
>
|
||||
置顶
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
|
|
@ -87,11 +96,12 @@ import useListData from "@/assets/js/useListData.js";
|
|||
import {
|
||||
getVideoManagerList,
|
||||
getVideoManagerView,
|
||||
setUpToBi,
|
||||
setVideoManagerDelete,
|
||||
} from "@/request/video_manager.js";
|
||||
import Add from "./components/add.vue";
|
||||
import { nextTick, reactive } from "vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import VideoView from "./components/video.vue";
|
||||
import { setVideoManagerList } from "@/request/eightwork_videomanager.js";
|
||||
|
||||
|
|
@ -126,6 +136,7 @@ const fnDeleteVideo = async (row) => {
|
|||
await setVideoManagerDelete({
|
||||
VIDEOMANAGER_ID: row.VIDEOMANAGER_ID,
|
||||
});
|
||||
await ElMessage.success("操作成功");
|
||||
fnResetPagination();
|
||||
}
|
||||
};
|
||||
|
|
@ -138,6 +149,19 @@ const fnAddOrEdit = async (VIDEOMANAGER_ID, type) => {
|
|||
data.addDialog.form = resData.pd;
|
||||
}
|
||||
};
|
||||
const fnUpToBi = async (VIDEOMANAGER_ID) => {
|
||||
await ElMessageBox.confirm("确定要置顶吗？置顶后将会默认展示在Bi页", {
|
||||
type: "warning",
|
||||
});
|
||||
await setUpToBi({
|
||||
VIDEOMANAGER_ID,
|
||||
});
|
||||
ElMessage({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
});
|
||||
fnResetPagination();
|
||||
};
|
||||
const fnPreviewVideo = (VIDEOURL) => {
|
||||
data.videoDialog.visible = true;
|
||||
data.videoDialog.src = VIDEOURL;
|
||||
|
|
|
|||
Loading…
Reference in New Issue