504 lines
18 KiB
Vue
504 lines
18 KiB
Vue
<template>
|
||
<!-- 项目列表 -->
|
||
<div class="fullHeight pages">
|
||
<vhead :titleName="$t('message.homeLayout.projectTitle')" showR="true"></vhead>
|
||
<div class="pageContainer">
|
||
<div class="pageDataContainer">
|
||
<!-- <div class="projectList"> -->
|
||
<div class="searchBox whiteBlock" v-if="userInfo.accountType!=5">
|
||
<el-form :inline="true" size="medium" :model="searchForm" ref="searchForm">
|
||
<el-form-item :label="$t('message.companyDiagram.titleName1')" prop="firstCompanyId">
|
||
<el-select
|
||
v-model="searchForm.firstCompanyId"
|
||
:placeholder="$t('message.companyDiagram.PleaseSelect')"
|
||
@change="selectStair"
|
||
:disabled="userInfo.accountType!=2"
|
||
clearable
|
||
>
|
||
<el-option
|
||
:label="item.companyName"
|
||
:value="item.companyId"
|
||
v-for="item in institutionList1"
|
||
:key="item.companyId"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('message.companyDiagram.titleName2')" prop="secondCompanyId">
|
||
<el-select @change="selectSecondStair"
|
||
v-model="searchForm.secondCompanyId"
|
||
:placeholder="$t('message.companyDiagram.PleaseSelect')"
|
||
:disabled="userInfo.accountType!=2 && userInfo.accountType!=3 || searchForm.firstCompanyId==''"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="item in institutionList2"
|
||
:key="item.companyId"
|
||
:label="item.companyName"
|
||
:value="item.companyId"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="'三级管理机构'" prop="thirdCompanyId">
|
||
<el-select
|
||
v-model="searchForm.thirdCompanyId"
|
||
:placeholder="$t('message.companyDiagram.PleaseSelect')"
|
||
:disabled="userInfo.accountType!=2 && userInfo.accountType!=3&& userInfo.accountType!=4 || searchForm.secondCompanyId==''"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="item in institutionList3"
|
||
:key="item.companyId"
|
||
:label="item.companyName"
|
||
:value="item.companyId"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="$t('message.companyDiagram.Table.projectName')"
|
||
class="last"
|
||
prop="projectName"
|
||
>
|
||
<el-input
|
||
v-model="searchForm.projectName"
|
||
:placeholder="$t('message.companyDiagram.PleaseEnter')"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" plain @click="getListData">{{$t('message.docManage.query')}}</el-button>
|
||
<el-button type="warning" plain @click="resetForm">{{$t('message.docManage.refresh')}}</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="table_wrap whiteBlock">
|
||
<el-table class="tables" :data="tableData">
|
||
<el-table-column
|
||
type="index"
|
||
width="50"
|
||
align="center"
|
||
:label="$t('message.companyDiagram.Table.index')"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="projectName"
|
||
:label="$t('message.companyDiagram.Table.projectName')"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="projectNumber"
|
||
:label="$t('message.companyDiagram.dialog_ProjectPop_up.projectNumber')"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="firstCompanyName"
|
||
:label="$t('message.companyDiagram.titleName1')"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="secondCompanyName"
|
||
:label="$t('message.companyDiagram.titleName2')"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="projectAddress"
|
||
:label="$t('message.companyDiagram.dialog_ProjectPop_up.projectAddress')"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="bulidStatus"
|
||
:label="$t('message.companyDiagram.dialog_ProjectPop_up.bulidStatus')"
|
||
align="center"
|
||
>
|
||
<template
|
||
slot-scope="scope"
|
||
>
|
||
{{$t('message.companyDiagram.BUILDSTATUS')[scope.row.bulidStatus==4?3:scope.row.bulidStatus].name}}
|
||
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" width="400">
|
||
<template slot-scope="scope">
|
||
<div v-if="$store.state.userInfo.styleType==2"
|
||
class="operationText"
|
||
@click="goProjectBigScreen(scope.row)"
|
||
>
|
||
进入项目级大屏
|
||
</div>
|
||
<div v-if="$store.state.userInfo.styleType==3"
|
||
class="operationText"
|
||
@click="goProjectQu(scope.row)"
|
||
>
|
||
进入衢州版本
|
||
</div>
|
||
<div
|
||
class="operationText"
|
||
style="margin-right: 30px"
|
||
@click="toOverview(scope.row.projectSn)"
|
||
>进入数据看板</div>
|
||
<div v-if="($store.state.userInfo.styleType!=2 && $store.state.userInfo.styleType!=3) && $store.state.userInfo.enterProjectBackType === 0"
|
||
class="operationText"
|
||
style="margin-right: 30px"
|
||
@click="goProjectIndex(scope.row)"
|
||
>{{$t('message.companyDiagram.goProjectBackEnd')}}</div>
|
||
<div v-if="($store.state.userInfo.styleType!=2 && $store.state.userInfo.styleType!=3) && $store.state.userInfo.seeEquipment === 0"
|
||
class="operationText"
|
||
@click="goDevCenter(scope.row)"
|
||
>{{$t('message.companyDiagram.goDevCenter')}}</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
class="pagerBox"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(total)"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getLayerCompanyList,
|
||
selectCompanyProjectPage,
|
||
} from "@/assets/js/api/project.js";
|
||
import {
|
||
getComapnyStatisticsListApi,
|
||
} from "@/assets/js/api/company/project";
|
||
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
|
||
import { getScreenAuthModuleAndMenuApi } from '@/assets/js/api/jxjadmin.js'
|
||
import vhead from "@/components/header";
|
||
export default {
|
||
name: "projectList",
|
||
components: { vhead },
|
||
data() {
|
||
return {
|
||
userInfo: "",
|
||
searchForm: {
|
||
firstCompanyId: "",
|
||
secondCompanyId: "",
|
||
projectName: "",
|
||
thirdCompanyId:""
|
||
},
|
||
total: 0,
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
tableData: [],
|
||
institutionList1: [], //一级管理机构
|
||
institutionList2: [], //二级管理机构
|
||
institutionList3: [], //三级管理机构
|
||
newBigScreen: []
|
||
};
|
||
},
|
||
created() {
|
||
// document.title='项目总览'
|
||
this.userInfo = this.$store.state.userInfo;
|
||
this.getLayerCompany();
|
||
},
|
||
methods: {
|
||
async getAuthModuleAndMenu() {
|
||
let bool = false
|
||
const res = await getScreenAuthModuleAndMenuApi()
|
||
if (res.code === 200) {
|
||
bool = res.result.length ? true : false
|
||
}
|
||
return bool
|
||
},
|
||
async toOverview(projectSn) {
|
||
this.$forceUpdate();
|
||
await this.getProjectDetail(projectSn);
|
||
|
||
if (this.newBigScreen == null || this.newBigScreen == "") {
|
||
this.$message({
|
||
message: "当前项目没有看板",
|
||
type: "warning",
|
||
});
|
||
} else {
|
||
const isPermission = await this.getAuthModuleAndMenu()
|
||
if(!isPermission) {
|
||
return this.$message({
|
||
message: "当前用户没有访问数据看板权限",
|
||
type: "warning",
|
||
});
|
||
}
|
||
console.log("当前跳转链接", this.newBigScreen);
|
||
//-------------------- 跳转新版七参数
|
||
this.jumpToken = localStorage.getItem("jumpToken");
|
||
let userId = this.$store.state.userInfo.userId;
|
||
window.open(this.newBigScreen + "?userId=" + userId + '&sn=' + projectSn, "_self");
|
||
// window.open('http://192.168.34.216:8081/#/large?userId=' + userId + '&sn=' + this.$store.state.projectSn, "_self")//这里是后台跳到大屏的操作，携带token过去
|
||
}
|
||
},
|
||
async getProjectDetail(projectSn) {
|
||
let data = {
|
||
projectSn: projectSn,
|
||
};
|
||
await getProjectDetail(data).then((res) => {
|
||
if (res.result) {
|
||
this.newBigScreen = res.result.newBigScreen;
|
||
console.log("接口获取数据看板地址", this.newBigScreen);
|
||
}
|
||
});
|
||
},
|
||
// 获取一二级下拉
|
||
getLayerCompany() {
|
||
let data = {
|
||
sn: this.userInfo.headquartersSn,
|
||
videoType: 0,
|
||
};
|
||
getComapnyStatisticsListApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
// ;
|
||
this.institutionList1 = res.result.companyList;
|
||
let DATA = res.result.companyList
|
||
//accountType==2 可以选择一级、二级管理机构
|
||
if (this.userInfo.accountType == 2) {
|
||
|
||
// this.institutionList2 = res.result[0].list;
|
||
// this.institutionList3 = this.institutionList2[0].list;
|
||
//accountType==3 不可以选择一级管理机构 可以选择二级管理机构
|
||
} else if (this.userInfo.accountType == 3) {
|
||
for (let i in DATA) {
|
||
if (DATA[i].companySn == this.userInfo.sn) {
|
||
this.institutionList1.push(DATA[i]);
|
||
this.searchForm.firstCompanyId = DATA[i].companyId;
|
||
this.institutionList2 = DATA[i].list;
|
||
}
|
||
}
|
||
//accountType==4 不可以选择一级、二级管理机构
|
||
} else if (this.userInfo.accountType == 4) {
|
||
for (let i in DATA) {
|
||
let list = DATA[i].list;
|
||
if (list.length > 0) {
|
||
for (let j in list) {
|
||
if (this.userInfo.sn == list[j].companySn) {
|
||
this.institutionList1.push(DATA[i]);
|
||
this.institutionList2.push(list[j]);
|
||
this.searchForm.firstCompanyId = DATA[i].companyId;
|
||
this.searchForm.secondCompanyId = list[j].companyId;
|
||
this.institutionList3 = list[j].list;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}else if (this.userInfo.accountType == 7) {
|
||
for (let i in DATA) {
|
||
let list = DATA[i].list;
|
||
if (list.length > 0) {
|
||
for (let j in list) {
|
||
let list2 = list[j].list;
|
||
for (let k in list2) {
|
||
if (this.userInfo.sn == list2[k].companySn) {
|
||
this.institutionList1.push(DATA[i]);
|
||
this.institutionList2.push(list[j]);
|
||
this.searchForm.firstCompanyId = DATA[i].companyId;
|
||
this.searchForm.secondCompanyId = list[j].companyId;
|
||
this.searchForm.thirdCompanyId = list2[k].companyId;
|
||
this.institutionList3.push(list2[k])
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// console.log(this.institutionList1)
|
||
// console.log(this.institutionList2)
|
||
// console.log(this.institutionList3)
|
||
setTimeout(() => {
|
||
this.getListData();
|
||
}, 50);
|
||
}
|
||
});
|
||
},
|
||
|
||
//一级切换时
|
||
selectStair(id) {
|
||
window._paq.push(['trackEvent', '下拉选择', '一级管理机构','选择一级管理机构' ])
|
||
for (let i in this.institutionList1) {
|
||
if (this.institutionList1[i].companyId == id) {
|
||
this.institutionList2 = this.institutionList1[i].list;
|
||
}
|
||
}
|
||
},
|
||
//二级切换时
|
||
selectSecondStair(id) {
|
||
window._paq.push(['trackEvent', '下拉选择', '二级管理机构','选择二级管理机构' ])
|
||
for (let i in this.institutionList2) {
|
||
if (this.institutionList2[i].companyId == id) {
|
||
this.institutionList3 = this.institutionList2[i].list;
|
||
}
|
||
}
|
||
},
|
||
|
||
//获取列表数据
|
||
getListData() {
|
||
let value = {
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize,
|
||
headquartersSn: this.userInfo.headquartersSn,
|
||
firstCompanyId: this.searchForm.firstCompanyId,
|
||
secondCompanyId: this.searchForm.secondCompanyId,
|
||
projectName: this.searchForm.projectName,
|
||
thirdCompanyId:this.searchForm.thirdCompanyId
|
||
};
|
||
let value2 = {
|
||
headquartersSn: this.userInfo.headquartersSn,
|
||
projectSn: this.userInfo.sn,
|
||
};
|
||
|
||
let data = this.userInfo.accountType == 5 ? value2 : value;
|
||
|
||
selectCompanyProjectPage(data).then((res) => {
|
||
if (res.code == 200) {
|
||
// ;
|
||
this.tableData = res.result.records;
|
||
this.total = Number(res.result.total);
|
||
}
|
||
});
|
||
window._paq.push(['trackEvent', '点击', '查询','查询项目列表' ])
|
||
},
|
||
|
||
resetForm() {
|
||
// this.$refs["searchForm"].resetFields();
|
||
if(this.userInfo.accountType==2){
|
||
this.searchForm.firstCompanyId=''
|
||
this.searchForm.secondCompanyId=''
|
||
this.searchForm.thirdCompanyId=''
|
||
}
|
||
if(this.userInfo.accountType==3){
|
||
this.searchForm.secondCompanyId=''
|
||
this.searchForm.thirdCompanyId=''
|
||
}
|
||
// if(this.userInfo.accountType!=2 && this.userInfo.accountType!=3){
|
||
// }else{
|
||
// this.searchForm.secondCompanyId=''
|
||
// }
|
||
if(this.userInfo.accountType==4){
|
||
this.searchForm.thirdCompanyId=''
|
||
}
|
||
this.searchForm.projectName=''
|
||
this.getListData();
|
||
window._paq.push(['trackEvent', '点击', '刷新','刷新项目列表' ])
|
||
},
|
||
//查看条数
|
||
handleSizeChange(val) {
|
||
this.pageSize = val;
|
||
this.getListData();
|
||
},
|
||
//查看页
|
||
handleCurrentChange(val) {
|
||
this.pageNo = val;
|
||
this.getListData();
|
||
},
|
||
// 去项目级大屏
|
||
goProjectBigScreen(value){
|
||
this.$store.commit("setProjectSn", value.projectSn);
|
||
this.$store.commit("setProDetail", value);
|
||
this.$store.commit("changeMouduleIndex", 0);
|
||
this.$store.commit("changeSecondMenuIndex", 0);
|
||
this.$store.commit("changeThirdMenuIndex", 0);
|
||
this.$store.commit("changeFourMenuIndex", 0);
|
||
|
||
let routeUrl = this.$router.resolve({
|
||
path: '/projectV2/taskList'
|
||
});
|
||
window.open(routeUrl.href, "_blank");
|
||
window._paq.push(['trackEvent', '点击', '项目级大屏','进入项目级大屏' ])
|
||
},
|
||
// 去衢州版本
|
||
goProjectQu(value){
|
||
console.log('进去衢州',value)
|
||
this.$store.commit("setProjectSn", value.projectSn);
|
||
this.$store.commit("setProDetail", value);
|
||
this.$store.commit("changeMouduleIndex", 0);
|
||
this.$store.commit("changeSecondMenuIndex", 0);
|
||
this.$store.commit("changeThirdMenuIndex", 0);
|
||
this.$store.commit("changeFourMenuIndex", 0);
|
||
let routeUrl = this.$router.resolve({
|
||
path: '/projectV3/taskList'
|
||
});
|
||
window.open(routeUrl.href, "_blank");
|
||
localStorage.removeItem("active");
|
||
localStorage.removeItem("path");
|
||
localStorage.removeItem("treeActive");
|
||
},
|
||
//去项目后台
|
||
goProjectIndex(value) {
|
||
this.$store.commit("setProjectSn", value.projectSn);
|
||
let routeUrl = this.$router.resolve({
|
||
path: '/projectIndex'
|
||
});
|
||
window.open(routeUrl.href, "_self");
|
||
window.location.reload()
|
||
window._paq.push(['trackEvent', '点击', '项目后台','进入项目后台' ])
|
||
sessionStorage.setItem('messageA',this.messageA)
|
||
},
|
||
//去设备中台
|
||
goDevCenter(value) {
|
||
console.log('跳跳跳')
|
||
this.$store.commit("setProjectSn", value.projectSn);
|
||
window.open("/equipmentCenter.html#/equipmentCenterIndx", "_self");
|
||
window._paq.push(['trackEvent', '点击', '设备中台','进入设备中台' ])
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.pageContainer{
|
||
height: calc(100% - 61px);
|
||
::-webkit-scrollbar {
|
||
width: 7px;
|
||
height: 7px;
|
||
background-color: white;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
box-shadow: inset 0 0 0px white;
|
||
-webkit-box-shadow: inset 0 0 0px white;
|
||
background-color: rgb(193, 193, 193);
|
||
/*滚动条的背景颜色*/
|
||
border-radius: 20px;
|
||
}
|
||
/*解决表格固定列时的压样式问题*/
|
||
.el-table__fixed {
|
||
height: calc(100% - 7px) !important;
|
||
}
|
||
|
||
.el-table__fixed-right {
|
||
height: calc(100% - 12px) !important;
|
||
}
|
||
|
||
.el-table__fixed-right::before,
|
||
.el-table__fixed::before {
|
||
background-color: unset !important;
|
||
}
|
||
}
|
||
.searchBox {
|
||
justify-content: space-between;
|
||
}
|
||
.rightBox {
|
||
margin-right: 20px;
|
||
p {
|
||
display: inline-flex;
|
||
span {
|
||
color: @--color-primary;
|
||
font-size: 23px;
|
||
font-weight: 500;
|
||
}
|
||
&:first-child {
|
||
margin-right: 100px;
|
||
}
|
||
}
|
||
}
|
||
.operationText {
|
||
color: rgba(85, 129, 255, 1);
|
||
font-size: 13px;
|
||
font-family: PingFangSC-Regular;
|
||
display: inline-block;
|
||
}
|
||
</style> |