You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
757 lines
21 KiB
Vue
757 lines
21 KiB
Vue
<template>
|
|
<div class="apps">
|
|
<div class="appsitems">
|
|
<ul>
|
|
<li v-for="item in appsList" :key="item" @click="goApps(item)">
|
|
<img :src="`https://zycloud.sztzjy.com/server${item.thumbnailUrl}`" alt="">
|
|
<span>{{ item.applicationName }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="MyAppsEconomics">
|
|
<div class="home-content">
|
|
<div class="module">
|
|
<div class="module-name"><span>数字化治理</span></div>
|
|
<div class="module-content">
|
|
<div
|
|
class="module-item"
|
|
v-for="item in GovernanceList"
|
|
:key="item.id"
|
|
@click="goUrl(item.redirectUrl, item.authorityInfo, '4')"
|
|
:class="{ 'is-dispaly': item.authorityInfo !== 1 }">
|
|
<img :src="require(`../../images/Economics/${item.img}`)" alt="" />
|
|
<div>{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="module module2">
|
|
<div class="left">
|
|
<div class="module-name"><span>产业数字化</span></div>
|
|
<div class="left-content">
|
|
<div class="item">
|
|
<div class="title">
|
|
<span>数字金融</span>
|
|
</div>
|
|
<div class="item-content">
|
|
<div
|
|
class="Finance-item"
|
|
v-for="item in FinanceList"
|
|
:key="item"
|
|
@click="goUrl(item.redirectUrl, item.authorityInfo, '2')"
|
|
:class="{ 'is-dispaly': item.authorityInfo !== 1 }"
|
|
>
|
|
<img :src="require(`../../images/Economics/${item.img}`)" alt="" />
|
|
<div>{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="title">
|
|
<span>数字贸易</span>
|
|
</div>
|
|
<div class="item-content">
|
|
<div
|
|
class="Finance-item"
|
|
v-for="item in TradeList"
|
|
:key="item"
|
|
@click="goUrl(item.redirectUrl, item.authorityInfo, '2')"
|
|
:class="{ 'is-dispaly': item.authorityInfo !== 1 }"
|
|
>
|
|
<img :src="require(`../../images/Economics/${item.img}`)" alt="" />
|
|
<div>{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item3">
|
|
<img src="../../images/Economics/三层.png" alt="" />
|
|
<div class="Industry">
|
|
<div
|
|
v-for="item in digitalizationIndustry"
|
|
:key="item"
|
|
@click="goUrl(item.redirectUrl, item.authorityInfo, '2')"
|
|
:class="{ 'is-dispaly': item.authorityInfo !== 1 }"
|
|
>
|
|
{{ item.nameInfo }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<img src="../../images/Economics/logo1.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="module module2 module3">
|
|
<div class="left">
|
|
<div class="module-name"><span>数字产业化</span></div>
|
|
<div class="left-content">
|
|
<div
|
|
class="Industrialization-item"
|
|
v-for="item in industrializationList"
|
|
:key="item"
|
|
@click="goUrl(item.redirectUrl, item.authorityInfo, '1')"
|
|
:class="{ 'is-dispaly': item.authorityInfo !== 1 }"
|
|
>
|
|
<img :src="require(`../../images/Economics/${item.img}`)" alt="" />
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<img src="../../images/Economics/logo2.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="module module2 module3 module4">
|
|
<div class="left">
|
|
<div class="module-name"><span>数据价值化</span></div>
|
|
<div class="left-content">
|
|
<div
|
|
class="Value-item"
|
|
v-for="item in ValueList"
|
|
:key="item"
|
|
@click="goUrl(item.redirectUrl, item.authorityInfo, '3')"
|
|
:class="{ 'is-dispaly': item.authorityInfo !== 1 }"
|
|
>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<img src="../../images/Economics/logo3.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "",
|
|
data() {
|
|
return {
|
|
appsList:[],
|
|
GovernanceList: [
|
|
{
|
|
name: "碳金融",
|
|
img: "1-2.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 2
|
|
},
|
|
{
|
|
name: "宏观调度",
|
|
img: "1-1.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 1
|
|
},
|
|
{
|
|
name: "数字安全",
|
|
img: "1-3.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 3
|
|
},
|
|
{
|
|
name: "金融治理",
|
|
img: "1-4.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 2
|
|
},
|
|
{
|
|
name: "数字政务",
|
|
img: "1-5.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 3
|
|
}
|
|
],
|
|
FinanceList: [
|
|
{
|
|
name: "数字营销",
|
|
img: "2-1.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 1
|
|
},
|
|
{
|
|
name: "数字征信",
|
|
img: "2-2.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 2
|
|
},
|
|
{
|
|
name: "数字支付",
|
|
img: "2-3.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 3
|
|
},
|
|
{
|
|
name: "数字银行",
|
|
img: "2-4.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 2
|
|
},
|
|
{
|
|
name: "数字证券",
|
|
img: "2-5.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 3
|
|
},
|
|
{
|
|
name: "数字证券",
|
|
img: "2-6.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 3
|
|
}
|
|
],
|
|
TradeList: [
|
|
{
|
|
name: "数字技术贸易",
|
|
img: "2-7.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 1
|
|
},
|
|
{
|
|
name: "数字产品贸易",
|
|
img: "2-9.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 2
|
|
},
|
|
{
|
|
name: "数字服务贸易",
|
|
img: "2-8.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 3
|
|
},
|
|
{
|
|
name: "数据贸易",
|
|
img: "2-10.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 2
|
|
}
|
|
],
|
|
industrializationList: [
|
|
{
|
|
name: "5G",
|
|
img: "3-1.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 1
|
|
},
|
|
{
|
|
name: "云计算",
|
|
img: "3-3.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 2
|
|
},
|
|
{
|
|
name: "大数据",
|
|
img: "3-4.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 3
|
|
},
|
|
{
|
|
name: "人工智能",
|
|
img: "3-2.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 2
|
|
},
|
|
{
|
|
name: "区块链",
|
|
img: "3-5.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 3
|
|
},
|
|
{
|
|
name: "物联网",
|
|
img: "3-6.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 3
|
|
},
|
|
{
|
|
name: "虚拟现实",
|
|
img: "3-7.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 3
|
|
},
|
|
{
|
|
name: "工业互联网",
|
|
img: "3-8.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 3
|
|
}
|
|
],
|
|
digitalizationIndustry: [],
|
|
ValueList: [
|
|
{
|
|
name: "数据采集",
|
|
img: "4-1.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 1
|
|
},
|
|
{
|
|
name: "数据确权",
|
|
img: "4-2.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 2
|
|
},
|
|
{
|
|
name: "数据定价",
|
|
img: "4-3.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 3
|
|
},
|
|
{
|
|
name: "数据交易",
|
|
img: "4-4.png",
|
|
redirectUrl: "",
|
|
authorityInfo: "",
|
|
id: 2
|
|
}
|
|
]
|
|
};
|
|
},
|
|
created() {
|
|
this.getinfo()
|
|
this.appsList=sessionStorage.getItem('Appsitem')?JSON.parse(sessionStorage.getItem('Appsitem')):[]
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
goUrl(url,authority,module2){
|
|
if(authority == 1){
|
|
window.open(`${url}&module=${module2}`)
|
|
}else{
|
|
return
|
|
}
|
|
},
|
|
getinfo(){
|
|
this.$get("/api/resourcesApplication/logicPicture.json",{token:this.$getToken()}).then((res) => {
|
|
this.GovernanceList.forEach((item,index)=>{
|
|
item.redirectUrl=res.data[0].moduleInfoDTOList[index].redirectUrl
|
|
item.authorityInfo=res.data[0].moduleInfoDTOList[index].authorityInfo
|
|
})
|
|
// console.log( res.data[1].moduleInfoDTOList,"res.data[1].moduleInfoDTOList");
|
|
this.FinanceList.forEach((item,index)=>{
|
|
item.name=res.data[1].moduleInfoDTOList[index].nameInfo
|
|
item.redirectUrl=res.data[1].moduleInfoDTOList[index].redirectUrl
|
|
item.authorityInfo=res.data[1].moduleInfoDTOList[index].authorityInfo
|
|
// digitalizationIndustry.value[index].nameInfo=res.data[1].moduleInfoDTOList.nameInfo
|
|
})
|
|
res.data[1].moduleInfoDTOList.forEach((item,index)=>{
|
|
if(item.order>10 && item.order<14){
|
|
this.digitalizationIndustry.push({
|
|
nameInfo:item.nameInfo,
|
|
redirectUrl:item.redirectUrl,
|
|
authorityInfo:item.authorityInfo
|
|
})
|
|
}
|
|
if(item.order>6 && item.order<11){
|
|
this.TradeList[index-6].name=item.nameInfo
|
|
this.TradeList[index-6].redirectUrl=item.redirectUrl
|
|
this.TradeList[index-6].authorityInfo=item.authorityInfo
|
|
}
|
|
})
|
|
|
|
this.industrializationList.forEach((item,index)=>{
|
|
item.name=res.data[2].moduleInfoDTOList[index].nameInfo
|
|
item.redirectUrl=res.data[2].moduleInfoDTOList[index].redirectUrl
|
|
item.authorityInfo=res.data[2].moduleInfoDTOList[index].authorityInfo
|
|
})
|
|
this.ValueList.forEach((item,index)=>{
|
|
item.name=res.data[3].moduleInfoDTOList[index].nameInfo
|
|
item.redirectUrl=res.data[3].moduleInfoDTOList[index].redirectUrl
|
|
item.authorityInfo=res.data[3].moduleInfoDTOList[index].authorityInfo
|
|
})
|
|
});
|
|
},
|
|
goApps(itemurl){
|
|
let userInfo=this.$ls.get(this.$getKeyInfo("userInfo")) || {}
|
|
let JT_Sapps=['数字发票','数字供应链','数字人民币']
|
|
if(userInfo.jobType1 =='JT_S_02'){
|
|
if(JT_Sapps.includes(itemurl.applicationSecondLevelRelation)){
|
|
window.open(itemurl.realUrl.replace(/^(https?:\/\/[^\/]+)(.*)$/, `${'https://qkljr.sztzjy.com:89'}$2`))
|
|
}else{
|
|
window.open(itemurl.realUrl.includes('https://szjj.sztzjy.com:99/') ?itemurl.realUrl.replace('https://szjj.sztzjy.com:99/','https://szjj.sztzjy.com:98/') : itemurl.realUrl)
|
|
}
|
|
}else{
|
|
window.open(itemurl.realUrl)
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.apps{
|
|
.appsitems{
|
|
min-height: 60px;
|
|
background: #ffffff;
|
|
ul{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
//超出换行
|
|
white-space: nowrap;
|
|
// overflow-x: auto;
|
|
gap: 20px 40px;
|
|
list-style: none;
|
|
li{
|
|
display: flex;
|
|
align-items: center;
|
|
//鼠标小手
|
|
cursor: pointer;
|
|
min-width: 210px;
|
|
img{
|
|
width: 40px;
|
|
height: 40px ;
|
|
border-radius: 4px;
|
|
}
|
|
span{
|
|
margin-left: 5px;
|
|
font-size: 13px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #1a2029
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.MyAppsEconomics {
|
|
// 禁用
|
|
// width: 100%;
|
|
height: calc(100% - 95px);
|
|
background: linear-gradient(0deg, #ffffff 0%, #f4f6fe 100%);
|
|
box-shadow: 0px 3px 15px 1px rgba(7, 9, 128, 0.22);
|
|
border-radius: 20px;
|
|
padding: 10px;
|
|
|
|
.home-content {
|
|
pointer-events: none;
|
|
cursor: not-allowed;
|
|
.module {
|
|
margin-top: 16px;
|
|
height: 152px;
|
|
background: url("../../images/Economics/1层.png") no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
padding: 0px 20px;
|
|
// 阴影
|
|
border-radius: 8px;
|
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
|
|
// background: transparent;
|
|
.module-name {
|
|
height: 27px;
|
|
background: #9755ae;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
|
|
line-height: 27px;
|
|
font-size: 20px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #FEFEFF;
|
|
}
|
|
.module-content{
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 106px;
|
|
|
|
.module-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 8px;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
&:hover {
|
|
color: #9755ae;
|
|
}
|
|
img {
|
|
width: 165px;
|
|
height: 90px;
|
|
}
|
|
div {
|
|
font-size: 19px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #001781;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.module2{
|
|
display: flex;
|
|
padding: 9px 14px 5px 14px;
|
|
background: url("../../images/Economics/2层(1).png") no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
.left{
|
|
position: relative;
|
|
padding: 10px 13px;
|
|
width: calc(100% - 341px);
|
|
background:url('../../images/Economics/圆角矩形1.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
&::before{
|
|
content: "";
|
|
width: 50px;
|
|
height: 113px;
|
|
background:url('../../images/Economics/引线蓝.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 9.9%;
|
|
right: -3.7%;
|
|
}
|
|
.module-name{
|
|
background-color: #5B5BEA;
|
|
}
|
|
.left-content{
|
|
display: flex;
|
|
// align-items: center;
|
|
gap: 10px;
|
|
margin-top: 3px;
|
|
.item{
|
|
width: 519px;
|
|
height: 93px;
|
|
background: #DEDFFF;
|
|
border: 1px solid #7B7CEF;
|
|
border-radius: 6px;
|
|
.title{
|
|
height: 22px;
|
|
display: flex;
|
|
justify-content: center;
|
|
span{
|
|
display: inline-block;
|
|
width: 202px;
|
|
height: 22px;
|
|
text-align: center;
|
|
line-height: 22px;
|
|
background: url("../../images/Economics/多边形.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
font-size: 16px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #FBFCFF;
|
|
};
|
|
|
|
}
|
|
.item-content{
|
|
height: 68px;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap:30px;
|
|
.Finance-item{
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
// 鼠標小手
|
|
cursor: pointer;
|
|
img{
|
|
height: 50px;
|
|
}
|
|
|
|
div{
|
|
font-size: 13px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #001781;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.item3{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width:231px;
|
|
height: 93px;
|
|
// background-color: pink;
|
|
img{
|
|
width: 150px;
|
|
}
|
|
.Industry{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
div{
|
|
width: 71px;
|
|
height: 19px;
|
|
line-height: 19px;
|
|
background: #383AED;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
// 鼠標小手
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
width: 341px;
|
|
height: 100%;
|
|
padding-left: 50px;
|
|
// background-color: pink;
|
|
img{
|
|
padding: 30px 27px;
|
|
}
|
|
}
|
|
}
|
|
.module3{
|
|
background: url("../../images/Economics/三层(1).png") no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
.left{
|
|
background:url('../../images/Economics/虚线红.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
&::before{
|
|
content: "";
|
|
width: 50px;
|
|
height: 113px;
|
|
background:url('../../images/Economics/引线红.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 9.9%;
|
|
right: -3.7%;
|
|
}
|
|
.module-name{
|
|
background: #EB6080;
|
|
}
|
|
.left-content{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 5px;
|
|
gap: 38px;
|
|
.Industrialization-item{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
img{
|
|
width: 113px;
|
|
height: 71px;
|
|
}
|
|
span{
|
|
font-size: 15px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 600;
|
|
color: #001781;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.right{
|
|
width: 341px;
|
|
height: 100%;
|
|
padding-left: 50px;
|
|
// background-color: pink;
|
|
img{
|
|
padding: 30px 27px;
|
|
width: 258px;
|
|
height: 90px;
|
|
}
|
|
}
|
|
}
|
|
.module4{
|
|
background: url("../../images/Economics/四层(1).png") no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
.left{
|
|
background:url('../../images/Economics/虚线绿.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
&::before{
|
|
content: "";
|
|
width: 50px;
|
|
height: 113px;
|
|
background:url('../../images/Economics/引线绿.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 9.9%;
|
|
right: -3.7%;
|
|
}
|
|
.module-name{
|
|
background: #25C39D;
|
|
}
|
|
.left-content{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 5px;
|
|
gap: 38px;
|
|
.Value-item{
|
|
width: 262px;
|
|
height: 69px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background:url('../../images/Economics/4-1.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
span{
|
|
margin-left: 50px;
|
|
font-size: 22px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #001781;
|
|
}
|
|
}
|
|
.Value-item:nth-child(2){
|
|
background:url('../../images/Economics/4-2.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.Value-item:nth-child(3){
|
|
background:url('../../images/Economics/4-3.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.Value-item:nth-child(4){
|
|
background:url('../../images/Economics/4-4.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
width: 341px;
|
|
height: 100%;
|
|
padding-left: 50px;
|
|
// background-color: pink;
|
|
img{
|
|
padding: 30px 27px;
|
|
width: 258px;
|
|
height: 90px;
|
|
}
|
|
}
|
|
}
|
|
.is-dispaly{
|
|
// 禁用
|
|
cursor: not-allowed !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|