xiaoshi_system/src/views/product/components/echarts/components/echarts.vue

<template>
    <div style="height:100%;padding:0 20px;">
        <div>
            <div style="display:flex;justify-content: space-between;">
                <el-form :inline="true">
                <el-form-item label="时间">
                    <el-select v-model="queryParams.timeUnit" @change="changeEcharts()"  placeholder="请选择时间">
                        <el-option
                            v-for="item in timeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地区">
                    <el-select v-model="queryParams.area" @change="changeEcharts()" clearable  placeholder="请选择地区">
                        <el-option
                            v-for="item in areaList"
                            :key="item"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公司" v-if="type == 1">
                    <el-select v-model="queryParams.companyName" @change="changeEcharts()" clearable  placeholder="请选择公司">
                        <el-option
                            v-for="item in companyList"
                            :key="item"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="趋势图">
                    <el-select v-model="queryParams.relation" @change="changeRelation()"  placeholder="请选择公司">
                        <el-option
                            v-for="item in relationList"
                            :key="item.value"
                            :label="item.label.xStr+'与'+item.label.yStr"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            </div>

            
        </div>
        <div>
            <component v-if="type == 1" :is="component" :ref="components" :domId="components" ></component>
            <component :is='component' :ref="component"></component>  
        </div>  
    </div>
</template>
<script>
import { commonMethods } from './echarts'
export default {
    mixins:[commonMethods],
    props:['id','type','name'],
    components:{
    },
    data() {
        return {
            height:'400px',
            ChartData:[],
            component:'MultipleLine',
            components:'MultipleLineAll',
            queryParams:{
                timeUnit:0,
                relation:1
            },
            relationList:[
                {
                    label:{
                        x:'marketDate',
                        xStr:'时间',
                        y:'saleMoneyTotal',
                        yStr:'销售额'
                    },
                    value:1
                },
                {
                    label:{
                        x:'marketDate',
                        xStr:'时间',
                        y:'customLicenseMoney',
                        yStr:'自定义许可费'
                    },
                    value:2
                },
            ],
            timeList:[
                {
                    value:0,
                    groupValue:'groupMonthTime',
                    label:'月'
                },
                {
                    value:1,
                    groupValue:'groupSeasonTime',
                    label:'季度'
                },
                {
                    value:2,
                    groupValue:'groupYearTime',
                    label:'年'
                },
            ],
            areaList:[],
            companyList:[],
        }
    },
    watch:{
        id(val){
            this.init()
        },
        type(val){},
        name(){}
    },
    mounted() {
        // this.handleAdd()
        this.init()
    },
    methods: {

        changeRelation(){
            var relation = this.relationList.find(i=>{
                return i.value == this.queryParams.relation
            })
            var name = this.name + (this.type==1?'产品类别':'产品') + '趋势图'
           if(this.type==1){
                this.$refs[this.components].open(this.chartData.filter(item=>{
                    return !item.productId
                }),'趋势总图',relation.label,this.queryParams.timeUnit)
                this.$refs[this.component].open(this.chartData.filter(item=>{
                    return item.productId
                }),name,relation.label,this.queryParams.timeUnit)
            }else{
                this.$refs[this.component].open(this.chartData,name,relation.label,this.queryParams.timeUnit)
            }
        },
        async changeEcharts(){
           var chartData =await this.getData()
           this.chartData = chartData?chartData:[]
          this.changeRelation()
            
           
        },
       async init(){
            const [chartData,companyAndArea] = await Promise.allSettled([this.getData(),this.getAllCompanyAndArea()])
            this.chartData = chartData.status =='fulfilled'?chartData.value:[]
            this.areaList= companyAndArea.status =='fulfilled'?companyAndArea.value.saleAreas:[]
            this.companyList= companyAndArea.status =='fulfilled'?companyAndArea.value.companyNames:[]
            this.changeRelation()
            
            
        },
       async getData(){
           var params= {
                saleArea:this.queryParams.area,
                companyName:this.queryParams.companyName,
           }
           if(this.type == 1){
                params.categoryId = this.id
           }else{
                params.productId = this.id
           }
           var queryParams = {
                size:99999,
                current:1,
                searchQuery:this.$commonJS.objectToString(params),
                groupBy:this.timeList.find(item=>{
                    return item.value == this.queryParams.timeUnit
                }).groupValue,
                orderDTOList:[
                    {
                        "orderBy": "saleTime", 
                        "orderType": 0 
                    }
                ]
           }
           return await this.$api.groupProductMarketData(queryParams).then( async response=>await response.data.data.values)
        },
        //获取所有公司和地区
        getAllCompanyAndArea(){
            var params = {}
            if(this.type == 1){
                params.categoryId = this.id
            }else{
                params.productId = this.id
            }
            return this.$api.getAllCompanyAndArea(params).then(response=> response.data)
        },

    },
}
</script>