cqf
2022-05-24 3d5cc34ad6e69be337399cb128199d236e7ea08e
src/views/chartAnalysis/index.vue
@@ -38,24 +38,30 @@
                    </el-form-item>
                    <el-form-item style="margin-left: 30px;">
                        <el-radio-group v-model="formData.model">
                            <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 label="7">按当前警情</el-radio>
                            <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" style="margin-left: 50px;">
                        <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>
                </div>
                <div class="center">
                    <el-form-item label="已选单位:">
                        <el-input autosize  v-model="form.name"></el-input>
                        <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>
@@ -72,8 +78,9 @@
                    <el-form-item label="已选当前警情:">
                        <el-input v-model="formData.curWarningLevel.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="检查时间:" class="time">
                    <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="至"
@@ -81,11 +88,39 @@
                            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="getData()"
                        >汇总
                        </el-button>
                        <el-button class="btn" size="small" type="primary" @click="close()"
                        <el-button v-if="!THDB" class="btn" size="small" type="primary" @click="THDB=true"
                        >同比环比
                        </el-button>
                    </el-form-item>
@@ -100,7 +135,8 @@
                <div class="legend-body">
                    <div v-for="(item,index) in this.columnChartData.xList" class="legend-item">
                        <div :class="'legendItemBack'+index"></div>{{item}}
                        <div :class="'legendItemBack'+index"></div>
                        {{ item }}
                    </div>
                </div>
            </div>
@@ -109,7 +145,7 @@
</template>
<script>
import {echarts} from "../../global";
import {chart_analysis} from "@/api/sgyhpczl/chartAnalysis";
import {chart_analysis,chart_compare} from "@/api/sgyhpczl/chartAnalysis";
import {
    initJCBM,
    initYHLX,
@@ -126,6 +162,7 @@
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);
@@ -134,8 +171,11 @@
export default {
    name: "index",
    components: {ElQuarterPicker},
    data() {
        return {
            value: '',
            form: {
                name: '众泰煤焦化',
                time: '',
@@ -148,7 +188,7 @@
            },
            formData: {
                "echart_type": "line", //line:折线图;column:柱状图;pie :饼状图
                "model": "1", //0:
                "model": "0", //0:
                "beginTime": "", //开始时间
                "endTime": "", //结束时间
                "ht_typesub": [], //隐患类别
@@ -174,8 +214,12 @@
            JCLBList: [],
            YHBMList: [],
            YHJBList: [],
            THDB: false,
            THDBBegin: "",
            THDBEnd: "",
            timeDes: "month",
            YHZTList: [],
            columnXData:[]
            columnXData: []
        }
    },
    mounted() {
@@ -187,17 +231,38 @@
        this.initLlr()
        this.initYHBM()
        this.initYHZT()
        this.changeJCDW(0)
        this.changeJCDW(1)
        this.getData()
        this.initTHDBTime()
    },
    watch: {
        "chartType": function (newVal, oldVal) {
            this.formData.echart_type = newVal;
            console.log(this.formData.echart_type)
            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) {
@@ -220,7 +285,6 @@
            initReformStatus().then(res => {
                if (res.data.ok == 1) {
                    this.YHZTList = res.data.data
                    console.log(this.YHZTList)
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
@@ -313,24 +377,72 @@
        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));
            console.log(requestData)
            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) {
                    console.log(this.formData.echart_type)
                    if (this.formData.echart_type == "column") {
                        this.columnChartData = {};
                        let xList = [];
                        let dataList = [];
                        if (data.data != null && data.data.length > 0) {
                            console.log("柱图",data)
                            data.data[0].forEach(n => {
                                xList.push(n.graph);
                                let singleData = {
@@ -346,13 +458,13 @@
                            })
                        }
                        this.columnChartData.xList = xList;
                        this.columnChartData.dataList=[]
                        this.columnChartData.dataList = []
                        this.columnChartData.dataList.push(
                            {
                                data:dataList,
                                colorByPoint:true
                                data: dataList,
                                colorByPoint: true
                            }
                            );
                        );
                        this.initCloumnChart()
                    } else if (this.formData.echart_type == "line") {
                        this.lineChartData = {}
@@ -389,7 +501,6 @@
                        }
                        this.lineChartData.timeList = timeList;
                        this.lineChartData.dataList = dataList;
                        console.log(this.lineChartData)
                        this.initLineChart()
                    } else {
                        this.pieChartData = []
@@ -490,15 +601,15 @@
            // myChart.setOption(option)
            var option = {
                chart:{
                    type:'area'
                chart: {
                    type: 'area'
                },
                title: {
                    text: '众泰煤焦化各隐患单位隐患走势分析'
                },
                yAxis: {
                    title:{
                        enabled:false
                    title: {
                        enabled: false
                    }
                },
                colors: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
@@ -526,35 +637,33 @@
        },
        initCloumnChart() {
            console.log("this.columnChartData.xList",this.columnChartData.xList)
            console.log("this.columnChartData.dataList",this.columnChartData.dataList)
            var option = {
                chart:{
                    type:'column',
                    marginBottom:70
                chart: {
                    type: 'column',
                    marginBottom: 70
                },
                title: {
                    text: null
                },
                yAxis: {
                    title:{
                        enabled:false
                    title: {
                        enabled: false
                    }
                },
                tooltip:{
                    formatter:function () {
                        return this.x+" : "+this.y
                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,
                    enabled: false,
                },
                xAxis: {
                    // type: 'category',
                    // boundaryGap: false,
                    categories: this.columnChartData.xList,
                    max:this.columnChartData.xList.length-1
                    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,
@@ -605,11 +714,14 @@
</script>
<style scoped>
.legend{
    position: absolute;bottom: 10px;z-index: 2;
.legend {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
}
.legend-body{
.legend-body {
    width: 100%;
    display: flex;
    justify-content: center;
@@ -617,63 +729,81 @@
    font-size: 12px;
    height: 100%;
}
.legend-item{
.legend-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
    line-height: 1.5;
}
.legend-item div{
.legend-item div {
    width: 20px;
    height: 15px;
    margin-right: 10px;
}
.legendItemBack0{
.legendItemBack0 {
    background-color: #ff6600;
}
.legendItemBack1{
.legendItemBack1 {
    background-color: #fcd202;
}
.legendItemBack2{
.legendItemBack2 {
    background-color: #b0de09;
}
.legendItemBack3{
.legendItemBack3 {
    background-color: #0289cc;
}
.legendItemBack4{
.legendItemBack4 {
    background-color: #2001cd;
}
.legendItemBack5{
.legendItemBack5 {
    background-color: #cd0d74;
}
.legendItemBack6{
.legendItemBack6 {
    background-color: #cc0000;
}
.legendItemBack7{
.legendItemBack7 {
    background-color: #00cc00;
}
.legendItemBack8{
.legendItemBack8 {
    background-color: #0000cc;
}
.legendItemBack9{
.legendItemBack9 {
    background-color: #dddddd;
}
.legendItemBack10{
.legendItemBack10 {
    background-color: #999999;
}
.legendItemBack11{
.legendItemBack11 {
    background-color: #333333;
}
.legendItemBack12{
.legendItemBack12 {
    background-color: #990000;
}
.legendItemBack13{
.legendItemBack13 {
    background-color: #92e3d4;
}
.legendItemBack14{
.legendItemBack14 {
    background-color: #f09aea;
}
.top {
    padding: 10px 5px;
    background: #e4edf4;
@@ -779,4 +909,8 @@
    background-color: #034ea2;
    border: 1px solid #034ea2;
}
>>> .center .time[data-v-21f55eb3] .el-input__inner {
    width: 100px;
}
</style>