523 lines
16 KiB
Vue
523 lines
16 KiB
Vue
<template>
|
||
<!-- 项目首页 -->
|
||
<div class="fullHeight">
|
||
<vhead :titleName="projectName" :showR="true"></vhead>
|
||
<div class="pageContainer">
|
||
<div class="pageDataContainer">
|
||
<vue-scroll>
|
||
<div
|
||
class="projectIndexBox"
|
||
ref="artList"
|
||
@scroll="scrollGet($event)"
|
||
>
|
||
<!-- <div class="module_title">{{$t('message.homeLayout.existingProducts')}}</div> -->
|
||
<div class="projectIndex" id="projectIndex">
|
||
<template
|
||
v-for="(item, index) in list">
|
||
<div
|
||
style="width: 100%;height: 1px;"
|
||
v-if="
|
||
index == 0 ||
|
||
(index > 0 && list[index - 1].labelName != item.labelName)
|
||
"
|
||
></div>
|
||
<div
|
||
class="moduleBox"
|
||
v-if="item.operation"
|
||
>
|
||
<div
|
||
class="module_title"
|
||
v-if="
|
||
index == 0 ||
|
||
(index > 0 && list[index - 1].labelName != item.labelName)
|
||
"
|
||
>
|
||
{{ item.labelName }}
|
||
</div>
|
||
<div
|
||
class="module canclick"
|
||
:class="{ hovers: item.operation }"
|
||
@click="itemClick(item, index)"
|
||
ref="refName"
|
||
>
|
||
<img
|
||
v-if="iconType == 1 && item.moduleIcon "
|
||
: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>
|
||
</template>
|
||
</div>
|
||
<div v-if="showNotBuyMoudle">
|
||
<div class="module_title">
|
||
{{ $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, index)"
|
||
v-if="!item.operation"
|
||
>
|
||
<img
|
||
v-if="iconType == 1 && item.moduleIcon2"
|
||
: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>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getProjectInfoBySn } from "@/assets/js/api/overview";
|
||
import vhead from "@/components/header";
|
||
import axios from "axios";
|
||
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
|
||
import {
|
||
getProjectModuleList,
|
||
getAllModuleApi,
|
||
getNewUserAllModulePageApi
|
||
} from "@/assets/js/api/jxjadmin.js";
|
||
import { getSafeyHatSessionApi } from "@/assets/js/api/demo";
|
||
import { getDockingUrlApi } from "@/assets/js/api/configManage";
|
||
export default {
|
||
name: "projectIndex",
|
||
components: { vhead },
|
||
data() {
|
||
return {
|
||
selfScrollTop: 0,
|
||
projectSn: "",
|
||
baseURL: "",
|
||
projectNumber: "",
|
||
projectName: "",
|
||
list: [],
|
||
showNotBuyMoudle: showNotBuyMoudle,
|
||
brIndex: "",
|
||
iconType: "1",
|
||
};
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.baseURL = this.$http.defaults.baseURL;
|
||
},
|
||
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.getDataDateils();
|
||
// if(this.$store.state.userInfo.accountType==5){
|
||
// this.getProjectModule()
|
||
// }else{
|
||
var arr = this.$store.state.userInfo.menuAuthority.moduleList;
|
||
this.getAllModule(arr);
|
||
this.getProjectNumber();
|
||
|
||
// }
|
||
},
|
||
activated() {
|
||
this.$refs.artList.scrollTop = this.selfScrollTop;
|
||
},
|
||
methods: {
|
||
scrollGet(e) {
|
||
// console.log("滚动触发的事件", e.srcElement.scrollTop, e.target.scrollTop);
|
||
this.selfScrollTop = this.$refs.artList.scrollTop;
|
||
},
|
||
|
||
getSafeyHatSession() {
|
||
let data = {};
|
||
data.projectSn = this.projectSn;
|
||
getSafeyHatSessionApi(data).then((res) => {
|
||
console.log("安全帽跳转", res);
|
||
// {
|
||
// "success":true,
|
||
// "message":"操作成功！",
|
||
// "code":200,
|
||
// "result":{
|
||
// "msg_code":"GetSucc",
|
||
// "session_id":"d3a3c4d17c46e29dab9c9178d5b380c5",
|
||
// "userName":"rdys_test",
|
||
// "status":true,
|
||
// "token":"d3a3c4d17c46e29dab9c9178d5b380c5"
|
||
// },
|
||
// "timestamp":1634904162951
|
||
// }
|
||
// 此处注释是因为免登陆 传projectId到后端
|
||
if (res.code == 200) {
|
||
this.url =
|
||
"https://caps.runde.pro/login#token=" +
|
||
res.result.token +
|
||
"&user_name=" +
|
||
res.result.userName +
|
||
"&target=home";
|
||
// let url = 'https://caps.runde.pro/login#token='+ res.result.token + '&user_name=' + res.result.userName + '&target=home'
|
||
window.open(this.url);
|
||
}
|
||
});
|
||
},
|
||
getProjectNumber() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
getProjectInfoBySn(data).then((res) => {
|
||
console.log("------------", res.result.projectNumber);
|
||
this.projectNumber = res.result.projectNumber;
|
||
});
|
||
},
|
||
// 全景成像测距
|
||
getPanoramicRanging() {
|
||
axios({
|
||
method: "GET",
|
||
// url:'http://182.90.224.237:8070/xmgl/docking/url',
|
||
// url:'http://182.90.224.237:7000/xmgl/docking/url',
|
||
url: `${this.$http.defaults.baseURL}${"xmgl/docking/url"}`,
|
||
params: {
|
||
projectNumber: this.projectNumber,
|
||
},
|
||
}).then((res) => {
|
||
console.log("全景成像测距", res);
|
||
let toUrl = res.data.find((item) => {
|
||
if (this.projectNumber == item.jinqianmaosn) {
|
||
return item.url;
|
||
}
|
||
});
|
||
window.open(toUrl.url);
|
||
});
|
||
},
|
||
itemClick(item, index) {
|
||
console.log("item：：：：：：：：：", index);
|
||
|
||
// console.log(item,this.$store.state.userInfo.account)
|
||
if (item.moduleName == "智能安全帽系统") {
|
||
this.getSafeyHatSession();
|
||
// 次数更改因为原来跳转的是星璇 无法显示 所以更改跳转到 润德 龙光同一个页面
|
||
// let NodeRSA = require("node-rsa");
|
||
// //请求参数
|
||
// let params = JSON.stringify({
|
||
// account: this.$store.state.userInfo.account,
|
||
// page_flag: 3,
|
||
// });
|
||
// //公钥
|
||
// const pubKey = `
|
||
// -----BEGIN PUBLIC KEY-----
|
||
// MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDcmP0ug4NTHwW2oeHxheZjmYPDxVGFP770eECdLwRtaH0pPWvsXG6MSO/kCzgjEVEo1K1bvRxkkasQRu02fhI+gsZa8wvVeo3s4zJDA48Oj99JAXsx56/WN1RlNh+tsXcH9oQWy3gbX5cDkheuVZj8gsV7Ez59Ucj4e78zNJrUDwIDAQAB
|
||
// -----END PUBLIC KEY-----`;
|
||
|
||
// var publicKey = new NodeRSA(pubKey);
|
||
// var async_key = publicKey.encrypt(params, 'base64')
|
||
|
||
// window.open("http://58.210.96.206:91/async_danzhou.html?async_key="+async_key)
|
||
// // window.location.href = "http://58.210.96.206:91/async_danzhou.html?async_key="+async_key;
|
||
}
|
||
if (item.moduleName == "全景成像测距") {
|
||
this.getPanoramicRanging();
|
||
}
|
||
if (item.moduleName == "智能穿戴管理系统") {
|
||
this.getSafeyHatSession();
|
||
}
|
||
if (item.moduleName == "智能穿戴管理系统") {
|
||
return;
|
||
}
|
||
if (item.moduleName == "智能安全帽系统") {
|
||
this.getSafeyHatSession();
|
||
}
|
||
if (!item.operation) {
|
||
this.$message.error(this.$t("message.projectIndex.tips1"));
|
||
return;
|
||
}
|
||
if (
|
||
item.menuList &&
|
||
item.menuList.length > 0 &&
|
||
item.moduleName != "全景成像测距"
|
||
) {
|
||
var arr = item.menuList,
|
||
arr2 = [];
|
||
arr.forEach((element) => {
|
||
if (element.menuEquipment == 0) {
|
||
arr2.push(element);
|
||
}
|
||
});
|
||
this.$store.commit("setMenuList", arr2);
|
||
this.$store.commit("setIsShowBackIndex", true);
|
||
this.$store.commit("setMoudle", item);
|
||
if (arr2[0].target == "_blank") {
|
||
let routeUrl = "";
|
||
if (arr2[0].path.indexOf("http") != -1) {
|
||
routeUrl = arr2[0].path;
|
||
} else {
|
||
let url = this.$router.resolve({
|
||
path: arr2[0].path,
|
||
});
|
||
routeUrl = url.href;
|
||
}
|
||
window.open(routeUrl, "_blank");
|
||
} else {
|
||
if (arr2[0].path == "" || arr2[0].path.indexOf("/") == -1) {
|
||
this.$router.push(arr2[0].menuList[0].path);
|
||
} else {
|
||
this.$router.push(arr2[0].path);
|
||
}
|
||
}
|
||
} else if (
|
||
item.moduleName == "全景成像测距" ||
|
||
item.moduleName == "智能安全帽系统"
|
||
) {
|
||
this.$message.success(this.$t("message.projectIndex.tips3"));
|
||
} else {
|
||
this.$message.error(this.$t("message.projectIndex.tips2"));
|
||
}
|
||
window._paq.push([
|
||
"trackEvent",
|
||
"点击",
|
||
item.moduleName,
|
||
"进入" + item.moduleName,
|
||
]);
|
||
},
|
||
//获取详情
|
||
getDataDateils() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
getProjectDetail(data).then((res) => {
|
||
// console.log(res);
|
||
if (res.code == 200) {
|
||
this.projectName = res.result.projectName;
|
||
document.title = this.projectName;
|
||
this.$store.commit("setProDetail", res.result);
|
||
}
|
||
});
|
||
},
|
||
//为了展示未解锁产品，所以需要查询所有模块
|
||
getAllModule(half) {
|
||
console.log(666)
|
||
// 新用户功能模块
|
||
if(this.$store.state.userInfo.accountType == 10){
|
||
getNewUserAllModulePageApi({
|
||
projectSn: this.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) => {
|
||
console.log(element2,77888)
|
||
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;
|
||
}
|
||
});
|
||
}
|
||
|
||
},
|
||
insertAfter(newElement, targetElement) {
|
||
// newElement是要追加的元素 targetElement 是指定元素的位置
|
||
var parent = targetElement.parentNode; // 找到指定元素的父节点
|
||
if (parent.lastChild == targetElement) {
|
||
// 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
|
||
parent.appendChild(newElement, targetElement);
|
||
} else {
|
||
parent.insertBefore(newElement, targetElement.nextSibling);
|
||
}
|
||
},
|
||
//获取项目解锁的模块
|
||
// getProjectModule(projectSn) {
|
||
// getProjectModuleList({ projectSn: this.$store.state.projectSn }).then(
|
||
// (result) => {
|
||
// if (result.success) {
|
||
// var half = result.result;
|
||
// this.getAllModule(half);
|
||
// }
|
||
// }
|
||
// );
|
||
// },
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.pageContainer {
|
||
height: calc(100% - 61px);
|
||
background: rgba(247, 249, 255, 0.9);
|
||
font-family: "思源黑体";
|
||
}
|
||
|
||
.projectIndexBox {
|
||
max-width: 1360px;
|
||
margin: auto;
|
||
width: 100%;
|
||
overflow-y: scroll;
|
||
height: calc(100% - 61px);
|
||
}
|
||
|
||
// @media screen and (max-width: 1630px) {
|
||
// .projectIndex .module {
|
||
// margin-right: 26px !important;
|
||
// }
|
||
// }
|
||
.projectIndex {
|
||
width: 100%;
|
||
|
||
display: flex;
|
||
align-items: flex-end;
|
||
box-sizing: border-box;
|
||
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;
|
||
// width: 1360px;
|
||
}
|
||
|
||
.module {
|
||
width: 310px;
|
||
|
||
// 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;
|
||
}
|
||
|
||
.moduleBox {
|
||
// vertical-align: baseline;
|
||
// float: left;\
|
||
// display: inline-block;
|
||
}
|
||
::-webkit-scrollbar {
|
||
width: 0 !important;
|
||
}
|
||
::-webkit-scrollbar {
|
||
width: 0 !important;
|
||
height: 0;
|
||
}
|
||
</style>
|