曲线图加载

panzy

2022-05-21 81d866385fd7bbd006d7fd60159844e7340c416d

曲线图加载

 src/views/chartAnalysis/index.vue

@@ -69,10 +69,10 @@
                            <el-radio :label="6">按检查类别</el-radio>
                            <el-radio :label="7">按当前警情</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="radio2" style="margin-left: 50px;">
                            <el-radio :label="1">曲线图</el-radio>
                            <el-radio :label="2">饼状图</el-radio>
                            <el-radio :label="3">柱形图</el-radio>
                        <el-radio-group v-model="chartType" 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-form-item>
                </div>
@@ -105,17 +105,19 @@
                        </el-date-picker>
                    </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()"
                        >同比环比</el-button>
                        <el-button class="btn" size="small" type="primary" @click="close()"
                        >汇总
                        </el-button>
                        <el-button class="btn" size="small" type="primary" @click="close()"
                        >同比环比
                        </el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="whole_bottom">
<!--            <div id="myChart" style="width: 100%;height: 550px;"></div>-->
<!--            <div id="circular" style="width: 100%;height: 550px;"></div>-->
            <!--            <div id="myChart" style="width: 100%;height: 550px;"></div>-->
            <!--            <div id="circular" style="width: 100%;height: 550px;"></div>-->
            <div id="cylindrical" style="width: 100%;height: 650px;"></div>
        </div>
    </div>
