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

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

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

Write Preview
Loading…
Cancel
Save