页面优化，接入柱状图

panzy

2022-05-21 b56ab52b724ba0d80761ac78183b968d28e3b75a

页面优化，接入柱状图

 src/api/sgyhpczl/Issuedbysuperiors.js

@@ -56,7 +56,7 @@
        arr.push({field:"check_class",value:data.form.check_class,type:'OPT'})
    }
    /*是否关联*/
    if(data.form.DTRisk_bankId!=null && data.form.DTRisk_bankId!=''){
    if(data.form.DTRisk_bankId!=null){
        arr.push({field:"DTRisk_bankId",value:data.form.DTRisk_bankId,type:'OPT'})
    }
    /*录入人*/

 src/api/sgyhpczl/chartAnalysis.js

对比新文件
@@ -0,0 +1,16 @@
import request from '@/utils/request';
import {getTokenAndVerify} from "@/api/sgyhpczl/auth";


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

 src/router/index.js

@@ -381,13 +381,6 @@
                meta: { title: '上级下达隐患', icon: '' }
            },
              {
                  path: '/superiorsSend',
                  // name: '上级下达隐患-点击发送',
                  component: () => import('@/views/Issuedbysuperiors/superiorsSend'),
                  // meta: { title: '上级下达隐患-点击发送', icon: '' }
                  hidden: true
              },
            {
                id: 10,
                parentId: 0,
                path: '/oneFromanotherN',
@@ -487,6 +480,13 @@
                  hidden: true
              },
              {
                  path: '/dangerDetails',
                  // name: '安全隐患汇总-发送隐患单',
                  component: () => import('@/views/dangerDetails/dnagerDetails'),
                  // meta: { title: '安全隐患汇总-发送隐患单', icon: '' }
                  hidden: true
              },
              {
                  id: 12,
                  parentId: 0,
                  path: '/chartAnalysis',
@@ -501,13 +501,6 @@
                name: '您关注的隐患',
                component: () => import('@/views/careabout'),
                meta: { title: '您关注的隐患', icon: '' }
            },
              {
                  path: '/managementConcerns',
                  // name: '您关注的隐患-管理关注',
                  component: () => import('@/views/careabout/managementConcerns'),
                  // meta: { title: '您关注的隐患-管理关注', icon: '' }
                  hidden: true
              },
            {
                id: 14,

 src/views/Issuedbysuperiors/index.vue

@@ -157,33 +157,72 @@
        </el-row>
        <el-table :data="tableData" style="width: 100%" @selection-change="changeBox">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="number" label="编号" align="center" width="120"></el-table-column>
            <el-table-column prop="number" label="编号" align="center" width="120">
                <template slot-scope="scope">
                    <div class="blue-font-color" @click="showDetails(scope.row)">{{ scope.row.number }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="check_branch" label="检查部门" align="center" width="120"></el-table-column>
            <el-table-column prop="check_man" label="检查人" align="center" width="120"></el-table-column>
            <el-table-column prop="checktype" label="检查类别" align="center"></el-table-column>
            <el-table-column label="隐患项目" align="center">
                <el-table-column prop="check_date" label="检查时间" width="120" align="center"></el-table-column>
                <el-table-column prop="address" label="地点" align="center"></el-table-column>
                <el-table-column prop="ht_content" label="内容" align="center"></el-table-column>
                <el-table-column prop="check_date" label="检查时间" width="120"  align="center">
                    <template slot-scope="scope">
                        <label>{{ formatDate(scope.row.check_date) }}</label><br/>
                        <label>{{ scope.row.check_class }}</label>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="地点" align="center">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{ scope.row.address }}</p>
                            <div slot="reference" class="name-wrapper">{{
                                    scope.row.address != null && scope.row.address.length > 10 ? scope.row.address.substring(0, 8) + "...." : scope.row.address
                                }}
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="ht_content" label="内容" align="center">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{ scope.row.ht_content }}</p>
                            <div slot="reference" class="name-wrapper">{{
                                    scope.row.ht_content != null && scope.row.ht_content.length > 10 ? scope.row.ht_content.substring(0, 8) + "...." : scope.row.ht_content
                                }}
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="ht_typesub" label="类别" align="center"></el-table-column>
                <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>
                <el-table-column prop="measure" label="整改措施" align="center">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{ scope.row.measure }}</p>
                            <div slot="reference" class="name-wrapper">{{
                                    scope.row.measure != null && scope.row.measure.length > 10 ? scope.row.measure.substring(0, 8) + "...." : scope.row.measure
                                }}
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="ht_branch" label="隐患部门" align="center"></el-table-column>
                <el-table-column prop="duty_officer" label="责任人" align="center"></el-table-column>
                <el-table-column prop="alter_time" label="限改时间" width="120" align="center"></el-table-column>
                <el-table-column prop="alter_time" label="限改时间" :formatter="formatColumnDate" width="120" align="center"></el-table-column>
                <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="ACCOMPLISHTIME" label="完成时间" width="110px" align="center"></el-table-column>
                <el-table-column prop="ACCOMPLISHTIME" label="完成时间" :formatter="formatColumnDate" width="110px" align="center"></el-table-column>
                <el-table-column prop="CALLBACKRESULT" label="复查结果" align="center"></el-table-column>
                <el-table-column prop="CALLBACKPERSON" label="复查人" align="center"></el-table-column>
                <el-table-column prop="CALLBACKTIME" label="复查时间" width="120" align="center"></el-table-column>
                <el-table-column prop="CALLBACKTIME" label="复查时间" :formatter="formatColumnDate" width="120" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="隐患处理状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.step =='1'">初始状态</span>
                    <span v-if="scope.row.step =='1'">未发送</span>
                    <span v-if="scope.row.step =='2'">整改中</span>
                    <span v-if="scope.row.step =='3'">复查中</span>
                    <span v-if="scope.row.step =='end'">处理结束</span>
