mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

bug更改

wangqin
zhangzhang 1 year ago
parent
1c091361b8
commit
e804422304
2 changed files with 98 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 96
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue
  2. 62
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue

96
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue
View File

@ -1,24 +1,38 @@
<template>
<div class='HomeFilter'>
<ElPopover trigger="manual" :value="activeIcon === 'filter'" :visibleArrow="false" placement="left"
popper-class="global-input-search-popover">
<Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('filter')">
<img src="@screen/images/home-filter/filter.svg">
<div class="HomeFilter">
<ElPopover
trigger="manual"
:value="activeIcon === 'filter'"
:visibleArrow="false"
placement="left"
popper-class="global-input-search-popover"
>
<Button
:class="['btn', { 'btn-active': activeIcon }]"
slot="reference"
@click.native="handleClick('filter')"
>
<img src="@screen/images/home-filter/filter.svg" />
</Button>
<div class="body">
<div class="title">
设备筛选
</div>
<Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" />
<div class="title">设备筛选</div>
<Form
labelWidth="90px"
column="1"
class="form"
ref="FormConfigRef"
:formList="formList"
/>
<div class="footer">
<Button style="background-color: rgba(0, 179, 204, .3);" @click.native="handleResetForm">
<Button
style="background-color: rgba(0, 179, 204, 0.3)"
@click.native="handleResetForm"
>
重置
</Button>
<Button @click.native="handleSearch">
搜索
</Button>
<Button @click.native="handleSearch"> 搜索 </Button>
</div>
</div>
</ElPopover>
@ -26,17 +40,18 @@
</template>
<script>
import Button from '@screen/components/Buttons/Button.vue';
import Form from '@screen/components/FormConfig';
import Button from "@screen/components/Buttons/Button.vue";
import Form from "@screen/components/FormConfig";
import * as PresetFormItems from "@screen/common/PresetFormItems.js";
import { merge, cloneDeep } from "lodash"
import { merge, cloneDeep } from "lodash";
import request from "@/utils/request";
import { log } from "mathjs";
export default {
name: 'HomeFilter',
name: "HomeFilter",
components: {
Button,
Form
Form,
},
data() {
return {
@ -49,7 +64,7 @@ export default {
key: "deviceType",
type: "select",
options: {
options: []
options: [],
},
// visible: data => {
// if (data.searchType == 1) {
@ -57,29 +72,32 @@ export default {
// }
// },
},
]
}
],
};
},
methods: {
handleClick(type) {
console.log("type: ", type);
this.activeIcon = this.activeIcon === type ? null : type;
console.log("this.activeIcon", this.activeIcon);
},
filterEnd(data) {
this.activeIcon = null;
// this.filterData = data;
this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
},
async handleResetForm() {
this.$refs.FormConfigRef?.reset();
this.filterEnd(null)
this.activeIcon = "filter";
this.filterEnd(null);
},
async handleSearch() {
const data = await this.$refs.FormConfigRef.validate();
if (!data.startStakeMark[0] || !data.startStakeMark[1]) delete data.startStakeMark;
if (!data.endStakeMark[0] || !data.endStakeMark[1]) delete data.endStakeMark;
this.filterEnd(data)
if (!data.startStakeMark[0] || !data.startStakeMark[1])
delete data.startStakeMark;
if (!data.endStakeMark[0] || !data.endStakeMark[1])
delete data.endStakeMark;
this.activeIcon = null;
this.filterEnd(data);
},
async getDeviceTypeOptions() {
// try {
@ -90,15 +108,15 @@ export default {
// });
// } catch (e) { console.error(e); }
// return ;
}
},
},
async created() {
// await this.getDeviceTypeOptions();
}
}
},
};
</script>
<style lang='scss'>
<style lang="scss">
div.el-popper.global-input-search-popover {
background: rgba(6, 66, 88, 0.8);
border: 1px solid rgba(42, 217, 253, 0.6);
@ -108,23 +126,25 @@ div.el-popper.global-input-search-popover {
.body {
.title {
background: linear-gradient(90deg, #237E9B 0%, rgba(23, 145, 184, 0) 100%);
background: linear-gradient(
90deg,
#237e9b 0%,
rgba(23, 145, 184, 0) 100%
);
padding: 3px 9px;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
}
</style>
<style lang='scss' scoped>
<style lang="scss" scoped>
.HomeFilter {
.btn {
padding: 9px;
background: linear-gradient(180deg, #152E3C 0%, #163A45 100%);
background: linear-gradient(180deg, #152e3c 0%, #163a45 100%);
border-radius: 4px;
overflow: hidden;
height: unset;
@ -132,7 +152,7 @@ div.el-popper.global-input-search-popover {
}
.btn-active {
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
}
}
</style>

62
ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
View File

@ -1,6 +1,13 @@
<template>
<div class='Home'>
<AMapContainer ref="AMapContainerRef" @update:isGisCompleted="(data) => { this.isGisCompleted = data; }" />
<div class="Home">
<AMapContainer
ref="AMapContainerRef"
@update:isGisCompleted="
(data) => {
this.isGisCompleted = data;
}
"
/>
<section class="content">
<!-- 左侧 -->
<div class="content-l">
@ -8,7 +15,11 @@
<FocusedMonitoring class="card-menu" />
<!-- 下 -->
<RoadAndEvents ref="RoadAndEventsRef" :isGisCompleted="isGisCompleted" class="content-l-b card-menu" />
<RoadAndEvents
ref="RoadAndEventsRef"
:isGisCompleted="isGisCompleted"
class="content-l-b card-menu"
/>
</div>
<!-- 右侧 -->
@ -24,7 +35,11 @@
<footer class="footer card-menu">
<div class="footer-title">
<span>济菏高速缩略图</span>
<i class="el-icon-s-fold" style="color: #2AD9FD; transform: rotate(-90deg);" @click.stop="handleShrink" />
<i
class="el-icon-s-fold"
style="color: #2ad9fd; transform: rotate(-90deg)"
@click.stop="handleShrink"
/>
</div>
<div class="footer-content">
<Thumbnail />
@ -41,12 +56,12 @@ import RoadAndEvents from "./components/RoadAndEvents/index.vue";
import AMapContainer from "./components/AMapContainer/index.vue";
import HomeFilter from "./components/HomeFilter/index.vue";
import HomeFrame from "./components/HomeFrame/index.vue";
import Button from '@screen/components/Buttons/Button.vue';
import Button from "@screen/components/Buttons/Button.vue";
// import InfoBoard from "./components/InfoBoard"
export default {
name: 'Home',
name: "Home",
components: {
FocusedMonitoring,
ConditionStatistics,
@ -63,34 +78,37 @@ export default {
isShowInfoBoard: false,
selectedDevice: null,
isGisCompleted: false,
}
};
},
provide() {
return {
getMap: () => this.$refs.AMapContainerRef.getMapInstance()
}
getMap: () => this.$refs.AMapContainerRef.getMapInstance(),
};
},
methods: {
handleShrink(e) {
const translateXElement = e.target.parentElement.parentElement;
const result = (e.target.style.transform.match(/[-0-9]+/)?.[0] || -90) * -1
const result =
(e.target.style.transform.match(/[-0-9]+/)?.[0] || -90) * -1;
e.target.style.transform = `rotate(${result}deg)`;
if (translateXElement.style.transform !== `translateY(calc(100% - 36px))`) {
translateXElement.style.transform = `translateY(calc(100% - 36px))`
if (
translateXElement.style.transform !== `translateY(calc(100% - 36px))`
) {
translateXElement.style.transform = `translateY(calc(100% - 36px))`;
translateXElement.style.position = `absolute`;
translateXElement.style.bottom = `0px`;
} else {
translateXElement.style.transform = `translateY(0)`
translateXElement.style.transform = `translateY(0)`;
translateXElement.style.position = `relative`;
}
}
}
}
},
},
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.Home {
height: 100%;
z-index: 6;
@ -101,7 +119,7 @@ export default {
justify-content: center;
.card-menu {
transition: all .24s linear;
transition: all 0.24s linear;
}
.content {
@ -113,7 +131,7 @@ export default {
height: min-content;
pointer-events: none;
>div {
> div {
pointer-events: auto;
}
@ -127,7 +145,7 @@ export default {
overflow: hidden;
height: 100%;
>div {
> div {
pointer-events: all;
flex: 1;
}
@ -176,7 +194,7 @@ export default {
will-change: height;
bottom: 0;
>div {
> div {
pointer-events: all;
}
@ -205,7 +223,7 @@ export default {
}
i {
transition: all .24s linear;
transition: all 0.24s linear;
cursor: pointer;
}

Write Preview
Loading…
Cancel
Save