隐患图表接口对接

cqf

2022-05-24 3d5cc34ad6e69be337399cb128199d236e7ea08e

隐患图表接口对接

 src/api/sgyhpczl/chartAnalysis.js

@@ -14,3 +14,18 @@
        data
    });
}

export function chart_compare(data) {
    return request({
        headers:{
            'token': getTokenAndVerify().token,
            'verify':getTokenAndVerify().verify
        },
        url: "/taboi/danger/chart_compare",
        contentType: "application/json",
        method: 'POST',
        data
    });
}



 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>

 src/views/common/jdSelect.vue

对比新文件
@@ -0,0 +1,394 @@

<template>
    <div class="el-quarter-picker">
        <el-popover
            v-model="visible"
            :disabled="!canPopover"
            :tabindex="null"
            placement="bottom-start"
            transition="el-zoom-in-top"
            trigger="click">

            <div class="el-date-picker">
                <div class="el-picker-panel__body">
                    <div class="el-date-picker__header el-date-picker__header--bordered" style="margin:0px; line-height:30px">
                        <button
                            type="button"
                            @click="clickLast"
                            aria-label="前一年"
                            class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"></button>
                        <span role="button" class="el-date-picker__header-label" @click="clickYear">{{ title }}</span>
                        <button
                            type="button"
                            @click="clickNext"
                            aria-label="后一年"
                            class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
                    </div>
                    <div class="el-picker-panel__content" style="margin:0px; width:100%">
                        <table class="el-month-table" style="">
                            <tbody>
                            <tr v-for="line in lineCount" :key="line">
                                <td v-for="index in (line * 4 <= viewList.length ? 4 : viewList.length - (line - 1) * 4)" :key="index" :class="{ today: viewList[(line - 1) * 4 + index - 1].current, current: viewList[(line - 1) * 4 + index - 1].active }">
                                    <div><a class="cell" @click="clickItem(viewList[(line - 1) * 4 + index - 1])">{{ viewList[(line - 1) * 4 + index - 1].label }}</a></div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <el-input
                slot="reference"
                @change="changeText"
                @mouseenter.native="mouseEnter"
                @mouseleave.native="mouseLeave"
                :placeholder="placeholder"
                v-model="text"
                :size="size"
                :readonly="!canEdit"
                :disabled="disabled">
                <i slot="prefix" class="el-input__icon el-icon-date"></i>
                <i slot="suffix" class="el-input__icon el-icon-circle-close" v-show="showClear" style="cursor:pointer" @click.stop="clear"></i>
            </el-input>
        </el-popover>
    </div>
</template>

