up
This commit is contained in:
@ -1,28 +1,44 @@
|
||||
<template>
|
||||
<div @click="max">
|
||||
<svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle" />
|
||||
<svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useFullscreen } from '@vueuse/core';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
const settingsStore = useSettingsStore();
|
||||
const { isFullscreen, enter, exit, toggle } = useFullscreen();
|
||||
let navbar = null;
|
||||
let container = null;
|
||||
let hasLogo = null;
|
||||
onMounted(() => {
|
||||
navbar = document.querySelector('.navbar');
|
||||
container = document.querySelector('#tags-view-container');
|
||||
hasLogo = document.querySelector('.has-logo');
|
||||
});
|
||||
|
||||
//获取dom
|
||||
let navbar = null;
|
||||
let app_main = null;
|
||||
let headers = null;
|
||||
let leftWra = null;
|
||||
let rightWra = null;
|
||||
let flag = ref(true);
|
||||
let leftment = null;
|
||||
let main_container = null;
|
||||
onMounted(() => {
|
||||
navbar = document.querySelector('.navDiv');
|
||||
app_main = document.querySelector('.app-main');
|
||||
headers = document.querySelector('.headers');
|
||||
leftWra = document.querySelector('.leftWra');
|
||||
rightWra = document.querySelector('.rightWra');
|
||||
leftment = document.querySelector('.leftment');
|
||||
main_container = document.querySelector('.main-container');
|
||||
});
|
||||
//隐藏导航栏
|
||||
const max = () => {
|
||||
console.log(hasLogo.style);
|
||||
navbar.style.display = 'none';
|
||||
container.style.display = 'none';
|
||||
hasLogo.style.left = '-100px';
|
||||
app_main.style.height = '100%';
|
||||
headers.style.transform = `translate(0, 0)`;
|
||||
leftment.style.display = 'none';
|
||||
main_container.style.marginLeft = '0';
|
||||
document.querySelector('.leftWra').style.top = '80px';
|
||||
document.querySelector('.rightWra').style.top = '80px';
|
||||
// settingsStore.changeSetting({ key: 'topNav', value: flag.value });
|
||||
};
|
||||
</script>
|
||||
|
||||
|
186
src/components/TimeLine/TimeLine.vue
Normal file
186
src/components/TimeLine/TimeLine.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="timeline">
|
||||
<el-slider
|
||||
v-model="value2"
|
||||
:step="step"
|
||||
:marks="marks"
|
||||
show-stops
|
||||
:show-tooltip="false"
|
||||
:min="min"
|
||||
:max="max"
|
||||
></el-slider>
|
||||
<div class="optionWrapper">
|
||||
<img @click="leftHandle" src="@/assets/images/upper.png" alt="《" />
|
||||
<img @click="autoPlay" v-if="!times" src="@/assets/images/start.png" alt="||" />
|
||||
<img @click="pausePlay" v-if="times" src="@/assets/images/suspend.png" alt="||" />
|
||||
<img @click="rightHandle" src="@/assets/images/below.png" alt="》" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
dataSource=[
|
||||
{name:'year1',value:''}
|
||||
]
|
||||
*/
|
||||
|
||||
export default {
|
||||
props: ['dataSource', 'theme'],
|
||||
data() {
|
||||
return {
|
||||
value2: 0, //当前的值
|
||||
marks: {}, //时间轴刻度
|
||||
step: 10,
|
||||
times: null,
|
||||
min: 0,
|
||||
max: 100,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听数值变化进行操作
|
||||
value2: function (val, oldVal) {
|
||||
// 筛选出原始数据
|
||||
const oldData = this.dataSource.find(item => item.name === this.marks[val].label);
|
||||
this.$emit('dataHandle', oldData);
|
||||
},
|
||||
dataSource: function (val, oldVal) {
|
||||
//源数据监听
|
||||
this.dataHandleInit();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.dataHandleInit(); //
|
||||
},
|
||||
methods: {
|
||||
dataHandleInit() {
|
||||
const dataSource = [
|
||||
{ name: '11/25' },
|
||||
{ name: '11/25' },
|
||||
{ name: '11/25' },
|
||||
{ name: '11/25' },
|
||||
{ name: '11/25' },
|
||||
];
|
||||
const markNum = dataSource.map(item => item.name);
|
||||
this.max = (markNum.length - 1) * 10; //时间轴最大值
|
||||
const splitNumber = 10;
|
||||
// const splitNumber = 100 / (markNum.length - 1)
|
||||
// this.step = splitNumber //确定间隔长度
|
||||
let num = 0;
|
||||
let marks = {};
|
||||
// 排序,确定marks
|
||||
dataSource
|
||||
.sort((a, b) => Number(a.name) - Number(b.name))
|
||||
.forEach((item, index) => {
|
||||
if (dataSource.length < 10) {
|
||||
marks[num] = { label: item.name };
|
||||
} else {
|
||||
marks[num] = {
|
||||
label: item.name,
|
||||
style: {
|
||||
top: index % 2 === 1 ? '-40px' : '0px',
|
||||
},
|
||||
};
|
||||
}
|
||||
num += splitNumber;
|
||||
});
|
||||
this.marks = marks; //赋值mark
|
||||
},
|
||||
// 上一个
|
||||
leftHandle() {
|
||||
// 判断是不是第一个
|
||||
if (this.value2 === 0) {
|
||||
this.value2 = this.max;
|
||||
} else {
|
||||
this.value2 -= this.step;
|
||||
}
|
||||
},
|
||||
// 下一个
|
||||
rightHandle() {
|
||||
// 判断是否是最后一个
|
||||
if (this.value2 === this.max) {
|
||||
// 跳转到第一个
|
||||
this.value2 = 0;
|
||||
} else {
|
||||
this.value2 += this.step;
|
||||
}
|
||||
},
|
||||
// 自动播放
|
||||
autoPlay() {
|
||||
this.times = setInterval(() => {
|
||||
this.rightHandle();
|
||||
}, 1000 * 2);
|
||||
},
|
||||
// 暂停播放
|
||||
pausePlay() {
|
||||
clearInterval(this.times);
|
||||
this.times = null;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.timeline {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 4em;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
::v-deep .el-slider {
|
||||
flex: 1;
|
||||
padding: 2em;
|
||||
|
||||
.el-slider__runway {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
min-width: 200px;
|
||||
width: 90%;
|
||||
.el-slider__bar {
|
||||
background-color: rgba(108, 177, 184, 1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
// 点
|
||||
.el-slider__stop {
|
||||
background-color: rgba(108, 177, 184, 1);
|
||||
height: 10px;
|
||||
width: 1px;
|
||||
// top: -2px;
|
||||
}
|
||||
|
||||
.el-slider__button {
|
||||
display: none;
|
||||
// background: linear-gradient(180deg, rgba(101, 220, 252, 1) 0%, rgba(67, 148, 171, 1) 100%);
|
||||
// box-shadow: 0px 2px 4px 0px rgba(29, 142, 173, 0.6);
|
||||
// filter: blur(0px);
|
||||
}
|
||||
|
||||
// marks字
|
||||
.el-slider__marks-text {
|
||||
color: rgba(222, 244, 255, 1);
|
||||
text-align: left;
|
||||
left: 13%;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.optionWrapper {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
color: white;
|
||||
width: fit-content;
|
||||
height: 100%;
|
||||
|
||||
& > img {
|
||||
// width: 40px;
|
||||
height: 48%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
71
src/components/heades/index.vue
Normal file
71
src/components/heades/index.vue
Normal file
@ -0,0 +1,71 @@
|
||||
/
|
||||
<template>
|
||||
<div ref="head" class="headers">
|
||||
种植业生产监管数字化系统
|
||||
<span @click="exitMaximize" class="exit">
|
||||
<img
|
||||
src="@/assets/svg/quxiaoquanping.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
退出全屏
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import usePermissionStore from '@/store/modules/permission';
|
||||
const settingsStore = useSettingsStore();
|
||||
const appStore = useAppStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
let flag = ref(false);
|
||||
onMounted(() => {
|
||||
// console.log(document.querySelector('.menubar'));
|
||||
});
|
||||
const exitMaximize = () => {
|
||||
document.querySelector('.navDiv').style.display = '';
|
||||
document.querySelector('.app-main').style.height = 'calc(100% - 50px)';
|
||||
document.querySelector('.headers').style.transform = `translate(0, -100%)`;
|
||||
document.querySelector('.leftWra').style.top = '10px';
|
||||
document.querySelector('.rightWra').style.top = '10px';
|
||||
document.querySelector('.leftment').style.display = 'block';
|
||||
document.querySelector('.main-container').style.marginLeft =
|
||||
document.querySelector('.leftment').style.width;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.headers {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/header.png');
|
||||
background-size: 100% 100%;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
text-shadow: 0px 0px 6px 0px rgba(41, 255, 255, 1);
|
||||
font-weight: 400;
|
||||
font-size: 21px;
|
||||
letter-spacing: 4px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
transform: translate(0, -100%);
|
||||
.exit {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: rgba(41, 255, 219, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="cesiumContainer"></div>
|
||||
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
Reference in New Issue
Block a user