365 lines
11 KiB
Vue
365 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<div class="entire-box">
|
|||
|
|
<layoutTop></layoutTop>
|
|||
|
|
<div class="operate-box">
|
|||
|
|
<div class="alarm-data">
|
|||
|
|
<LeftMenu
|
|||
|
|
v-model="alarmActive"
|
|||
|
|
:tabs="['项目名称', '工程名称']"
|
|||
|
|
:records="records"
|
|||
|
|
:pageable="alarmPages"
|
|||
|
|
class="LeftMenu"
|
|||
|
|
@search="onSearchInput"
|
|||
|
|
@change-page="onCurChange"
|
|||
|
|
>
|
|||
|
|
<template #default="{ data }">
|
|||
|
|
<div class="leftProject" @click="onSearch(data)">
|
|||
|
|
<span class="projectName">{{ data.projectName || data.engineeringName }}</span>
|
|||
|
|
<div class="leftMenu_item flx-justify-between">
|
|||
|
|
<div class="flx-justify-between">
|
|||
|
|
<img src="@/assets/images/AIwaring/视频.png" alt="" />
|
|||
|
|
<span class="middleSize">接入视频路数：{{ data.deviceNum }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<img src="@/assets/images/AIwaring/报警.png" alt="" />
|
|||
|
|
<span class="middleSize"
|
|||
|
|
>今日报警次数：{{ data.aiAlarmStat === null ? 0 : parse(data.aiAlarmStat)?.todayAlarm }}</span
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="bottom_item flx-justify-between" style="margin-top: 6px">
|
|||
|
|
<div>
|
|||
|
|
<span class="bottomSize"
|
|||
|
|
>今日待整改问题：{{ data.aiAlarmStat === null ? 0 : parse(data.aiAlarmStat)?.questionNum }}</span
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span class="bottomSize"
|
|||
|
|
>今日已整改问题：{{ data.aiAlarmStat === null ? 0 : parse(data.aiAlarmStat)?.solveQuestionNum }}</span
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</LeftMenu>
|
|||
|
|
</div>
|
|||
|
|
<div class="monitor-data">
|
|||
|
|
<div class="monitor-title">
|
|||
|
|
<span>十字门小学</span>
|
|||
|
|
<span>在线</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="monitor-content">
|
|||
|
|
<div class="monitor-tool">
|
|||
|
|
<img src="@/assets/images/onlineSupervision/towerImg.png" alt="" />
|
|||
|
|
<span class="property-one">尾臂长: 1.4m</span>
|
|||
|
|
<span class="property-two">臂长: 5m</span>
|
|||
|
|
<span class="property-three">塔身高: 7m</span>
|
|||
|
|
<div class="other-info">
|
|||
|
|
<span>备案编号: TD2374693</span>
|
|||
|
|
<span>安装日期: 2022-12-01</span>
|
|||
|
|
<span>终端编号: TD2374693</span>
|
|||
|
|
<span>更新时间: 2023-05-23</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="monitor-aspect">
|
|||
|
|
<div class="monitor-aspect-item" v-for="(item, index) in aspectList" :key="index">
|
|||
|
|
<div>
|
|||
|
|
<span>{{ item.name }}</span>
|
|||
|
|
<img :src="item.img" alt="" srcset="" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span>{{ item.value }}</span>
|
|||
|
|
<span>{{ item.unit }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="monitor-equip">
|
|||
|
|
<div class="monitor-state">
|
|||
|
|
<div>
|
|||
|
|
<img src="@/assets/images/login_left.png" alt="" />
|
|||
|
|
<span>在线</span>
|
|||
|
|
</div>
|
|||
|
|
<span>1号塔吊</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="history-data">
|
|||
|
|
<LeftMenuPlus
|
|||
|
|
v-model="active"
|
|||
|
|
:tabs="['历史报警', '历史监测信息']"
|
|||
|
|
:pageable="pages"
|
|||
|
|
class="LeftMenu"
|
|||
|
|
@change-page="onCurChange"
|
|||
|
|
>
|
|||
|
|
<template #default>
|
|||
|
|
<div class="search-wrapper">
|
|||
|
|
<el-date-picker
|
|||
|
|
style="margin-right: 5px"
|
|||
|
|
v-model="searchForm.timeRange"
|
|||
|
|
type="daterange"
|
|||
|
|
range-separator="至"
|
|||
|
|
start-placeholder="开始日期"
|
|||
|
|
end-placeholder="结束日期"
|
|||
|
|
/>
|
|||
|
|
<el-button class="search-btn" type="primary" @click="search">查询</el-button>
|
|||
|
|
</div>
|
|||
|
|
<div class="alarm-list" v-if="active == 0">
|
|||
|
|
<div class="alarm-list-item">
|
|||
|
|
<div>
|
|||
|
|
<span>设备名称: </span>
|
|||
|
|
<span>2号塔吊</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span>终端编号: </span>
|
|||
|
|
<span style="color: #0f64da">DEYE20071702</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span>报警项目: </span>
|
|||
|
|
<span>幅度限位报警</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span>报警时间: </span>
|
|||
|
|
<span>2022-12-23</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-list" v-if="active == 1">
|
|||
|
|
<div class="info-list-item">
|
|||
|
|
<div>2号塔吊</div>
|
|||
|
|
<div class="info-list-item-aspect">
|
|||
|
|
<div class="info-list-item-aspect-item">
|
|||
|
|
<span>角度</span>
|
|||
|
|
<span>190.0°</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-list-item-aspect-item">
|
|||
|
|
<span>倾角</span>
|
|||
|
|
<span>120.0°</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-list-item-aspect">
|
|||
|
|
<div class="info-list-item-aspect-item">
|
|||
|
|
<span>高度</span>
|
|||
|
|
<span>96.35m</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-list-item-aspect-item">
|
|||
|
|
<span>倾角X</span>
|
|||
|
|
<span>120.0°</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-list-item-aspect">
|
|||
|
|
<div class="info-list-item-aspect-item">
|
|||
|
|
<span>载重比</span>
|
|||
|
|
<span>1.57%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-list-item-aspect-item">
|
|||
|
|
<span>倾角Y</span>
|
|||
|
|
<span>120.0°</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-list-item-aspect">
|
|||
|
|
<div class="info-list-item-aspect-item">
|
|||
|
|
<span>载重</span>
|
|||
|
|
<span>70.0kg</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-list-item-aspect-item">
|
|||
|
|
<span>幅度</span>
|
|||
|
|
<span>51.67m</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>监测时间: 2023-05-23</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</LeftMenuPlus>
|
|||
|
|
</div>
|
|||
|
|
<!-- 侧边栏选择 -->
|
|||
|
|
<engineeringEngDrawer v-model="engVisable" :active="activeValue" ref="engDrawer" :engList="engList" @select="tabsSelect">
|
|||
|
|
<template #default="{ data }">
|
|||
|
|
<span style="margin-left: 10px" @click="onUpdate(data)">{{
|
|||
|
|
activeValue == "eng" ? data.engineeringName : data.projectName
|
|||
|
|
}}</span>
|
|||
|
|
</template>
|
|||
|
|
</engineeringEngDrawer>
|
|||
|
|
<allEngineering @click="engVisable = true" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="tsx" name="ProjectSupervisionRecord">
|
|||
|
|
import { ref, onMounted, watch } from "vue";
|
|||
|
|
import { ElMessage } from "element-plus";
|
|||
|
|
import { getRelevanceList } from "@/api/modules/common";
|
|||
|
|
import engineeringEngDrawer from "@/components/engineeringEngDrawer/index.vue";
|
|||
|
|
import allEngineering from "@/components/allEngineering/index.vue";
|
|||
|
|
import { getEngineeringName } from "@/api/modules/project";
|
|||
|
|
import LeftMenuPlus from "@/components/LeftMenuPlus/LeftMenu.vue";
|
|||
|
|
import layoutTop from "@/components/layoutTop/index.vue";
|
|||
|
|
import LeftMenu from "@/components/LeftMenu/LeftMenu.vue";
|
|||
|
|
const records = ref([]);
|
|||
|
|
const alarmActive = ref(0);
|
|||
|
|
const searchForm = ref({
|
|||
|
|
timeRange: []
|
|||
|
|
});
|
|||
|
|
const active = ref(0);
|
|||
|
|
const alarmPages = ref({
|
|||
|
|
pageNo: 1,
|
|||
|
|
pageSize: 6,
|
|||
|
|
total: 0
|
|||
|
|
});
|
|||
|
|
const pages = ref({
|
|||
|
|
pageNo: 1,
|
|||
|
|
pageSize: 6,
|
|||
|
|
total: 0
|
|||
|
|
});
|
|||
|
|
const aspectList = ref([
|
|||
|
|
{
|
|||
|
|
name: "力矩",
|
|||
|
|
value: 10,
|
|||
|
|
unit: "N·M",
|
|||
|
|
img: new URL("@/assets/images/onlineSupervision/力矩.png", import.meta.url).href,
|
|||
|
|
prop: "inServiceWorker"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "载重",
|
|||
|
|
value: 10,
|
|||
|
|
unit: "T",
|
|||
|
|
img: new URL("@/assets/images/onlineSupervision/载重.png", import.meta.url).href,
|
|||
|
|
prop: "workerAttendanceTotal"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "风速",
|
|||
|
|
value: 10,
|
|||
|
|
unit: "m/s",
|
|||
|
|
img: new URL("@/assets/images/onlineSupervision/风速.png", import.meta.url).href,
|
|||
|
|
prop: "workerAttendanceTotal"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "高度",
|
|||
|
|
value: 10,
|
|||
|
|
unit: "m",
|
|||
|
|
img: new URL("@/assets/images/onlineSupervision/高度.png", import.meta.url).href,
|
|||
|
|
prop: "workerAttendanceTotal"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "回转角度",
|
|||
|
|
value: 10,
|
|||
|
|
unit: "°",
|
|||
|
|
img: new URL("@/assets/images/onlineSupervision/回转角度.png", import.meta.url).href,
|
|||
|
|
prop: "workerAttendanceTotal"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "塔身倾角",
|
|||
|
|
value: 10,
|
|||
|
|
unit: "°",
|
|||
|
|
img: new URL("@/assets/images/onlineSupervision/塔身倾角.png", import.meta.url).href,
|
|||
|
|
prop: "workerAttendanceTotal"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "幅度",
|
|||
|
|
value: 10,
|
|||
|
|
unit: "m",
|
|||
|
|
img: new URL("@/assets/images/onlineSupervision/幅度.png", import.meta.url).href,
|
|||
|
|
prop: "workerAttendanceTotal"
|
|||
|
|
}
|
|||
|
|
]);
|
|||
|
|
const activeValue = ref("eng");
|
|||
|
|
const engList = ref([]);
|
|||
|
|
const engVisable = ref(false);
|
|||
|
|
const searchSn = ref("");
|
|||
|
|
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
|
|||
|
|
const proTable = ref();
|
|||
|
|
// 还得做一个监听showicon
|
|||
|
|
|
|||
|
|
function parse(val) {
|
|||
|
|
return val.trim() ? JSON.parse(val) : {};
|
|||
|
|
}
|
|||
|
|
// 页面的项目名称和工程名称的div点击事件
|
|||
|
|
const onSearch = async (params: any) => {
|
|||
|
|
// 第一步匹配
|
|||
|
|
// const curr = monitorList.value.find(item =>
|
|||
|
|
// active.value === 0 ? item.projectSn === params.projectSn : item.engineeringSn === params.engineeringSn
|
|||
|
|
// );
|
|||
|
|
// // 匹配到的 去做一个处理 开关啥的
|
|||
|
|
// monitorList.value = monitorList.value.map(item => (item === curr ? { ...curr, showGif: true } : { ...item, showGif: false }));
|
|||
|
|
// params.longitude !== "" && params.longitude !== null
|
|||
|
|
// ? map.value?.setCenter([params.longitude, +params.latitude])
|
|||
|
|
// : map.value?.setCenter([116.481181, 39.90923]);
|
|||
|
|
};
|
|||
|
|
// 页面的搜索按钮
|
|||
|
|
const onSearchInput = async (params: string) => {
|
|||
|
|
// if (active.value === 0) {
|
|||
|
|
// const { result } = await getAIprojectPage({ projectName: params, ...pages.value });
|
|||
|
|
// records.value = result.records;
|
|||
|
|
// } else {
|
|||
|
|
// const { result } = await getAIengineeringPage({ engineeringName: params, ...pages.value });
|
|||
|
|
// records.value = result.records;
|
|||
|
|
// }
|
|||
|
|
};
|
|||
|
|
// 右侧报警数据搜索
|
|||
|
|
const search = () => {
|
|||
|
|
console.log(666);
|
|||
|
|
};
|
|||
|
|
// 页面的分页
|
|||
|
|
const onCurChange = async (params: number) => {
|
|||
|
|
console.log(params);
|
|||
|
|
// if (active.value === 0) {
|
|||
|
|
// pages.value.total = +result.total;
|
|||
|
|
// } else {
|
|||
|
|
// pages.value.total = +result.total;
|
|||
|
|
// }
|
|||
|
|
};
|
|||
|
|
// 抽屉tab选择时
|
|||
|
|
const tabsSelect = val => {
|
|||
|
|
activeValue.value = val;
|
|||
|
|
if (val == "eng") {
|
|||
|
|
getengineering();
|
|||
|
|
} else if (val == "project") {
|
|||
|
|
getProject();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 获取项目信息
|
|||
|
|
const getProject = async () => {
|
|||
|
|
const res = await getEngineeringName();
|
|||
|
|
engList.value = [res.result];
|
|||
|
|
if (res.result) {
|
|||
|
|
searchSn.value = res.result.projectSn;
|
|||
|
|
}
|
|||
|
|
// proTable.value.getTableList();
|
|||
|
|
console.log(res);
|
|||
|
|
};
|
|||
|
|
const getengineering = async () => {
|
|||
|
|
// let newParams = JSON.parse(JSON.stringify(params));
|
|||
|
|
const res = await getRelevanceList();
|
|||
|
|
engList.value = res.result;
|
|||
|
|
if (res.result && res.result.length > 0) {
|
|||
|
|
searchSn.value = res.result[0].engineeringSn;
|
|||
|
|
}
|
|||
|
|
// proTable.value.getTableList();
|
|||
|
|
console.log(res);
|
|||
|
|
};
|
|||
|
|
// 点击抽屉的工程名称更新页面
|
|||
|
|
const onUpdate = async row => {
|
|||
|
|
if (activeValue.value == "eng") {
|
|||
|
|
searchSn.value = row.engineeringSn;
|
|||
|
|
} else if (activeValue.value == "project") {
|
|||
|
|
searchSn.value = row.projectSn;
|
|||
|
|
}
|
|||
|
|
// proTable.value.getTableList();
|
|||
|
|
ElMessage.success("页面已更新");
|
|||
|
|
};
|
|||
|
|
watch(
|
|||
|
|
() => active.value,
|
|||
|
|
() => {
|
|||
|
|
searchForm.value.timeRange = [];
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
onMounted(() => {
|
|||
|
|
getengineering();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
@import "./index.scss";
|
|||
|
|
</style>
|