隐患图表接口对接

cqf

2022-05-24 3d5cc34ad6e69be337399cb128199d236e7ea08e

 src/views/chartAnalysis/index.vue

@@ -38,18 +38,24 @@
                    </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>
@@ -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,6 +214,10 @@
            JCLBList: [],
            YHBMList: [],
            YHJBList: [],
            THDB: false,
            THDBBegin: "",
            THDBEnd: "",
            timeDes: "month",
            YHZTList: [],
            columnXData:[]
        }
@@ -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 = {
@@ -389,7 +501,6 @@
                        }
                        this.lineChartData.timeList = timeList;
                        this.lineChartData.dataList = dataList;
                        console.log(this.lineChartData)
                        this.initLineChart()
                    } else {
                        this.pieChartData = []
@@ -526,8 +637,6 @@
        },
        initCloumnChart() {

            console.log("this.columnChartData.xList",this.columnChartData.xList)
            console.log("this.columnChartData.dataList",this.columnChartData.dataList)
            var option = {
                chart:{
                    type:'column',
@@ -606,9 +715,12 @@

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

.legend-body{
    width: 100%;
    display: flex;
@@ -617,6 +729,7 @@
    font-size: 12px;
    height: 100%;
}

.legend-item{
    display: flex;
    justify-content: flex-start;
@@ -624,56 +737,73 @@
    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;
@@ -779,4 +909,8 @@
    background-color: #034ea2;
    border: 1px solid #034ea2;
}

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