@@ -191,7 +230,7 @@
            </el-table-column>
            <el-table-column prop="DTRisk_bankId" label="是否关联" align="center">
                <template slot-scope="scope">
                    <span
                    <span style="color: red"
                        v-if="scope.row.DTRisk_bankId==0 || scope.row.DTRisk_bankId=='' || scope.row.DTRisk_bankId==null">未关联</span>
                    <span v-else>已关联</span>
                </template>
@@ -279,6 +318,7 @@
        this.initLlr()
        this.initYHBM()
        this.initYHZT()
        this.changeJCDW()
    },
    watch: {
        "YHType": function (newVal, oldVal) {
@@ -496,6 +536,25 @@
                .catch(error => {
                });
        },
        //方法区
        formatDate(data) {
            // 获取单元格数据
            if (data == null) {
                return null
            }
            let dt = new Date(data)
            return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
        },
        //方法区
        formatColumnDate(row, column) {
            // 获取单元格数据
            let data = row[column.property]
            if (data == null) {
                return null
            }
            let dt = new Date(data)
            return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' '
        },
        exportData() {
            var requestData = this.listQuery;
            requestData.export_type = 5;
@@ -516,6 +575,12 @@
                console.log(err)
            })
        },
        showDetails(row) {
            this.$router.push({
                path: "/dangerDetails",
                query: {"id": row.id, "route": "/Issuedbysuperiors"}
            })
        }
    }
};
</script>
@@ -547,6 +612,10 @@
    border: none;
    border-radius: 0px;
}
.blue-font-color:hover{
    cursor: pointer;
    color: blue;
}

.title-center /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: #034ea2;

 src/views/chartAnalysis/index.vue

@@ -122,6 +122,7 @@
</template>
<script>
import {echarts} from "../../global";
import {chart_analysis} from "@/api/sgyhpczl/chartAnalysis";

export default {
    name: "index",
@@ -136,6 +137,17 @@
                inspectionCategory: '日常检查',
                policeSituation: '轻警',
            },
            formData:{
                "echart_type": "column", //line:折线图；column：柱状图；pie :饼状图
                "model": "0", //0：
                "beginTime": "2022-04-01", //开始时间
                "endTime": "2022-04-30", //结束时间
                "ht_typesub": "", //隐患类别
                "level": "", //隐患级别
                "superior": "", //上级单位
                "checktype": "", //检查类别
                "curWarningLevel": "" //警情
            },
            categoryList: ['生产'],
            levelList:['一般隐患D'],
            superiorUnitList: ['新疆能源'],
