spfm-market-front/src/pages/main/competitor/compete.vue

<template>
    <div>
        <div class="container structure-l" style="margin: 0;width: calc(75% - 15px);">
            <div class="container-box">
                <div class="mc-nomal-title">竞争对手信息统计</div>

                <div
                    style="height: calc(100% - 80px);overflow-y: scroll;width: 100%;overflow-x: hidden;padding-right: 20px;margin-top: 15px;">
                    <div class="search" style="margin-top: 0;">
                        <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
                    </div>

                    <div class="yysbox">
                        <div class="yys">
                            <h3>中国电信</h3>
                            <div v-for="(item,index) in dxlist" :key="index" style="background: #6096E6;">
                                <span>{{item.tariffName}}</span>
                                <span>{{item.taffiffContent}}</span>
                            </div>
                            <em @click="checkallForm(1)">更多</em>
                        </div>
                        <div class="yys">
                            <h3>中国联通</h3>
                            <div v-for="(item,indext) in ltlist" :key="indext" style="background: #FFBA55;">
                                <span>{{item.tariffName}}</span>
                                <span>{{item.taffiffContent}}</span>
                            </div>
                            <em @click="checkallForm(1)">更多</em>
                        </div>
                        <div class="yys">
                            <h3>其他</h3>
                            <div v-for="(item,indexr) in ydlist" :key="indexr" style="background: #56CA95;">
                                <span>{{item.tariffName}}</span>
                                <span>{{item.taffiffContent}}</span>
                            </div>
                            <em @click="checkallForm(1)">更多</em>
                        </div>
                    </div>

                    <div class="mc-total-box">
                        <span class="mc-total-title">总览</span>
                        <div class="mc-action-box">
                            <span style="margin-right: 20px;cursor: pointer;" @click="checkallForm(1)">竞争对手收集信息列表</span>
                            <span style="cursor: pointer;" @click="checkallForm(2)">新增</span>
                        </div>
                    </div>
                    <div class="mc-flex-box">
                        <div class="mc-flex-item">
                            <div class="mc-flex-value">{{total}}</div>
                            <div class="mc-flex-title">总量</div>
                        </div>
                        <div class="mc-flex-item">
                            <div class="mc-flex-value">{{mobileTotal}}</div>
                            <div class="mc-flex-title">移动</div>
                        </div>
                        <div class="mc-flex-item">
                            <div class="mc-flex-value">{{unicomTotal}}</div>
                            <div class="mc-flex-title">联通</div>
                        </div>
                        <div class="mc-flex-item">
                            <div class="mc-flex-value">{{telcomTotal}}</div>
                            <div class="mc-flex-title">电信</div>
                        </div>
                    </div>
                    <div id="main"></div>
                    <div v-for="(item,index) in dataList" :key="index">
                        <div class="mc-nomal-title">{{item.violationCateName}}</div>
                        <div class="echart-box">
                            <div class="left-echarts echarts-cirle-top" :id="'echarts-cirle'+index"></div>
                            <div class="right-echarts echarts-bar-top" :id="'echarts-bar'+index"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <competeRight></competeRight>
    </div>
