<template>
|
<div class="appbox">
|
<el-container>
|
<el-main>
|
<el-card class="box-card scrollbar">
|
<div class="newProjectWindow"><el-button type="info" @click="openWindow()" plain>新建</el-button></div>
|
<newProjectWindow ref="newProjectWindow"></newProjectWindow>
|
<div class="toolbar">
|
<el-input
|
size="small"
|
placeholder="请输入关键字查询"
|
clearable
|
v-model="filterString"
|
@keyup.enter="handleQueryName"
|
>
|
<el-button
|
slot="append"
|
icon="el-icon-search"
|
@click="handleQueryName"
|
></el-button>
|
</el-input>
|
</div>
|
<el-tabs
|
style="margin: 10px;"
|
v-model="activeName"
|
@tab-click="handleClick"
|
>
|
<el-tab-pane label="全部应用" name="allapp"
|
><div class="apptypes">
|
<div
|
style="
|
margin: 15px 10px;
|
display: inline-block;
|
display: inline-block;
|
line-height: 19px;
|
font-size: 14px;
|
"
|
>
|
应用场景类型：
|
</div>
|
<el-checkbox
|
style="margin: 15px; display: inline-block"
|
:indeterminate="isIndeterminate"
|
v-model="checkAll"
|
@change="handleCheckAllChange"
|
>全选</el-checkbox
|
>
|
|
<el-checkbox-group
|
style="margin: 15px; display: inline-block"
|
v-model="checkedTypes"
|
@change="handleCheckedTypesChange"
|
>
|
<el-checkbox
|
v-for="apptype in apptypes"
|
:label="apptype.id"
|
:key="apptype.id"
|
>{{ apptype.typename }}</el-checkbox
|
>
|
</el-checkbox-group>
|
</div>
|
<div style="padding: 10px 10px 20px 10px;
|
margin-top: 15px;
|
border-radius: 15px;
|
background-color: #132b4c;">
|
<card-list-table :data="appTableData" :activetag="1"
|
/></div></el-tab-pane>
|
<el-tab-pane label="我的应用" name="myapp"
|
><div class="apptypes">
|
<el-checkbox
|
style="margin: 15px; display: inline-block"
|
:indeterminate="isPublicIndeterminate"
|
v-model="checkPublicAll"
|
@change="handleCheckPublicAllChange"
|
>全选</el-checkbox
|
>
|
|
<el-checkbox-group
|
style="margin: 15px; display: inline-block"
|
v-model="checkedPublic"
|
@change="handleCheckedPublicChange"
|
>
|
<el-checkbox
|
v-for="p in arrpublic"
|
:label="p.id"
|
:key="p.id"
|
>{{ p.pub }}</el-checkbox
|
>
|
</el-checkbox-group>
|
</div>
|
<div style="padding: 10px 10px 20px 10px;
|
margin-top: 15px;
|
border-radius: 15px;
|
background-color: #132b4c;">
|
<card-list-table :data="myappTableData" :activetag="2"
|
/></div></el-tab-pane>
|
</el-tabs>
|
<div style="width: 100%; margin-top: 10px; text-align: center">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="cardData.pageNo"
|
:page-sizes="[2,4, 8, 12]"
|
:page-size="cardData.pageSize"
|
layout="total, sizes, prev, pager, next"
|
:total="total"
|
>
|
</el-pagination>
|
</div>
|
</el-card>
|
</el-main>
|
</el-container>
|
</div>
|
</template>
|
<script>
|
import {getAllApplication,getMyApplication} from "@/api/usercenter.js"
|
import CardListTable from "../../components/appusecenter/CardListTable-bk.vue";
|
import newProjectWindow from "./newProjectWindow.vue";
|
const typeOptions = [
|
{ id: 0, typename: "交通应用" },
|
{ id: 1, typename: "城管城市安全" },
|
{ id: 2, typename: "规建审批" },
|
{ id: 3, typename: "园区应用" },
|
{ id: 4, typename: "应急城市消防" },
|
{ id: 5, typename: "智慧工地" },
|
{ id: 6, typename: "智慧房管" },
|
{ id: 7, typename: "文物保护文旅应用" },
|
{ id: 8, typename: "能源应用" },
|
{ id: 9, typename: "水利水务应用" },
|
];
|
const publicOptions = [
|
{ id: 0, typename: "公有" },
|
{ id: 1, typename: "私有" },
|
]
|
const testData = [
|
{
|
id: 0,
|
typeid: 0,
|
typename: "交通应用",
|
appname: "城市道路交通二期建设工程",
|
createtime: "2022-01-01",
|
creator: "admin",
|
ispublic: true,
|
imagefile: "交通.png",
|
url:"http://103.85.165.99:9002/bsw",
|
},
|
{
|
id: 1,
|
typeid: 1,
|
typename: "城管城市安全",
|
appname: "公安岗亭应急响应分析决策辅助系统",
|
createtime: "2022-01-01",
|
creator: "admin",
|
ispublic: false,
|
imagefile: "应急.png",
|
url:"http://103.85.165.99:9002/bsw",
|
},
|
{
|
id: 2,
|
typeid: 2,
|
typename: "规建审批",
|
appname: "CIM 建设项目规划审批系统",
|
createtime: "2022-01-01",
|
creator: "test",
|
ispublic: false,
|
imagefile: "管线.png",
|
url:"http://103.85.165.99:9002/bsw",
|
},
|
{
|
id: 3,
|
typeid: 3,
|
typename: "园区应用",
|
appname: "智慧科技园项目",
|
createtime: "2022-01-01",
|
creator: "glc",
|
ispublic: false,
|
imagefile: "园区.png",
|
url:"http://103.85.165.99:9002/bsw",
|
},
|
{
|
id: 4,
|
typeid: 4,
|
typename: "应急城市消防",
|
appname: "智慧消防智慧系统",
|
createtime: "2022-01-01",
|
creator: "wwl",
|
ispublic: false,
|
imagefile: "消防.png",
|
url:"http://103.85.165.99:9002/bsw",
|
},
|
{
|
id: 5,
|
typeid: 5,
|
typename: "智慧工地",
|
appname: "智慧工地监管平台",
|
createtime: "2022-01-01",
|
creator: "wwl",
|
ispublic: false,
|
imagefile: "工地.png",
|
url:"http://103.85.165.99:9002/bsw",
|
},
|
{
|
id: 6,
|
typeid: 6,
|
typename: "智慧房管",
|
appname: "智慧房屋管理系统",
|
createtime: "2022-01-01",
|
creator: "admin",
|
ispublic: false,
|
imagefile: "建筑.png",
|
url:"http://103.85.165.99:9002/bsw",
|
},
|
{
|
id: 8,
|
typeid: 8,
|
typename: "能源应用",
|
appname: "智慧燃气监控系统",
|
createtime: "2022-01-01",
|
creator: "www",
|
ispublic: false,
|
imagefile: "能源.png",
|
url:"http://103.85.165.99:9002/bsw",
|
},
|
{
|
id: 9,
|
typeid: 9,
|
typename: "水利水务",
|
appname: "河长制",
|
createtime: "2022-01-01",
|
creator: "wwl",
|
ispublic: false,
|
imagefile: "桥梁.png",
|
url:"http://103.85.165.99:9002/bsw",
|
},
|
];
|
export default {
|
components: { CardListTable,newProjectWindow },
|
data() {
|
return {
|
filterString: "",
|
activeName: "allapp",
|
checkedTypes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
checkedPublic: [0, 1],
|
apptypes: typeOptions,
|
arrpublic: [
|
{ id: 1, pub: "公开" },
|
{ id: 0, pub: "私有" },
|
],
|
checkAll: true,
|
isIndeterminate: false,
|
checkPublicAll: true,
|
isPublicIndeterminate: false,
|
//全部
|
appTableData: [],
|
//我的
|
myappTableData: [],
|
//矩阵卡片的数据分页
|
cardData: {
|
pageNo: 1,
|
pageSize: 8,
|
},
|
total: 0,
|
projectWindowShow:false,
|
};
|
},
|
methods: {
|
openWindow(){
|
this.$refs.newProjectWindow.projectWindowShow = true
|
},
|
handleQuery(type,status,name) {
|
let tempData = [];
|
let that = this;
|
if (this.activeName === "allapp") {
|
let data = {name:name,type:type}
|
getAllApplication(data).then((res)=>{
|
if(res.code == 200){
|
res.data.forEach((item) => {
|
let typename = 1
|
switch (item.appType) {
|
case 1:typename = "交通应用";break;
|
case 2:typename = "城管城市安全";break;
|
case 3:typename = "规建审批";break;
|
case 4:typename = "园区应用";break;
|
case 5:typename = "应急城市消防";break;
|
case 6:typename = "智慧工地";break;
|
case 7:typename = "智慧房管";break;
|
case 8:typename = "文物保护文旅应用";break;
|
case 9:typename = "能源应用";break;
|
case 10:typename = "水利水务应用";break;
|
}
|
tempData.push({
|
id: item.id,
|
typeid: item.appType,
|
typename: typename,
|
appname: item.name,
|
createtime: item.createTime,
|
creator: "wwl",
|
ispublic: item.status == 1?true:false,
|
imagefile: "桥梁.png",
|
url:item.picUrl,
|
})
|
});
|
let responseData = { rows: tempData, total: tempData.length };
|
let cardData = []
|
for(let i =this.cardData.pageSize*(this.cardData.pageNo - 1);i<this.cardData.pageSize*this.cardData.pageNo;i++){
|
if(tempData[i] != undefined)
|
cardData.push( tempData[i])
|
}
|
this.appTableData = cardData;
|
this.total = responseData.total;
|
}else this.$message.error("加载资源失败")
|
})
|
} else {
|
let data = {name:"",status:status}
|
getMyApplication(data).then((res)=>{
|
if(res.code == 200){
|
res.data.forEach((item) => {
|
let typename = 1
|
switch (item.appType) {
|
case 1:typename = "交通应用";break;
|
case 2:typename = "城管城市安全";break;
|
case 3:typename = "规建审批";break;
|
case 4:typename = "园区应用";break;
|
case 5:typename = "应急城市消防";break;
|
case 6:typename = "智慧工地";break;
|
case 7:typename = "智慧房管";break;
|
case 8:typename = "文物保护文旅应用";break;
|
case 9:typename = "能源应用";break;
|
case 10:typename = "水利水务应用";break;
|
}
|
tempData.push({
|
id: item.id,
|
typeid: item.appType,
|
typename: typename,
|
appname: item.name,
|
createtime: item.createTime,
|
creator: "wwl",
|
ispublic: item.status == 1?true:false,
|
imagefile: "桥梁.png",
|
url:item.picUrl,
|
})
|
});
|
let responseData = { rows: tempData, total: tempData.length };
|
let cardData = []
|
for(let i =this.cardData.pageSize*(this.cardData.pageNo - 1);i<this.cardData.pageSize*this.cardData.pageNo;i++){
|
if(tempData[i] != undefined)
|
cardData.push( tempData[i])
|
}
|
this.myappTableData = cardData;
|
this.total = responseData.total;
|
}else this.$message.error("加载资源失败")
|
})
|
}
|
},
|
handleClick(tab, event) {
|
this.checkedTypes = typeOptions.map((el) => {return el.id;})
|
this.checkedPublic = publicOptions.map((el) => { return el.id;});
|
this.handleQueryInlet()
|
},
|
handleCheckAllChange(val) {
|
this.checkedTypes = val?typeOptions.map((el) => {return el.id;}):[];
|
this.isIndeterminate = false;
|
this.handleQueryInlet()
|
},
|
handleCheckedTypesChange(value) {
|
let checkedCount = value.length;
|
this.checkAll = checkedCount === this.apptypes.length;
|
this.isIndeterminate =
|
checkedCount > 0 && checkedCount < this.apptypes.length;
|
this.handleQueryInlet()
|
},
|
handleCheckPublicAllChange(val) {
|
this.checkedPublic = val? publicOptions.map((el) => { return el.id;}):[];
|
this.isPublicIndeterminate = false;
|
this.handleQueryInlet()
|
},
|
handleCheckedPublicChange(value) {
|
let a = value.length;
|
this.checkPublicAll = a === this.arrpublic.length;
|
this.isPublicIndeterminate = a > 0 && a < this.arrpublic.length;
|
this.handleQueryInlet()
|
},
|
handleSizeChange(size) {
|
this.cardData.pageSize = size;
|
this.handleQueryInlet()
|
},
|
handleCurrentChange(currentPage) {
|
this.cardData.pageNo = currentPage;
|
this.handleQueryInlet()
|
},
|
handleQueryName(){
|
this.handleQueryInlet()
|
},
|
//根据搜索字段以及勾选项进行查询
|
handleQueryInlet(){
|
let val = []
|
this.checkedTypes.forEach((item,index)=>{val[index] = item+1})
|
let status = this.checkedPublic.length==1?(this.checkedPublic[0]==1?1:2):(this.checkedPublic.length==2?0:999)
|
this.handleQuery(val.length>0?val:[999],status,this.filterString);
|
}
|
},
|
watch: {
|
// checkedTypes: {
|
// handler(newVal, oldVal) {
|
// this.handleQuery();
|
// },
|
// deep: true,
|
// },
|
// checkedPublic: {
|
// handler(newVal, oldVal) {
|
// this.handleQuery();
|
// },
|
// deep: true,
|
// },
|
},
|
mounted() {
|
this.handleQueryInlet();
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.appbox {
|
background-color: #112239;
|
height: calc(100% - 56px);
|
.el-container {
|
height: calc(100% - 150px);
|
width: calc(100% - 64px);
|
position: absolute;
|
top: 64px;
|
left: 32px;
|
.el-main {
|
margin: 0px;
|
padding: 10px;
|
background-color: #112239;
|
|
}
|
}
|
/deep/.el-tabs__nav-wrap::after {
|
width: 184px !important;
|
}
|
.box-card {
|
border: 0 !important;
|
overflow: auto;
|
height: 98%;
|
border-radius: 5px !important;
|
background-color: #112239;
|
// background-color: #132b4c;
|
.newProjectWindow{
|
position:absolute;
|
right:360px;
|
top: 33px;
|
z-index: 11;
|
/deep/ .el-button--info.is-plain {
|
background-color:#064268 !important;
|
border: #0e6aa4 1px solid;
|
color:#fff
|
}
|
}
|
/deep/ .el-tabs__item {
|
font-size: 18px;
|
font-weight: bold;
|
}
|
/deep/ .el-tabs__header {
|
width: 82% !important;
|
// background-color: #fff;
|
background-image: url("../../assets/img/图层 2 灰大素材.png");
|
background-size:1517px 37px ;
|
}
|
/deep/ .el-tabs__item {
|
color: #abcfe3 !important;
|
}
|
/deep/ .el-tabs__item:hover {
|
color: #fff !important;
|
cursor: pointer !important;
|
}
|
/deep/ .el-tabs__item.is-active {
|
color: #fff !important;
|
}
|
}
|
.box-card::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 0px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 0px;
|
}
|
.toolbar {
|
margin: 10px;
|
width: 300px;
|
position: absolute;
|
/* float: right; */
|
right: 30px;
|
/deep/ .el-input-group--append .el-input__inner, .el-input-group__prepend {
|
background-color: #0c142b !important;
|
border: #124a91 1px solid !important;
|
}
|
/deep/ .el-input-group__append {
|
border: #0e6aa4 1px solid !important;
|
border-left: 0px !important;
|
background-color: #12304d !important;
|
}
|
}
|
.apptypes {
|
display: flex;
|
background-color: #1b3457;
|
border-radius: 5px !important;
|
border: 0 !important;
|
color:#fff;
|
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
|
color: #fff !important;
|
}
|
}
|
}
|
</style>
|
|
