530 lines
19 KiB
Vue
530 lines
19 KiB
Vue
<template>
|
|
<!-- 设备中台首页 -->
|
|
<div class="fullHeight">
|
|
<vhead :titleName="headerName" :showR="true"></vhead>
|
|
<div class="pageContainer">
|
|
<div class="pageDataContainer">
|
|
<vue-scroll>
|
|
<div class="projectIndexBox">
|
|
<div class="module_title">{{$t('message.homeLayout.existingProducts')}}</div>
|
|
<div class="projectIndex">
|
|
<div
|
|
class="module canclick"
|
|
:class="{hovers:item.operation}"
|
|
v-for="(item,index) in list"
|
|
:key="index"
|
|
@click="itemClick(item)"
|
|
v-if="item.operation&&item.moduleType==2&&item.moduleEquipment==1"
|
|
>
|
|
<img v-if="iconType == 1" :src="require('../../assets/images/menu/'+item.moduleIcon+'.png')" class="icon" />
|
|
<img
|
|
v-if="iconType == 2 && item.bigModuleIcon"
|
|
:src="
|
|
require('../../assets/images/menu/' +
|
|
item.bigModuleIcon +
|
|
'.png')
|
|
"
|
|
style="margin-bottom: 10px"
|
|
class="icon"
|
|
/>
|
|
<div class="title_wrap">
|
|
<div class="head1">{{item.moduleName}}</div>
|
|
<div class="subhead">{{item.moduleDesc}}</div>
|
|
<!-- {{$t('message.projectIndex.moudleName1')}} -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="module_title" v-if="showNotBuyMoudle">{{$t('message.homeLayout.ununlockedProducts')}}</div>
|
|
<div class="projectIndex">
|
|
<div
|
|
class="module"
|
|
:class="{hovers:item.operation}"
|
|
v-for="(item,index) in list"
|
|
:key="index"
|
|
@click="itemClick(item)"
|
|
v-if="!item.operation&&item.moduleType==2&&item.moduleEquipment==1&&showNotBuyMoudle"
|
|
>
|
|
<img v-if="iconType == 1" :src="require('../../assets/images/menu/'+item.moduleIcon2+'.png')" class="icon" />
|
|
<img
|
|
v-if="iconType == 2 && item.bigModuleIcon"
|
|
:src="
|
|
require('../../assets/images/menu/' +
|
|
item.bigModuleIcon +
|
|
'.png')
|
|
"
|
|
style="margin-bottom: 10px;opacity: 0.2;"
|
|
class="icon"
|
|
/>
|
|
<div class="title_wrap grey">
|
|
<div class="head1">{{item.moduleName}}</div>
|
|
<div class="subhead">{{item.moduleDesc}}</div>
|
|
<!-- {{$t('message.projectIndex.moudleName1')}} -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import vhead from "@/components/header";
|
|
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
|
|
import { getProjectModuleList,getAllModuleApi, getNewUserAllModulePageApi } from "@/assets/js/api/jxjadmin.js";
|
|
export default {
|
|
name: "projectIndex",
|
|
components: { vhead },
|
|
data() {
|
|
return {
|
|
headerName:this.$t('message.homeLayout.devPageTitle'),
|
|
list: [
|
|
{
|
|
moduleName: this.$t('message.middleGround.moduleName1'), // 视频监控
|
|
subhead: this.$t('message.middleGround.subhead1'), // 摄像头新增、编辑、删除，设置厂商
|
|
operation: true,
|
|
id: 3,
|
|
url: "",
|
|
openedUrl: require("../../assets/images/menu/spjk_active.png"),
|
|
shutUrl: require("../../assets/images/menu/spjk.png"),
|
|
children: [
|
|
{
|
|
menuName: this.$t('message.middleGround.moduleName2'), // 摄像机列表
|
|
subhead: this.$t('message.middleGround.subhead2'), // 人员管理
|
|
operation: true,
|
|
id: 21,
|
|
path: "/equipmentCenter/cameraList",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
moduleName: this.$t('message.middleGround.moduleName3'), // 劳务管理
|
|
subhead: this.$t('message.middleGround.subhead3'), // 劳务实名制设备新增、编辑、删除
|
|
operation: true,
|
|
id: 2,
|
|
openedUrl: require("../../assets/images/menu/lwgl_active.png"),
|
|
shutUrl: require("../../assets/images/menu/lwgl.png"),
|
|
children: [
|
|
{
|
|
menuName: this.$t('message.middleGround.moduleName4'), // 设备管理
|
|
subhead: this.$t('message.middleGround.subhead2'), // 人员管理
|
|
operation: true,
|
|
id: 21,
|
|
path: "/equipmentCenter/laborDevManage",
|
|
},
|
|
{
|
|
menuName: "门禁分组", // 门禁分组
|
|
subhead: "门禁分组", // 门禁分组
|
|
operation: true,
|
|
id: 21,
|
|
path: "/equipmentCenter/accessGroup",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
moduleName: this.$t('message.middleGround.moduleName5'), // 标养室管理
|
|
subhead: "",
|
|
operation: true,
|
|
id: 2,
|
|
openedUrl: require("../../assets/images/menu/markRoom_active.png"),
|
|
shutUrl: require("../../assets/images/menu/markRoom.png"),
|
|
children: [
|
|
{
|
|
menuName: this.$t('message.middleGround.moduleName4'), // 设备管理
|
|
subhead: this.$t('message.middleGround.subhead2'), // 人员管理
|
|
operation: true,
|
|
id: 21,
|
|
path: "/equipmentCenter/markingRoomDevManage",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
moduleName: this.$t('message.middleGround.moduleName7'), // 绿色施工
|
|
subhead: this.$t('message.middleGround.subhead7'), // 扬尘设备新增、编辑、删除
|
|
operation: true,
|
|
id: 4,
|
|
openedUrl: require("../../assets/images/menu/lssg_active.png"),
|
|
shutUrl: require("../../assets/images/menu/lssg.png"),
|
|
children: [
|
|
{
|
|
menuName: this.$t('message.middleGround.moduleName8'), // 扬尘设备管理
|
|
subhead: this.$t('message.middleGround.subhead2'), // 人员管理
|
|
operation: true,
|
|
id: 21,
|
|
path: "/equipmentCenter/envirDevManage",
|
|
},{
|
|
menuName: this.$t('message.middleGround.moduleName9'), // 雾炮喷淋设备管理
|
|
subhead: this.$t('message.middleGround.subhead2'), // 人员管理
|
|
operation: true,
|
|
id: 21,
|
|
path: "/equipmentCenter/sprayDevManage",
|
|
},{
|
|
menuName: '喷淋设备管理', // 喷淋设备管理
|
|
subhead: this.$t('message.middleGround.subhead2'), // 人员管理
|
|
operation: true,
|
|
id: 21,
|
|
path: "/equipmentCenter/sprayDevManageRT",
|
|
},
|
|
],
|
|
},{
|
|
moduleName: this.$t('message.middleGround.moduleName7'), // 绿色施工
|
|
subhead: this.$t('message.middleGround.subhead7'), // 扬尘设备新增、编辑、删除
|
|
operation: true,
|
|
id: 4,
|
|
openedUrl: require("../../assets/images/menu/lssg_active.png"),
|
|
shutUrl: require("../../assets/images/menu/lssg.png"),
|
|
children: [
|
|
{
|
|
menuName: this.$t('message.middleGround.moduleName8'), // 扬尘设备管理
|
|
subhead: this.$t('message.middleGround.subhead2'), // 人员管理
|
|
operation: true,
|
|
id: 21,
|
|
path: "/equipmentCenter/rainfallManage",
|
|
},
|
|
],
|
|
},{
|
|
moduleName: this.$t('message.middleGround.moduleName10'), // 电箱管理
|
|
subhead: this.$t('message.middleGround.subhead10'), // 电箱设备新增、编辑、删除
|
|
operation: true,
|
|
id: 11,
|
|
openedUrl: require("../../assets/images/menu/dxgl_active.png"),
|
|
shutUrl: require("../../assets/images/menu/lssg.png"),
|
|
children: [
|
|
|
|
{
|
|
menuName: this.$t('message.middleGround.moduleName4'), // 设备管理
|
|
subhead: this.$t('message.middleGround.moduleName4'), // 设备管理
|
|
operation: true,
|
|
id: 43,
|
|
path: "/equipmentCenter/electricDevManage",
|
|
},
|
|
],
|
|
},{
|
|
moduleName: this.$t('message.middleGround.moduleName12'), // 车辆管理
|
|
subhead: this.$t('message.middleGround.subhead12'), // 查看实时环境数据、历史数据以及报警新增
|
|
operation: true,
|
|
id: 12,
|
|
openedUrl: require("../../assets/images/menu/clgl_active.png"),
|
|
shutUrl: require("../../assets/images/menu/lssg.png"),
|
|
children: [
|
|
{
|
|
menuName: this.$t('message.middleGround.moduleName13'), // 车辆闸门管理
|
|
subhead: this.$t('message.middleGround.subhead13'), // 车辆黑白名单管理
|
|
operation: true,
|
|
id: 21,
|
|
path: "/equipmentCenter/carGateDev",
|
|
},{
|
|
menuName: this.$t('message.middleGround.moduleName14'), // 车辆相机管理
|
|
subhead: this.$t('message.middleGround.subhead13'), // 车辆黑白名单管理
|
|
operation: true,
|
|
id: 21,
|
|
path: "/equipmentCenter/carCameraDev",
|
|
}
|
|
],
|
|
},
|
|
{
|
|
moduleName: this.$t('message.middleGround.moduleName15'), // 塔吊管理
|
|
subhead: this.$t('message.middleGround.subhead15'), // 项目塔吊设备使用、施工管理
|
|
operation: true,
|
|
id: 5,
|
|
openedUrl: require("../../assets/images/menu/jdgl_active.png"),
|
|
shutUrl: require("../../assets/images/menu/jdgl.png"),
|
|
children: [
|
|
{
|
|
menuName: this.$t('message.middleGround.moduleName4'), // 设备管理
|
|
operation: true,
|
|
id: 11,
|
|
path: "/equipmentCenter/basicInfo",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
moduleName: this.$t('message.middleGround.moduleName17'), // 升降机管理
|
|
subhead: this.$t('message.middleGround.subhead17'), // 管理人员可以实时看到现场的设备及人员情况
|
|
operation: true,
|
|
id: 6,
|
|
openedUrl: require("../../assets/images/menu/lifter_active.png"),
|
|
shutUrl: require("../../assets/images/menu/lifter.png"),
|
|
children: [
|
|
{
|
|
menuName: this.$t('message.middleGround.moduleName4'), // 设备管理
|
|
operation: true,
|
|
id: 11,
|
|
path: "/equipmentCenter/lifterBasicInfo",
|
|
}
|
|
],
|
|
},
|
|
{
|
|
moduleName: this.$t('message.middleGround.moduleName18'), // 龙门吊管理
|
|
subhead: this.$t('message.middleGround.subhead18'), // 塔吊、升降机等设备的管理
|
|
operation: false,
|
|
id: 7,
|
|
openedUrl: require("../../assets/images/menu/tzsb_active.png"),
|
|
shutUrl: require("../../assets/images/menu/tzsb.png"),
|
|
},
|
|
{
|
|
moduleName: this.$t('message.middleGround.moduleName19'), // 地磅管理
|
|
subhead: this.$t('message.middleGround.subhead19'), // 通过AI分析未戴安全帽、未穿防护服等行为
|
|
operation: false,
|
|
id: 8,
|
|
openedUrl: require("../../assets/images/menu/aifx_active.png"),
|
|
shutUrl: require("../../assets/images/menu/aifx.png"),
|
|
},
|
|
{
|
|
moduleName: this.$t('message.middleGround.moduleName20'), // 人员定位
|
|
subhead: this.$t('message.middleGround.subhead20'), // 查看人员所在位置
|
|
operation: false,
|
|
id: 9,
|
|
openedUrl: require("../../assets/images/menu/rydw_active.png"),
|
|
shutUrl: require("../../assets/images/menu/rydw.png"),
|
|
children: [
|
|
{
|
|
menuName: this.$t('message.middleGround.moduleName21'), // 基站管理
|
|
subhead: this.$t('message.middleGround.moduleName21'), // 基站管理
|
|
operation: true,
|
|
id: 91,
|
|
path: "/project/personnelPosition/cardManage",
|
|
},
|
|
{
|
|
menuName: this.$t('message.middleGround.subhead2'), // 人员管理
|
|
subhead: this.$t('message.middleGround.subhead2'), // 人员管理
|
|
operation: true,
|
|
id: 91,
|
|
path: "/project/personnelPosition/beaconManage",
|
|
},
|
|
{
|
|
menuName: this.$t('message.middleGround.moduleName22'),// 地图管理
|
|
subhead: this.$t('message.middleGround.moduleName22'), // 地图管理
|
|
operation: true,
|
|
id: 92,
|
|
path: "/project/personnelPosition/mapManage",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
moduleName: this.$t('message.middleGround.moduleName23'), // 系统管理
|
|
subhead: this.$t('message.middleGround.subhead23'), // 项目角色管理、菜单管理
|
|
operation: false,
|
|
id: 10,
|
|
openedUrl: require("../../assets/images/menu/xtgl_active.png"),
|
|
shutUrl: require("../../assets/images/menu/xtgl.png"),
|
|
},
|
|
],
|
|
showNotBuyMoudle:showNotBuyMoudle,
|
|
iconType: '1'
|
|
};
|
|
},
|
|
mounted(){
|
|
if(localStorage.getItem('systemInfo')){
|
|
this.iconType = JSON.parse(localStorage.getItem('systemInfo')).iconType ? JSON.parse(localStorage.getItem('systemInfo')).iconType:'1'
|
|
}
|
|
console.log(this.iconType)
|
|
// this.headerName = '智慧工地云 - 设备中台'
|
|
// console.log('this.$store.state.currentProDetail')
|
|
// console.log(this.$store.state.currentProDetail)
|
|
// if(this.$store.state.currentProDetail){
|
|
// this.headerName += ' - ' + this.$store.state.currentProDetail.projectName
|
|
// }
|
|
this.getDataDateils()
|
|
// if(this.$store.state.currentMoudle){
|
|
// this.headerName += ' - ' + this.$store.state.currentMoudle.name
|
|
// }
|
|
var arr = this.$store.state.userInfo.menuAuthority.moduleList
|
|
this.getAllModule(arr)
|
|
},
|
|
methods: {
|
|
//获取详情
|
|
getDataDateils() {
|
|
let data = {
|
|
projectSn: this.$store.state.projectSn,
|
|
};
|
|
getProjectDetail(data).then((res) => {
|
|
// console.log(res);
|
|
if (res.code == 200) {
|
|
this.projectName = res.result.projectName;
|
|
this.headerName += ' - ' + res.result.projectName
|
|
this.$store.commit('setProDetail',res.result)
|
|
}
|
|
});
|
|
},
|
|
getAllModule(half){
|
|
// getAllModuleApi({moduleType:2, styleType: this.$store.state.userInfo.styleType}).then(res => {
|
|
// if (res.success) {
|
|
// var all = res.result
|
|
// // console.log(res)
|
|
// all.forEach((element,index) => {
|
|
// all[index].operation=false
|
|
// half.forEach(element2 => {
|
|
// if(element2.moduleId==element.moduleId){
|
|
// all[index].operation=true
|
|
// all[index].menuList=element2.menuList
|
|
// }
|
|
// });
|
|
// });
|
|
// this.list=all
|
|
// }
|
|
// })
|
|
// 新用户功能模块
|
|
if(this.$store.state.userInfo.accountType == 10){
|
|
getNewUserAllModulePageApi({
|
|
projectSn: this.$store.state.projectSn,
|
|
userId: this.$store.state.userInfo.userId,
|
|
moduleType: 2,
|
|
}).then((res) => {
|
|
if (res.success) {
|
|
var all = res.result.moduleList;
|
|
console.log("all", all);
|
|
all.forEach((element, index) => {
|
|
all[index].operation = false;
|
|
res.result.menuList.forEach((element2) => {
|
|
if (element2.moduleId == element.moduleId) {
|
|
all[index].operation = true;
|
|
}
|
|
});
|
|
});
|
|
console.log("all111", all);
|
|
this.list = all;
|
|
}
|
|
});
|
|
} else {
|
|
getAllModuleApi({
|
|
moduleType: 2,
|
|
styleType: this.$store.state.userInfo.styleType,
|
|
}).then((res) => {
|
|
if (res.success) {
|
|
var all = res.result;
|
|
console.log("all", all);
|
|
all.forEach((element, index) => {
|
|
all[index].operation = false;
|
|
half.forEach((element2) => {
|
|
if (element2.moduleId == element.moduleId) {
|
|
all[index].operation = true;
|
|
all[index].menuList = element2.menuList;
|
|
}
|
|
});
|
|
});
|
|
this.list = all;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
itemClick(item) {
|
|
console.log(item)
|
|
if (!item.operation) {
|
|
this.$message.error(this.$t('message.projectIndex.tips1'));
|
|
return;
|
|
}
|
|
if (item.menuList&&item.menuList.length>0) {
|
|
var arr= item.menuList,arr2=[]
|
|
arr.forEach(element => {
|
|
if(element.menuEquipment==1){
|
|
arr2.push(element)
|
|
}
|
|
});
|
|
this.$store.commit("setMenuList", arr2);
|
|
this.$store.commit("setIsShowBackIndex", true);
|
|
this.$store.commit("setMoudle", item);
|
|
this.$router.push(arr2[0].path);
|
|
} else {
|
|
if (item.url) {
|
|
let routeUrl = this.$router.resolve({
|
|
path: item.url,
|
|
});
|
|
window.open(routeUrl.href, "_blank");
|
|
} else {
|
|
this.$message.error(this.$t('message.projectIndex.tips1'));
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.pageContainer {
|
|
height: calc(100% - 61px);
|
|
background: rgba(247, 249, 255, 0.9);
|
|
font-family: '思源黑体';
|
|
}
|
|
.projectIndexBox {
|
|
max-width: 1370px;
|
|
margin: auto;
|
|
width: 100%;
|
|
}
|
|
// @media screen and (max-width: 1630px) {
|
|
// .projectIndex .module {
|
|
// margin-right: 26px !important;
|
|
// }
|
|
// }
|
|
.projectIndex {
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: space-around;
|
|
box-sizing: border-box;
|
|
// padding: 0 100px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 8px;
|
|
.module:nth-child(4n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.module_title {
|
|
margin-left: -10px;
|
|
border-left: 2px solid #4a8bff;
|
|
padding-left: 8px;
|
|
margin-bottom: 20px;
|
|
font-size: 14px;
|
|
}
|
|
.module {
|
|
width: 320px;
|
|
// height: 124px;
|
|
box-sizing: border-box;
|
|
// border-radius: 3px;
|
|
// box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.07);
|
|
// display: flex;
|
|
// align-items: center;
|
|
margin-bottom: 24px;
|
|
padding: 30px 10px 32px;
|
|
font-size: 17px;
|
|
margin-right: 30px;
|
|
text-align: center;
|
|
|
|
border: 1px solid rgba(18, 41, 75, 0.1);
|
|
height: 174px;
|
|
&.canclick:hover{
|
|
cursor: pointer;
|
|
// border-color: rgba(74, 139, 255, 0.9);
|
|
background-color: rgba(196, 208, 255, 0.17);
|
|
// box-shadow: 0px 5px 9px 3px rgba(74, 139, 255, 0.2);
|
|
}
|
|
|
|
.head1{
|
|
// opacity: 0.8;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
.icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
// width: 45px;
|
|
// height: 45px;
|
|
// margin-right: 20px;
|
|
display: block;
|
|
margin: 0 auto 0px;
|
|
}
|
|
.subhead {
|
|
opacity: 0.8;
|
|
font-size: 12px;
|
|
margin-top: 15px;
|
|
}
|
|
.grey *{
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
.hovers {
|
|
cursor: pointer;
|
|
|
|
}
|
|
</style>
|