</template>
<script>
    import echarts from 'echarts'
    import competeRight from "../../../components/competeRight";
    import mySearch from "../../../components/search.vue";

    export default {
        components: {
            competeRight,
            mySearch
        },
        data() {
            return {
                region: [],
                mobile: [], //移动
                telcom: [], //电信
                unicom: [], //联通
                mobileTotal: 0, //移动
                telcomTotal: 0, //电信
                unicomTotal: 0, //联通
                total: 0,
                dataList: [],
                myChart: null,
                topCirle: null,
                topBar: null,
                searchList: [{
                        type: 'sel',
                        tit: '地市',
                        value: '',
                        width: '32%',
                        options: [],
                    },
                    {
                        type: 'date',
                        tit: '开始时间',
                        value: '',
                        width: '32%',
                    },
                    {
                        type: 'date',
                        tit: '结束时间',
                        value: '',
                        width: '32%',
                    }
                ],
                dxlist: [],
                ltlist: [],
                ydlist: [],
                params: {}
            }
        },
        methods: {
            searchInfo(v) {
                v[0] ? this.params.region = v[0] : this.params.region = '';
                v[1] ? this.params.timefrom = this.$formatDate(v[1], "YYYY-MM-DD") : this.params.timefrom = '';
                v[2] ? this.params.timeto = this.$formatDate(v[2], "YYYY-MM-DD") : this.params.timeto = '';
                this.getCompet();
            },
            //获取数据
            getList() {
                let _this = this;
                this.$http({
                    url: "/market/cwcompetitor/stastics",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {},
                }).then((res) => {
                    this.region = res.data.body.region;
                    this.mobile = res.data.body.mobile;
                    this.telcom = res.data.body.telcom;
                    this.unicom = res.data.body.unicom;
                    this.mobileTotal = res.data.body.mobileTotal;
                    this.telcomTotal = res.data.body.telcomTotal;
                    this.unicomTotal = res.data.body.unicomTotal;
                    this.total = res.data.body.total;
                    this.getechart();
                });

                this.$http({
                    url: "/market/cwcompetitor/catestastics",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {},
                }).then((res) => {
                    res.data.body.forEach(item => {
                        item.region = [];
                        item.mobile = [];
                        item.telcom = [];
                        item.unicom = [];
                        for (let i = 0; i < item.violationItemList.length; i++) {
                            item.region.push(item.violationItemList[i].violationItemName);
                            item.mobile.push(item.violationItemList[i].mobileCnt * 1);
                            item.telcom.push(item.violationItemList[i].telcomCnt * 1);
                            item.unicom.push(item.violationItemList[i].unicomCnt * 1);
                        }
                    })
                    _this.dataList = res.data.body;
                    _this.checkData();
                });
            },
            //加载处理
            checkData() {
                let _this = this;
                let t = setInterval(function() {
                    let txt = 'echarts-cirle0';
                    if (document.getElementById(txt)) {
                        for (let i = 0; i < _this.dataList.length; i++) {
                            _this.getechartlt(_this.dataList[i], i);
                            _this.getechartrt(_this.dataList[i], i);
                        }
                        clearInterval(t);
                    }
                }, 500)
            },
            //折线图
            getechart() {
                this.myChart = echarts.init(document.getElementById('main'));
                let color = [
                    "#0090FF",
                    "#36CE9E",
                    "#fe9a05",
                    "#3FCEC8",
                    "#FF515A",
                    "#00CA69"
                ];
                let xData = this.region;
                let yidong = this.mobile;
                let dianxin = this.telcom;
                let liantong = this.unicom;
                this.myChart.setOption({
                    color: color,
                    legend: {
                        right: 30,
                        top: 20
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function(params) {
                            var html = '';
                            for (var i = 0; i < params.length; i++) {
                                html +=
                                    '<div style="color: #666;font-size: 14px;line-height: 24px"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                                    color[params[i].componentIndex] + ';"></span>' + params[i].seriesName +
                                    ' <span style="color:' + color[params[i].componentIndex] +
                                    ';font-weight:700;font-size: 18px">' + params[i].value + '</span>';

                            }
                            return html
                        },
                        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                    },
                    grid: {
                        top: 70,
                        bottom: 20,
                        left: 10,
                        right: 20,
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: true,
                        axisLabel: {
                            // formatter: '{value}月',
                            textStyle: {
                                color: "#999",
                                fontSize: 12
                            },
                            interval: 0,
                            // rotate: 30
                        },
                        triggerEvent: true,
                        axisLine: {
                            lineStyle: {
                                color: "#D9D9D9"
                            }
                        },
                        data: xData
                    }],
                    yAxis: [{
                        type: "value",
                        // name: '单位：万千瓦时',
                        axisLabel: {
                            textStyle: {
                                color: "#666"
                            }
                        },
                        nameTextStyle: {
                            color: "#666",
                            fontSize: 12,
                            lineHeight: 40
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#E9E9E9"
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }],
                    series: [{
                            name: "移动 ",
                            type: "bar",
                            smooth: true,
                            // showSymbol: false,/
                            symbolSize: 8,
                            zlevel: 3,
                            lineStyle: {
                                normal: {
                                    color: color[0],
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [{
                                                offset: 0,
                                                color: this.hexToRgba(color[0], 0.3)
                                            },
                                            {
                                                offset: 1,
                                                color: this.hexToRgba(color[0], 0.1)
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: this.hexToRgba(color[0], 0.1),
                                    shadowBlur: 10
                                }
                            },
                            data: yidong
                        },
                        {
                            name: "联通",
                            type: "bar",
                            smooth: true,
                            // showSymbol: false,
                            symbolSize: 8,
                            zlevel: 3,
                            lineStyle: {
                                normal: {
                                    color: color[1],
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [{
                                                offset: 0,
                                                color: this.hexToRgba(color[1], 0.3)
                                            },
                                            {
                                                offset: 1,
                                                color: this.hexToRgba(color[1], 0.1)
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: this.hexToRgba(color[1], 0.1),
                                    shadowBlur: 10
                                }
                            },
                            data: liantong
                        },
                        {
                            name: "电信",
                            type: "bar",
                            smooth: true,
                            // showSymbol: false,
                            symbolSize: 8,
                            zlevel: 3,
                            lineStyle: {
                                normal: {
                                    color: color[2],
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [{
                                                offset: 0,
                                                color: this.hexToRgba(color[2], 0.3)
                                            },
                                            {
                                                offset: 1,
                                                color: this.hexToRgba(color[2], 0.1)
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: this.hexToRgba(color[2], 0.1),
                                    shadowBlur: 10
                                }
                            },
                            data: dianxin
                        }
                    ]
                });
            },
            //饼图
            getechartlt(v, n) {
                let txt = 'echarts-cirle' + n;
                this.topCirle = echarts.init(document.getElementById(txt));
                v.innnerProvinceCnt = v.telcomCnt * 1 + v.unicomCnt * 1 + v.mobileCnt * 1 - v.outProvinceCnt;
                let data = [{
                        value: v.innnerProvinceCnt,
                        name: '省内',
                    },
                    {
                        value: v.outProvinceCnt,
                        name: '省外',
                    },
                ];
                let pieOpation = {
                    title: {
                        top: 20,
                        left: 40,
                        text: '地域统计',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: '16'
                        }
                    },

                    color: ['#37CEC6', '#0081CC'],
                    tooltip: {
                        trigger: 'item',
                        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                    },
                    series: {
                        type: 'pie',
                        radius: ['35%', '55%'],
                        center: ['50%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'outer',
                            alignTo: 'labelLine',
                            // ·圆点
                            backgroundColor: 'auto', //圆点颜色，auto：映射的系列色
                            height: 0,
                            width: 0,
                            lineHeight: 0,
                            // height,width.lineHeight必须为0
                            distanceToLabelLine: 0, //圆点到labelline距离
                            borderRadius: 2.5,
                            padding: [2.5, -2.5, 2.5, -2.5],
                            /*radius和padding为圆点大小，圆点半径为几radius和padding各项数值就为几
                              如：圆点半径为1
                                        borderRadius: 1,
                                        padding: [1, -1, 1, -1]
                            */
                            formatter: '{a|{b}：}{b|{d}%}',
                            rich: {
                                a: {
                                    padding: [0, 0, 0, 5]
                                },
                                b: {
                                    padding: [0, 5, 0, 0]
                                }
                            }
                        },
                        labelLine: {
                            show: true,
                            length: 1
                        },
                        data: []
                    }

                };
                pieOpation.series.data = data;
                this.topCirle.setOption(pieOpation);
            },
            //条形图
            getechartrt(v, n) {
                let txt = 'echarts-bar' + n;
                this.topBar = echarts.init(document.getElementById(txt));
                let data = {
                    region: v.region,
                    mobile: v.mobile,
                    telcom: v.telcom,
                    unicom: v.unicom,
                };
                let barOpation = {
                    title: {
                        top: 20,
                        left: 40,
                        text: '项目统计',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: '16'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    color: ['#37CEC6', '#0081CC', '#FDD56A'],
                    grid: {
                        top: '25%',
                        left: '3%',
                        right: '4%',
                        bottom: '13%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#DFDFD"
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                type: 'dotted' //'dotted'虚线 'solid'实线
                            }
                        },
                    },
                    yAxis: {
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#DFDFD"
                            }
                        },

                        data: []
                    },
                    series: [{
                            name: '移动',
                            type: 'bar',
                            stack: '户数',
                            label: {
                                show: true,
                                position: 'insideLeft'
                            },
                            data: []
                        },
                        {
                            name: '联通',
                            type: 'bar',
                            stack: '户数',
                            label: {
                                show: true,
                                position: 'insideLeft'
                            },
                            data: []
                        }, {
                            name: '电信',
                            type: 'bar',
                            stack: '户数',
                            label: {
                                show: true,
                                position: 'insideLeft'
                            },
                            data: []
                        },
                    ]
                };
                barOpation.yAxis.data = data.region;
                barOpation.series[0].data = data.mobile;
                barOpation.series[1].data = data.unicom;
                barOpation.series[2].data = data.telcom;
                this.topBar.setOption(barOpation)
            },
            //rgbaColor
            hexToRgba(hex, opacity) {
                var rgbaColor = "";
                var reg = /^#[\da-f]{6}$/i;
                if (reg.test(hex)) {
                    rgbaColor = rgbaColor = 'rgba(' + parseInt("0x" + hex.slice(1, 3)) + ',' + parseInt("0x" + hex
                        .slice(
                            3, 5)) + ',' + parseInt("0x" + hex.slice(5, 7)) + ',' + opacity + ')'
                }
                return rgbaColor;
            },
            //跳转页面
            checkallForm(v) {
                let path = '';
                v === 1 ? path = '/competitor' : path = '/addCompetitor'
                this.$router.push(path);
                for (let i = 0; i < this.$store.state.tabList.length; i++) {
                    if (this.$store.state.tabList[i].rountPath === '/competitor' && v === 1) {
                        return
                    }
                    if (this.$store.state.tabList[i].rountPath === '/addCompetitor' && v === 2) {
                        return
                    }
                }
                let params = {
                    children: "",
                    name: v === 2 ? "新增竞争对手信息" : "竞争对手信息管理",
                    rountPath: path,
                    target: "_self",
                };
                for (let i = 0; i < this.$store.state.tabList.length; i++) {
                    if (this.$store.state.tabList[i].name === params.name) {
                        this.$store.state.tabList[i] = params;
                    }
                }
                let set = new Set([...this.$store.state.tabList, params]);
                set.add(params);
                this.$store.commit("setDefaultActive", params.rountPath);
                this.$store.commit("setTabList", Array.from(set));
            },
            getCompet(v) {
                if (this.params.region == '14') {
                    this.params.region = ''
                }
                this.$http({
                    url: "/market/cwcompetitor/queryWcompetitorIndexList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "page": '{"pageNo":"' + 1 + '","pageSize":"5"}'
                    },
                    data: {
                        operatorCode: 'unicom',
                        recordRegionCode: this.params.region,
                        startTime: this.params.timefrom,
                        endTime: this.params.timeto,
                    },
                }).then((res) => {
                    this.ltlist = res.data;
                });
                this.$http({
                    url: "/market/cwcompetitor/queryWcompetitorIndexList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "page": '{"pageNo":"' + 1 + '","pageSize":"5"}'
                    },
                    data: {
                        operatorCode: 'telcom',
                        recordRegionCode: this.params.region,
                        startTime: this.params.timefrom,
                        endTime: this.params.timeto,
                    },
                }).then((res) => {
                    this.dxlist = res.data;
                });
                this.$http({
                    url: "/market/cwcompetitor/queryWcompetitorIndexList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "page": '{"pageNo":"' + 1 + '","pageSize":"5"}'
                    },
                    data: {
                        recordRegionCode: this.params.region,
                        startTime: this.params.timefrom,
                        endTime: this.params.timeto,
                    },
                }).then((res) => {
                    this.ydlist = res.data;
                });
            },
            getListregion() {
                this.$http({
                    url: "/market/cfgDataDict/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        dictCode: 'region'
                    },
                }).then((res) => {
                    this.searchList[0].options = res.data;
                });
            },
        },
        mounted() {
            this.getList();
            var _this = this;
            window.onresize = function() {
                _this.myChart.resize();
                _this.topCirle.resize();
                _this.topBar.resize();
            }
        },
        created() {
            this.getCompet();
            this.getListregion();
        },
        computed: {
            collapse() {
                return this.$store.state.collapse;
            },
        },
        watch: {
            collapse() {
                let _this = this;
                _this.myChart.resize();
                _this.topCirle.resize();
                _this.topBar.resize();
            }
        }
    }
