|
@@ -0,0 +1,401 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!-- 本月 -->
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10" :offset="6">
|
|
|
+ <el-divider>
|
|
|
+ <span class="title-font">本月</span>
|
|
|
+ </el-divider>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <borderTemp>
|
|
|
+ <template #content>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts">订单目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 18px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listby.wcamount * 100,2) + '%'}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ <span v-if="listby.unamount < 0" style="color: #E13333">
|
|
|
+ ¥{{tool.formatAmount(listby.unamount,2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else style="color: #009270">
|
|
|
+ ¥{{tool.formatAmount(listby.unamount,2)}}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts" >实际/目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ {{'¥'+tool.formatAmount(listby.amount,2) + '/'+ '¥'+ tool.formatAmount(listby.target_l,2)}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </borderTemp>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <borderTemp>
|
|
|
+ <template #content>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts">出货目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 18px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listby.wcoutamount * 100,2) + '%'}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ <span v-if="listby.unoutamount < 0" style="color: #E13333">
|
|
|
+ ¥{{tool.formatAmount(listby.unoutamount,2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else style="color: #009270">
|
|
|
+ ¥{{tool.formatAmount(listby.unoutamount,2)}}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts" >实际/目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ {{'¥'+tool.formatAmount(listby.amount,2) + '/'+ '¥'+ tool.formatAmount(listby.target_l,2)}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </borderTemp>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <borderTemp>
|
|
|
+ <template #content>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts">开票目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 18px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listby.wcinvoiceamount * 100,2) + '%'}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ <span v-if="listby.uninvoiceamount < 0" style="color: #E13333">
|
|
|
+ ¥{{tool.formatAmount(listby.uninvoiceamount,2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else style="color: #009270">
|
|
|
+ ¥{{tool.formatAmount(listby.uninvoiceamount,2)}}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts" >实际/目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ {{'¥'+tool.formatAmount(listby.amount,2) + '/'+ '¥'+ tool.formatAmount(listby.target_l,2)}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </borderTemp>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <!-- 本季 -->
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10" :offset="6">
|
|
|
+ <el-divider>
|
|
|
+ <span class="title-font">本季</span>
|
|
|
+ </el-divider>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <borderTemp>
|
|
|
+ <template #content>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts">订单目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 18px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listbj.wcamount * 100,2) + '%'}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ <span v-if="listby.unamount < 0" style="color: #E13333">
|
|
|
+ ¥{{tool.formatAmount(listby.unamount,2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else style="color: #009270">
|
|
|
+ ¥{{tool.formatAmount(listby.unamount,2)}}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts" >实际/目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listbj.amount,2) + '/'+ tool.formatAmount(listbj.target_l,2)}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </borderTemp>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <borderTemp>
|
|
|
+ <template #content>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts">出货目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 18px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listbj.wcoutamount * 100,2) + '%'}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ <span v-if="listby.unoutamount < 0" style="color: #E13333">
|
|
|
+ ¥{{tool.formatAmount(listby.unoutamount,2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else style="color: #009270">
|
|
|
+ ¥{{tool.formatAmount(listby.unoutamount,2)}}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts" >实际/目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listbj.amount,2) + '/'+ tool.formatAmount(listbj.target_l,2)}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </borderTemp>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <borderTemp>
|
|
|
+ <template #content>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts">开票目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 18px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listbj.wcinvoiceamount * 100,2) + '%'}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ <span v-if="listby.uninvoiceamount < 0" style="color: #E13333">
|
|
|
+ ¥{{tool.formatAmount(listby.uninvoiceamount,2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else style="color: #009270">
|
|
|
+ ¥{{tool.formatAmount(listby.uninvoiceamount,2)}}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts" >实际/目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listbj.amount,2) + '/'+ tool.formatAmount(listbj.target_l,2)}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </borderTemp>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <!-- 本年 -->
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10" :offset="6">
|
|
|
+ <el-divider>
|
|
|
+ <span class="title-font">本年</span>
|
|
|
+ </el-divider>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <borderTemp>
|
|
|
+ <template #content>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts">订单目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 18px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listbn.wcamount * 100,2) + '%'}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ <span v-if="listby.unamount < 0" style="color: #E13333">
|
|
|
+ ¥{{tool.formatAmount(listby.unamount,2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else style="color: #009270">
|
|
|
+ ¥{{tool.formatAmount(listby.unamount,2)}}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts" >实际/目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listbn.amount,2) + '/'+ tool.formatAmount(listbn.target_l,2)}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </borderTemp>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <borderTemp>
|
|
|
+ <template #content>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts">出货目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 18px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listbn.wcoutamount * 100,2) + '%'}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ <span v-if="listby.unoutamount < 0" style="color: #E13333">
|
|
|
+ ¥{{tool.formatAmount(listby.unoutamount,2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else style="color: #009270">
|
|
|
+ ¥{{tool.formatAmount(listby.unoutamount,2)}}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts" >实际/目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listbn.amount,2) + '/'+ tool.formatAmount(listbn.target_l,2)}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </borderTemp>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <borderTemp>
|
|
|
+ <template #content>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts">开票目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 18px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listbn.wcinvoiceamount * 100,2) + '%'}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ <span v-if="listby.uninvoiceamount < 0" style="color: #E13333">
|
|
|
+ ¥{{tool.formatAmount(listby.uninvoiceamount,2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else style="color: #009270">
|
|
|
+ ¥{{tool.formatAmount(listby.uninvoiceamount,2)}}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col class="title-fonts" >实际/目标</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <span style="font-size: 12px;padding: 0 0 0 5px">
|
|
|
+ {{tool.formatAmount(listbn.amount,2) + '/'+ tool.formatAmount(listbn.target_l,2)}}
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </borderTemp>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import borderTemp from '../components/border'
|
|
|
+export default {
|
|
|
+ name: "performanceData",
|
|
|
+ props:['param','isDep','dataid','isPerson'],
|
|
|
+ components:{borderTemp},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ listby:'',
|
|
|
+ listbj:'',
|
|
|
+ listbn:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ async queryList(){
|
|
|
+ /*this.isDep ? this.param.content.type = 1: this.isPerson ? this.param.content.type = 0 : this.param.content.type = ''*/
|
|
|
+ this.param.content.dataType = 3
|
|
|
+ /* this.param.content.dataid = this.dataid*/
|
|
|
+ const res = await this.$api.requested(this.param)
|
|
|
+ this.listby = res.data.by
|
|
|
+ this.listbj = res.data.bj
|
|
|
+ this.listbn = res.data.bn
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .title-fonts{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #888;
|
|
|
+ padding: 5px 0 0 5px;
|
|
|
+ }
|
|
|
+</style>
|