|
@@ -0,0 +1,282 @@
|
|
|
+<template>
|
|
|
+ <div class="div-box-new-margin">
|
|
|
+ <div class="div-border-box" id="orderUnshippedGoodsFull">
|
|
|
+ <div class="out">
|
|
|
+ <div>
|
|
|
+ <div class="div-line div-line-right"></div>
|
|
|
+ <div class="title" style="min-width: 220px;">{{$t(`已下单未出货分析`)}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="in">
|
|
|
+ <div class="inline-16 mt-10">
|
|
|
+ <departmentSalesperson ref="departmentSalesperson" @depSelect="depSelect" @personSelect="personSelect" :isFull="isFull"></departmentSalesperson>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <p class="search__label">{{$t('状态')}}:</p>
|
|
|
+ <el-select v-model="param.content.where.isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="queryModel(param.content.dataid,param.content.where.isleave,'状态')" >
|
|
|
+ <el-option :label="$t('在职')" value="1"></el-option>
|
|
|
+ <el-option :label="$t('离职')" value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10 inline-16">
|
|
|
+ <span class="search__label inline-16">{{$t('分析日期')}}:</span>
|
|
|
+ <el-date-picker
|
|
|
+ :append-to-body="!isFull"
|
|
|
+ v-model="param.content.enddate"
|
|
|
+ type="date"
|
|
|
+ :clearable="false"
|
|
|
+ @change="changeDate"
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ size="small"
|
|
|
+ :range-separator="$t('至')"
|
|
|
+ :start-placeholder="$t('开始月份')"
|
|
|
+ :end-placeholder="$t('结束月份')">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div class="inline-15 mt-10">
|
|
|
+ <exportFile :param="param" :columns="tablecols" fileName="已下单未出货分析" :dataid="param.content.dataid"></exportFile>
|
|
|
+ </div>
|
|
|
+ <fullScreen domId="orderUnshippedGoodsFull" @onFull="onFull" @backFull="backFull"></fullScreen>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart">
|
|
|
+ <div id="orderUnshippedGoodsChart" :style="{height: heightChart}"></div>
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 16px;color: #333333;margin: 10px 0 10px 0">{{param.content.dateType?param.content.dateType:'全部'}}</div>
|
|
|
+ <div :style="{height: heightTable}">
|
|
|
+ <tableTemplate ref="table" :layout="tablecols" :data="list" :opwidth="200" :custom="true" :height="height">
|
|
|
+ <template v-slot:customcol="scope">
|
|
|
+ <p v-if="scope.column.columnname === 'province'">
|
|
|
+ {{scope.column.data.province+scope.column.data.city+scope.column.data.county}}
|
|
|
+ </p>
|
|
|
+ <p v-else-if="scope.column.columnname === 'marketprice'">
|
|
|
+ <span v-if="scope.column.data[scope.column.columnname]">
|
|
|
+ ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else>--</span>
|
|
|
+ </p>
|
|
|
+ <p v-else-if="scope.column.columnname === 'defaultprice'">
|
|
|
+ <span v-if="scope.column.data[scope.column.columnname]">
|
|
|
+ ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else>--</span>
|
|
|
+ </p>
|
|
|
+ <p v-else-if="scope.column.columnname === 'defaultamount'">
|
|
|
+ <span v-if="scope.column.data[scope.column.columnname]">
|
|
|
+ ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else>--</span>
|
|
|
+ </p>
|
|
|
+ <p v-else-if="scope.column.columnname === 'price'">
|
|
|
+ <span v-if="scope.column.data[scope.column.columnname]">
|
|
|
+ ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else>--</span>
|
|
|
+ </p>
|
|
|
+ <p v-else-if="scope.column.columnname === 'amount'">
|
|
|
+ <span v-if="scope.column.data[scope.column.columnname]">
|
|
|
+ ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
|
|
|
+ </span>
|
|
|
+ <span v-else>--</span>
|
|
|
+ </p>
|
|
|
+ <p v-else-if="scope.column.columnname === 'returnamount'">
|
|
|
+ <span>¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
|
|
|
+ </p>
|
|
|
+ <div v-else-if="scope.column.columnname === 'nominalpressure'">
|
|
|
+ {{tool.nominalPressureSet(scope.column.data.nominalpressure)}}
|
|
|
+ </div>
|
|
|
+ <p v-else>{{scope.column.data[scope.column.columnname]?$t(scope.column.data[scope.column.columnname]):'--'}}</p>
|
|
|
+ </template>
|
|
|
+ </tableTemplate>
|
|
|
+ <div class="container normal-panel" style="text-align:right;float: right;">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :pager-count="7"
|
|
|
+ :page-sizes="[20, 50,100, 200]"
|
|
|
+ :page-size="20"
|
|
|
+ layout="total,sizes, prev, pager, next, jumper"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { Bar } from '@antv/g2plot';
|
|
|
+import departmentSalesperson from "@/views/salesData/components/departmentSalesperson";
|
|
|
+import tableTemplate from '@/views/salesData/components/table';
|
|
|
+import fullScreen from "@/views/salesData/components/fullScreen";
|
|
|
+import exportFile from '@/components/export_file/index'
|
|
|
+export default {
|
|
|
+ name: "orderUnshippedGoods",
|
|
|
+ props:['dataid','scrollHeight','windowWidth'],
|
|
|
+ components:{departmentSalesperson,tableTemplate,fullScreen,exportFile},
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ chartBar:null,
|
|
|
+ param:{
|
|
|
+ "id": 2025040113445202,
|
|
|
+ "content": {
|
|
|
+ "type": 0,
|
|
|
+ "dataid": '',
|
|
|
+ "enddate": new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),//分析日期
|
|
|
+ "dateType": "",//图标联动 一周 一月 一季 一季以上 可不传 不传默认查全部
|
|
|
+ "pageSize":20,
|
|
|
+ "pageNumber":1,
|
|
|
+ "where":{
|
|
|
+ 'isleave':'1'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ list:[],
|
|
|
+ chartData:[],
|
|
|
+ tablecols:[],
|
|
|
+ currentPage:0,
|
|
|
+ total:0,
|
|
|
+ enddate:new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),
|
|
|
+ hoverData:[],
|
|
|
+ heightChart:'100%',
|
|
|
+ heightTable:'403px',
|
|
|
+ height:'356px',
|
|
|
+ isFull:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ async listData(val){
|
|
|
+ this.renderPie(val)
|
|
|
+ },
|
|
|
+ async queryModel(val,isleave,state){
|
|
|
+ if (state == '状态'){
|
|
|
+ this.$refs.departmentSalesperson.person = ''
|
|
|
+ this.param.content.dataid = this.param.content.type == 0?-1:val
|
|
|
+ }else {
|
|
|
+ this.param.content.dataid = val?val : this.dataid
|
|
|
+ }
|
|
|
+ this.param.content.where.isleave = isleave
|
|
|
+ const res = await this.$api.requested(this.param)
|
|
|
+ if (res.data.length === 1){
|
|
|
+ if (res.data[0].isEmpty == 1){
|
|
|
+ this.list = []
|
|
|
+ this.total = 0
|
|
|
+ this.currentPage = 0
|
|
|
+ }else {
|
|
|
+ this.list = res.data
|
|
|
+ this.total = res.total
|
|
|
+ this.currentPage = res.data.currentPage
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ this.list = res.data
|
|
|
+ this.total = res.total
|
|
|
+ this.currentPage = res.data.currentPage
|
|
|
+ }
|
|
|
+ this.chartData = res.data[0].trend.map(item=>{
|
|
|
+ return {
|
|
|
+ "sequence": item.sequence,
|
|
|
+ "value": item.value,
|
|
|
+ "key": item.key,
|
|
|
+ "type":'订单行数'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.chartBar.changeData(this.chartData)
|
|
|
+ state == '状态' ? this.personData() : ''
|
|
|
+ },
|
|
|
+ renderPie(val){
|
|
|
+ this.chartBar = new Bar('orderUnshippedGoodsChart', {
|
|
|
+ data:this.chartData,
|
|
|
+ xField: 'value',
|
|
|
+ yField: 'key',
|
|
|
+ seriesField: 'type',
|
|
|
+ label:{
|
|
|
+ position:top
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ position: 'top-left',
|
|
|
+ },
|
|
|
+ interactions: [{ type: 'element-single-selected' }]
|
|
|
+ });
|
|
|
+ this.chartBar.on('plot:click',ev=>{
|
|
|
+ const states = this.chartBar.getStates()
|
|
|
+ this.param.content.dateType = states.length === 0 ?'':ev.data.data.key
|
|
|
+ this.param.content.pageNumber = 1
|
|
|
+ this.queryTable(this.param.content.dataid,this.param.content.where.isleave)
|
|
|
+ })
|
|
|
+ this.chartBar.render();
|
|
|
+ this.queryModel(val,this.param.content.where.isleave)
|
|
|
+ },
|
|
|
+ async queryTable(val,isleave){
|
|
|
+ this.param.content.dataid = val || this.dataid
|
|
|
+ this.param.content.where.isleave = isleave
|
|
|
+ const res = await this.$api.requested(this.param)
|
|
|
+ this.list = res.data
|
|
|
+ this.total = res.total
|
|
|
+ this.currentPage = res.pageNumber
|
|
|
+ },
|
|
|
+ changeDate(){
|
|
|
+ this.queryModel(this.param.content.dataid,this.param.content.where.isleave)
|
|
|
+ },
|
|
|
+ /*选择部门*/
|
|
|
+ depSelect(val){
|
|
|
+ this.param.content.type = 1
|
|
|
+ this.param.content.dataid = val
|
|
|
+ this.queryModel(val,this.param.content.where.isleave)
|
|
|
+ },
|
|
|
+ /*选择业务员*/
|
|
|
+ personSelect(val){
|
|
|
+ this.param.content.type = 0
|
|
|
+ this.param.content.dataid = val
|
|
|
+ this.queryModel(val,this.param.content.where.isleave)
|
|
|
+ },
|
|
|
+ /*获取新的业务员列表*/
|
|
|
+ async personData(){
|
|
|
+ let param = {
|
|
|
+ id: 20230620102004,
|
|
|
+ content: {
|
|
|
+ isleave:this.param.content.where.isleave
|
|
|
+ },
|
|
|
+ }
|
|
|
+ const res = await this.$api.requested(param)
|
|
|
+ this.$refs.departmentSalesperson.personnelList = res.data.hr
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ // console.log(`每页 ${val} 条`);
|
|
|
+ this.param.content.pageSize = val
|
|
|
+ this.queryTable(this.param.content.dataid,this.param.content.where.isleave)
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ // console.log(`当前页: ${val}`);
|
|
|
+ this.param.content.pageNumber = val
|
|
|
+ this.queryTable(this.param.content.dataid,this.param.content.where.isleave)
|
|
|
+ },
|
|
|
+ /*全屏*/
|
|
|
+ onFull(){
|
|
|
+ /*this.heightChart = 'calc(100vh - 85px)'*/
|
|
|
+ this.heightChart = '98%'
|
|
|
+ /* this.heightTable = '883px'
|
|
|
+ this.height = '886px'*/
|
|
|
+ this.heightTable = 'calc(100vh - 800px)'
|
|
|
+ this.height = this.windowWidth > 1205 ? 'calc(100vh - 555px)' :'calc(100vh - 620px)'
|
|
|
+ this.isFull = true
|
|
|
+ },
|
|
|
+ /*退出全屏*/
|
|
|
+ backFull(val){
|
|
|
+ this.heightChart = '100%'
|
|
|
+ this.heightTable = '403px'
|
|
|
+ this.height = '356px'
|
|
|
+ this.isFull = false
|
|
|
+ this.$emit('backFull',val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.tablecols = this.tool.tabelCol(this.$route.name).delayedShipmentTable.tablecols
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|