From 4f4cef1e47f7af9bff223ea8f448c81198ee58f7 Mon Sep 17 00:00:00 2001 From: 13937891274 <kxc0822> Date: 星期五, 20 五月 2022 18:08:22 +0800 Subject: [PATCH] 隐患图表分析 --- src/views/chartAnalysis/index.vue | 794 ++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 679 insertions(+), 115 deletions(-) diff --git a/src/views/chartAnalysis/index.vue b/src/views/chartAnalysis/index.vue index bf6f6da..103dab2 100644 --- a/src/views/chartAnalysis/index.vue +++ b/src/views/chartAnalysis/index.vue @@ -1,25 +1,101 @@ <template> <div> <div class="whole_top"> - <el-form ref="form" :inline="true" :model="form" label-width="100px"> + <el-form ref="form" :inline="true" :model="form"> <div class="top"> - <el-form-item> - <el-checkbox-group v-model="checkList"> - <el-checkbox label="复选框 A"></el-checkbox> - <el-checkbox label="复选框 B"></el-checkbox> - <el-checkbox label="复选框 C"></el-checkbox> + <el-form-item label="类别:"> + <el-checkbox-group v-model="categoryList"> + <el-checkbox label="生产"></el-checkbox> + <el-checkbox label="设备"></el-checkbox> + <el-checkbox label="电气"></el-checkbox> + <el-checkbox label="仪表"></el-checkbox> + <el-checkbox label="安全管理"></el-checkbox> + <el-checkbox label="其他"></el-checkbox> </el-checkbox-group> </el-form-item> - <el-form-item> - <el-checkbox-group v-model="checkList"> - <el-checkbox label="复选框 A"></el-checkbox> - <el-checkbox label="复选框 B"></el-checkbox> - <el-checkbox label="复选框 C"></el-checkbox> - </el-checkbox-group> + <el-form-item label="级别:"> + <el-checkbox-group v-model="levelList"> + <el-checkbox label="一般隐患D"></el-checkbox> + <el-checkbox label="一般隐患C"></el-checkbox> + <el-checkbox label="重大隐患B"></el-checkbox> + <el-checkbox label="重大隐患A"></el-checkbox> + </el-checkbox-group> + </el-form-item> + <el-form-item label="上级单位:"> + <el-checkbox-group v-model="superiorUnitList"> + <el-checkbox label="新疆能源"></el-checkbox> + <el-checkbox label="河南能源"></el-checkbox> + <el-checkbox label="新疆能源小分队"></el-checkbox> + <el-checkbox label="河南能源小分队"></el-checkbox> + <el-checkbox label="新疆能源救护大队"></el-checkbox> + <el-checkbox label="河南省应急管理厅"></el-checkbox> + <el-checkbox label="河南省工信厅"></el-checkbox> + <el-checkbox label="所属县市安监部门"></el-checkbox> + </el-checkbox-group> + </el-form-item> + <el-form-item label="检查类别:" class="checkbox"> + <el-checkbox-group v-model="inspectionCategoryList"> + <el-checkbox label="日常检查"></el-checkbox> + <el-checkbox label="领导深入现场"></el-checkbox> + <el-checkbox label="安全大检查"></el-checkbox> + <el-checkbox label="生产系统专业检查"></el-checkbox> + <el-checkbox label="设备系统专业检查"></el-checkbox> + <el-checkbox label="电气系统专业检查"></el-checkbox> + <el-checkbox label="仪表系统专业检查"></el-checkbox> + <el-checkbox label="安全管理专业检查"></el-checkbox> + <el-checkbox label="其他专项检查"></el-checkbox> + <el-checkbox label="双击建设考核"></el-checkbox> + <el-checkbox label="安全标准化验收"></el-checkbox> + <el-checkbox label="职业卫生健康"></el-checkbox> + <el-checkbox label="举一反三"></el-checkbox> + <el-checkbox label="安全督察小分队"></el-checkbox> + </el-checkbox-group> + </el-form-item> + <el-form-item label="当前警情:"> + <el-checkbox-group v-model="policeSituationList"> + <el-checkbox label="轻警"></el-checkbox> + <el-checkbox label="低警"></el-checkbox> + <el-checkbox label="中警"></el-checkbox> + <el-checkbox label="重警"></el-checkbox> + </el-checkbox-group> + </el-form-item> + <el-form-item style="margin-left: 30px;"> + <el-radio-group v-model="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 :label="7">按当前警情</el-radio> + </el-radio-group> + <el-radio-group v-model="radio2" style="margin-left: 50px;"> + <el-radio :label="1">曲线图</el-radio> + <el-radio :label="2">饼状图</el-radio> + <el-radio :label="3">柱形图</el-radio> + </el-radio-group> </el-form-item> </div> - <div class="center" style="text-align: center;padding-top: 10px;"> - <el-form-item label="检查时间:"> + <div class="center"> + <el-form-item label="已选单位:"> + <el-input v-model="form.name"></el-input> + </el-form-item> + <el-form-item label="已选类别:"> + <el-input v-model="form.category"></el-input> + </el-form-item> + <el-form-item label="已选级别:"> + <el-input v-model="form.level"></el-input> + </el-form-item> + <el-form-item label="已选上级单位:"> + <el-input v-model="form.superiorUnit"></el-input> + </el-form-item> + <el-form-item label="已选检查类别:"> + <el-input v-model="form.inspectionCategory"></el-input> + </el-form-item> + <el-form-item label="已选当前警情:"> + <el-input v-model="form.policeSituation"></el-input> + </el-form-item> + <el-form-item label="检查时间:" class="time"> <el-date-picker v-model="form.time" type="daterange" @@ -32,85 +108,540 @@ <el-button class="btn" size="small" type="primary" @click="close()" >汇总</el-button> <el-button class="btn" size="small" type="primary" @click="close()" - >导出Excel</el-button> + >同比环比</el-button> </el-form-item> </div> </el-form> -<!-- <el-table--> -<!-- :data="tableData"--> -<!-- style="width: 100%">--> -<!-- <el-table-column align="center" label="众泰煤焦化-安全隐患台帐">--> -<!-- <el-table-column--> -<!-- prop="name"--> -<!-- label="隐患部门\隐患专业"--> -<!-- align="center">--> -<!-- </el-table-column>--> -<!-- <el-table-column--> -<!-- prop="province"--> -<!-- label="采掘"--> -<!-- align="center">--> -<!-- </el-table-column>--> -<!-- <el-table-column--> -<!-- prop="city"--> -<!-- label="生产"--> -<!-- width="120"--> -<!-- align="center">--> -<!-- </el-table-column>--> -<!-- <el-table-column--> -<!-- prop="address"--> -<!-- label="合计"--> -<!-- width="300"--> -<!-- align="center">--> -<!-- </el-table-column>--> -<!-- </el-table-column>--> -<!-- </el-table>--> - <div style="color: #c5021a;margin-top: 20px;"> - <div>温馨提示:</div> - <div>点选可查询隐患详情。</div> - </div> + </div> + <div class="whole_bottom"> +<!-- <div id="myChart" style="width: 100%;height: 550px;"></div>--> +<!-- <div id="circular" style="width: 100%;height: 550px;"></div>--> + <div id="cylindrical" style="width: 100%;height: 650px;"></div> </div> </div> </template> - <script> +import {echarts} from "../../global"; + export default { name: "index", data() { return { form: { + name:'众泰煤焦化', time: '', - region: '', - date1: '', - date2: '', - delivery: false, - type: [], - resource: '', - desc: '' + category: '生产', + level: '一般隐患D', + superiorUnit: '新疆能源', + inspectionCategory: '日常检查', + policeSituation: '轻警', }, - checkList: ['复选框 A'], - tableData: [{ - name: '财务部', - province: '1', - city: '4', - address: '1' - }, { - name: '党委副书记', - province: '0', - city: '2', - address: '0' - }, { - name: '众泰煤焦化', - province: '2', - city: '3', - address: '1' - }, { - name: '王小虎', - province: '3', - city: '9', - address: '2' - }] + categoryList: ['生产'], + levelList:['一般隐患D'], + superiorUnitList: ['新疆能源'], + inspectionCategoryList:['日常检查'], + policeSituationList: ['轻警'], + radio: 1, + radio2: 1, + } + }, + mounted() { + this.initChart() + }, + methods: { + 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('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 myChart = echarts.init(chartDom); + var option; + const posList = [ + 'left', + 'right', + 'top', + 'bottom', + 'inside', + 'insideTop', + 'insideLeft', + 'insideRight', + 'insideBottom', + 'insideTopLeft', + 'insideTopRight', + 'insideBottomLeft', + 'insideBottomRight' + ]; + app.configParameters = { + rotate: { + min: -90, + max: 90 + }, + align: { + options: { + left: 'left', + center: 'center', + right: 'right' + } + }, + verticalAlign: { + options: { + top: 'top', + middle: 'middle', + bottom: 'bottom' + } + }, + position: { + options: posList.reduce(function (map, pos) { + map[pos] = pos; + return map; + }, {}) + }, + distance: { + min: 0, + max: 100 + } + }; + app.config = { + rotate: 90, + align: 'left', + verticalAlign: 'middle', + position: 'insideBottom', + distance: 15, + onChange: function () { + const labelOption = { + rotate: app.config.rotate, + align: app.config.align, + verticalAlign: app.config.verticalAlign, + position: app.config.position, + distance: app.config.distance + }; + myChart.setOption({ + series: [ + { + label: labelOption + }, + { + label: labelOption + }, + { + label: labelOption + }, + { + label: labelOption + } + ] + }); + } + }; + const labelOption = { + show: false, + position: app.config.position, + distance: app.config.distance, + align: app.config.align, + verticalAlign: app.config.verticalAlign, + rotate: app.config.rotate, + formatter: '{c} {name|{a}}', + fontSize: 16, + rich: { + name: {} + } + }; + option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: { + bottom: 0, + data: ['安全环保部', '电仪车间', '干熄焦', '工程部','化产二车间', '化产一车间', '机电部', '炼焦二车间','炼焦一车间', '生产技术部', '消防保卫部', '选煤厂', '原料二车间', '原料一车间', '众和机电'] + }, + grid: { + left: '3%', + right: '4%', + containLabel: true + }, + // toolbox: { + // show: true, + // orient: 'vertical', + // left: 'right', + // top: 'center', + // feature: { + // mark: { show: true }, + // dataView: { show: true, readOnly: false }, + // magicType: { show: true, type: ['line', 'bar', 'stack'] }, + // restore: { show: true }, + // saveAsImage: { show: true } + // } + // }, + xAxis: [ + { + type: 'category', + axisTick: { show: false }, + // data: ['2012', '2013', '2014', '2015', '2016'] + } + ], + yAxis: [ + { + 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] + }, + ] + }; + // 使用刚指定的配置项和数据显示图表。 + myChart.setOption(option) } } + } </script> @@ -118,50 +649,83 @@ .top{ padding: 10px 5px; background: #e4edf4; + display: flex; + flex-direction: column; } -/*下拉框图标隐藏*/ -.whole_top .select /deep/ .el-input__suffix-inner .is-reverse{ +.top /deep/ .el-form-item__label{ + width: 110px; +} +.top /deep/ .el-form-item{ + margin-bottom: 5px; +} +/*多选框间距*/ +.checkbox /deep/ .el-checkbox-group{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} +.center{ + text-align: center; + padding: 10px; + background: #ffffff; + margin: 10px 0; +} +.center /deep/ .el-form-item__label{ + width: auto; + padding-right: 0; +} +.checkbox { + display: flex; +} +/deep/ .el-checkbox{ + margin-right: 7px; +} +.checkbox /deep/ .el-checkbox{ + margin-right: 0px; +} +/deep/ .el-checkbox__label{ + padding-left: 3px; +} +.checkbox /deep/ .el-checkbox__label{ + padding-left: 3px; +} +/deep/ .el-radio{ + margin-right: 7px; +} +.center{ + display: flex; + align-items: center; + justify-content: start; +} +.center /deep/ .el-form-item--medium{ + margin-bottom: 0px; + display: flex; +} +.center /deep/ .el-input__inner{ + border: transparent; + width: 85px; + padding: 0 5px; +} +.center .time /deep/ .el-form-item__content{ + width: 70%; +} +.center .time /deep/ .el-input__inner{ + width: 218px; +} +.center .time /deep/ .el-range-input { + width: 90px; + border: 1px solid #DCDFE6; + border-radius: 4px; + padding: 0 5px; +} +/deep/ .el-icon-date{ display: none; -} -.whole_top .select /deep/ .el-input__suffix-inner .el-icon-arrow-up{ - display: none; -} -/*设下拉框颜色*/ -.select /deep/.el-input__inner { - border: 1px solid #c5dbec; - font-weight: bold; - background: #dfeffc; - /*.el-icon-circle-close*/ -} -.whole_top .select /deep/.el-select .el-input__inner:focus { - color: #e6860b; -} -.select /deep/ .is-focus .el-select__tags-text{ - color: #000000; -} -/*下拉框选值之后的样式*/ -.select /deep/ .el-tag.el-tag--info { - background-color: transparent;; - border-color: transparent; - font-weight: bold; - color: #e6860b; -} -/*placeholder颜色修改*/ -.whole_top ::-webkit-input-placeholder { - color: #000000; -} -.whole_top :-moz-placeholder { - color: #000000; -} -.whole_top ::-moz-placeholder{ - color: #000000; -} -.whole_top :-ms-input-placeholder { - color: #000000; } /*日期*/ /deep/ .el-date-editor .el-range-separator{ width: auto; + line-height: 36px; } .btn{ background-color: #034ea2; -- Gitblit v1.9.2