| | |
| | | <template> |
| | | <div> |
| | | <div class="whole_top"> |
| | | <el-form ref="form" :inline="true" :model="form"> |
| | | <el-form ref="form" :inline="true" :model="formData"> |
| | | <div class="top"> |
| | | <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 v-model="formData.ht_typesub"> |
| | | <el-checkbox v-for="item in YHLXList" :key="item.value" :value="item.value" |
| | | :label="item.value"></el-checkbox> |
| | | </el-checkbox-group> |
| | | </el-form-item> |
| | | <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 v-model="formData.level"> |
| | | <el-checkbox v-for="item in YHJBList" :key="item.value" :value="item.value" |
| | | :label="item.value"></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 v-model="formData.superior"> |
| | | <!-- <el-checkbox v-for="item in JCBMList" :label="item.value"></el-checkbox>--> |
| | | <el-checkbox v-for="item in JCBMList" :key="item.value" :value="item.value" |
| | | :label="item.value"></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 v-model="formData.checktype"> |
| | | <el-checkbox v-for="item in JCLBList" :key="item.value" :value="item.value" |
| | | :label="item.value"></el-checkbox> |
| | | </el-checkbox-group> |
| | | </el-form-item> |
| | | <el-form-item label="当前警情:"> |
| | | <el-checkbox-group v-model="policeSituationList"> |
| | | <el-checkbox-group v-model="formData.curWarningLevel"> |
| | | <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 v-model="formData.model"> |
| | | <el-radio label="0">按隐患单位</el-radio> |
| | | <el-radio label="1">按类别</el-radio> |
| | | <el-radio label="2">按级别</el-radio> |
| | | <el-radio label="3">按检查单位</el-radio> |
| | | <el-radio label="4">按录入单位</el-radio> |
| | | <el-radio label="5">按检查类别</el-radio> |
| | | <el-radio label="6">按当前警情</el-radio> |
| | | </el-radio-group> |
| | | <el-radio-group v-model="chartType" style="margin-left: 50px;"> |
| | | <el-radio-group v-model="chartType" v-if="!THDB" style="margin-left: 50px;"> |
| | | <el-radio label="line">曲线图</el-radio> |
| | | <el-radio label="pie">饼状图</el-radio> |
| | | <el-radio label="column">柱形图</el-radio> |
| | | </el-radio-group> |
| | | |
| | | <el-radio-group v-model="timeDes" v-if="THDB" @change="initTHDBTime" style="margin-left: 50px;"> |
| | | <el-radio label="month">月度</el-radio> |
| | | <el-radio label="quarter">季度</el-radio> |
| | | <el-radio label="year">年度</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="center"> |
| | | <el-form-item label="已选单位:"> |
| | | <el-input v-model="form.name"></el-input> |
| | | <el-input autosize v-model="form.name"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="已选类别:"> |
| | | <el-input v-model="form.category"></el-input> |
| | | <el-form-item autosize label="已选类别:"> |
| | | <el-input v-model="formData.ht_typesub.join(',')"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="已选级别:"> |
| | | <el-input v-model="form.level"></el-input> |
| | | <el-input v-model="formData.level.join(',')"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="已选上级单位:"> |
| | | <el-input v-model="form.superiorUnit"></el-input> |
| | | <el-input v-model="formData.superior.join(',')"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="已选检查类别:"> |
| | | <el-input v-model="form.inspectionCategory"></el-input> |
| | | <el-input v-model="formData.checktype.join(',')"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="已选当前警情:"> |
| | | <el-input v-model="form.policeSituation"></el-input> |
| | | <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 |
| | | v-model="form.time" |
| | | style="width: 218px" |
| | | v-model="time" |
| | | type="daterange" |
| | | range-separator="至" |
| | | value-format="yyyy-MM-dd" |
| | | start-placeholder="开始日期" |
| | | 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="close()" |
| | | <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> |
| | | </div> |
| | | </el-form> |
| | | </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 class="whole_bottom" style="position: relative;z-index: 1"> |
| | | <div id="heigcharts" style="width: 100%;height: 550px;"></div> |
| | | <!--<div v-if="chartType == 'line'" id="line" style="width: 100%;height: 550px;"></div>--> |
| | | <!--<div v-if="chartType == 'column'" id="column" style="width: 100%;height: 550px;"></div>--> |
| | | <div v-if="chartType == 'column'" class="legend"> |
| | | <div class="legend-body"> |
| | | |
| | | <div v-for="(item,index) in this.columnChartData.xList" class="legend-item"> |
| | | <div :class="'legendItemBack'+index"></div> |
| | | {{ item }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </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, |
| | | initBC, |
| | | initJCLB, |
| | | initYHBM, |
| | | initYHJB, |
| | | initLlr, |
| | | initReformStatus |
| | | } from "@/api/sgyhpczl/initSelect"; |
| | | |
| | | // 导入chart组件 |
| | | import Highcharts from "highcharts/highstock"; |
| | | 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); |
| | | highcharts3d(Highcharts) |
| | | |
| | | |
| | | export default { |
| | | name: "index", |
| | | components: {ElQuarterPicker}, |
| | | |
| | | data() { |
| | | return { |
| | | value: '', |
| | | form: { |
| | | name: '众泰煤焦化', |
| | | time: '', |
| | |
| | | superiorUnit: '新疆能源', |
| | | inspectionCategory: '日常检查', |
| | | policeSituation: '轻警', |
| | | chart: null, |
| | | }, |
| | | formData: { |
| | | "echart_type": "column", //line:折线图;column:柱状图;pie :饼状图 |
| | | "echart_type": "line", //line:折线图;column:柱状图;pie :饼状图 |
| | | "model": "0", //0: |
| | | "beginTime": "2022-04-01", //开始时间 |
| | | "endTime": "2022-04-30", //结束时间 |
| | | "ht_typesub": "", //隐患类别 |
| | | "level": "", //隐患级别 |
| | | "superior": "", //上级单位 |
| | | "checktype": "", //检查类别 |
| | | "curWarningLevel": "" //警情 |
| | | "beginTime": "", //开始时间 |
| | | "endTime": "", //结束时间 |
| | | "ht_typesub": [], //隐患类别 |
| | | "level": [], //隐患级别 |
| | | "superior": [], //上级单位 |
| | | "checktype": [], //检查类别 |
| | | "curWarningLevel": [] //警情 |
| | | }, |
| | | categoryList: ['生产'], |
| | | levelList: ['一般隐患D'], |
| | |
| | | inspectionCategoryList: ['日常检查'], |
| | | policeSituationList: ['轻警'], |
| | | radio: 1, |
| | | chartType: "column", |
| | | chartType: "line", |
| | | columnChartData: {}, |
| | | lineChartData: {} |
| | | lineChartData: {}, |
| | | time: [], |
| | | pieChartData: [], |
| | | JCBMList: [], |
| | | YHLXList: [], |
| | | BCList: [], |
| | | JCLBList: [], |
| | | YHBMList: [], |
| | | YHJBList: [], |
| | | THDB: false, |
| | | THDBBegin: "", |
| | | THDBEnd: "", |
| | | timeDes: "month", |
| | | YHZTList: [], |
| | | columnXData: [] |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.time.push(this.getCurrentMonthFirst(), this.getCurrentMonthLast()); |
| | | this.initYHLX() |
| | | this.initYHJB() |
| | | this.initBC() |
| | | this.initJCLB() |
| | | this.initLlr() |
| | | this.initYHBM() |
| | | this.initYHZT() |
| | | this.changeJCDW(1) |
| | | this.getData() |
| | | this.initTHDBTime() |
| | | }, |
| | | watch: { |
| | | "chartType": function (newVal, oldVal) { |
| | | this.formData.echart_type = newVal; |
| | | 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) { |
| | | this.YHLXList = res.data.data |
| | | } else { |
| | | this.$message({type: 'error', message: res.data.msg, duration: 3000}) |
| | | } |
| | | }) |
| | | }, |
| | | initYHJB() { |
| | | initYHJB().then(res => { |
| | | if (res.data.ok == 1) { |
| | | this.YHJBList = res.data.data |
| | | } else { |
| | | this.$message({type: 'error', message: res.data.msg, duration: 3000}) |
| | | } |
| | | }) |
| | | }, |
| | | initYHZT() { |
| | | initReformStatus().then(res => { |
| | | if (res.data.ok == 1) { |
| | | this.YHZTList = res.data.data |
| | | } else { |
| | | this.$message({type: 'error', message: res.data.msg, duration: 3000}) |
| | | } |
| | | }) |
| | | }, |
| | | initBC() { |
| | | initBC().then(res => { |
| | | if (res.data.ok == 1) { |
| | | this.BCList = res.data.data |
| | | } else { |
| | | this.$message({type: 'error', message: res.data.msg, duration: 3000}) |
| | | } |
| | | }) |
| | | }, |
| | | initJCLB() { |
| | | initJCLB().then(res => { |
| | | if (res.data.ok == 1) { |
| | | this.JCLBList = res.data.data |
| | | } else { |
| | | this.$message({type: 'error', message: res.data.msg, duration: 3000}) |
| | | } |
| | | }) |
| | | }, |
| | | initLlr() { |
| | | initLlr().then(res => { |
| | | if (res.data.ok == 1) { |
| | | this.llrList = res.data.data |
| | | } else { |
| | | this.$message({type: 'error', message: res.data.msg, duration: 3000}) |
| | | } |
| | | }) |
| | | }, |
| | | initYHBM() { |
| | | initYHBM().then(res => { |
| | | if (res.data.ok == 1) { |
| | | this.YHBMList = res.data.data |
| | | } else { |
| | | this.$message({type: 'error', message: res.data.msg, duration: 3000}) |
| | | } |
| | | }) |
| | | }, |
| | | changeJCDW(val) { |
| | | initJCBM(val).then(res => { |
| | | if (res.data.ok == 1) { |
| | | this.JCBMList = res.data.data |
| | | } else { |
| | | this.$message({type: 'error', message: res.data.msg, duration: 3000}) |
| | | } |
| | | }) |
| | | }, |
| | | // 饼图 |
| | | initEacharts3() { |
| | | var option = { |
| | | chart: { |
| | | type: 'pie', |
| | | options3d: { |
| | | enabled: true, |
| | | alpha: 45, |
| | | beta: 0 |
| | | } |
| | | }, |
| | | tooltip: { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }, |
| | | plotOptions: { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | depth: 35, |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '{point.name}:' + ' {point.y}%' |
| | | } |
| | | } |
| | | }, |
| | | exporting: { |
| | | enabled: false //去掉右上角 |
| | | }, |
| | | credits: { |
| | | enabled: false //不显示LOGO |
| | | }, |
| | | series: [{ |
| | | type: 'pie', |
| | | name: '浏览器占比', |
| | | data: this.pieChartData |
| | | }] |
| | | } |
| | | Highcharts.chart("heigcharts", option); |
| | | }, |
| | | getData() { |
| | | chart_analysis(this.formData).then(res => { |
| | | let data = res.data; |
| | | if (data.ok) { |
| | | console.log(this.formData.echart_type) |
| | | if (this.formData.echart_type == "column") { |
| | | let xList = []; |
| | | let dataList = []; |
| | | data.data[0].forEach(n => { |
| | | xList.push(n.graph); |
| | | let singleData = { |
| | | "name": n.graph, |
| | | "type": 'bar', |
| | | "label": "labelOption", |
| | | "emphasis": { |
| | | focus: 'series' |
| | | }, |
| | | "data": [n.yAxes] |
| | | } |
| | | dataList.push(singleData); |
| | | }) |
| | | this.columnChartData.xList = xList; |
| | | this.columnChartData.dataList = dataList; |
| | | this.initCloumnChart() |
| | | } else if (this.formData.echart_type == "line") { |
| | | 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)); |
| | | 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 = []; |
| | | data.data[0].forEach(n => { |
| | | if(timeList.indexOf(n.days)==-1){ |
| | | timeList.push(n.days) |
| | | } |
| | | let obj = dataList.find(v => v.name == n.catalogy); |
| | | if (obj == null) { |
| | | // obj.data.push(n.counts); |
| | | obj = { |
| | | name: n.catalogy, |
| | | data: [], |
| | | type: 'line', |
| | | areaStyle: {} |
| | | if (data.data != null && data.data.length > 0) { |
| | | data.data[0].forEach(n => { |
| | | if (timeList.indexOf(n.graph) == -1) { |
| | | timeList.push(n.graph) |
| | | } |
| | | dataList.push(obj) |
| | | } |
| | | }) |
| | | timeList.forEach(time=>{ |
| | | let singileData = data.data[0].filter(n=>n.days == time) |
| | | dataList.forEach(n=>{ |
| | | let searchData = singileData.find(v=>v.catalogy == n.name); |
| | | if(searchData!=null){ |
| | | n.data.push(searchData.counts) |
| | | }else{ |
| | | n.data.push(0) |
| | | 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) |
| | | } |
| | | }) |
| | | }) |
| | | this.lineChartData = {} |
| | | 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() |
| | | } |
| | | // this.initChart() |
| | | }) |
| | | return; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | chart_analysis(requestData).then(res => { |
| | | let data = res.data; |
| | | if (data.ok) { |
| | | if (this.formData.echart_type == "column") { |
| | | this.columnChartData = {}; |
| | | let xList = []; |
| | | let dataList = []; |
| | | if (data.data != null && data.data.length > 0) { |
| | | data.data[0].forEach(n => { |
| | | xList.push(n.graph); |
| | | let singleData = { |
| | | "name": n.graph, |
| | | // "type": 'bar', |
| | | // "label": "labelOption", |
| | | // "emphasis": { |
| | | // focus: 'series' |
| | | // }, |
| | | "data": [parseInt(n.yAxes)] |
| | | } |
| | | dataList.push(parseInt(n.yAxes)); |
| | | }) |
| | | } |
| | | this.columnChartData.xList = xList; |
| | | this.columnChartData.dataList = [] |
| | | this.columnChartData.dataList.push( |
| | | { |
| | | data: dataList, |
| | | colorByPoint: true |
| | | } |
| | | ); |
| | | this.initCloumnChart() |
| | | } else if (this.formData.echart_type == "line") { |
| | | this.lineChartData = {} |
| | | let dataList = []; |
| | | let timeList = []; |
| | | if (data.data != null && data.data.length > 0) { |
| | | data.data[0].forEach(n => { |
| | | if (timeList.indexOf(n.days) == -1) { |
| | | timeList.push(n.days) |
| | | } |
| | | let obj = dataList.find(v => v.name == n.catalogy); |
| | | if (obj == null) { |
| | | // obj.data.push(n.counts); |
| | | obj = { |
| | | name: n.catalogy, |
| | | data: [], |
| | | // type: 'line', |
| | | // areaStyle: {} |
| | | } |
| | | dataList.push(obj) |
| | | } |
| | | }) |
| | | timeList.forEach(time => { |
| | | let singileData = data.data[0].filter(n => n.days == time) |
| | | dataList.forEach(n => { |
| | | let searchData = singileData.find(v => v.catalogy == n.name); |
| | | if (searchData != null) { |
| | | n.data.push(parseInt(searchData.counts)) |
| | | } else { |
| | | n.data.push(0) |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | this.lineChartData.timeList = timeList; |
| | | this.lineChartData.dataList = dataList; |
| | | this.initLineChart() |
| | | } else { |
| | | this.pieChartData = [] |
| | | data.data[0].forEach(n => { |
| | | var datas = { |
| | | name: n.chartName, |
| | | y: parseInt(n.chartValue), |
| | | sliced: true, |
| | | selected: false |
| | | }; |
| | | this.pieChartData.push(datas); |
| | | }) |
| | | this.initEacharts3(); |
| | | } |
| | | } |
| | | |
| | | }) |
| | | }, |
| | | initChart() { |
| | | // 饼图 |
| | | var chartDom = document.getElementById('cylindrical'); |
| | | // 柱形图 |
| | | var chartDom = document.getElementById('column'); |
| | | // var chartDom = document.getElementById('myChart'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option = { |
| | |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: this.lineChartData.timeList |
| | | // 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:this.lineChartData.dataList |
| | | // series: [ |
| | | // { |
| | | // name: '电仪车间', |
| | | // data: [50, 35, 63, 64, 79, 95, 104, 50, 35, 63, 64], |
| | | // type: 'line', |
| | | // areaStyle: {} |
| | | // } |
| | | // ] |
| | | series: this.lineChartData.dataList |
| | | } |
| | | // 使用刚指定的配置项和数据显示图表。 |
| | | myChart.setOption(option) |
| | | }, |
| | | initLineChart() { |
| | | // 折线图 |
| | | var chartDom = document.getElementById('cylindrical'); |
| | | var chartDom = document.getElementById('line'); |
| | | // var chartDom = document.getElementById('myChart'); |
| | | var myChart = echarts.init(chartDom); |
| | | // 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: this.lineChartData.timeList |
| | | // // 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: this.lineChartData.dataList |
| | | // // series: [ |
| | | // // { |
| | | // // name: '电仪车间', |
| | | // // data: [50, 35, 63, 64, 79, 95, 104, 50, 35, 63, 64], |
| | | // // type: 'line', |
| | | // // areaStyle: {} |
| | | // // } |
| | | // // ] |
| | | // } |
| | | // // 使用刚指定的配置项和数据显示图表。 |
| | | // myChart.setOption(option) |
| | | |
| | | var option = { |
| | | chart: { |
| | | type: 'area' |
| | | }, |
| | | 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: this.lineChartData.timeList |
| | | // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11'] |
| | | text: '众泰煤焦化各隐患单位隐患走势分析' |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | title: { |
| | | enabled: false |
| | | } |
| | | }, |
| | | color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'], |
| | | series:this.lineChartData.dataList |
| | | // series: [ |
| | | // { |
| | | // name: '电仪车间', |
| | | // data: [50, 35, 63, 64, 79, 95, 104, 50, 35, 63, 64], |
| | | // type: 'line', |
| | | // areaStyle: {} |
| | | // } |
| | | // ] |
| | | colors: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'], |
| | | legend: { |
| | | align: "center", //程度标的目标地位 |
| | | verticalAlign: "bottom",//垂直标的目标地位 |
| | | x: 0, //间隔x轴的间隔 |
| | | y: 0 //间隔Y轴的间隔 |
| | | }, |
| | | xAxis: { |
| | | // type: 'category', |
| | | // boundaryGap: false, |
| | | categories: this.lineChartData.timeList, |
| | | // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11'] |
| | | }, |
| | | series: this.lineChartData.dataList, |
| | | exporting: { |
| | | enabled: false //去掉右上角 |
| | | }, |
| | | credits: { |
| | | enabled: false //不显示LOGO |
| | | }, |
| | | } |
| | | // 使用刚指定的配置项和数据显示图表。 |
| | | myChart.setOption(option) |
| | | Highcharts.chart("heigcharts", option); |
| | | }, |
| | | initCloumnChart() { |
| | | // 柱形图 |
| | | 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 |
| | | |
| | | var option = { |
| | | chart: { |
| | | type: 'column', |
| | | marginBottom: 70 |
| | | }, |
| | | align: { |
| | | options: { |
| | | left: 'left', |
| | | center: 'center', |
| | | right: 'right' |
| | | title: { |
| | | text: null |
| | | }, |
| | | yAxis: { |
| | | title: { |
| | | enabled: false |
| | | } |
| | | }, |
| | | 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: {} |
| | | } |
| | | }; |
| | | this.columnChartData.dataList.forEach(n => { |
| | | n.label = labelOption; |
| | | }) |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | formatter: function () { |
| | | return this.x + " : " + this.y |
| | | } |
| | | }, |
| | | colors: ['#ff6600', '#fcd202', '#b0de09', '#0289cc', '#2001cd', '#cd0d74', '#cc0000', '#00cc00', '#0000cc', '#dddddd', '#999999', '#333333', '#990000', '#92e3d4', '#f09aea'], |
| | | legend: { |
| | | bottom: 0, |
| | | data: this.columnChartData.xList |
| | | // data: ['安全环保部', '电仪车间', '干熄焦', '工程部','化产二车间', '化产一车间', '机电部', '炼焦二车间','炼焦一车间', '生产技术部', '消防保卫部', '选煤厂', '原料二车间', '原料一车间', '众和机电'] |
| | | enabled: false, |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | | containLabel: true |
| | | xAxis: { |
| | | // type: 'category', |
| | | // boundaryGap: false, |
| | | categories: this.columnChartData.xList, |
| | | max: this.columnChartData.xList.length - 1 |
| | | // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11'] |
| | | }, |
| | | // 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: this.columnChartData.dataList |
| | | // series: [ |
| | | // { |
| | | // name: '安全环保部', |
| | | // type: 'bar', |
| | | // label: labelOption, |
| | | // emphasis: { |
| | | // focus: 'series' |
| | | // }, |
| | | // data: [320] |
| | | // } |
| | | // ] |
| | | }; |
| | | // 使用刚指定的配置项和数据显示图表。 |
| | | myChart.setOption(option) |
| | | } |
| | | } |
| | | series: this.columnChartData.dataList, |
| | | exporting: { |
| | | enabled: false //去掉右上角 |
| | | }, |
| | | credits: { |
| | | enabled: false //不显示LOGO |
| | | }, |
| | | } |
| | | Highcharts.chart("heigcharts", option); |
| | | }, |
| | | getCurrentMonthFirst() { |
| | | var date = new Date(); |
| | | date.setDate(1); |
| | | var month = parseInt(date.getMonth() + 1); |
| | | var day = date.getDate(); |
| | | if (month < 10) { |
| | | month = '0' + month |
| | | } |
| | | if (day < 10) { |
| | | day = '0' + day |
| | | } |
| | | |
| | | return date.getFullYear() + '-' + month + '-' + day; |
| | | }, |
| | | getCurrentMonthLast() { |
| | | var date = new Date(); |
| | | var currentMonth = date.getMonth(); |
| | | var nextMonth = ++currentMonth; |
| | | var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1); |
| | | var oneDay = 1000 * 60 * 60 * 24; |
| | | var lastTime = new Date(nextMonthFirstDay - oneDay); |
| | | var month = parseInt(lastTime.getMonth() + 1); |
| | | var day = lastTime.getDate(); |
| | | if (month < 10) { |
| | | month = '0' + month |
| | | } |
| | | if (day < 10) { |
| | | day = '0' + day |
| | | } |
| | | return date.getFullYear() + '-' + month + '-' + day; |
| | | }, |
| | | }, |
| | | |
| | | |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .legend { |
| | | position: absolute; |
| | | bottom: 10px; |
| | | z-index: 2; |
| | | width: 100%; |
| | | } |
| | | |
| | | .legend-body { |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | flex-wrap: wrap; |
| | | font-size: 12px; |
| | | height: 100%; |
| | | } |
| | | |
| | | .legend-item { |
| | | display: flex; |
| | | justify-content: flex-start; |
| | | align-items: center; |
| | | 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; |
| | |
| | | background-color: #034ea2; |
| | | border: 1px solid #034ea2; |
| | | } |
| | | |
| | | >>> .center .time[data-v-21f55eb3] .el-input__inner { |
| | | width: 100px; |
| | | } |
| | | </style> |