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