327 lines
9.5 KiB
Vue
327 lines
9.5 KiB
Vue
<template>
|
|
<div class="projectContent">
|
|
<div class="left">
|
|
<leftTop class="leftTop"></leftTop>
|
|
<leftBottom class="leftBottom" @openDialog="openPeopleCountDialog"></leftBottom>
|
|
</div>
|
|
<div class="center">
|
|
<centerTop class="centerTop" @openDialog="openPeopleCountDialog"></centerTop>
|
|
<centerBottom class="centerBottom" @openDialog="openPeopleCountDialog"></centerBottom>
|
|
</div>
|
|
<div class="right">
|
|
<rightAll class="rightAll" @openDialog="openPeopleCountDialog"></rightAll>
|
|
</div>
|
|
<dataDialog ref="partyBuildRef"></dataDialog>
|
|
<div :class="{'contentsBox':true,'openDialog': show,'hiddenDialog': !show}">
|
|
<div class="topBox">
|
|
<div class="expand">
|
|
</div>
|
|
<div class="retract">
|
|
<el-icon color="#fff" size="26" v-show="show" @click="retract"><DArrowLeft /></el-icon>
|
|
</div>
|
|
</div>
|
|
<div class="bottomBox" v-if="show">
|
|
<div v-for="(item,i) in backendUrls" :key="i">
|
|
<div class="listItem" @click="goBackend(item)">
|
|
<div class="itemIcon" :style="{'background':item.color !== '#dc3c00' ? item.color: 'rgba(0,0,0,0)'}">
|
|
<el-icon :color="item.color == '#dc3c00' ? '#dc3c00' : '#fff'" size="32"><StarFilled /></el-icon>
|
|
</div>
|
|
<span class="itemText">{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="expandBtn" v-if="!show" @click="expand">
|
|
<el-icon color="#fff" size="26" v-show="!show" @click="expand"><DArrowRight /></el-icon>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import leftTop from "@/views/commandScreen/commandCenter/leftTop.vue";
|
|
import leftBottom from "@/views/commandScreen/commandCenter/leftBottom.vue";
|
|
import centerTop from "@/views/commandScreen/commandCenter/centerTop.vue";
|
|
import centerBottom from "@/views/commandScreen/commandCenter/centerBottom.vue";
|
|
import rightAll from "@/views/commandScreen/commandCenter/rightAll.vue";
|
|
import { GlobalStore } from "@/stores";
|
|
import dataDialog from "../dialogCompnnents/data-dialog.vue";
|
|
import * as mqtt from "mqtt/dist/mqtt.min";
|
|
const BASEURL = import.meta.env.VITE_API_URL
|
|
|
|
// import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview";
|
|
import { ref, onMounted } from "vue";
|
|
const store = GlobalStore();
|
|
// const statisticsCount = ref(null as any);
|
|
|
|
// const projectData = ref(null as any);
|
|
// 弹窗
|
|
const partyBuildRef = ref();
|
|
const openPeopleCountDialog = (index: any) => {
|
|
partyBuildRef.value.openDialog(index);
|
|
};
|
|
const options = {
|
|
connectTimeout: 40000,
|
|
clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
|
|
username: "root",
|
|
password: "123456",
|
|
clean: true
|
|
};
|
|
// 监听mqtt下发信息然后刷新列表
|
|
const mqttMSG = () => {
|
|
// this.userId = this.$store.state.userInfo.userId;
|
|
// this.topicName = this.$store.state.userInfo.scope;
|
|
const client = mqtt.connect("ws://jxj.zhgdyun.com:8083/mqtt", options);
|
|
// mqtt连接 +"/#" +workerId
|
|
client.on("connect", () => {
|
|
// this.topicName + this.userId
|
|
client.subscribe("zjsjTopic" + store.userId + "/bigScreen/emergency/alert", { qos: 0 }, (error: any) => {
|
|
if (!error) {
|
|
} else {
|
|
}
|
|
});
|
|
});
|
|
// 接收消息处理
|
|
client.on("message", (topic: any, message: any) => {
|
|
const result = JSON.parse(message);
|
|
openPeopleCountDialog({
|
|
index: 10,
|
|
title: "人员呼叫",
|
|
timeOut: 60,
|
|
timeFlag: null,
|
|
show: true,
|
|
mapsDetail: JSON.parse(result.payload)
|
|
});
|
|
});
|
|
// 断开发起重连
|
|
// client.on("reconnect", (error) => {
|
|
// });
|
|
// 链接异常处理
|
|
client.on("error", (error: any) => {
|
|
});
|
|
};
|
|
const backendUrls = ref([
|
|
{id:1, name:'项目概况', url:'', color:'#dc3c00'},
|
|
{id:2, name:'工作台', url:'/workSpace', color:'#00aff0'},{id:3, name:'项目基本信息管理', url:'/project/summary/baseInfo', color:'#00aff0'},
|
|
{id:4, name:'区域管理', url:'/project/quality/business', color:'#00aff0'},{id:5, name:'进度管理', url:'/project/progressManagementAg/projectganttChart', color:'#00aff0'},
|
|
|
|
{id:6, name:'安全准入', url:'', color:'#dc3c00'},
|
|
{id:7, name:'人员管理', url:'/project/labor/personManage', color:'#0078d7'},{id:8, name:'车辆管理', url:'/project/carManage/realTimeData', color:'#0078d7'},
|
|
{id:9, name:'访客管理', url:'/project/labor/visitRecord', color:'#0078d7'},{id:10, name:'材料入场管理', url:'/project/materialManage/materialEntryManage', color:'#0078d7'},
|
|
{id:11, name:'材料出场管理', url:'/project/materialManage/materialExitManage', color:'#0078d7'},
|
|
|
|
{id:12, name:'安全管理', url:'', color:'#dc3c00'},
|
|
{id:13, name:'安全隐患检查', url:'/project/safetyEducation/safetyAnalysis', color:'#113768'},{id:14, name:'AI预警分析', url:'/project/aiAnalysis/dealPushManage', color:'#113768'},
|
|
{id:15, name:'AI训练模型', url:'/project/videoOverview', color:'#113768'},{id:16, name:'综合考试培训', url:'/project/examSystem2/subjectManagement', color:'#113768'},
|
|
{id:17, name:'质量管理', url:'/project/quality/qualityAnalysis', color:'#113768'},{id:18, name:'特殊作业', url:'/project/specialWork/fireWork', color:'#113768'},
|
|
{id:19, name:'智能巡检', url:'/project/inspecPoint/inspection', color:'#113768'},
|
|
] as any)
|
|
function goBackend(item: any){
|
|
if(item.url != ''){
|
|
// window.location.replace('http://localhost:8080/#/login?command=1&pathItem='+ item.url +'&token=' + store.token);
|
|
console.log(BASEURL)
|
|
window.open(BASEURL + '/#/login?command=1&pathItem='+ item.url +'&token=' + store.token, '_blank');
|
|
// window.open('http://10.0.1.77:8080' + '/#/login?command=1&pathItem='+ item.url +'&token=' + store.token, '_blank');
|
|
}
|
|
}
|
|
const show = ref(false as any)
|
|
function retract(){
|
|
show.value = false
|
|
}
|
|
function expand(){
|
|
show.value = true
|
|
}
|
|
|
|
onMounted(() => {
|
|
mqttMSG();
|
|
// setTimeout(() => {
|
|
// openPeopleCountDialog({
|
|
// index: 10,
|
|
// title: "人员呼叫",
|
|
// timeOut: 10,
|
|
// timeFlag: null,
|
|
// show: true,
|
|
// mapsDetail: {
|
|
// alarmPersonId: "1795271026055901186",
|
|
// alarmPersonName: "测试0528",
|
|
// alarmTime: "2024-06-03 19:19:23",
|
|
// departmentName: null,
|
|
// disposalReport: null,
|
|
// dispositionStatus: 1,
|
|
// emergencyDetail: null,
|
|
// emergencyTypeId: "-1",
|
|
// emergencyTypeName: "一键报警",
|
|
// enterpriseId: "1786223302337675266",
|
|
// enterpriseName: "测试企业1",
|
|
// id: "1797588887538925569",
|
|
// incidentClosedStatus: 1,
|
|
// incidentSite: "广东省深圳市宝安区福海路福永意库",
|
|
// latitude: 22.67405,
|
|
// livePicture: null,
|
|
// liveVideoSituation: null,
|
|
// longitude: 113.80984,
|
|
// projectSn: "BD3137498CB84BF0969979E0342CDBCA",
|
|
// situations: null,
|
|
// teamName: "司机-1",
|
|
// updateDate: "2024-06-03 19:19:30"
|
|
// }
|
|
// });
|
|
// }, 3000);
|
|
// setTimeout(() => {
|
|
// openPeopleCountDialog({
|
|
// index: 10,
|
|
// title: "查看1",
|
|
// timeOut: 10,
|
|
// timeFlag: null,
|
|
// show: true,
|
|
// mapsDetail: {
|
|
// alarmPersonId: "1795271026055901186",
|
|
// alarmPersonName: "测试0528",
|
|
// alarmTime: "2024-06-03 19:19:23",
|
|
// departmentName: null,
|
|
// disposalReport: null,
|
|
// dispositionStatus: 1,
|
|
// emergencyDetail: null,
|
|
// emergencyTypeId: "-1",
|
|
// emergencyTypeName: "一键报警",
|
|
// enterpriseId: "1786223302337675266",
|
|
// enterpriseName: "测试企业1",
|
|
// id: "1797588887538925568",
|
|
// incidentClosedStatus: 1,
|
|
// incidentSite: "广东省深圳市宝安区福海路福永意库",
|
|
// latitude: 22.67405,
|
|
// livePicture: null,
|
|
// liveVideoSituation: null,
|
|
// longitude: 113.80984,
|
|
// projectSn: "BD3137498CB84BF0969979E0342CDBCA",
|
|
// situations: null,
|
|
// teamName: "司机-1",
|
|
// updateDate: "2024-06-03 19:19:30"
|
|
// }
|
|
// });
|
|
// }, 6000);
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.projectContent {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
.left {
|
|
height: 109.5%;
|
|
width: 26%;
|
|
transform: translateY(-70px);
|
|
|
|
.leftTop {
|
|
height: 24.5%;
|
|
}
|
|
|
|
.leftBottom {
|
|
height: 75.5%;
|
|
margin: 3% 0 3% 0;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
width: 46%;
|
|
margin: 0 1%;
|
|
|
|
.centerTop {
|
|
height: 53.8%;
|
|
// margin-bottom: 3%;
|
|
}
|
|
|
|
.centerBottom {
|
|
height: 46.85%;
|
|
margin: 1% 0 0 0;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 26%;
|
|
height: 109.2%;
|
|
transform: translateY(-70px);
|
|
// .rightAll {
|
|
// height: 32%;
|
|
// }
|
|
// .rightCenter {
|
|
// height: 33%;
|
|
// margin: 3% 0 3% 0;
|
|
// }
|
|
// .rightBottom {
|
|
// height: 32%;
|
|
// }
|
|
}
|
|
|
|
.contentsBox{
|
|
position: fixed;
|
|
top: 1px;
|
|
left: 0px;
|
|
width: 15.3%;
|
|
height: 100%;
|
|
// padding-top: 10px;
|
|
// transition: left 0.5s; /* 添加过渡效果 */
|
|
.topBox{
|
|
height: 3.7%;
|
|
width: 100%;
|
|
background-color: rgba($color: #000000, $alpha: 0);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.retract{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.bottomBox{
|
|
height: 96.3%;
|
|
width: 93%;
|
|
background: #0a1334;
|
|
.listItem{
|
|
color: #fff;
|
|
height: 40px;
|
|
// background-color: darkred;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
.itemIcon{
|
|
margin-left: 10px;
|
|
width: 60px;
|
|
height: 35px;
|
|
// background-color: darkblue;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.itemText{
|
|
margin-left: 10px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.hiddenDialog{
|
|
left: -1000px;
|
|
}
|
|
.openDialog{
|
|
left: 0;
|
|
}
|
|
.expandBtn{
|
|
cursor: pointer;
|
|
color: #fff;
|
|
position: fixed;
|
|
width: auto;
|
|
height: 3.7%;
|
|
top:0;
|
|
left: 0;
|
|
// background-color: #061f51;
|
|
background-color: rgba($color: #000000, $alpha: 0);
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
// margin-bottom: 5px;
|
|
// margin-left: 10px;
|
|
}
|
|
}
|
|
</style>
|