Commit 3903052d authored by 姬鋆屾's avatar 姬鋆屾
parents 45025599 4c5d5e1b
......@@ -194,6 +194,7 @@ export default {
.demo {
width: 100%;
height: 100%;
opacity: 0.3;
// background: url("@/assets/img/demo/bg.png") no-repeat center;
}
</style>
\ No newline at end of file
<template>
<div class="actuary w-full h-auto">
<Start class="start"/>
<Start class="start" />
<div class="act_cont">
<div class="act_tit">
<h1>智慧政务数据精算</h1>
......@@ -10,17 +10,24 @@
</div>
<div class="over_act_mod">
<div class="act_mod" ref="mode">
<div class="act_mod_item" v-for="(item,index) of menuPermission"
<div
class="act_mod_item"
v-for="(item, index) of menuPermission"
:key="item.id"
@click="handleJump(item.url)"
@mouseover="hoverItem(index)"
@mouseleave="hoverleave(index)"
:style="{background: `url(${require('@/assets/images/dataActuary/'+(index+1)+'.png')}) no-repeat`}">
:style="{
background: `url(${require('@/assets/images/dataActuary/' +
(index + 1) +
'.png')}) no-repeat`,
}"
>
<div class="actitem_tit">
{{item.name}}
{{ item.name }}
</div>
<div class="actitem_p">
{{item.hover?item.remark:'Business data analysis'}}
{{ item.hover ? item.remark : "Business data analysis" }}
</div>
</div>
</div>
......@@ -31,8 +38,9 @@
<script>
import menu from "@/mixins/menu";
import Start from "./ParticleWavy.vue";
import { mapState } from "vuex";
import Storage from "@/utils/js/Storage";
import Start from "./demo2"
export default {
mixins: [menu],
data() {
......@@ -41,8 +49,12 @@ export default {
menuPermission: [],
};
},
components:{
Start
components: {
Start,
},
computed: {
...mapState("user", ["userData", "token"]),
},
created() {
......@@ -52,30 +64,35 @@ export default {
},
methods: {
hoverItem(index){
this.menuPermission[index].hover = true
this.$refs.mode.style.transition="all 1s ease 0s";
hoverItem(index) {
this.menuPermission[index].hover = true;
this.$refs.mode.style.transition = "all 1s ease 0s";
// 如果大于6就要往前移动
if(index>5){
let num = index-5
this.$refs.mode.style.transform="translateX(-"+num*190+"px)";
this.$forceUpdate()
if (index > 5) {
let num = index - 5;
this.$refs.mode.style.transform = "translateX(-" + num * 190 + "px)";
this.$forceUpdate();
}
},
hoverleave(index){
this.$refs.mode.style.transform="translate(0, 0)";
this.$refs.mode.style.transition="all .5s ease 0s";
this.menuPermission[index].hover = false
this.$forceUpdate()
hoverleave(index) {
this.$refs.mode.style.transform = "translate(0, 0)";
this.$refs.mode.style.transition = "all .5s ease 0s";
this.menuPermission[index].hover = false;
this.$forceUpdate();
},
// 跳转
handleJump(url) {
if (url.includes("http") || url.includes("https")) {
let siteid = Storage.get(2, "siteId") || 0;
location.href = `${url}?token=${this.token}&siteid=${siteid}`;
} else {
this.$router.push(url);
}
},
// 获取子菜单权限
getChildrenPermission() {
let { menuList } = Storage.get(2, "userInfo");
let { menuList } = this.userData;
let actuary = menuList.filter((v) => v.name === "数据精算");
if (actuary.length) {
let arr = actuary
......@@ -87,10 +104,10 @@ export default {
}
})
.flat();
arr.forEach(item=>{
item.hover = false
})
this.menuPermission = arr
arr.forEach((item) => {
item.hover = false;
});
this.menuPermission = arr;
}
},
},
......@@ -98,8 +115,7 @@ export default {
</script>
<style lang="less" scoped>
@headerH: 4.5rem;
@keyframes startopen{
@keyframes startopen {
0% {
width: 170px;
}
......@@ -107,7 +123,7 @@ export default {
width: 551px;
}
}
@keyframes leaveopen{
@keyframes leaveopen {
0% {
width: 551px;
background-size: 100% 100%;
......@@ -117,7 +133,7 @@ export default {
width: 170px;
}
}
.start{
.start {
position: absolute;
bottom: 0;
z-index: 0;
......@@ -126,7 +142,6 @@ export default {
.actuary {
background: url("~@/assets/images/dataActuary/bg.png") center no-repeat;
background-size: cover;
padding-top: @headerH;
.act_cont {
margin: 120px auto;
......@@ -143,11 +158,11 @@ export default {
color: #ffffff;
font-size: 53px;
font-family: FZZhengHeiS-EB-GB;
color: #FFFFFF;
color: #ffffff;
line-height: 64px;
letter-spacing: 6px;
background: linear-gradient(0deg, #D2F8FF 0%, #FFFFFF 88.37890625%);
-webkit-background-clip: text;
background: linear-gradient(0deg, #d2f8ff 0%, #ffffff 88.37890625%);
background-clip: text;
-webkit-text-fill-color: transparent;
}
p {
......@@ -156,11 +171,11 @@ export default {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #FFFFFF;
color: #ffffff;
line-height: 34px;
}
}
.over_act_mod{
.over_act_mod {
width: 1520px;
overflow: hidden;
margin: 50px auto 0;
......@@ -170,73 +185,74 @@ export default {
justify-content: space-between;
transition: all 1s ease 0s;
.act_mod_item:hover{
.act_mod_item:hover {
// animation: startopen 1s normal 1 forwards;
transition: all 1s ease 0s;
overflow: hidden;
flex-shrink: 0;
width: 551px;
height: 450px;
background: url('~@/assets/images/dataActuary/bg-open.png') center no-repeat !important;
background: url("~@/assets/images/dataActuary/bg-open.png") center
no-repeat !important;
background-size: 100% 100%;
border-radius: 12px;
box-sizing: border-box;
padding: 90px 50px;
.actitem_tit{
.actitem_tit {
width: 350px;
font-size: 31px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #FFFFFF;
color: #ffffff;
line-height: 59px;
margin-bottom: 20px;
}
.actitem_tit::before{
.actitem_tit::before {
content: none;
}
.actitem_p{
.actitem_p {
width: 350px;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
color: #ffffff;
line-height: 28px;
}
}
.act_mod_item{
.act_mod_item {
// animation: leaveopen .5s normal 1 forwards;
transition: all .5s ease 0s;
transition: all 0.5s ease 0s;
flex-shrink: 0;
width: 170px;
height: 450px;
border-radius: 12px;
margin:0 10px;
.actitem_p{
margin: 0 10px;
.actitem_p {
padding: 0 10px;
font-size: 12px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #0857E8;
color: #0857e8;
line-height: 38px;
opacity: 0.7;
}
.actitem_tit{
.actitem_tit {
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #0857E8;
color: #0857e8;
line-height: 38px;
padding:40px 10px 8px;
padding: 40px 10px 8px;
position: relative;
}
.actitem_tit::before{
.actitem_tit::before {
content: "";
position: absolute;
left: 10px;
bottom: 0;
width: 30px;
height: 2px;
background: linear-gradient(to bottom right, #0857E8, #fff);
background: linear-gradient(to bottom right, #0857e8, #fff);
}
}
}
......
......@@ -5,13 +5,13 @@
<draggable
v-model="delList"
:options="{
group: { name: draName1, pull: false, put: joinDel },
group: { name: 'item', pull: false },
}"
animation="400"
delay="20"
draggable=".common-item"
class="w-full h-full text-white text-xl flex items-center justify-center"
@add="handleDelete"
@add="changeCollect"
>
<span class="del-text">{{ placeholder }}</span>
</draggable>
......@@ -33,7 +33,7 @@
<draggable
v-model="collectList"
:options="{
group: { name: draName2, pull: true, put: handleJoin },
group: { name: 'item', pull: true, put: handleJoin },
}"
animation="400"
delay="20"
......@@ -41,18 +41,17 @@
class="common-list"
dragClass="dragClass"
@add="addEnd"
@end="collectEnd"
@start="delStart"
@start="isDel = true"
@end="changeCollect"
>
<div
class="common-item w-full flex flex-col items-center cursor-pointer"
class="common-item w-full flex flex-col items-center"
v-for="(v, i) in collectList"
:key="'' + v.id + i"
@click="openWindow(v)"
>
<div class="item-logo item-logo1">
<div class="item-logo cursor-pointer" @click="openWindow(v)">
<img
class="w-full h-full object-cover"
class="w-full h-full object-contain"
:src="api + v.modelIcon"
/>
<img
......@@ -60,7 +59,9 @@
src="@/assets/images/siteArrange/pic-bottom.png"
/>
</div>
<div class="text-white mt-[10px] leading-[20px]">
<div
class="text-white mt-[10px] leading-[20px] text-center cursor-default"
>
{{ v.modelName }}
</div>
</div>
......@@ -80,7 +81,7 @@
<draggable
v-model="v.list"
:options="{
group: { name: draName3, pull: 'clone', put: false },
group: { name: 'item', pull: 'clone', put: false },
sort: false,
}"
animation="400"
......@@ -92,18 +93,19 @@
@end="isAdd = false"
>
<div
class="common-item w-[160px] flex flex-col items-center cursor-pointer"
class="common-item w-full h-[130px] flex flex-col items-center"
v-for="item in v.list"
:key="item.id"
@click="openWindow(item)"
>
<div class="item-logo">
<div class="item-logo cursor-pointer" @click="openWindow(item)">
<img
class="w-full h-full object-cover"
class="w-full h-full object-contain"
:src="api + item.modelIcon"
/>
</div>
<div class="text-white mt-[10px] leading-[20px]">
<div
class="text-white mt-[10px] leading-[20px] text-center cursor-default"
>
{{ item.modelName }}
</div>
</div>
......@@ -128,9 +130,6 @@ export default {
siteModelList: [], // 站点编排列表
isAdd: false, // 是否在拖动站点到常用列表
isCollapsed: true,
draName1: "item",
draName2: "item",
draName3: "item",
placeholder: "将模块拖到此处删除",
delList: [],
isDel: false,
......@@ -216,23 +215,13 @@ export default {
// 删除开始时
delStart() {
this.isDel = true;
this.draName3 = "del";
},
// 进入删除范围
joinDel() {},
collectEnd() {
this.getCollect();
this.isDel = false;
this.draName3 = "item";
},
// 删除常用
handleDelete() {
// 修改常用
changeCollect() {
this.saveCollect();
this.delList.pop();
this.isDel = false;
this.draName3 = "item";
},
// 判断是否有重复
hasDuplicate(arr) {
let idSet = new Set();
......@@ -260,7 +249,7 @@ export default {
position: fixed;
top: -100%;
left: 0px;
transition: all 0.5s;
transition: all 0.2s;
.del-text {
position: absolute;
}
......@@ -291,6 +280,9 @@ export default {
justify-items: center;
}
}
.common-item {
font-family: Source Han Sans CN;
}
.icon-img {
transform: rotateZ(0deg);
transition: all 1s;
......@@ -302,8 +294,12 @@ export default {
width: 80px;
height: 80px;
padding: 10px;
background: linear-gradient(180deg, #daefff 0%, #ffffff 100%);
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.bottom-img {
position: absolute;
......@@ -311,9 +307,6 @@ export default {
bottom: -10px;
}
}
.item-logo1 {
background: linear-gradient(180deg, #daefff 0%, #ffffff 100%);
}
.site-box {
width: 100%;
height: 440px;
......@@ -340,16 +333,53 @@ export default {
padding: 0px 6px;
height: 200px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(4, 1fr);
// grid-template-rows: repeat(3, 140px);
grid-row-gap: 10px;
align-content: start;
overflow-y: auto;
&::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
// &::-webkit-scrollbar {
// width: 2px;
// height: 2px;
// overflow-y: auto;
// }
// &::-webkit-scrollbar-thumb {
// border-radius: 2px;
// background-image: linear-gradient(
// 180deg,
// #0000 0%,
// #fff 30%,
// #0000 90%
// );
// }
// &::-webkit-scrollbar-track {
// border-radius: 2px;
// background: #0000;
// }
}
&:nth-child(1) {
.type-list {
border-style: solid;
border-right-width: 2px;
border-image: linear-gradient(180deg, #0000 0%, #fff 30%, #0000 90%) 1;
// border-image-slice: 2;
}
.item-logo {
background: linear-gradient(180deg, #c7e1f6 0%, #ffffff 85%);
}
}
&:nth-child(2) {
.type-list {
border-style: solid;
border-right-width: 2px;
border-image: linear-gradient(180deg, #0000 0%, #fff 30%, #0000 90%) 1;
// border-image-slice: 2;
}
.item-logo {
background: linear-gradient(180deg, #c7f6db 0%, #ffffff 85%);
}
......
This diff is collapsed.
......@@ -171,12 +171,12 @@ public class ModelController extends BaseJsonBodyController {
jcMap.put("list",groupMap.get(ModelTypeEnum.JC.getValue()));
mapList.add(jcMap);
Map<String,Object> g2gMap = new HashMap<>();
jcMap.put("type",ModelTypeEnum.G2G.getDesc());
jcMap.put("list",groupMap.get(ModelTypeEnum.G2G.getValue()));
g2gMap.put("type",ModelTypeEnum.G2G.getDesc());
g2gMap.put("list",groupMap.get(ModelTypeEnum.G2G.getValue()));
mapList.add(g2gMap);
Map<String,Object> g2cMap = new HashMap<>();
jcMap.put("type",ModelTypeEnum.G2C.getDesc());
jcMap.put("list",groupMap.get(ModelTypeEnum.G2C.getValue()));
g2cMap.put("type",ModelTypeEnum.G2C.getDesc());
g2cMap.put("list",groupMap.get(ModelTypeEnum.G2C.getValue()));
mapList.add(g2cMap);
return mapList;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment