This commit is contained in:
X_Rian 2024-05-29 10:51:30 +08:00
parent c1738a8b33
commit 08134f2f82
4 changed files with 257 additions and 239 deletions

View File

@ -24,8 +24,8 @@ export const staticRouter: RouteRecordRaw[] = [
{ {
path: "/large", path: "/large",
name: "大屏", name: "大屏",
component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版 // component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏 component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页) // component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
children: [ children: [
{ {

View File

@ -4,15 +4,23 @@
<!-- v-show="topDangerList.length > 0" --> <!-- v-show="topDangerList.length > 0" -->
<div class="top-statistics" v-show="topDangerList.length > 0"> <div class="top-statistics" v-show="topDangerList.length > 0">
<el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar"> <el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar">
<div class="statistics-item" :style="{background: `url(${bgImgSet(index)}) no-repeat`,backgroundSize: '100% 100%'}" v-for="(item,index) in topDangerList" :key="index"> <div
<span class="title">{{item.alarmTypeName}}</span> class="statistics-item"
:style="{
background: `url(${bgImgSet(index)}) no-repeat`,
backgroundSize: '100% 100%'
}"
v-for="(item, index) in topDangerList"
:key="index"
>
<span class="title">{{ item.alarmTypeName }}</span>
<span class="statistics-item-content">今日报警次数{{ item.alarmNumToday }}</span> <span class="statistics-item-content">今日报警次数{{ item.alarmNumToday }}</span>
<span class="statistics-item-content">本月报警次数{{ item.alarmNumMonth }}</span> <span class="statistics-item-content">本月报警次数{{ item.alarmNumMonth }}</span>
<span class="statistics-item-content">历史报警次数{{ item.alarmNum }}</span> <span class="statistics-item-content">历史报警次数{{ item.alarmNum }}</span>
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
<div style="position: relative; height: 180px;" v-if="topDangerList.length == 0"> <div style="position: relative; height: 180px" v-if="topDangerList.length == 0">
<div class="notoDta"> <div class="notoDta">
<img src="@/assets/images/noData.png" alt="" /> <img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p> <p>暂无数据</p>
@ -30,7 +38,7 @@
</div> </div>
<el-scrollbar class="listBox" ref="refScrollbar"> <el-scrollbar class="listBox" ref="refScrollbar">
<div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id"> <div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
<div>{{index + 1}}</div> <div>{{ index + 1 }}</div>
<div class="list-img"> <div class="list-img">
<el-image <el-image
fit="contain" fit="contain"
@ -44,11 +52,11 @@
</el-image> </el-image>
<!-- <img :src="item.fieldAcquisitionUrl" alt="" srcset=""> --> <!-- <img :src="item.fieldAcquisitionUrl" alt="" srcset=""> -->
</div> </div>
<div>{{item.hardwareName}}</div> <div>{{ item.hardwareName }}</div>
<div>{{ item.alarmTypeName }}</div> <div>{{ item.alarmTypeName }}</div>
<!-- <div>{{item.alarmType == 1?'烟感报警':item.alarmType == 2?'明火报警':item.alarmType == 3?'人员到底报警':item.alarmType == 4?'未带安全帽报警':item.alarmType == 5?'区域入侵报警':item.alarmType == 6?'越界入侵报警':'人员聚集报警'}}</div> --> <!-- <div>{{item.alarmType == 1?'烟感报警':item.alarmType == 2?'明火报警':item.alarmType == 3?'人员到底报警':item.alarmType == 4?'未带安全帽报警':item.alarmType == 5?'区域入侵报警':item.alarmType == 6?'越界入侵报警':'人员聚集报警'}}</div> -->
<div>{{item.createTime}}</div> <div>{{ item.createTime }}</div>
<div style="color: #1FADC5;" @click="openDetailDialog(item)">查看详情</div> <div style="color: #1fadc5" @click="openDetailDialog(item)">查看详情</div>
</div> </div>
<div class="notoDta" v-if="partyMemberList.length == 0"> <div class="notoDta" v-if="partyMemberList.length == 0">
<img src="@/assets/images/noData.png" alt="" /> <img src="@/assets/images/noData.png" alt="" />
@ -65,7 +73,9 @@
<div class="detail-text"> <div class="detail-text">
<div class="text-box"> <div class="text-box">
<div class="type">告警类型</div> <div class="type">告警类型</div>
<div class="text">{{ detailData.alarmType ? getWarnName(detailData.alarmType) : "" }}</div> <div class="text">
{{ detailData.alarmType ? getWarnName(detailData.alarmType) : "" }}
</div>
</div> </div>
<div class="text-box" style="margin-top: 5%"> <div class="text-box" style="margin-top: 5%">
<div class="type">设备名称</div> <div class="type">设备名称</div>
@ -89,10 +99,10 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, computed } from "vue"; import { ref, onMounted } from "vue";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
import { getCompanyDataList, getMemberInfoList } from "@/api/modules/labor"; import { getCompanyDataList } from "@/api/modules/labor";
import type { TabsPaneContext } from 'element-plus' // import type { TabsPaneContext } from "element-plus";
import { getAlarmTypeOption } from "@/api/modules/aIEarlyWarn"; import { getAlarmTypeOption } from "@/api/modules/aIEarlyWarn";
import noDataImage from "@/assets/images/vehicleManagement/car.png"; import noDataImage from "@/assets/images/vehicleManagement/car.png";
import { getAlarmRecordApi, getAlarmTypeCountPageApi } from "@/api/modules/agjtCommandApi"; import { getAlarmRecordApi, getAlarmTypeCountPageApi } from "@/api/modules/agjtCommandApi";
@ -104,17 +114,18 @@ import bgImg5 from "@/assets/images/commandScreen/bg5.png";
import bgImg6 from "@/assets/images/commandScreen/bg6.png"; import bgImg6 from "@/assets/images/commandScreen/bg6.png";
import bgImg7 from "@/assets/images/commandScreen/bg7.png"; import bgImg7 from "@/assets/images/commandScreen/bg7.png";
import bgImg8 from "@/assets/images/commandScreen/bg8.png"; import bgImg8 from "@/assets/images/commandScreen/bg8.png";
const bgImgList = ref([bgImg1,bgImg2,bgImg3,bgImg4,bgImg5,bgImg6,bgImg7,bgImg8]) const bgImgList = ref([bgImg1, bgImg2, bgImg3, bgImg4, bgImg5, bgImg6, bgImg7, bgImg8]);
const store = GlobalStore(); const store = GlobalStore();
// eslint-disable-next-line vue/require-prop-types, @typescript-eslint/no-unused-vars
const props = defineProps(["tip"]); const props = defineProps(["tip"]);
const BASEURL = import.meta.env.VITE_API_URL; const BASEURL = import.meta.env.VITE_API_URL;
let showDialog = ref(false as any); let showDialog = ref(false as any);
const enterpriseListData = ref([] as any); const enterpriseListData = ref([] as any);
const topDangerList = ref([] as any) const topDangerList = ref([] as any);
let pageNo = ref(1 as any); let pageNo = ref(1 as any);
const alarmPageInfo = ref({ const alarmPageInfo = ref({
pageNo: 1 pageNo: 1
}) });
let moreAlarmScroll = ref(true as any); let moreAlarmScroll = ref(true as any);
const refAlarmScrollbar = ref(null as any); // const refAlarmScrollbar = ref(null as any); //
let moreScroll = ref(true as any); let moreScroll = ref(true as any);
@ -123,20 +134,20 @@ const detailData = ref({} as any);
const partyMemberList = ref({} as any); const partyMemberList = ref({} as any);
let aiAlarmTypeEnum = ref([] as any); let aiAlarmTypeEnum = ref([] as any);
// //
const bgImgSet = (index:any) => { const bgImgSet = (index: any) => {
return bgImgList.value[index % bgImgList.value.length] return bgImgList.value[index % bgImgList.value.length];
} };
// //
const getQualityStatisticsNumDataFn = async (tip: any) => { const getQualityStatisticsNumDataFn = async (tip: any) => {
let requestData:any = { let requestData: any = {
sn: store.sn, sn: store.sn,
type: 1, type: 1,
pageNo: tip == 'search'?1:alarmPageInfo.value.pageNo, pageNo: tip == "search" ? 1 : alarmPageInfo.value.pageNo,
pageSize: 100, pageSize: 100
} };
const res: any = await getAlarmTypeCountPageApi(requestData); const res: any = await getAlarmTypeCountPageApi(requestData);
console.log("获取人员信息列表", res); console.log("获取人员信息列表", res);
if(tip == 'more'){ if (tip == "more") {
topDangerList.value = topDangerList.value.concat(res.result.alarmPage.records); topDangerList.value = topDangerList.value.concat(res.result.alarmPage.records);
} else { } else {
topDangerList.value = res.result.alarmPage.records; topDangerList.value = res.result.alarmPage.records;
@ -149,7 +160,7 @@ const getQualityStatisticsNumDataFn = async (tip: any) => {
}; };
// //
const getWarnTypeOption = async () => { const getWarnTypeOption = async () => {
const res: any = await getAlarmTypeOption({ projectSn: store.sn, }); const res: any = await getAlarmTypeOption({ projectSn: store.sn });
// console.log("", res.result); // console.log("", res.result);
let warnType = res.result.map((item: any) => { let warnType = res.result.map((item: any) => {
return { return {
@ -195,16 +206,16 @@ const getCompanyList = async () => {
} }
}; };
// //
const getMemberCountList = async (tip:any) => { const getMemberCountList = async (tip: any) => {
let requestData:any = { let requestData: any = {
projectSn: store.sn, projectSn: store.sn,
pageNo: tip == 'search'?1:pageNo.value, pageNo: tip == "search" ? 1 : pageNo.value,
pageSize: 100, pageSize: 100,
isPushed: 1, isPushed: 1
} };
const res: any = await getAlarmRecordApi(requestData); const res: any = await getAlarmRecordApi(requestData);
console.log("获取人员信息列表", res); console.log("获取人员信息列表", res);
if(tip == 'more'){ if (tip == "more") {
partyMemberList.value = partyMemberList.value.concat(res.result.records); partyMemberList.value = partyMemberList.value.concat(res.result.records);
} else { } else {
partyMemberList.value = res.result.records; partyMemberList.value = res.result.records;
@ -222,8 +233,8 @@ const getMemberCountList = async (tip:any) => {
onMounted(async () => { onMounted(async () => {
await getCompanyList(); await getCompanyList();
await getMemberCountList('search'); await getMemberCountList("search");
await getQualityStatisticsNumDataFn('search'); await getQualityStatisticsNumDataFn("search");
getWarnTypeOption(); getWarnTypeOption();
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => { refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
// console.log("", e); // console.log("", e);
@ -372,48 +383,51 @@ onMounted(async () => {
// background: url("@/assets/images/cardImg.png") no-repeat; // background: url("@/assets/images/cardImg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 20px 15px; padding: 20px 15px;
.top-statistics{ .top-statistics {
width: 90%; width: 90%;
height: 35%; height: 35%;
color: white; color: white;
margin: 0 auto; margin: 0 auto;
.statistics-listBox{ .statistics-listBox {
height: 100%; height: 100%;
:deep(){ :deep() {
.el-scrollbar__view{ .el-scrollbar__view {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-gap: 20px; grid-gap: 20px;
} }
} }
} }
.statistics-item{ .statistics-item {
width: 200px; width: 200px;
// height: 95px; // height: 95px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
background-size: 100% 100%; background-size: 100% 100%;
.title{ .title {
position: absolute; position: absolute;
top: 4%; top: 4%;
left: 4%; left: 4%;
} }
&-content{ &-content {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: auto; height: auto;
text-indent: 1.5em; text-indent: 1.5em;
} }
&-content:nth-child(2){ &-content:nth-child(2) {
margin-top: 15%; margin-top: 15%;
} }
&-content:nth-child(3){ &-content:nth-child(3) {
margin-top: 2%; margin-top: 2%;
} }
&-content:nth-child(4){ &-content:nth-child(4) {
margin-top: 2%; margin-top: 2%;
} }
&-content:last-child {
margin-bottom: 4%;
}
// &-content:nth-child(3){ // &-content:nth-child(3){
// margin-top: 8%; // margin-top: 8%;
// } // }
@ -465,7 +479,7 @@ onMounted(async () => {
} }
} }
} }
.table-one{ .table-one {
height: 50%; height: 50%;
.tabList { .tabList {
display: flex; display: flex;
@ -506,7 +520,7 @@ onMounted(async () => {
height: 100%; height: 100%;
} }
} }
.el-no-img{ .el-no-img {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
@ -523,12 +537,12 @@ onMounted(async () => {
} }
} }
} }
:deep(){ :deep() {
.el-tabs__item{ .el-tabs__item {
color: white; color: white;
} }
.el-tabs__item.is-active{ .el-tabs__item.is-active {
color: var(--el-color-primary) color: var(--el-color-primary);
} }
} }
} }

View File

@ -67,7 +67,7 @@ let agjtCommandList = ref([
{ {
moduleName: "指挥部大屏", moduleName: "指挥部大屏",
modulePath: "/commandScreen" modulePath: "/commandScreen"
}, }
]); ]);
const itemList = ref([]); const itemList = ref([]);

View File

@ -1,6 +1,5 @@
<template> <template>
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false"> <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
<div class="loginBigImg"> <div class="loginBigImg">
<div class="loginTitle"> <div class="loginTitle">
<div>数字化项目监管平台</div> <div>数字化项目监管平台</div>
@ -8,7 +7,13 @@
</div> </div>
<div class="loginFrom"> <div class="loginFrom">
<div class="inutFrom"> <div class="inutFrom">
<el-form ref="loginFormRef" class="form" :model="loginForm" :rules="loginRules" size="large"> <el-form
ref="loginFormRef"
class="form"
:model="loginForm"
:rules="loginRules"
size="large"
>
<el-form-item prop="account" style="margin-bottom: 10%"> <el-form-item prop="account" style="margin-bottom: 10%">
<el-input v-model="loginForm.account" placeholder="请输入账号"> <el-input v-model="loginForm.account" placeholder="请输入账号">
<template #prefix> <template #prefix>
@ -35,13 +40,14 @@
</div> --> </div> -->
</el-form> </el-form>
<div style="height: 45%"> <div style="height: 45%">
<el-button class="loginBtn" @click="login(loginFormRef)" :loading="loading">登录</el-button> <el-button class="loginBtn" @click="login(loginFormRef)" :loading="loading"
>登录</el-button
>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</ScaleBox> </ScaleBox>
</template> </template>
<script setup lang="ts" name="logonPage"> <script setup lang="ts" name="logonPage">
@ -73,7 +79,7 @@ type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>(); const loginFormRef = ref<FormInstance>();
const loginRules = reactive({ const loginRules = reactive({
account: [{ required: true, message: "请输入账号", trigger: "blur" }], account: [{ required: true, message: "请输入账号", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }] password: [{ required: true, message: "请输入密码", trigger: "blur" }],
}); });
const loading = ref(false); const loading = ref(false);
@ -104,10 +110,10 @@ const login = (formEl: FormInstance | undefined) => {
if (COMPANY === "agjtCommand") { if (COMPANY === "agjtCommand") {
// menuList.value = AGJTCommandMenu; // menuList.value = AGJTCommandMenu;
if(![5,10].includes(result.accountType)){ if (![5, 10].includes(result.accountType)) {
ElMessage({ ElMessage({
message: "账号类型不匹配", message: "账号类型不匹配",
type: "warning" type: "warning",
}); });
return; return;
} }
@ -138,8 +144,6 @@ const resetForm = (formEl: FormInstance | undefined) => {
}; };
onMounted(async () => { onMounted(async () => {
// enter // enter
document.onkeydown = (e: any) => { document.onkeydown = (e: any) => {
e = window.event || e; e = window.event || e;
@ -201,7 +205,7 @@ onBeforeUnmount(() => {
.passwordBox { .passwordBox {
font-family: SourceHanSansCN-Regular; font-family: SourceHanSansCN-Regular;
color: #fff; color: #fff;
font-size:14px; font-size: 14px;
margin-top: -4%; margin-top: -4%;
} }
} }