Merge remote-tracking branch 'remotes/origin/shf' into master

lyfO_o

2022-07-12 c562fa2e66f4972ae23fa57ef7412da6e18991ed

 src/views/chartAnalysis/index.vue

@@ -1,249 +1,917 @@
<template>
    <div>
        <div class="whole_top">
            <el-form ref="form" :inline="true" :model="form" label-width="100px">
            <el-form ref="form" :inline="true" :model="formData">
                <div class="top">
                    <div class="select">
                        <el-form-item>
                            <el-select v-model="value1"  multiple placeholder="请选择" style="color: red">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="value2"  multiple placeholder="请选择" style="color: red">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="value3"  multiple placeholder="请选择" style="color: red">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="value4"  multiple placeholder="请选择" style="color: red">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="value5"  multiple placeholder="请选择" style="color: red">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="value6"  multiple placeholder="请选择" style="color: red">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <el-form-item>
                        <el-radio-group v-model="radio" style="padding: 20px 0;">
                            <el-radio :label="1">按隐患部门</el-radio>
                            <el-radio :label="2">按专业</el-radio>
                            <el-radio :label="3">按级别</el-radio>
                            <el-radio :label="4">按检查类别</el-radio>
                            <el-radio :label="5">按检查单位（上级单位）</el-radio>
                            <el-radio :label="6">按检查单位（本部单位）</el-radio>
                    <el-form-item label="类别：">
                        <el-checkbox-group v-model="formData.ht_typesub">
                            <el-checkbox v-for="item in YHLXList" :key="item.value" :value="item.value"
                                         :label="item.value"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="级别：">
                        <el-checkbox-group v-model="formData.level">
                            <el-checkbox v-for="item in YHJBList" :key="item.value" :value="item.value"
                                         :label="item.value"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="上级单位：">
                        <el-checkbox-group v-model="formData.superior">
                            <!--                            <el-checkbox v-for="item in JCBMList" :label="item.value"></el-checkbox>-->
                            <el-checkbox v-for="item in JCBMList" :key="item.value" :value="item.value"
                                         :label="item.value"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="检查类别：" class="checkbox">
                        <el-checkbox-group v-model="formData.checktype">
                            <el-checkbox v-for="item in JCLBList" :key="item.value" :value="item.value"
                                         :label="item.value"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="当前警情：">
                        <el-checkbox-group v-model="formData.curWarningLevel">
                            <el-checkbox label="轻警"></el-checkbox>
                            <el-checkbox label="低警"></el-checkbox>
                            <el-checkbox label="中警"></el-checkbox>
                            <el-checkbox label="重警"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item style="margin-left: 30px;">
                        <el-radio-group v-model="formData.model">
                            <el-radio label="0">按隐患单位</el-radio>
                            <el-radio label="1">按类别</el-radio>
                            <el-radio label="2">按级别</el-radio>
                            <el-radio label="3">按检查单位</el-radio>
                            <el-radio label="4">按录入单位</el-radio>
                            <el-radio label="5">按检查类别</el-radio>
                            <el-radio label="6">按当前警情</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="chartType" v-if="!THDB" style="margin-left: 50px;">
                            <el-radio label="line">曲线图</el-radio>
                            <el-radio label="pie">饼状图</el-radio>
                            <el-radio label="column">柱形图</el-radio>
                        </el-radio-group>

                        <el-radio-group v-model="timeDes" v-if="THDB" @change="initTHDBTime" style="margin-left: 50px;">
                            <el-radio label="month">月度</el-radio>
                            <el-radio label="quarter">季度</el-radio>
                            <el-radio label="year">年度</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-radio-group v-model="radio">
                        <el-radio :label="1">按隐患部门</el-radio>
                        <el-radio :label="2">按专业</el-radio>
                        <el-radio :label="3">按级别</el-radio>
                        <el-radio :label="4">按检查类别</el-radio>
                        <el-radio :label="5">按检查单位（上级单位）</el-radio>
                        <el-radio :label="6">按检查单位（本部单位）</el-radio>
                    </el-radio-group>
                </div>
                <div class="center" style="text-align: center;padding-top: 10px;">
                    <el-form-item label="检查时间：">
                <div class="center">
                    <el-form-item label="已选单位：">
                        <el-input autosize v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item autosize label="已选类别：">
                        <el-input v-model="formData.ht_typesub.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="已选级别：">
                        <el-input v-model="formData.level.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="已选上级单位：">
                        <el-input v-model="formData.superior.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="已选检查类别：">
                        <el-input v-model="formData.checktype.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="已选当前警情：">
                        <el-input v-model="formData.curWarningLevel.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="检查时间：" v-if="!THDB" class="time" style="width: 300px">
                        <el-date-picker
                            style="width: 218px"
                            v-model="time"
                            type="daterange"
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="对比时间：" v-if="THDB" class="time" style="width: 340px">
                        <div v-if="timeDes!='quarter'">
                            <el-date-picker
                                v-model="THDBBegin"
                                :type="timeDes"
                                style="width: 40%;float: left"
                                :value-format="timeDes=='month'?'yyyy年MM月':'yyyy年'"
                                :placeholder="timeDes=='month'?'请选择月':'请选择年'">
                            </el-date-picker>
                            <span style="width: 20px">-</span>
                            <el-date-picker
                                v-model="THDBEnd"
                                :type="timeDes"
                                :value-format="timeDes=='month'?'yyyy年MM月':'yyyy年'"
                                style="width: 40%"
                                :placeholder="timeDes=='month'?'请选择月':'请选择年'">
                            </el-date-picker>
                        </div>
                        <div v-if="timeDes=='quarter'">

                            <el-quarter-picker v-model="THDBBegin" style="width: 45%" placeholder="选择季度"/>
                            <span style="width: 20px">-</span>
                            <el-quarter-picker v-model="THDBEnd" style="width: 45%" placeholder="选择季度"/>
                        </div>

                    </el-form-item>

                    <el-form-item>
                        <el-button  class="btn" size="small" type="primary" @click="close()"
                        >汇总</el-button>
                        <el-button  class="btn" size="small" type="primary" @click="close()"
                        >导出Excel</el-button>
                        <el-button class="btn" size="small" type="primary" @click="getData()"
                        >汇总
                        </el-button>
                        <el-button v-if="!THDB" class="btn" size="small" type="primary" @click="THDB=true"
                        >同比环比
                        </el-button>
                    </el-form-item>
                </div>
            </el-form>
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column align="center" label="众泰煤焦化-安全隐患台帐">
                    <el-table-column
                        prop="name"
                        label="隐患部门\隐患专业"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="province"
                        label="采掘"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="city"
                        label="生产"
                        width="120"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="合计"
                        width="300"
                        align="center">
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div style="color: #c5021a;margin-top: 20px;">
                <div>温馨提示：</div>
                <div>点选可查询隐患详情。</div>
        </div>
        <div class="whole_bottom" style="position: relative;z-index: 1">
            <div id="heigcharts" style="width: 100%;height: 550px;"></div>
            <!--<div v-if="chartType == 'line'" id="line" style="width: 100%;height: 550px;"></div>-->
            <!--<div v-if="chartType == 'column'" id="column" style="width: 100%;height: 550px;"></div>-->
            <div v-if="chartType == 'column'" class="legend">
                <div class="legend-body">

                    <div v-for="(item,index) in this.columnChartData.xList" class="legend-item">
                        <div :class="'legendItemBack'+index"></div>
                        {{ item }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {echarts} from "../../global";
import {chart_analysis,chart_compare} from "@/api/sgyhpczl/chartAnalysis";
import {
    initJCBM,
    initYHLX,
    initBC,
    initJCLB,
    initYHBM,
    initYHJB,
    initLlr,
    initReformStatus
} from "@/api/sgyhpczl/initSelect";

// 导入chart组件
import Highcharts from "highcharts/highstock";
import loadExporting from "highcharts/modules/exporting";
import exportExcel from "highcharts/modules/export-data.src";
import highcharts3d from 'highcharts/highcharts-3d'
import ElQuarterPicker from "../common/jdSelect";

loadExporting(Highcharts);
exportExcel(Highcharts);
highcharts3d(Highcharts)


export default {
    name: "index",
    components: {ElQuarterPicker},

    data() {
        return {
            options: [{
                value: '选项1',
                label: '安全环保部'
            }, {
                value: '选项2',
                label: '生产技术部'
            }, {
                value: '选项3',
                label: '企管部'
            }, {
                value: '选项4',
                label: '消防保卫部'
            }, {
                value: '选项5',
                label: '质检中心'
            }],
            value1: [],
            value2: [],
            value3: [],
            value4: [],
            value5: [],
            value6: [],
            radio: 3,
            time: '',
            tableData: [{
                name: '财务部',
                province: '1',
                city: '4',
                address: '1'
            }, {
                name: '党委副书记',
                province: '0',
                city: '2',
                address: '0'
            }, {
            value: '',
            form: {
                name: '众泰煤焦化',
                province: '2',
                city: '3',
                address: '1'
            }, {
                name: '王小虎',
                province: '3',
                city: '9',
                address: '2'
            }]
                time: '',
                category: '生产',
                level: '一般隐患D',
                superiorUnit: '新疆能源',
                inspectionCategory: '日常检查',
                policeSituation: '轻警',
                chart: null,
            },
            formData: {
                "echart_type": "line", //line:折线图；column：柱状图；pie :饼状图
                "model": "0", //0：
                "beginTime": "", //开始时间
                "endTime": "", //结束时间
                "ht_typesub": [], //隐患类别
                "level": [], //隐患级别
                "superior": [], //上级单位
                "checktype": [], //检查类别
                "curWarningLevel": [] //警情
            },
            categoryList: ['生产'],
            levelList: ['一般隐患D'],
            superiorUnitList: ['新疆能源'],
            inspectionCategoryList: ['日常检查'],
            policeSituationList: ['轻警'],
            radio: 1,
            chartType: "line",
            columnChartData: {},
            lineChartData: {},
            time: [],
            pieChartData: [],
            JCBMList: [],
            YHLXList: [],
            BCList: [],
            JCLBList: [],
            YHBMList: [],
            YHJBList: [],
            THDB: false,
            THDBBegin: "",
            THDBEnd: "",
            timeDes: "month",
            YHZTList: [],
            columnXData: []
        }
    }
    },
    mounted() {
        this.time.push(this.getCurrentMonthFirst(), this.getCurrentMonthLast());
        this.initYHLX()
        this.initYHJB()
        this.initBC()
        this.initJCLB()
        this.initLlr()
        this.initYHBM()
        this.initYHZT()
        this.changeJCDW(1)
        this.getData()
        this.initTHDBTime()
    },
    watch: {
        "chartType": function (newVal, oldVal) {
            this.formData.echart_type = newVal;
            this.getData();
        },
        "formData.model": function (newVal, oldVal) {
            this.formData.model = newVal;
            this.getData();

        },
        // "timeDes": function (newVal, oldVal) {
        //     this.initTHDBTime();
        // }
    },
    methods: {
        initTHDBTime() {
            var dayStr = this.getCurrentMonthFirst();
            if (this.timeDes == "month") {
                this.THDBBegin = dayStr.split("-")[0] + "年" + (parseInt(dayStr.split("-")[1]) - 1) + "月";
                this.THDBEnd = dayStr.split("-")[0] + "年" + (dayStr.split("-")[1]) + "月";
            } else if (this.timeDes == "year") {
                this.THDBBegin = (parseInt(dayStr.split("-")[0]) - 1) + "年";
                this.THDBEnd = dayStr.split("-")[0] + "年";
            } else {
                this.THDBBegin = dayStr.split("-")[0] + "年第1季度";
                this.THDBEnd = dayStr.split("-")[0] + "年第2季度";
            }
        },
        initYHLX() {
            initYHLX().then(res => {
                if (res.data.ok == 1) {
                    this.YHLXList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initYHJB() {
            initYHJB().then(res => {
                if (res.data.ok == 1) {
                    this.YHJBList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initYHZT() {
            initReformStatus().then(res => {
                if (res.data.ok == 1) {
                    this.YHZTList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initBC() {
            initBC().then(res => {
                if (res.data.ok == 1) {
                    this.BCList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initJCLB() {
            initJCLB().then(res => {
                if (res.data.ok == 1) {
                    this.JCLBList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initLlr() {
            initLlr().then(res => {
                if (res.data.ok == 1) {
                    this.llrList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initYHBM() {
            initYHBM().then(res => {
                if (res.data.ok == 1) {
                    this.YHBMList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        changeJCDW(val) {
            initJCBM(val).then(res => {
                if (res.data.ok == 1) {
                    this.JCBMList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        // 饼图
        initEacharts3() {
            var option = {
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}:' + ' {point.y}%'
                        }
                    }
                },
                exporting: {
                    enabled: false //去掉右上角
                },
                credits: {
                    enabled: false //不显示LOGO
                },
                series: [{
                    type: 'pie',
                    name: '浏览器占比',
                    data: this.pieChartData
                }]
            }
            Highcharts.chart("heigcharts", option);
        },
        getData() {
            this.formData.beginTime = this.time[0]
            this.formData.endTime = this.time[1]
            if(this.THDB) {
                this.formData.beginTime = this.THDBBegin
                this.formData.endTime = this.THDBEnd
                this.formData.compare_type = this.timeDes;
            }
            let requestData = JSON.parse(JSON.stringify(this.formData));
            requestData.ht_typesub = requestData.ht_typesub.join(",")
            requestData.level = requestData.level.join(",")
            requestData.superior = requestData.superior.join(",")
            requestData.checktype = requestData.checktype.join(",")
            requestData.curWarningLevel = requestData.curWarningLevel.join(",")
            if(this.THDB){
                chart_compare(requestData).then(res=>{
                    let data = res.data;
                    if (data.ok) {
                        this.lineChartData = {}
                        let dataList = [];
                        let timeList = [];
                        if (data.data != null && data.data.length > 0) {
                            data.data[0].forEach(n => {
                                if (timeList.indexOf(n.graph) == -1) {
                                    timeList.push(n.graph)
                                }
                                let obj = dataList.find(v => v.name == n.xAxes);
                                if (obj == null) {
                                    // obj.data.push(n.counts);
                                    obj = {
                                        name: n.xAxes,
                                        data: [],
                                        // type: 'line',
                                        // areaStyle: {}
                                    }
                                    dataList.push(obj)
                                }
                            })
                            timeList.forEach(time => {
                                let singileData = data.data[0].filter(n => n.graph == time)
                                dataList.forEach(n => {
                                    let searchData = singileData.find(v => v.xAxes == n.name);
                                    if (searchData != null) {
                                        n.data.push(parseInt(searchData.yAxes))
                                    } else {
                                        n.data.push(0)
                                    }
                                })
                            })
                        }
                        this.lineChartData.timeList = timeList;
                        this.lineChartData.dataList = dataList;
                        this.initLineChart()
                    }
                })
                return;
            }




            chart_analysis(requestData).then(res => {
                let data = res.data;
                if (data.ok) {
                    if (this.formData.echart_type == "column") {
                        this.columnChartData = {};
                        let xList = [];
                        let dataList = [];
                        if (data.data != null && data.data.length > 0) {
                            data.data[0].forEach(n => {
                                xList.push(n.graph);
                                let singleData = {
                                    "name": n.graph,
                                    // "type": 'bar',
                                    // "label": "labelOption",
                                    // "emphasis": {
                                    //     focus: 'series'
                                    // },
                                    "data": [parseInt(n.yAxes)]
                                }
                                dataList.push(parseInt(n.yAxes));
                            })
                        }
                        this.columnChartData.xList = xList;
                        this.columnChartData.dataList = []
                        this.columnChartData.dataList.push(
                            {
                                data: dataList,
                                colorByPoint: true
                            }
                        );
                        this.initCloumnChart()
                    } else if (this.formData.echart_type == "line") {
                        this.lineChartData = {}
                        let dataList = [];
                        let timeList = [];
                        if (data.data != null && data.data.length > 0) {
                            data.data[0].forEach(n => {
                                if (timeList.indexOf(n.days) == -1) {
                                    timeList.push(n.days)
                                }
                                let obj = dataList.find(v => v.name == n.catalogy);
                                if (obj == null) {
                                    // obj.data.push(n.counts);
                                    obj = {
                                        name: n.catalogy,
                                        data: [],
                                        // type: 'line',
                                        // areaStyle: {}
                                    }
                                    dataList.push(obj)
                                }
                            })
                            timeList.forEach(time => {
                                let singileData = data.data[0].filter(n => n.days == time)
                                dataList.forEach(n => {
                                    let searchData = singileData.find(v => v.catalogy == n.name);
                                    if (searchData != null) {
                                        n.data.push(parseInt(searchData.counts))
                                    } else {
                                        n.data.push(0)
                                    }
                                })
                            })
                        }
                        this.lineChartData.timeList = timeList;
                        this.lineChartData.dataList = dataList;
                        this.initLineChart()
                    } else {
                        this.pieChartData = []
                        data.data[0].forEach(n => {
                            var datas = {
                                name: n.chartName,
                                y: parseInt(n.chartValue),
                                sliced: true,
                                selected: false
                            };
                            this.pieChartData.push(datas);
                        })
                        this.initEacharts3();
                    }
                }

            })
        },
        initChart() {
            // 柱形图
            var chartDom = document.getElementById('column');
            // var chartDom = document.getElementById('myChart');
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: '众泰煤焦化各隐患单位隐患走势分析',
                    left: 'center'
                },
                legend: {
                    bottom: 0,
                    // textStyle: {
                    //     color: '#ffffff'
                    // },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.lineChartData.timeList
                },
                yAxis: {
                    type: 'value'
                },
                color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
                series: this.lineChartData.dataList
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
        initLineChart() {
            // 折线图
            var chartDom = document.getElementById('line');
            // var chartDom = document.getElementById('myChart');
            // var myChart = echarts.init(chartDom);
            // var option = {
            //     title: {
            //         text: '众泰煤焦化各隐患单位隐患走势分析',
            //         left: 'center'
            //     },
            //     legend: {
            //         bottom: 0,
            //         // textStyle: {
            //         //     color: '#ffffff'
            //         // },
            //     },
            //     grid: {
            //         left: '3%',
            //         right: '4%',
            //         bottom: '5%',
            //         containLabel: true
            //     },
            //     xAxis: {
            //         type: 'category',
            //         boundaryGap: false,
            //         data: this.lineChartData.timeList
            //         // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
            //     },
            //     yAxis: {
            //         type: 'value'
            //     },
            //     color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
            //     series: this.lineChartData.dataList
            //     // series: [
            //     //     {
            //     //         name: '电仪车间',
            //     //         data: [50, 35, 63, 64, 79, 95, 104, 50, 35, 63, 64],
            //     //         type: 'line',
            //     //         areaStyle: {}
            //     //     }
            //     // ]
            // }
            // // 使用刚指定的配置项和数据显示图表。
            // myChart.setOption(option)

            var option = {
                chart: {
                    type: 'area'
                },
                title: {
                    text: '众泰煤焦化各隐患单位隐患走势分析'
                },
                yAxis: {
                    title: {
                        enabled: false
                    }
                },
                colors: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
                legend: {
                    align: "center", //程度标的目标地位
                    verticalAlign: "bottom",//垂直标的目标地位
                    x: 0, //间隔x轴的间隔
                    y: 0 //间隔Y轴的间隔
                },
                xAxis: {
                    // type: 'category',
                    // boundaryGap: false,
                    categories: this.lineChartData.timeList,
                    // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                },
                series: this.lineChartData.dataList,
                exporting: {
                    enabled: false //去掉右上角
                },
                credits: {
                    enabled: false //不显示LOGO
                },
            }
            Highcharts.chart("heigcharts", option);
        },
        initCloumnChart() {

            var option = {
                chart: {
                    type: 'column',
                    marginBottom: 70
                },
                title: {
                    text: null
                },
                yAxis: {
                    title: {
                        enabled: false
                    }
                },
                tooltip: {
                    formatter: function () {
                        return this.x + " : " + this.y
                    }
                },
                colors: ['#ff6600', '#fcd202', '#b0de09', '#0289cc', '#2001cd', '#cd0d74', '#cc0000', '#00cc00', '#0000cc', '#dddddd', '#999999', '#333333', '#990000', '#92e3d4', '#f09aea'],
                legend: {
                    enabled: false,
                },
                xAxis: {
                    // type: 'category',
                    // boundaryGap: false,
                    categories: this.columnChartData.xList,
                    max: this.columnChartData.xList.length - 1
                    // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                },
                series: this.columnChartData.dataList,
                exporting: {
                    enabled: false //去掉右上角
                },
                credits: {
                    enabled: false //不显示LOGO
                },
            }
            Highcharts.chart("heigcharts", option);
        },
        getCurrentMonthFirst() {
            var date = new Date();
            date.setDate(1);
            var month = parseInt(date.getMonth() + 1);
            var day = date.getDate();
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }

            return date.getFullYear() + '-' + month + '-' + day;
        },
        getCurrentMonthLast() {
            var date = new Date();
            var currentMonth = date.getMonth();
            var nextMonth = ++currentMonth;
            var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
            var oneDay = 1000 * 60 * 60 * 24;
            var lastTime = new Date(nextMonthFirstDay - oneDay);
            var month = parseInt(lastTime.getMonth() + 1);
            var day = lastTime.getDate();
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return date.getFullYear() + '-' + month + '-' + day;
        },
    },


}
</script>

<style scoped>
.top{
.legend {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
}

.legend-body {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;
    height: 100%;
}

.legend-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
    line-height: 1.5;
}

.legend-item div {
    width: 20px;
    height: 15px;
    margin-right: 10px;
}

.legendItemBack0 {
    background-color: #ff6600;
}

.legendItemBack1 {
    background-color: #fcd202;
}

.legendItemBack2 {
    background-color: #b0de09;
}

.legendItemBack3 {
    background-color: #0289cc;
}

.legendItemBack4 {
    background-color: #2001cd;
}

.legendItemBack5 {
    background-color: #cd0d74;
}

.legendItemBack6 {
    background-color: #cc0000;
}

.legendItemBack7 {
    background-color: #00cc00;
}

.legendItemBack8 {
    background-color: #0000cc;
}

.legendItemBack9 {
    background-color: #dddddd;
}

.legendItemBack10 {
    background-color: #999999;
}

.legendItemBack11 {
    background-color: #333333;
}

.legendItemBack12 {
    background-color: #990000;
}

.legendItemBack13 {
    background-color: #92e3d4;
}

.legendItemBack14 {
    background-color: #f09aea;
}

.top {
    padding: 10px 5px;
    background: #e4edf4;
    display: flex;
    flex-direction: column;
}
/*下拉框图标隐藏*/
.whole_top .select /deep/ .el-input__suffix-inner .is-reverse{
    display: none;

.top /deep/ .el-form-item__label {
    width: 110px;
}
.whole_top .select /deep/ .el-input__suffix-inner .el-icon-arrow-up{
    display: none;

.top /deep/ .el-form-item {
    margin-bottom: 5px;
}
/*设下拉框颜色*/
.select /deep/.el-input__inner {
    border: 1px solid #c5dbec;
    font-weight: bold;
    background: #dfeffc;
    /*.el-icon-circle-close*/

/*多选框间距*/
.checkbox /deep/ .el-checkbox-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.whole_top .select /deep/.el-select .el-input__inner:focus {
    color: #e6860b;

.center {
    text-align: center;
    padding: 10px;
    background: #ffffff;
    margin: 10px 0;
}
.select /deep/ .is-focus .el-select__tags-text{
    color: #000000;
}
/*下拉框选值之后的样式*/
.select /deep/ .el-tag.el-tag--info {
    background-color: transparent;;
    border-color: transparent;
    font-weight: bold;
    color: #e6860b;
}
/*placeholder颜色修改*/
.whole_top ::-webkit-input-placeholder {
    color: #000000;
}
.whole_top :-moz-placeholder {
    color: #000000;
}
.whole_top ::-moz-placeholder{
    color: #000000;
}
.whole_top :-ms-input-placeholder {
    color: #000000;
}
/*日期*/
/deep/ .el-date-editor .el-range-separator{

.center /deep/ .el-form-item__label {
    width: auto;
    padding-right: 0;
}
.btn{

.checkbox {
    display: flex;
}

/deep/ .el-checkbox {
    margin-right: 7px;
}

.checkbox /deep/ .el-checkbox {
    margin-right: 0px;
}

/deep/ .el-checkbox__label {
    padding-left: 3px;
}

.checkbox /deep/ .el-checkbox__label {
    padding-left: 3px;
}

/deep/ .el-radio {
    margin-right: 7px;
}

.center {
    display: flex;
    align-items: center;
    justify-content: start;
}

.center /deep/ .el-form-item--medium {
    margin-bottom: 0px;
    display: flex;
}

.center /deep/ .el-input__inner {
    border: transparent;
    width: 85px;
    padding: 0 5px;
}

.center .time /deep/ .el-form-item__content {
    width: 70%;
}

.center .time /deep/ .el-input__inner {
    width: 218px;
}

.center .time /deep/ .el-range-input {
    width: 90px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    padding: 0 5px;
}

/deep/ .el-icon-date {
    display: none;
}

/*日期*/
/deep/ .el-date-editor .el-range-separator {
    width: auto;
    line-height: 36px;
}

.btn {
    background-color: #034ea2;
    border: 1px solid #034ea2;
}

>>> .center .time[data-v-21f55eb3] .el-input__inner {
    width: 100px;
}
</style>