保存进度!
This commit is contained in:
parent
18d4620729
commit
92553a9ba9
|
@ -9,8 +9,6 @@
|
|||
-->
|
||||
<template>
|
||||
<div class="archievement-wrapper">
|
||||
<span>总业绩</span>
|
||||
<span>¥ {{ archivement_count }}</span>
|
||||
<div id="chartWrapper"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -22,10 +20,6 @@ import * as echarts from "echarts";
|
|||
export default {
|
||||
name: "ArchievementChartComponent",
|
||||
props: {
|
||||
total_archievement: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
chart_data: {
|
||||
type: Array,
|
||||
require: true,
|
||||
|
@ -34,15 +28,9 @@ export default {
|
|||
setup(props)
|
||||
{
|
||||
const ui = reactive({
|
||||
total_archievement: props.total_archievement,
|
||||
chart_data: props.chart_data,
|
||||
});
|
||||
|
||||
const archivement_count = computed(() =>
|
||||
{
|
||||
return ui.total_archievement;
|
||||
});
|
||||
|
||||
//设置图表
|
||||
const initCharts = () =>
|
||||
{
|
||||
|
@ -80,33 +68,33 @@ export default {
|
|||
initCharts();
|
||||
});
|
||||
|
||||
return { ui, archivement_count, initCharts, };
|
||||
return { ui, initCharts, };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.archievement-wrapper {
|
||||
height: 360px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: center;
|
||||
// align-items: stretch;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #25e6e6;
|
||||
text-align: center;
|
||||
// span {
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// color: #25e6e6;
|
||||
// text-align: center;
|
||||
|
||||
font: {
|
||||
size: 35px;
|
||||
family: "FZ-ZHUOHEI";
|
||||
}
|
||||
// font: {
|
||||
// size: 35px;
|
||||
// family: "FZ-ZHUOHEI";
|
||||
// }
|
||||
|
||||
flex-grow: 0;
|
||||
}
|
||||
// flex-grow: 0;
|
||||
// }
|
||||
|
||||
#chartWrapper {
|
||||
min-height: 200px;
|
||||
|
|
|
@ -60,7 +60,7 @@ export default {
|
|||
}
|
||||
|
||||
.el-progress {
|
||||
margin: 8px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.percentage-value {
|
||||
|
|
|
@ -12,12 +12,16 @@
|
|||
<div class="center-wrapper">
|
||||
<span class="slogan">对标先进 比学赶超</span>
|
||||
<div class="total-archievement-wrapper">
|
||||
<span>总业绩</span>
|
||||
<span>¥ {{ getTotalArchievement }}</span>
|
||||
</div>
|
||||
<div class="archievement-wrapper">
|
||||
<div class="total-archievement-rate-wrapper">
|
||||
<ArchievementCompleteRateComponent indicator="续保完成率" percentage=65 />
|
||||
<ArchievementCompleteRateComponent indicator="车非完成率" percentage=66 />
|
||||
</div>
|
||||
<div class="total-archievement-charts-wrapper">
|
||||
<ArchievementChart total_archievement="435220" :chart_data="[200, 230, 224, 218, 135, 147, 260, 800]" />
|
||||
<ArchievementChart total_archievement="435220" :chart_data="ui.chartData" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="reward-wrapper"></div>
|
||||
|
@ -29,6 +33,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, reactive } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { loadStaffInfo } from "@/utils/api/localStorage.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
@ -37,11 +42,25 @@ import ArchievementCompleteRateComponent from "@/components/ArchievementComplete
|
|||
|
||||
export default {
|
||||
name: "DesktopArchievement",
|
||||
components: { ArchievementChart, ArchievementCompleteRateComponent, },
|
||||
components: {
|
||||
ArchievementChart,
|
||||
ArchievementCompleteRateComponent,
|
||||
},
|
||||
setup()
|
||||
{
|
||||
const router = useRouter();
|
||||
const staffInfo = loadStaffInfo();
|
||||
const ui = reactive({
|
||||
chartData: [200, 230, 224, 218, 135, 147, 260, 800,],
|
||||
totalArchievement: 456778,
|
||||
});
|
||||
|
||||
const getTotalArchievement = computed(() =>
|
||||
{
|
||||
const archievement = String(ui.totalArchievement).valueOf();
|
||||
|
||||
return archievement;
|
||||
});
|
||||
|
||||
//检查存储的登录信息,不存在则返回登录页面
|
||||
if (staffInfo.P13UID == "")
|
||||
|
@ -54,6 +73,8 @@ export default {
|
|||
|
||||
router.push("/login");
|
||||
}
|
||||
|
||||
return { ui, getTotalArchievement, };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
@ -94,6 +115,7 @@ export default {
|
|||
padding: 15px 0px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
flex-grow: 0;
|
||||
|
||||
font: {
|
||||
family: "FZ-ZHUOHEI";
|
||||
|
@ -113,8 +135,26 @@ export default {
|
|||
}
|
||||
|
||||
.total-archievement-wrapper {
|
||||
height: 80px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #25e6e6;
|
||||
text-align: center;
|
||||
|
||||
font: {
|
||||
size: 35px;
|
||||
family: "FZ-ZHUOHEI";
|
||||
}
|
||||
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.archievement-wrapper {
|
||||
//业绩部分
|
||||
height: 360px;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
|
@ -125,7 +165,7 @@ export default {
|
|||
min-width: 180px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue