成果展示-时间轴可播放版
parent
f869482c01
commit
159e822a87
|
|
@ -1,81 +1,80 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="RightBox">
|
||||
<a-tooltip class="box-item" placement="top">
|
||||
<template #title>
|
||||
<span>上一年</span>
|
||||
</template>
|
||||
<a-button type="text" @click="handleSubYear">
|
||||
<Icon icon="bi:chevron-double-left" style="margin-left: 5px; color: #ffffff" :size="20" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip class="box-item" placement="top">
|
||||
<template #title>
|
||||
<span>上一月</span>
|
||||
</template>
|
||||
<a-button type="text" @click="handleSubMouth">
|
||||
<Icon icon="bi:chevron-left" style="margin-left: 5px; color: #ffffff" :size="20" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-row ::gutter="0">
|
||||
<a-col :span="5">
|
||||
<div class="RightBox">
|
||||
<a-tooltip class="box-item" placement="top">
|
||||
<template #title>
|
||||
<span>上一年</span>
|
||||
</template>
|
||||
<a-button type="text" @click="handleSubYear">
|
||||
<Icon icon="bi:chevron-double-left" style="color: #ffffff" :size="30" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip class="box-item" placement="top">
|
||||
<template #title>
|
||||
<span>上一月</span>
|
||||
</template>
|
||||
<a-button type="text" style="margin-left: 10px" @click="handleSubMouth">
|
||||
<Icon icon="bi:chevron-left" style="color: #ffffff" :size="30" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<a-tooltip class="box-item" placement="top">
|
||||
<template #title>
|
||||
<span>播放/暂停</span>
|
||||
</template>
|
||||
<a-button type="text" @click="handlePlay">
|
||||
<Icon
|
||||
v-if="!playSwitch"
|
||||
icon="bi:play"
|
||||
style="margin-left: 5px; color: #ffffff"
|
||||
:size="23"
|
||||
/>
|
||||
<Icon
|
||||
v-if="playSwitch"
|
||||
icon="bi:pause"
|
||||
style="margin-left: 5px; color: #ffffff"
|
||||
:size="23"
|
||||
/>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip class="box-item" placement="top">
|
||||
<template #title>
|
||||
<span>播放/暂停</span>
|
||||
</template>
|
||||
<a-button type="text" style="margin-left: 10px" @click="handlePlay">
|
||||
<Icon v-if="!playSwitch" icon="bi:play-circle" style="color: #ffffff" :size="30" />
|
||||
<Icon v-if="playSwitch" icon="bi:pause-circle" style="color: #ffffff" :size="30" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<a-tooltip class="box-item" placement="top">
|
||||
<template #title>
|
||||
<span>下一月</span>
|
||||
</template>
|
||||
<a-button type="text" @click="handleAddMouth">
|
||||
<Icon icon="bi:chevron-right" style="margin-left: 5px; color: #ffffff" :size="20" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip class="box-item" placement="top">
|
||||
<template #title>
|
||||
<span>下一年</span>
|
||||
</template>
|
||||
<a-button type="text" @click="handleAddYear">
|
||||
<Icon icon="bi:chevron-double-right" style="color: #ffffff" :size="20" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-tooltip class="box-item" placement="top">
|
||||
<template #title>
|
||||
<span>下一月</span>
|
||||
</template>
|
||||
<a-button type="text" style="margin-left: 10px" @click="handleAddMouth">
|
||||
<Icon icon="bi:chevron-right" style="color: #ffffff" :size="30" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip class="box-item" placement="top">
|
||||
<template #title>
|
||||
<span>下一年</span>
|
||||
</template>
|
||||
<a-button type="text" style="margin-left: 10px" @click="handleAddYear">
|
||||
<Icon icon="bi:chevron-double-right" style="color: #ffffff" :size="30" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="19">
|
||||
<div class="timeBox">
|
||||
<a-slider
|
||||
v-model:value="value"
|
||||
:tooltipOpen="true"
|
||||
:tip-formatter="getValue"
|
||||
:marks="marks"
|
||||
:step="1"
|
||||
:max="maxDays"
|
||||
:min="1"
|
||||
@afterChange="sliderChange"
|
||||
>
|
||||
<template #mark="{ label, point }">
|
||||
<template v-if="label.slice(-2) == '01'">
|
||||
<span :style="{ color: 'white' }">{{ label }}</span>
|
||||
</template>
|
||||
<template v-if="label.slice(-4) == '1231'">
|
||||
<span :style="{ color: 'white' }">{{ label }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-slider>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- </div>
|
||||
<div class="timeBox">
|
||||
<a-slider
|
||||
v-model:value="value"
|
||||
:tooltipOpen="true"
|
||||
:tip-formatter="getValue"
|
||||
:marks="marks"
|
||||
:step="1"
|
||||
:max="maxDays"
|
||||
:min="1"
|
||||
@afterChange="sliderChange"
|
||||
>
|
||||
<template #mark="{ label, point }">
|
||||
<!-- <template v-if="label.splice(-2) == '01'"> -->
|
||||
<!-- <span :style="{ color: 'white' }">{{ label.splice(0, 6) }}</span> -->
|
||||
<!-- </template> -->
|
||||
<template>
|
||||
<span :style="{ color: 'white' }">{{ label }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-slider>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -132,14 +131,13 @@
|
|||
};
|
||||
|
||||
function addValue() {
|
||||
console.log(playSwitch.value);
|
||||
if (playSwitch.value) {
|
||||
setTimeout(() => {
|
||||
if (playSwitch.value) {
|
||||
value.value = parseInt(dayjs(getValue(value.value)).add(7, 'day').dayOfYear());
|
||||
emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(value.value))]);
|
||||
addValue();
|
||||
}
|
||||
}, 5000);
|
||||
value.value = parseInt(dayjs(getValue(value.value)).add(7, 'day').dayOfYear());
|
||||
emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(value.value))]);
|
||||
addValue();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -205,25 +203,21 @@
|
|||
<style lang="less" scoped>
|
||||
.timeBox {
|
||||
position: relative;
|
||||
top: 55px;
|
||||
left: 250px;
|
||||
top: 40px;
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
.RightBox {
|
||||
position: absolute;
|
||||
border: 2px red;
|
||||
top: 45px;
|
||||
left: 30px;
|
||||
position: relative;
|
||||
top: 40px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.box-item {
|
||||
justify-content: center;
|
||||
width: 25px;
|
||||
|
||||
Icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
<div class="title"> 图层列表 </div>
|
||||
<div class="case-tree">
|
||||
<a-directory-tree
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
v-model:checkedKeys="checkedKeys"
|
||||
multiple
|
||||
:tree-data="treeData"
|
||||
@select="onSelect"
|
||||
|
|
@ -19,7 +21,7 @@
|
|||
ref="mapboxComponentRef"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
height: `calc(100vh)`,
|
||||
height: `calc(100vh - 90px)`,
|
||||
width: `100%`,
|
||||
marginLeft: '6px',
|
||||
top: '0px',
|
||||
|
|
@ -61,6 +63,8 @@
|
|||
const { createMessage } = useMessage();
|
||||
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
const expandedKeys = ref<string[]>(['1', '2', '3']);
|
||||
const checkedKeys = ref<string[]>([]);
|
||||
const treeData: any = ref(prepareTreeData);
|
||||
let tableData1: any = [];
|
||||
let tableData2: any = [];
|
||||
|
|
@ -360,14 +364,13 @@
|
|||
</script>
|
||||
<style type="less" scoped>
|
||||
.case-tree-container {
|
||||
width: 300px;
|
||||
width: 320px;
|
||||
height: 720px;
|
||||
background: #041b36;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 100px;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -390,10 +393,10 @@
|
|||
}
|
||||
|
||||
.timeLineBox {
|
||||
position: relative;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 420px;
|
||||
bottom: -690px;
|
||||
bottom: 20px;
|
||||
width: 1200px;
|
||||
height: 120px;
|
||||
border: 2px #155dd8;
|
||||
|
|
|
|||
Loading…
Reference in New Issue