|
|
@@ -5,24 +5,24 @@
|
|
|
<div class="justify-content">
|
|
|
<div class="justify-content-left">
|
|
|
<div class="box-border">
|
|
|
- <el-button v-if="typeSelect == '订单'" type="primary" class="btn-select" @click="typeChange('订单')">订单</el-button>
|
|
|
- <el-button type="text" v-else class="btn-unSelect" @click="typeChange('订单')">订单</el-button>
|
|
|
+ <el-button v-if="typeSelect == '订单'" type="primary" class="btn-select" @click="typeChange('订单')">{{$t(`订单`)}}</el-button>
|
|
|
+ <el-button type="text" v-else class="btn-unSelect" @click="typeChange('订单')">{{$t(`订单`)}}</el-button>
|
|
|
</div>
|
|
|
<div class="box-border">
|
|
|
- <el-button type="primary" v-if="typeSelect == '出货'" class="btn-select" @click="typeChange('出货')">出货</el-button>
|
|
|
- <el-button type="text" class="btn-unSelect" v-else @click="typeChange('出货')">出货</el-button>
|
|
|
+ <el-button type="primary" v-if="typeSelect == '出货'" class="btn-select" @click="typeChange('出货')">{{$t(`出货`)}}</el-button>
|
|
|
+ <el-button type="text" class="btn-unSelect" v-else @click="typeChange('出货')">{{$t(`出货`)}}</el-button>
|
|
|
</div>
|
|
|
<div class="box-border">
|
|
|
- <el-button type="primary" v-if="typeSelect == '开票'" class="btn-select" @click="typeChange('开票')">开票</el-button>
|
|
|
- <el-button type="text" class="btn-unSelect" v-else @click="typeChange('开票')">开票</el-button>
|
|
|
+ <el-button type="primary" v-if="typeSelect == '开票'" class="btn-select" @click="typeChange('开票')">{{$t(`开票`)}}</el-button>
|
|
|
+ <el-button type="text" class="btn-unSelect" v-else @click="typeChange('开票')">{{$t(`开票`)}}</el-button>
|
|
|
</div>
|
|
|
<div class="box-border">
|
|
|
- <el-button type="primary" v-if="typeSelect == '回款'" class="btn-select" @click="typeChange('回款')">回款</el-button>
|
|
|
- <el-button type="text" class="btn-unSelect" v-else @click="typeChange('回款')">回款</el-button>
|
|
|
+ <el-button type="primary" v-if="typeSelect == '回款'" class="btn-select" @click="typeChange('回款')">{{$t(`回款`)}}</el-button>
|
|
|
+ <el-button type="text" class="btn-unSelect" v-else @click="typeChange('回款')">{{$t(`回款`)}}</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <el-select v-model="param.content.dateType" clearable class="inline-16" size="small" @change="listData" :popper-append-to-body="false">
|
|
|
+ <el-select v-model="param.content.dateType" class="inline-16" size="small" @change="listData" :popper-append-to-body="false">
|
|
|
<el-option :label="$t('去年')" value="去年"></el-option>
|
|
|
<el-option :label="$t('本年')" value="本年"></el-option>
|
|
|
<el-option :label="$t('本季')" value="本季"></el-option>
|
|
|
@@ -35,17 +35,71 @@
|
|
|
<el-progress
|
|
|
color="#6395fa"
|
|
|
type="circle"
|
|
|
- :percentage="50"
|
|
|
+ :percentage="percentage"
|
|
|
:stroke-width="15"
|
|
|
:width="progressWidth"
|
|
|
:format="format"
|
|
|
></el-progress>
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ <div class="content-style-content">
|
|
|
+ <div class="font1">
|
|
|
+ {{$t(`实际金额(元)`)}}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="font2">
|
|
|
+ <span v-if="list.amount > 10000">
|
|
|
+ {{tool.formatAmount(tool.unitConversion(list.amount, 10000), 2)}}
|
|
|
+ <span class="font3">{{$t(`万`)}}</span>
|
|
|
+ </span>
|
|
|
+ <span v-else>
|
|
|
+ {{tool.formatAmount(tool.unitConversion(list.amount, 10000), 2)}}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="font4">{{$t(`年同比`)}}：</span>
|
|
|
+ <span class="font5" style="margin-right: 0.417vw">{{ Math.round(list.tbxsje * 100 * 100) / 100 }}%</span>
|
|
|
+ <img style="vertical-align: middle" v-if="list.tbxsje > 0" width="8" height="7" src="../../../assets/icons/up.png" alt="">
|
|
|
+ <img style="vertical-align: middle" v-if="list.tbxsje < 0" width="8" height="7" src="../../../assets/icons/down.png" alt="">
|
|
|
+ <span class="font4" style="margin-left:1.042vw ">{{$t(`年环比`)}}：</span>
|
|
|
+ <span class="font5" style="margin-right: 0.417vw">{{ Math.round(list.hbxsje * 100 * 100) / 100 }}%</span>
|
|
|
+ <img style="vertical-align: middle" v-if="list.hbxsje > 0" width="8" height="7" src="../../../assets/icons/up.png" alt="">
|
|
|
+ <img style="vertical-align: middle" v-if="list.hbxsje < 0" width="8" height="7" src="../../../assets/icons/down.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="font1" style="margin-top:1.042vw ">
|
|
|
+ {{$t(`目标金额(元)`)}}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="font6">
|
|
|
+ <span v-if="list.target_l > 10000">
|
|
|
+ {{tool.formatAmount(tool.unitConversion(list.target_l, 10000), 2)}}
|
|
|
+ <span class="font7">{{$t(`万`)}}</span>
|
|
|
+ </span>
|
|
|
+ <span v-else>
|
|
|
+ {{tool.formatAmount(tool.unitConversion(list.target_l, 10000), 2)}}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
<div>
|
|
|
+ <span class="font4">{{$t(`目标达成率`)}}：</span>
|
|
|
+ <span class="font5">{{ Math.round((list.wcamount * 100)* 100) / 100 }}%</span>
|
|
|
+ <span class="font4" style="margin-left:0.842vw">{{$t(`实际与目标差额`)}}：</span>
|
|
|
+ <span class="font5" >
|
|
|
+ <span v-if="list.unamount > 10000">
|
|
|
+ {{tool.formatAmount(tool.unitConversion(list.unamount, 10000), 2)}}
|
|
|
+ <span class="font5">{{$t(`万元`)}}</span>
|
|
|
+ </span>
|
|
|
+ <span v-else>
|
|
|
+ {{tool.formatAmount(tool.unitConversion(list.unamount, 10000), 2)}}
|
|
|
+ <span class="font5">{{$t(`元`)}}</span>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div>
|
|
|
+ <div id="salesPanelChart"></div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</borderTemplate>
|
|
|
</div>
|
|
|
@@ -53,12 +107,14 @@
|
|
|
|
|
|
<script>
|
|
|
import borderTemplate from '../components/borderTemplate'
|
|
|
+import {DualAxes} from "@antv/g2plot";
|
|
|
export default {
|
|
|
name: "salesPanel",
|
|
|
components:{borderTemplate},
|
|
|
data(){
|
|
|
return {
|
|
|
typeSelect:'订单',
|
|
|
+ chartCustomerLine:null,
|
|
|
param:{
|
|
|
id:20231009125304,
|
|
|
content:{
|
|
|
@@ -73,14 +129,31 @@ export default {
|
|
|
},
|
|
|
list:'',
|
|
|
windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
|
|
|
- progressWidth: (9.65 * document.documentElement.clientWidth) / 100
|
|
|
+ progressWidth: (9.65 * document.documentElement.clientWidth) / 100,
|
|
|
+ percentage:0,
|
|
|
+ paramChart:{
|
|
|
+ "id": 20241009093604,
|
|
|
+ "content": {
|
|
|
+ "type": '',
|
|
|
+ "dataid": '',
|
|
|
+ "year": 2024,
|
|
|
+ "datatype": 1,
|
|
|
+ "where": {
|
|
|
+ "isleave": ""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ saledateRows:[],
|
|
|
+ tbzzl:[],
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
async listData(){
|
|
|
const res = await this.$api.requested(this.param)
|
|
|
this.list = res.data
|
|
|
+ this.percentage = Math.round(this.list.wcamount * 100 * 100) / 100;
|
|
|
console.log(this.list,'销售看板')
|
|
|
+ this.renderPie()
|
|
|
},
|
|
|
typeChange(val){
|
|
|
if (val == '订单'){
|
|
|
@@ -99,77 +172,225 @@ export default {
|
|
|
this.listData()
|
|
|
},
|
|
|
format(percentage) {
|
|
|
- return this.$t("目标达成率") + "\n\n" + percentage + "%";
|
|
|
+ return this.$t("目标达成率") + '\n\n' + percentage + "%";
|
|
|
+ },
|
|
|
+ /*渲染图表*/
|
|
|
+ async queryModel(){
|
|
|
+ const res = await this.$api.requested(this.paramChart)
|
|
|
+ this.saledateRows = res.data.saledateRows
|
|
|
+ let lastYear = []
|
|
|
+ let nowYear = []
|
|
|
+ let k=0
|
|
|
+ for (var i=0;i<res.data.saledateRows.length;i++){
|
|
|
+ if (res.data.saledateRows[i].name === '去年同期金额'){
|
|
|
+ lastYear[k]=res.data.saledateRows[i]
|
|
|
+ k++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let x=0
|
|
|
+ for (var i=0;i<res.data.saledateRows.length;i++){
|
|
|
+ if (res.data.saledateRows[i].name === '本年金额'){
|
|
|
+ nowYear[x]=res.data.saledateRows[i]
|
|
|
+ x++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let saledateRows = nowYear.concat(lastYear)
|
|
|
+ this.saledateRows = saledateRows.map((item)=>{
|
|
|
+ let value = item.value/10000
|
|
|
+ return {
|
|
|
+ "date":item.date,
|
|
|
+ "name":item.name + '(万元)',
|
|
|
+ "value":value
|
|
|
+ /*"value":item.value*/
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.tbzzl = res.data.tbzzlRows.map((item)=>{
|
|
|
+ return {
|
|
|
+ "date":item.date,
|
|
|
+ "name":item.name,
|
|
|
+ "value":Math.round(((item.value *100)*100)/100)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.chartCustomerLine.changeData([this.saledateRows,this.tbzzl])
|
|
|
+ },
|
|
|
+ renderPie(){
|
|
|
+ this.chartCustomerLine = new DualAxes('salesPanelChart', {
|
|
|
+ data: [this.saledateRows,this.tbzzl],
|
|
|
+ xField: 'date',
|
|
|
+ yField: ['value','value'],
|
|
|
+ geometryOptions: [
|
|
|
+ {
|
|
|
+ geometry: 'column',
|
|
|
+ isGroup: true,
|
|
|
+ seriesField: 'name',
|
|
|
+ color:['#3685FC','#6CD2A1'],
|
|
|
+ label:{
|
|
|
+ position:top,
|
|
|
+ formatter: (datum) =>{
|
|
|
+ return '¥' + this.tool.formatAmount(datum.value,2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ geometry: 'line',
|
|
|
+ seriesField: 'name',
|
|
|
+ color: '#ECB937',
|
|
|
+ smooth: true,
|
|
|
+ label:{
|
|
|
+ formatter: (datum) =>{
|
|
|
+ return datum.value + '%'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ formatter: (datum) => {
|
|
|
+ return {
|
|
|
+ name:datum.name,
|
|
|
+ value:datum.name != '同比增长率'?'¥'+this.tool.formatAmount(datum.value,2):datum.value + '%'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.chartCustomerLine.render();
|
|
|
+ this.queryModel()
|
|
|
},
|
|
|
},
|
|
|
- // watch:{
|
|
|
- // windowWidth (val) {
|
|
|
- // console.log("当前屏幕宽度1111：",val );
|
|
|
- // },
|
|
|
- // },
|
|
|
- // mounted() {
|
|
|
- // var that = this;
|
|
|
- // // <!--把window.onresize事件挂在到mounted函数上-->
|
|
|
- // window.onresize = () => {
|
|
|
- // return (() => {
|
|
|
- // window.fullWidth = document.documentElement.clientWidth;
|
|
|
- // that.windowWidth = window.fullWidth; // 宽
|
|
|
- // console.log(that.windowWidth,'333333pingm')
|
|
|
- // })();
|
|
|
- // };
|
|
|
- // }
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
- .justify-content{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 1.042vw;
|
|
|
- }
|
|
|
- .justify-content-left{
|
|
|
- display: flex;
|
|
|
- justify-content: left;
|
|
|
- }
|
|
|
- .justify-content-left .box-border{
|
|
|
- width: 3.125vw;
|
|
|
- height: 1.563vw;
|
|
|
- border-radius: 0.104vw 0.104vw 0.104vw 0.104vw;
|
|
|
- margin-right: 0.521vw;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .justify-content-left .box-border .btn-select{
|
|
|
- font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 0.833vw;
|
|
|
- color: #E6F4FF;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
- }
|
|
|
- .justify-content-left .box-border .btn-unSelect{
|
|
|
- font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 0.729vw;
|
|
|
- color: #CFDCE5;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .content-style-pie{
|
|
|
- width: 29.167vw;
|
|
|
- height: 11.458vw;
|
|
|
- background: #001E41;
|
|
|
- box-shadow: 0.000vw 0.156vw 0.313vw 0.052vw rgba(0,0,0,0.16);
|
|
|
- border-radius: 5.729vw 5.729vw 0.313vw 5.729vw;
|
|
|
- border: 0.052vw solid #CFDCE5;
|
|
|
- margin-top: 1.042vw;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
+<style>
|
|
|
+.justify-content{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 1.042vw;
|
|
|
+}
|
|
|
+.justify-content-left{
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+}
|
|
|
+.justify-content-left .box-border{
|
|
|
+ width: 3.125vw;
|
|
|
+ height: 1.563vw;
|
|
|
+ border-radius: 0.104vw 0.104vw 0.104vw 0.104vw;
|
|
|
+ margin-right: 0.521vw;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.justify-content-left .box-border .btn-select{
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 0.833vw;
|
|
|
+ color: #E6F4FF;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+.justify-content-left .box-border .btn-unSelect{
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 0.729vw;
|
|
|
+ color: #CFDCE5;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.content-style-pie{
|
|
|
+ width: 29.167vw;
|
|
|
+ height: 11.458vw;
|
|
|
+ background: #001E41;
|
|
|
+ box-shadow: 0.000vw 0.156vw 0.313vw 0.052vw rgba(0,0,0,0.16);
|
|
|
+ border-radius: 5.729vw 5.729vw 0.313vw 5.729vw;
|
|
|
+ border: 0.052vw solid #CFDCE5;
|
|
|
+ margin-top: 1.042vw;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+}
|
|
|
+.content-style-content{
|
|
|
+ margin-top: 0.917vw;
|
|
|
+ margin-left: 4.250vw;
|
|
|
+}
|
|
|
+.content-style-content .font1{
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 0.938vw;
|
|
|
+ color: #CFDCE5;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+.content-style-content .font2{
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1.250vw;
|
|
|
+ color: #6CD2A1;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+.content-style-content .font3{
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 0.625vw;
|
|
|
+ color: #6CD2A1;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+.content-style-content .font4{
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 0.625vw;
|
|
|
+ color: #CFDCE5;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+.content-style-content .font5{
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 0.625vw;
|
|
|
+ color: #E6F4FF;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+.content-style-content .font6{
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1.250vw;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+.content-style-content .font7{
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 0.625vw;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+/deep/ .el-progress__text {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%; /* 设置垂直居中 */
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%) translateY(-50%); /* 移动到圆环中心 */
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 0.833vw !important;
|
|
|
+ color: #E6F4FF;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
/deep/ .el-button--primary:focus, .el-button--primary:hover {
|
|
|
background: #6090f8;
|
|
|
border-color: #6090f8;
|
|
|
color: #6090f8;
|
|
|
}
|
|
|
+ /deep/ .element.style {
|
|
|
+ font-size: 15.9386px;
|
|
|
+ }
|
|
|
</style>
|
qymljy