<script>
export default {
    name: 'ElQuarterPicker',
    props: {
        placeholder: {
            type: String,
            default: ''
        },
        size: {
            type: String,
            default: ''
        },
        readonly: {
            type: Boolean,
            default: false
        },
        clearable: {
            type: Boolean,
            default: true
        },
        editable: {
            type: Boolean,
            default: true
        },
        disabled: {
            type: Boolean,
            default: false
        },
        format: {
            type: String,
            default: 'yyyy年第Q季度'
        },
        valueFormat: {
            type: String,
            default: 'yyyy年第q季度'
        },
        value: {
            type: String,
            default: ''
        }
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    watch: {
        value(val) {
            // console.log('change-------', val)
            this.changeValue(val)
        },
        readonly(val) {
            this.canEdit = !val && this.editable
            this.canPopover = !this.disabled && !val
        },
        editable(val) {
            this.canEdit = !this.readonly && val
        },
        disabled(val) {
            this.canPopover = !val && !this.readonly
        }
    },
    data() {
        return {
            visible: false,
            showClear: false, // 控制清空按钮展示
            canEdit: true, // 是否可编辑
            canPopover: true, // 选择器弹出是否可用
            text: '', // 文本框值
            viewType: 1, // 视图类型，1季度，2年度
            viewYear: 0, // 当前年份
            viewList: [], // 数据列表
            lineCount: 0, // 数据行数
            title: '', // 选择器标题
            data: [0, 0] // 当前选择年度-季度
        }
    },
    mounted() {
        // console.log('mounted--------', this.value)
        this.changeValue(this.value)

        // 设置文本框是否可编辑
        this.canEdit = !this.readonly && this.editable
        this.canPopover = !this.disabled && !this.readonly

        // 监听按键(上下左右键可以切换季度)
        document.onkeydown = (event) => {
            if (this.visible) {
                const data = [this.data[0], this.data[1]]
                if (data[0] < 1 || data[1] < 1) {
                    // 以当前季度为标准
                    const curDate = new Date()
                    data[0] = curDate.getFullYear()
                    data[1] = parseInt(curDate.getMonth() / 3) + 1
                }
                if (event.code === 'ArrowLeft') {
                    // 上一个季度
                    if (data[1] === 1) {
                        data[0] = data[0] - 1
                        data[1] = 4
                    } else {
                        data[1] = data[1] - 1
                    }
                } else if (event.code === 'ArrowRight') {
                    // 下一个季度
                    if (data[1] === 4) {
                        data[0] = data[0] + 1
                        data[1] = 1
                    } else {
                        data[1] = data[1] + 1
                    }
                } else if (event.code === 'ArrowUp') {
                    // 上一年季度
                    data[0] = data[0] - 1
                } else if (event.code === 'ArrowDown') {
                    // 下一年季度
                    data[0] = data[0] + 1
                } else {
                    return
                }

                // 超过年限的不处理
                if (data[0] < 1000 || data[0] > 9999) {
                    return
                }
                this.data = data
                this.viewType = 1
                this.viewYear = data[0]
                this.$emit('change', this.formatTo(data, this.valueFormat))
            }
        }
    },
    destroyed() {
        document.onkeydown = null
    },
    methods: {
        // 季度文本变更
        changeText() {
            if (this.checkFormat(this.format, this.text)) {
                // 设置值
                this.formatFrom(this.text, this.format)
                this.$emit('change', this.formatTo(this.data, this.valueFormat))
            } else {
                // 输入了无效的格式，还原回原来的值
                if (this.data[0] < 1 || this.data[1] < 1) {
                    this.text = ''
                } else {
                    this.text = this.formatTo(this.data, this.format)
                }
            }
            this.visible = false
        },
        // 鼠标进入
        mouseEnter() {
            if (!this.disabled && !this.readonly && this.clearable && this.text !== '') {
                this.showClear = true
            }
        },
        // 鼠标离开
        mouseLeave() {
            if (!this.disabled && this.clearable) {
                this.showClear = false
            }
        },
        // 清除季度
        clear() {
            this.showClear = false
            this.visible = false
            this.$emit('change', '')
        },
        // 季度值变更
        changeValue(val) {
            this.viewType = 1
            if (val) {
                // 反向格式化
                this.formatFrom(val, this.valueFormat)
                this.text = this.formatTo(this.data, this.format)
                this.viewYear = this.data[0]
            } else {
                this.text = ''
                this.data = [0, 0]
                this.viewYear = new Date().getFullYear()
            }
            this.initView()
        },
        // 初始化视图数据
        initView() {
            const list = []
            const curDate = new Date()
            const curYear = curDate.getFullYear()
            const curQuarter = parseInt(curDate.getMonth() / 3) + 1
            if (this.viewType === 1) {
                let index = 0
                for (const i of '一二三四') {
                    index++
                    const item = { label: '第' + i + '季度', year: this.viewYear, quarter: index, current: false, active: false }
                    if (this.viewYear === curYear && index === curQuarter) {
                        item.current = true
                    } else if (this.viewYear === this.data[0] && index === this.data[1]) {
                        item.active = true
                    }
                    list.push(item)
                }
                this.title = this.viewYear + ' 年'
            } else {
                const start = parseInt(this.viewYear / 10) * 10
                this.viewYear = start
                for (let i = 0; i < 10; i++) {
                    const year = start + i
                    const item = { label: year + '', year: year, current: false, active: false }
                    if (year === curYear) {
                        item.current = true
                    } else if (year === this.data[0]) {
                        item.active = true
                    }
                    list.push(item)
                }
                this.title = start + ' 年 - ' + (start + 9) + ' 年'
            }
            this.viewList = list
            this.lineCount = parseInt(list.length / 4)
            if (list.length % 4 > 0) {
                this.lineCount++
            }
        },
        // 校验季度格式是否正确
        checkFormat(pattern, val) {
            // 格式转成正则表达式
            let text = ''
            for (const char of pattern) {
                const dict = '\\^$.+?*[]{}!'
                if (dict.indexOf(char) === -1) {
                    text += char
                } else {
                    text += '\\' + char
                }
            }
            text = text.replace('yyyy', '[1-9]\\d{3}')
            text = text.replace('qq', '0[1-4]')
            text = text.replace('q', '[1-4]')
            text = text.replace('Q', '[一二三四]')
            text = '^' + text + '$'
            const patt = new RegExp(text)
            return patt.test(val)
        },
        // 格式化季度到指定格式
        formatTo(data, pattern) {
            let text = pattern.replace('yyyy', '' + data[0])
            text = text.replace('qq', '0' + data[1])
            text = text.replace('q', '' + data[1])
            text = text.replace('Q', '一二三四'.substr(data[1] - 1, 1))
            return text
        },
        // 以指定格式解析季度
        formatFrom(str, pattern) {
            const year = this.findText(str, pattern, 'yyyy')
            const quarter = this.findText(str, pattern, ['qq', 'q', 'Q'])
            this.data = [year, quarter]
        },
        // 查找文本数值
        findText(str, pattern, find) {
            if (find instanceof Array) {
                for (const f of find) {
                    const val = this.findText(str, pattern, f)
                    if (val !== -1) {
                        return val
                    }
                }
                return -1
            }
            const index = pattern.indexOf(find)
            if (index === -1) {
                return index
            }
            const val = str.substr(index, find.length)
            if (find === 'Q') {
                return '一二三四'.indexOf(val) + 1
            } else {
                return parseInt(val)
            }
        },
        // 年份点击
        clickYear() {
            if (this.viewType !== 1) {
                return
            }
            // 切换年度选择器
            this.viewType = 2
            this.initView()
        },
        // 季度选择
        clickItem(item) {
            // console.log('select--------', item)
            if (this.viewType === 1) {
                // 选择季度
                this.$emit('change', this.formatTo([item.year, item.quarter], this.valueFormat))
                this.visible = false
            } else {
                // 选择年度
                this.viewType = 1
                this.viewYear = item.year
                this.initView()
            }
        },
        // 上一年
        clickLast() {
            if (this.viewYear > 1000) {
                if (this.viewType === 1) {
                    this.viewYear--
                    this.initView()
                } else {
                    this.viewYear = this.viewYear - 10
                    this.initView()
                }
            }
        },
        // 下一年
        clickNext() {
            if (this.viewYear < 9999) {
                if (this.viewType === 1) {
                    this.viewYear++
                    this.initView()
                } else {
                    this.viewYear = this.viewYear + 10
                    this.initView()
                }
            }
        }
    }
}
</script>

<style>
.el-quarter-picker {
    width: 220px;
    display: inline-block;
}
</style>