</script>
<style scoped lang="scss">
    .yysbox {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;

        .yys {
            display: inline-block;
            width: 32%;
            text-align: center;
            border: 1px solid #58B6E5;
            padding: 10px 20px;
            max-height: 330px;
            padding-bottom: 30px;
            overflow: hidden;
            position: relative;

            h3 {
                font-weight: normal;
                margin-bottom: 10px;
            }

            div {
                margin-bottom: 10px;
                border-radius: 3px;
                padding: 2px 5px;
                height: 42px;
                overflow: hidden;

                span {
                    display: inline-block;
                    width: 100%;
                    color: #fff;
                    font-size: 14px;
                }
            }

            em {
                font-style: normal;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 30px;
                line-height: 30px;
                text-align: right;
                padding-right: 15px;
                background: #fff;
            }
        }
    }

    #main {
        width: 100%;
        min-height: 300px;
        height: 40vh;
        clear: both;
    }

    .titbox {
        div {
            float: right;
            margin-top: 20px;

            i {
                font-size: 22px;
                margin-left: 20px;
                cursor: pointer;
            }
        }
    }

    .container-box {
        background-color: white;
    }

    .mc-nomal-title {
        font-size: 20px;
        font-weight: 500;
        color: #333;
    }

    .mc-total-box {
        overflow: hidden;
        height: 30px;
        line-height: 30px;
        margin: 15px 0;
    }

    .mc-total-title {
        font-size: 18px;
    }

    .mc-action-box {
        float: right
    }

    .mc-flex-box {
        display: flex;
        justify-content: space-between;
    }

    .mc-flex-item {
        width: 30px;
        text-align: center;
    }

    .mc-flex-value {
        font-size: 16px;
        font-weight: 400;
    }

    .mc-flex-title {
        font-size: 12px;
        color: #BCBCBC;

    }

    .echarts-style {
        width: 100%;
        height: 300px;
    }

    .echart-box {
        display: flex;
    }

    .left-echarts {
        height: 300px;
        width: 50%;
    }

    .right-echarts {
        height: 300px;
        width: 50%;
    }
</style>