feat:新增进度条功能 (#68)
This commit is contained in:
parent
3ef5e75cba
commit
70f5c45abe
@ -28,7 +28,7 @@ export default defineComponent({
|
||||
setup(props, { emit }) {
|
||||
const moduleConfig = inject('moduleConfig');
|
||||
const optionConfigVisible = ref(false);
|
||||
|
||||
|
||||
const addOther = () => {
|
||||
emit('addOther');
|
||||
};
|
||||
|
@ -14,7 +14,7 @@ export default defineComponent({
|
||||
provide() {
|
||||
return {
|
||||
currentEditKey: store.getters['edit/currentEditKey'],
|
||||
moduleConfig: computed(()=>this.moduleConfig),
|
||||
moduleConfig: computed(() => this.moduleConfig),
|
||||
};
|
||||
},
|
||||
props: {
|
||||
|
@ -1,57 +1,97 @@
|
||||
<template>
|
||||
<div class="progress-outer">
|
||||
<div
|
||||
class="progress-inner"
|
||||
:style="{
|
||||
transition: 'all 0.5s',
|
||||
width: progressConf.precent || 0,
|
||||
}"
|
||||
></div>
|
||||
<div class="progress-inner-wrapper-pc">
|
||||
<div
|
||||
class="progress-inner-pc"
|
||||
:style="{
|
||||
transition: 'all 0.5s',
|
||||
height: progressConf.precent || 0,
|
||||
}"
|
||||
></div>
|
||||
<div class="progress-position">
|
||||
<div class="progress-inner-wrapper-mobile">
|
||||
<div
|
||||
class="progress-inner-mobile"
|
||||
:style="{
|
||||
transition: 'all 0.5s',
|
||||
width: precent || 0,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="progress-inner-wrapper-pc">
|
||||
<div class="progress-inner-bar">
|
||||
<div
|
||||
class="progress-inner-pc"
|
||||
:style="{
|
||||
transition: 'all 0.5s',
|
||||
height: precent || 0,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="percent-pc">{{ precent || '0%' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="percent-pc">{{ progressConf.precent || '0%' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProgressBar',
|
||||
props: {
|
||||
progressConf: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
<script setup>
|
||||
import { useProgressBar } from '../hook/useProgress';
|
||||
|
||||
const { precent } = useProgressBar();
|
||||
</script>
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.progress-outer {
|
||||
z-index: 10000;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
top: 0;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.progress-inner {
|
||||
display: block;
|
||||
z-index: 10000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
.progress-inner-wrapper-pc,
|
||||
.percent-pc {
|
||||
.progress-inner-wrapper-pc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: 930px) {
|
||||
.progress-position {
|
||||
position: absolute;
|
||||
right: -24px;
|
||||
top: 160px;
|
||||
}
|
||||
.progress-inner-wrapper-pc {
|
||||
position: fixed;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 2px;
|
||||
width: 56px;
|
||||
height: 240px;
|
||||
.progress-inner-bar {
|
||||
height: 190px;
|
||||
width: 8px;
|
||||
background: #f2f4f7;
|
||||
border-radius: 4px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.percent-pc {
|
||||
font-size: 12px;
|
||||
color: #6e707c;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.progress-inner-pc {
|
||||
border-radius: 2px;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 930px) {
|
||||
.progress-outer {
|
||||
.progress-inner-wrapper-mobile {
|
||||
position: fixed;
|
||||
width: 750px;
|
||||
height: 2px;
|
||||
top: 0;
|
||||
background-color: #f5f5f5;
|
||||
display: block;
|
||||
}
|
||||
.progress-inner-mobile {
|
||||
display: block;
|
||||
z-index: 10000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
40
web/src/render/hook/useProgress.js
Normal file
40
web/src/render/hook/useProgress.js
Normal file
@ -0,0 +1,40 @@
|
||||
import store from '../store/index';
|
||||
import { computed } from 'vue';
|
||||
export const useProgressBar = () => {
|
||||
const isVariableEmpty = (variable) => {
|
||||
if (variable === undefined || variable === null) {
|
||||
return true;
|
||||
}
|
||||
if (typeof variable === 'string' && variable.trim() === '') {
|
||||
return true;
|
||||
}
|
||||
if (Array.isArray(variable) && variable.length === 0) {
|
||||
return true;
|
||||
}
|
||||
if (typeof variable === 'object' && Object.keys(variable).length === 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const surveySchedule = computed(() => {
|
||||
let data = {
|
||||
fillCount: 0,
|
||||
topicCount: 0,
|
||||
};
|
||||
const formValues = store.state.formValues;
|
||||
for (let key in formValues) {
|
||||
if (key.split('_').length > 1) continue;
|
||||
data.topicCount++;
|
||||
if (!isVariableEmpty(formValues[key])) data.fillCount++;
|
||||
}
|
||||
return data;
|
||||
});
|
||||
|
||||
const precent = computed(() => {
|
||||
const { fillCount, topicCount } = surveySchedule.value;
|
||||
return Math.floor((100 / topicCount) * fillCount) + '%';
|
||||
});
|
||||
|
||||
return { surveySchedule, precent };
|
||||
};
|
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="index">
|
||||
<progressBar />
|
||||
<Header></Header>
|
||||
<mainRenderer ref="main"></mainRenderer>
|
||||
<submit
|
||||
@ -14,6 +15,7 @@
|
||||
import Header from '../components/header.vue';
|
||||
import submit from '../components/submit.vue';
|
||||
import mainRenderer from '../components/mainRenderer';
|
||||
import progressBar from '../components/progressBar';
|
||||
import { submitForm } from '@/render/api/survey';
|
||||
import encrypt from '../utils/encrypt';
|
||||
|
||||
@ -33,6 +35,7 @@ export default {
|
||||
Header,
|
||||
submit,
|
||||
mainRenderer,
|
||||
progressBar,
|
||||
},
|
||||
computed: {
|
||||
formModel() {
|
||||
|
Loading…
Reference in New Issue
Block a user