This commit is contained in:
2023-04-23 09:41:12 +08:00
parent 0339a49d2b
commit d20a1e0ca1
1552 changed files with 98219 additions and 190234 deletions

View File

@ -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>

View 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>

View 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>

View File

@ -1,5 +1,5 @@
<template>
<div id="cesiumContainer"></div>
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
</template>
<script setup>