| | |
| | | <template> |
| | | <div> |
| | | <div class="whole_top"> |
| | | <el-form ref="form" :inline="true" :model="form" label-width="100px"> |
| | | <el-form ref="form" :inline="true" :model="formData"> |
| | | <div class="top"> |
| | | <div class="select"> |
| | | <el-form-item> |
| | | <el-select v-model="value1" multiple placeholder="请选择" style="color: red"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-select v-model="value2" multiple placeholder="请选择" style="color: red"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-select v-model="value3" multiple placeholder="请选择" style="color: red"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-select v-model="value4" multiple placeholder="请选择" style="color: red"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-select v-model="value5" multiple placeholder="请选择" style="color: red"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-select v-model="value6" multiple placeholder="请选择" style="color: red"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <el-form-item> |
| | | <el-radio-group v-model="radio" style="padding: 20px 0;"> |
| | | <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-form-item label="类别:"> |
| | | <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="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="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="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="formData.curWarningLevel"> |
| | | <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="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" 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> |
| | | <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-group> |
| | | </div> |
| | | <div class="center" style="text-align: center;padding-top: 10px;"> |
| | | <el-form-item label="检查时间:"> |
| | | <div class="center"> |
| | | <el-form-item label="已选单位:"> |
| | | <el-input autosize v-model="form.name"></el-input> |
| | | </el-form-item> |
| | | <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="formData.level.join(',')"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="已选上级单位:"> |
| | | <el-input v-model="formData.superior.join(',')"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="已选检查类别:"> |
| | | <el-input v-model="formData.checktype.join(',')"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="已选当前警情:"> |
| | | <el-input v-model="formData.curWarningLevel.join(',')"></el-input> |
| | | </el-form-item> |
| | | <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="至" |
| | | 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> |
| | | <el-button class="btn" size="small" type="primary" @click="close()" |
| | | >导出Excel</el-button> |
| | | <el-button class="btn" size="small" type="primary" @click="getData()" |
| | | >汇总 |
| | | </el-button> |
| | | <el-button v-if="!THDB" class="btn" size="small" type="primary" @click="THDB=true" |
| | | >同比环比 |
| | | </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 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,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 { |
| | | options: [{ |
| | | value: '选项1', |
| | | label: '安全环保部' |
| | | }, { |
| | | value: '选项2', |
| | | label: '生产技术部' |
| | | }, { |
| | | value: '选项3', |
| | | label: '企管部' |
| | | }, { |
| | | value: '选项4', |
| | | label: '消防保卫部' |
| | | }, { |
| | | value: '选项5', |
| | | label: '质检中心' |
| | | }], |
| | | value1: [], |
| | | value2: [], |
| | | value3: [], |
| | | value4: [], |
| | | value5: [], |
| | | value6: [], |
| | | radio: 3, |
| | | time: '', |
| | | tableData: [{ |
| | | name: '财务部', |
| | | province: '1', |
| | | city: '4', |
| | | address: '1' |
| | | }, { |
| | | name: '党委副书记', |
| | | province: '0', |
| | | city: '2', |
| | | address: '0' |
| | | }, { |
| | | value: '', |
| | | form: { |
| | | name: '众泰煤焦化', |
| | | province: '2', |
| | | city: '3', |
| | | address: '1' |
| | | }, { |
| | | name: '王小虎', |
| | | province: '3', |
| | | city: '9', |
| | | address: '2' |
| | | }] |
| | | time: '', |
| | | category: '生产', |
| | | level: '一般隐患D', |
| | | superiorUnit: '新疆能源', |
| | | inspectionCategory: '日常检查', |
| | | policeSituation: '轻警', |
| | | chart: null, |
| | | }, |
| | | formData: { |
| | | "echart_type": "line", //line:折线图;column:柱状图;pie :饼状图 |
| | | "model": "0", //0: |
| | | "beginTime": "", //开始时间 |
| | | "endTime": "", //结束时间 |
| | | "ht_typesub": [], //隐患类别 |
| | | "level": [], //隐患级别 |
| | | "superior": [], //上级单位 |
| | | "checktype": [], //检查类别 |
| | | "curWarningLevel": [] //警情 |
| | | }, |
| | | categoryList: ['生产'], |
| | | levelList: ['一般隐患D'], |
| | | superiorUnitList: ['新疆能源'], |
| | | inspectionCategoryList: ['日常检查'], |
| | | policeSituationList: ['轻警'], |
| | | radio: 1, |
| | | chartType: "line", |
| | | columnChartData: {}, |
| | | 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() { |
| | | 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 = []; |
| | | 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) { |
| | | 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('column'); |
| | | // 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: this.lineChartData.timeList |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'], |
| | | series: this.lineChartData.dataList |
| | | } |
| | | // 使用刚指定的配置项和数据显示图表。 |
| | | myChart.setOption(option) |
| | | }, |
| | | initLineChart() { |
| | | // 折线图 |
| | | var chartDom = document.getElementById('line'); |
| | | // 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: 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: '众泰煤焦化各隐患单位隐患走势分析' |
| | | }, |
| | | yAxis: { |
| | | title: { |
| | | enabled: false |
| | | } |
| | | }, |
| | | 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 |
| | | }, |
| | | } |
| | | Highcharts.chart("heigcharts", option); |
| | | }, |
| | | initCloumnChart() { |
| | | |
| | | var option = { |
| | | chart: { |
| | | type: 'column', |
| | | marginBottom: 70 |
| | | }, |
| | | title: { |
| | | text: null |
| | | }, |
| | | yAxis: { |
| | | title: { |
| | | enabled: false |
| | | } |
| | | }, |
| | | tooltip: { |
| | | formatter: function () { |
| | | return this.x + " : " + this.y |
| | | } |
| | | }, |
| | | colors: ['#ff6600', '#fcd202', '#b0de09', '#0289cc', '#2001cd', '#cd0d74', '#cc0000', '#00cc00', '#0000cc', '#dddddd', '#999999', '#333333', '#990000', '#92e3d4', '#f09aea'], |
| | | legend: { |
| | | enabled: false, |
| | | }, |
| | | 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'] |
| | | }, |
| | | 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> |
| | | .top{ |
| | | .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; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | /*下拉框图标隐藏*/ |
| | | .whole_top .select /deep/ .el-input__suffix-inner .is-reverse{ |
| | | display: none; |
| | | |
| | | .top /deep/ .el-form-item__label { |
| | | width: 110px; |
| | | } |
| | | .whole_top .select /deep/ .el-input__suffix-inner .el-icon-arrow-up{ |
| | | display: none; |
| | | |
| | | .top /deep/ .el-form-item { |
| | | margin-bottom: 5px; |
| | | } |
| | | /*设下拉框颜色*/ |
| | | .select /deep/.el-input__inner { |
| | | border: 1px solid #c5dbec; |
| | | font-weight: bold; |
| | | background: #dfeffc; |
| | | /*.el-icon-circle-close*/ |
| | | |
| | | /*多选框间距*/ |
| | | .checkbox /deep/ .el-checkbox-group { |
| | | display: flex; |
| | | flex-direction: row; |
| | | flex-wrap: wrap; |
| | | justify-content: space-between; |
| | | } |
| | | .whole_top .select /deep/.el-select .el-input__inner:focus { |
| | | color: #e6860b; |
| | | |
| | | .center { |
| | | text-align: center; |
| | | padding: 10px; |
| | | background: #ffffff; |
| | | margin: 10px 0; |
| | | } |
| | | .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{ |
| | | |
| | | .center /deep/ .el-form-item__label { |
| | | width: auto; |
| | | padding-right: 0; |
| | | } |
| | | .btn{ |
| | | |
| | | .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; |
| | | } |
| | | |
| | | /*日期*/ |
| | | /deep/ .el-date-editor .el-range-separator { |
| | | width: auto; |
| | | line-height: 36px; |
| | | } |
| | | |
| | | .btn { |
| | | background-color: #034ea2; |
| | | border: 1px solid #034ea2; |
| | | } |
| | | |
| | | >>> .center .time[data-v-21f55eb3] .el-input__inner { |
| | | width: 100px; |
| | | } |
| | | </style> |