@@ -143,227 +155,259 @@
            policeSituationList: ['轻警'],
            radio: 1,
            radio2: 1,
            columnChartData:{}
        }
    },
    mounted() {
        this.initChart()
        this.getData()
    },
    methods: {
        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 sigleData = {
                            "name": n.graph,
                            "type": 'bar',
                            "label": "labelOption",
                            "emphasis": {
                                focus: 'series'
                            },
                            "data": [n.yAxes]
                        }
                        dataList.push(sigleData);
                    })
                    this.columnChartData.xList = xList;
                    this.columnChartData.dataList = dataList;
                    this.initCloumnChart()
                    // this.initChart()
                }

            })
        },
        initChart() {
            // 折线图
            // 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: ['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: {}
            //         }
            //     ]
            // }
            // // 使用刚指定的配置项和数据显示图表。
            // myChart.setOption(option)

            // 饼图
            var chartDom = document.getElementById('cylindrical');
            // var chartDom = document.getElementById('myChart');
            // var myChart = echarts.init(chartDom);
            // var option = {
            //     title: {
            //         text: '众泰煤焦化各隐患单位隐患走势分析',
            //         left: 'center'
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: '众泰煤焦化各隐患单位隐患走势分析',
                    left: 'center'
                },
                legend:{
                    bottom: 0,
                    // textStyle: {
                    //     color: '#ffffff'
            //     },
            //     legend:{
            //         bottom: 0,
            //         // textStyle: {
            //         //     color: '#ffffff'
            //         // },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    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: {}
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
        initLineChart(){
            // 折线图
            var chartDom = document.getElementById('cylindrical');
            // 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: ['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: {}
            //         }
            //     ]
            // }
            // // 使用刚指定的配置项和数据显示图表。
            // myChart.setOption(option)

                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    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: {}
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
        initCloumnChart(){
            // 柱形图
            var chartDom = document.getElementById('cylindrical');
            var myChart = echarts.init(chartDom);
@@ -458,6 +502,9 @@
                    name: {}
                }
            };
            this.columnChartData.dataList.forEach(n=>{
                n.label = labelOption;
            })
            option = {
                tooltip: {
                    trigger: 'axis',
@@ -467,7 +514,8 @@
                },
                legend: {
                    bottom: 0,
                    data: ['安全环保部', '电仪车间', '干熄焦', '工程部','化产二车间', '化产一车间', '机电部', '炼焦二车间','炼焦一车间', '生产技术部', '消防保卫部', '选煤厂', '原料二车间', '原料一车间', '众和机电']
                    data: this.columnChartData.xList
                    // data: ['安全环保部', '电仪车间', '干熄焦', '工程部','化产二车间', '化产一车间', '机电部', '炼焦二车间','炼焦一车间', '生产技术部', '消防保卫部', '选煤厂', '原料二车间', '原料一车间', '众和机电']
                },
                grid: {
                    left: '3%',
@@ -499,143 +547,18 @@
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '安全环保部',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320]
                    },
                    {
                        name: '电仪车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [332]
                    },
                    {
                        name: '干熄焦',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150]
                    },
                    {
                        name: '工程部',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [541]
                    },
                    {
                        name: '化产二车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [256]
                    },
                    {
                        name: '化产一车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [351]
                    },
                    {
                        name: '机电部',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [122]
                    },
                    {
                        name: '炼焦二车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220]
                    },
                    {
                        name: '炼焦一车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [255]
                    },
                    {
                        name: '生产技术部',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [122]
                    },
                    {
                        name: '消防保卫部',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220]
                    },
                    {
                        name: '选煤厂',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [255]
                    },
                    {
                        name: '原料二车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [255]
                    },
                    {
                        name: '原料一车间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [255]
                    },
                    {
                        name: '众和机电',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [255]
                    },
                ]
                series:this.columnChartData.dataList
                // series: [
                //     {
                //         name: '安全环保部',
                //         type: 'bar',
                //         label: labelOption,
                //         emphasis: {
                //             focus: 'series'
                //         },
                //         data: [320]
                //     }
                // ]
            };
                // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)

 src/views/dangerDetails/dnagerDetails.vue

@@ -404,12 +404,18 @@
                }
            },
            close(){
                if(this.$route.query.route!=null && this.$route.query.route!=''){
                    this.$router.push({
                        path: this.$route.query.route
                    })
                }else{
                this.$router.push({
                    path:"/hiddenDangerRectification"
                })
            }
        }
    }
    }
</script>

<style scoped>

 src/views/safetyHazardAccount/index.vue

@@ -195,7 +195,11 @@
        </el-row>
        <el-table :data="tableData" ref="pageTable" style="width: 100%" @selection-change="changeBox">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="number" label="编号" align="center" width="120"></el-table-column>
            <el-table-column prop="number" label="编号" align="center" width="120">
                <template slot-scope="scope">
                    <div class="blue-font-color" @click="showDetails(scope.row)">{{ scope.row.number }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="check_branch" label="检查部门" align="center" width="120"></el-table-column>
            <el-table-column prop="check_man" label="检查人" align="center" width="120"></el-table-column>
            <el-table-column prop="checktype" label="检查类别" align="center"></el-table-column>
@@ -682,6 +686,12 @@
                    }
                })
            }
        },
        showDetails(row){
            this.$router.push({
                path: "/dangerDetails",
                query:{"id":row.id,"route":"/safetyHazardAccount"}
            })
        }
    }
};
@@ -719,5 +729,10 @@
    background-color: #034ea2;
    background-color: #034ea2;
}

.blue-font-color:hover{
    cursor: pointer;
    color: blue;
}
</style>