@@ -129,7 +131,7 @@
    data() {
        return {
            form: {
                name:'众泰煤焦化',
                name: '众泰煤焦化',
                time: '',
                category: '生产',
                level: '一般隐患D',
@@ -137,7 +139,7 @@
                inspectionCategory: '日常检查',
                policeSituation: '轻警',
            },
            formData:{
            formData: {
                "echart_type": "column", //line:折线图；column：柱状图；pie :饼状图
                "model": "0", //0：
                "beginTime": "2022-04-01", //开始时间
@@ -149,41 +151,85 @@
                "curWarningLevel": "" //警情
            },
            categoryList: ['生产'],
            levelList:['一般隐患D'],
            levelList: ['一般隐患D'],
            superiorUnitList: ['新疆能源'],
            inspectionCategoryList:['日常检查'],
            inspectionCategoryList: ['日常检查'],
            policeSituationList: ['轻警'],
            radio: 1,
            radio2: 1,
            columnChartData:{}
            chartType: "column",
            columnChartData: {},
            lineChartData: {}
        }
    },
    mounted() {
        this.getData()
    },
    watch: {
        "chartType": function (newVal, oldVal) {
            this.formData.echart_type = newVal;
            this.getData();
        }
    },
    methods: {
        getData(){
            chart_analysis(this.formData).then(res=>{
        getData() {
            chart_analysis(this.formData).then(res => {
                let data = res.data;
                if(data.ok){
                    let xList = [];
                    let dataList = [];
                    data.data[0].forEach(n=>{
                        xList.push(n.graph);
                        let singleData = {
                            "name": n.graph,
                            "type": 'bar',
                            "label": "labelOption",
                            "emphasis": {
                                focus: 'series'
                            },
                            "data": [n.yAxes]
                        }
                        dataList.push(singleData);
                    })
                    this.columnChartData.xList = xList;
                    this.columnChartData.dataList = dataList;
                    this.initCloumnChart()
                if (data.ok) {
                    console.log(this.formData.echart_type)
                    if (this.formData.echart_type == "column") {
                        let xList = [];
                        let dataList = [];
                        data.data[0].forEach(n => {
                            xList.push(n.graph);
                            let singleData = {
                                "name": n.graph,
                                "type": 'bar',
                                "label": "labelOption",
                                "emphasis": {
                                    focus: 'series'
                                },
                                "data": [n.yAxes]
                            }
                            dataList.push(singleData);
                        })
                        this.columnChartData.xList = xList;
                        this.columnChartData.dataList = dataList;
                        this.initCloumnChart()
                    } else if (this.formData.echart_type == "line") {
                        let dataList = [];
                        let timeList = [];
                        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(searchData.counts)
                                }else{
                                    n.data.push(0)
                                }
                            })
                        })
                        this.lineChartData = {}
                        this.lineChartData.timeList = timeList;
                        this.lineChartData.dataList = dataList;
                        this.initLineChart()
                    }
                    // this.initChart()
                }

@@ -199,7 +245,7 @@
                    text: '众泰煤焦化各隐患单位隐患走势分析',
                    left: 'center'
                },
                legend:{
                legend: {
                    bottom: 0,
                    // textStyle: {
                    //     color: '#ffffff'
@@ -214,91 +260,27 @@
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                    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: [
                    {
                        name: '电仪车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '原料二车间',
                        data: [50, 65, 84, 93, 52, 78, 10,58,78,20,55],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '化产二车间',
                        data: [ 95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '烧焦二车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '化产一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '炼焦一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '原料一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '众和机电',
                        data: [95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '生产技术部',
                        data: [50, 35, 63, 95, 104,50, 35, 63,35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '选煤厂',
                        data: [5, 35, 67, 64, 45, 95, 23,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '工程部',
                        data: [50, 35, 63, 16, 79, 95, 45,50, 24, 7, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '机电部',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    }
                ]
                series:this.lineChartData.dataList
                // series: [
                //     {
                //         name: '电仪车间',
                //         data: [50, 35, 63, 64, 79, 95, 104, 50, 35, 63, 64],
                //         type: 'line',
                //         areaStyle: {}
                //     }
                // ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
        initLineChart(){
        initLineChart() {
            // 折线图
            var chartDom = document.getElementById('cylindrical');
            // var chartDom = document.getElementById('myChart');
@@ -308,7 +290,7 @@
                    text: '众泰煤焦化各隐患单位隐患走势分析',
                    left: 'center'
                },
                legend:{
                legend: {
                    bottom: 0,
                    // textStyle: {
                    //     color: '#ffffff'
@@ -323,91 +305,27 @@
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                    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: [
                    {
                        name: '电仪车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '原料二车间',
                        data: [50, 65, 84, 93, 52, 78, 10,58,78,20,55],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '化产二车间',
                        data: [ 95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '烧焦二车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '化产一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '炼焦一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '原料一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '众和机电',
                        data: [95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '生产技术部',
                        data: [50, 35, 63, 95, 104,50, 35, 63,35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '选煤厂',
                        data: [5, 35, 67, 64, 45, 95, 23,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '工程部',
                        data: [50, 35, 63, 16, 79, 95, 45,50, 24, 7, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '机电部',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    }
                ]
                series:this.lineChartData.dataList
                // series: [
                //     {
                //         name: '电仪车间',
                //         data: [50, 35, 63, 64, 79, 95, 104, 50, 35, 63, 64],
                //         type: 'line',
                //         areaStyle: {}
                //     }
                // ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
        initCloumnChart(){
        initCloumnChart() {
            // 柱形图
            var chartDom = document.getElementById('cylindrical');
            var myChart = echarts.init(chartDom);
@@ -502,7 +420,7 @@
                    name: {}
                }
            };
            this.columnChartData.dataList.forEach(n=>{
            this.columnChartData.dataList.forEach(n => {
                n.label = labelOption;
            })
            option = {
@@ -538,7 +456,7 @@
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        axisTick: {show: false},
                        // data: ['2012', '2013', '2014', '2015', '2016']
                    }
                ],
@@ -547,7 +465,7 @@
                        type: 'value'
                    }
                ],
                series:this.columnChartData.dataList
                series: this.columnChartData.dataList
                // series: [
                //     {
                //         name: '安全环保部',
@@ -569,88 +487,108 @@
</script>

<style scoped>
.top{
.top {
    padding: 10px 5px;
    background: #e4edf4;
    display: flex;
    flex-direction: column;
}
.top /deep/ .el-form-item__label{

.top /deep/ .el-form-item__label {
    width: 110px;
}
.top /deep/ .el-form-item{

.top /deep/ .el-form-item {
    margin-bottom: 5px;
}

/*多选框间距*/
.checkbox /deep/ .el-checkbox-group{
.checkbox /deep/ .el-checkbox-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.center{

.center {
    text-align: center;
    padding: 10px;
    background: #ffffff;
    margin: 10px 0;
}
.center /deep/ .el-form-item__label{

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

.checkbox {
    display: flex;
}
/deep/ .el-checkbox{

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

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

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

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

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

.center {
    display: flex;
    align-items: center;
    justify-content: start;
}
.center /deep/ .el-form-item--medium{

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

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

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

.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{

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

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

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

 src/views/hiddenDangerReview/recheckCancellationNumber.vue

@@ -194,7 +194,7 @@
                <el-table-column prop="ht_level" label="级别" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="整改计划" align="center">
                <el-table-column prop="measure" label="整改措施" align="center">
                <el-table-column prop="measure" label="整改措施" width="150" align="center">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{ scope.row.measure }}</p>

 src/views/summaryPotentialSafetyHzards/index.vue

@@ -113,9 +113,9 @@
                </div>
            </el-form>
            <el-table id="out-table"
                :data="tableData"
                v-loading="loading"
                style="width: 100%">
                      :data="tableData"
                      v-loading="loading"
                      style="width: 100%">
                <el-table-column align="center" label="众泰煤焦化-安全隐患台帐">
                    <el-table-column
                        prop="y_label"
@@ -159,6 +159,7 @@
import {danger_summary} from "@/api/sgyhpczl/summaryPotentialSafetyHzards";
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
    name: "index",
    data() {
@@ -380,8 +381,13 @@

        showYHList(row, item) {
            var searchData = {};
            searchData[this.form.x_axis] = item.x_label;
            searchData[this.form.y_axis] = row.y_label;
            console.log(item)
            if (item.x_label != null && item.x_label != "合计") {
                searchData[this.form.x_axis] = item.x_label;
            }
            if (row.y_label != null && row.y_label != "合计") {
                searchData[this.form.y_axis] = row.y_label;
            }
            let requestData = {};
            let selectData = []
            for (const queryElement in this.form) {
@@ -404,8 +410,8 @@
                query: {"searchData": searchData}
            })
        },
        exportData(){
            var xlsxParam = { raw: true };
        exportData() {
            var xlsxParam = {raw: true};
            /* 从表生成工作簿对象 */
            var wb = XLSX.utils.table_to_book(
                document.querySelector("#out-table"),
@@ -423,7 +429,7 @@
                    //Blob 表示的不一定是JavaScript原生格式的数据。
                    //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                    //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                    new Blob([wbout], { type: "application/octet-stream" }),
                    new Blob([wbout], {type: "application/octet-stream"}),
                    //设置导出文件名称
                    "安全隐患汇总.xlsx"
                );