| | |
| | | data |
| | | }); |
| | | } |
| | | |
| | | export function chart_compare(data) { |
| | | return request({ |
| | | headers:{ |
| | | 'token': getTokenAndVerify().token, |
| | | 'verify':getTokenAndVerify().verify |
| | | }, |
| | | url: "/taboi/danger/chart_compare", |
| | | contentType: "application/json", |
| | | method: 'POST', |
| | | data |
| | | }); |
| | | } |
| | | |
| | | |
| | |
| | | </el-form-item> |
| | | <el-form-item style="margin-left: 30px;"> |
| | | <el-radio-group v-model="formData.model"> |
| | | <el-radio label="1">按隐患单位</el-radio> |
| | | <el-radio label="2">按类别</el-radio> |
| | | <el-radio label="3">按级别</el-radio> |
| | | <el-radio label="4">按检查单位</el-radio> |
| | | <el-radio label="5">按录入单位</el-radio> |
| | | <el-radio label="6">按检查类别</el-radio> |
| | | <el-radio label="7">按当前警情</el-radio> |
| | | <el-radio label="0">按隐患单位</el-radio> |
| | | <el-radio label="1">按类别</el-radio> |
| | | <el-radio label="2">按级别</el-radio> |
| | | <el-radio label="3">按检查单位</el-radio> |
| | | <el-radio label="4">按录入单位</el-radio> |
| | | <el-radio label="5">按检查类别</el-radio> |
| | | <el-radio label="6">按当前警情</el-radio> |
| | | </el-radio-group> |
| | | <el-radio-group v-model="chartType" style="margin-left: 50px;"> |
| | | <el-radio-group v-model="chartType" v-if="!THDB" style="margin-left: 50px;"> |
| | | <el-radio label="line">曲线图</el-radio> |
| | | <el-radio label="pie">饼状图</el-radio> |
| | | <el-radio label="column">柱形图</el-radio> |
| | | </el-radio-group> |
| | | |
| | | <el-radio-group v-model="timeDes" v-if="THDB" @change="initTHDBTime" style="margin-left: 50px;"> |
| | | <el-radio label="month">月度</el-radio> |
| | | <el-radio label="quarter">季度</el-radio> |
| | | <el-radio label="year">年度</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </div> |
| | | <div class="center"> |
| | | <el-form-item label="已选单位:"> |
| | | <el-input autosize v-model="form.name"></el-input> |
| | | <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 label="已选当前警情:"> |
| | | <el-input v-model="formData.curWarningLevel.join(',')"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="检查时间:" class="time"> |
| | | <el-form-item label="检查时间:" v-if="!THDB" class="time" style="width: 300px"> |
| | | <el-date-picker |
| | | style="width: 218px" |
| | | v-model="time" |
| | | type="daterange" |
| | | range-separator="至" |
| | |
| | | end-placeholder="结束日期"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="对比时间:" v-if="THDB" class="time" style="width: 340px"> |
| | | <div v-if="timeDes!='quarter'"> |
| | | <el-date-picker |
| | | v-model="THDBBegin" |
| | | :type="timeDes" |
| | | style="width: 40%;float: left" |
| | | :value-format="timeDes=='month'?'yyyy年MM月':'yyyy年'" |
| | | :placeholder="timeDes=='month'?'请选择月':'请选择年'"> |
| | | </el-date-picker> |
| | | <span style="width: 20px">-</span> |
| | | <el-date-picker |
| | | v-model="THDBEnd" |
| | | :type="timeDes" |
| | | :value-format="timeDes=='month'?'yyyy年MM月':'yyyy年'" |
| | | style="width: 40%" |
| | | :placeholder="timeDes=='month'?'请选择月':'请选择年'"> |
| | | </el-date-picker> |
| | | </div> |
| | | <div v-if="timeDes=='quarter'"> |
| | | |
| | | <el-quarter-picker v-model="THDBBegin" style="width: 45%" placeholder="选择季度"/> |
| | | <span style="width: 20px">-</span> |
| | | <el-quarter-picker v-model="THDBEnd" style="width: 45%" placeholder="选择季度"/> |
| | | </div> |
| | | |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <el-button class="btn" size="small" type="primary" @click="getData()" |
| | | >汇总 |
| | | </el-button> |
| | | <el-button class="btn" size="small" type="primary" @click="close()" |
| | | <el-button v-if="!THDB" class="btn" size="small" type="primary" @click="THDB=true" |
| | | >同比环比 |
| | | </el-button> |
| | | </el-form-item> |
| | |
| | | <div class="legend-body"> |
| | | |
| | | <div v-for="(item,index) in this.columnChartData.xList" class="legend-item"> |
| | | <div :class="'legendItemBack'+index"></div>{{item}} |
| | | <div :class="'legendItemBack'+index"></div> |
| | | {{ item }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </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, |
| | |
| | | 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); |
| | |
| | | |
| | | export default { |
| | | name: "index", |
| | | components: {ElQuarterPicker}, |
| | | |
| | | data() { |
| | | return { |
| | | value: '', |
| | | form: { |
| | | name: '众泰煤焦化', |
| | | time: '', |
| | |
| | | }, |
| | | formData: { |
| | | "echart_type": "line", //line:折线图;column:柱状图;pie :饼状图 |
| | | "model": "1", //0: |
| | | "model": "0", //0: |
| | | "beginTime": "", //开始时间 |
| | | "endTime": "", //结束时间 |
| | | "ht_typesub": [], //隐患类别 |
| | |
| | | JCLBList: [], |
| | | YHBMList: [], |
| | | YHJBList: [], |
| | | THDB: false, |
| | | THDBBegin: "", |
| | | THDBEnd: "", |
| | | timeDes: "month", |
| | | YHZTList: [], |
| | | columnXData:[] |
| | | columnXData: [] |
| | | } |
| | | }, |
| | | mounted() { |
| | |
| | | this.initLlr() |
| | | this.initYHBM() |
| | | this.initYHZT() |
| | | this.changeJCDW(0) |
| | | this.changeJCDW(1) |
| | | this.getData() |
| | | this.initTHDBTime() |
| | | }, |
| | | watch: { |
| | | "chartType": function (newVal, oldVal) { |
| | | this.formData.echart_type = newVal; |
| | | console.log(this.formData.echart_type) |
| | | this.getData(); |
| | | } |
| | | }, |
| | | "formData.model": function (newVal, oldVal) { |
| | | this.formData.model = newVal; |
| | | this.getData(); |
| | | |
| | | }, |
| | | // "timeDes": function (newVal, oldVal) { |
| | | // this.initTHDBTime(); |
| | | // } |
| | | }, |
| | | methods: { |
| | | initTHDBTime() { |
| | | var dayStr = this.getCurrentMonthFirst(); |
| | | if (this.timeDes == "month") { |
| | | this.THDBBegin = dayStr.split("-")[0] + "年" + (parseInt(dayStr.split("-")[1]) - 1) + "月"; |
| | | this.THDBEnd = dayStr.split("-")[0] + "年" + (dayStr.split("-")[1]) + "月"; |
| | | } else if (this.timeDes == "year") { |
| | | this.THDBBegin = (parseInt(dayStr.split("-")[0]) - 1) + "年"; |
| | | this.THDBEnd = dayStr.split("-")[0] + "年"; |
| | | } else { |
| | | this.THDBBegin = dayStr.split("-")[0] + "年第1季度"; |
| | | this.THDBEnd = dayStr.split("-")[0] + "年第2季度"; |
| | | } |
| | | }, |
| | | initYHLX() { |
| | | initYHLX().then(res => { |
| | | if (res.data.ok == 1) { |
| | |
| | | initReformStatus().then(res => { |
| | | if (res.data.ok == 1) { |
| | | this.YHZTList = res.data.data |
| | | console.log(this.YHZTList) |
| | | } else { |
| | | this.$message({type: 'error', message: res.data.msg, duration: 3000}) |
| | | } |
| | |
| | | getData() { |
| | | this.formData.beginTime = this.time[0] |
| | | this.formData.endTime = this.time[1] |
| | | if(this.THDB) { |
| | | this.formData.beginTime = this.THDBBegin |
| | | this.formData.endTime = this.THDBEnd |
| | | this.formData.compare_type = this.timeDes; |
| | | } |
| | | let requestData = JSON.parse(JSON.stringify(this.formData)); |
| | | console.log(requestData) |
| | | requestData.ht_typesub = requestData.ht_typesub.join(",") |
| | | requestData.level = requestData.level.join(",") |
| | | requestData.superior = requestData.superior.join(",") |
| | | requestData.checktype = requestData.checktype.join(",") |
| | | requestData.curWarningLevel = requestData.curWarningLevel.join(",") |
| | | if(this.THDB){ |
| | | chart_compare(requestData).then(res=>{ |
| | | let data = res.data; |
| | | if (data.ok) { |
| | | this.lineChartData = {} |
| | | let dataList = []; |
| | | let timeList = []; |
| | | if (data.data != null && data.data.length > 0) { |
| | | data.data[0].forEach(n => { |
| | | if (timeList.indexOf(n.graph) == -1) { |
| | | timeList.push(n.graph) |
| | | } |
| | | let obj = dataList.find(v => v.name == n.xAxes); |
| | | if (obj == null) { |
| | | // obj.data.push(n.counts); |
| | | obj = { |
| | | name: n.xAxes, |
| | | data: [], |
| | | // type: 'line', |
| | | // areaStyle: {} |
| | | } |
| | | dataList.push(obj) |
| | | } |
| | | }) |
| | | timeList.forEach(time => { |
| | | let singileData = data.data[0].filter(n => n.graph == time) |
| | | dataList.forEach(n => { |
| | | let searchData = singileData.find(v => v.xAxes == n.name); |
| | | if (searchData != null) { |
| | | n.data.push(parseInt(searchData.yAxes)) |
| | | } else { |
| | | n.data.push(0) |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | this.lineChartData.timeList = timeList; |
| | | this.lineChartData.dataList = dataList; |
| | | this.initLineChart() |
| | | } |
| | | }) |
| | | return; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | chart_analysis(requestData).then(res => { |
| | | let data = res.data; |
| | | if (data.ok) { |
| | | console.log(this.formData.echart_type) |
| | | if (this.formData.echart_type == "column") { |
| | | this.columnChartData = {}; |
| | | let xList = []; |
| | | let dataList = []; |
| | | if (data.data != null && data.data.length > 0) { |
| | | console.log("柱图",data) |
| | | data.data[0].forEach(n => { |
| | | xList.push(n.graph); |
| | | let singleData = { |
| | |
| | | }) |
| | | } |
| | | this.columnChartData.xList = xList; |
| | | this.columnChartData.dataList=[] |
| | | this.columnChartData.dataList = [] |
| | | this.columnChartData.dataList.push( |
| | | { |
| | | data:dataList, |
| | | colorByPoint:true |
| | | data: dataList, |
| | | colorByPoint: true |
| | | } |
| | | ); |
| | | ); |
| | | this.initCloumnChart() |
| | | } else if (this.formData.echart_type == "line") { |
| | | this.lineChartData = {} |
| | |
| | | } |
| | | this.lineChartData.timeList = timeList; |
| | | this.lineChartData.dataList = dataList; |
| | | console.log(this.lineChartData) |
| | | this.initLineChart() |
| | | } else { |
| | | this.pieChartData = [] |
| | |
| | | // myChart.setOption(option) |
| | | |
| | | var option = { |
| | | chart:{ |
| | | type:'area' |
| | | chart: { |
| | | type: 'area' |
| | | }, |
| | | title: { |
| | | text: '众泰煤焦化各隐患单位隐患走势分析' |
| | | }, |
| | | yAxis: { |
| | | title:{ |
| | | enabled:false |
| | | title: { |
| | | enabled: false |
| | | } |
| | | }, |
| | | colors: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'], |
| | |
| | | }, |
| | | initCloumnChart() { |
| | | |
| | | console.log("this.columnChartData.xList",this.columnChartData.xList) |
| | | console.log("this.columnChartData.dataList",this.columnChartData.dataList) |
| | | var option = { |
| | | chart:{ |
| | | type:'column', |
| | | marginBottom:70 |
| | | chart: { |
| | | type: 'column', |
| | | marginBottom: 70 |
| | | }, |
| | | title: { |
| | | text: null |
| | | }, |
| | | yAxis: { |
| | | title:{ |
| | | enabled:false |
| | | title: { |
| | | enabled: false |
| | | } |
| | | }, |
| | | tooltip:{ |
| | | formatter:function () { |
| | | return this.x+" : "+this.y |
| | | 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, |
| | | enabled: false, |
| | | }, |
| | | xAxis: { |
| | | // type: 'category', |
| | | // boundaryGap: false, |
| | | categories: this.columnChartData.xList, |
| | | max:this.columnChartData.xList.length-1 |
| | | 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, |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .legend{ |
| | | position: absolute;bottom: 10px;z-index: 2; |
| | | .legend { |
| | | position: absolute; |
| | | bottom: 10px; |
| | | z-index: 2; |
| | | width: 100%; |
| | | } |
| | | .legend-body{ |
| | | |
| | | .legend-body { |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | |
| | | font-size: 12px; |
| | | height: 100%; |
| | | } |
| | | .legend-item{ |
| | | |
| | | .legend-item { |
| | | display: flex; |
| | | justify-content: flex-start; |
| | | align-items: center; |
| | | margin-left: 20px; |
| | | line-height: 1.5; |
| | | } |
| | | .legend-item div{ |
| | | |
| | | .legend-item div { |
| | | width: 20px; |
| | | height: 15px; |
| | | margin-right: 10px; |
| | | } |
| | | .legendItemBack0{ |
| | | |
| | | .legendItemBack0 { |
| | | background-color: #ff6600; |
| | | } |
| | | .legendItemBack1{ |
| | | |
| | | .legendItemBack1 { |
| | | background-color: #fcd202; |
| | | } |
| | | .legendItemBack2{ |
| | | |
| | | .legendItemBack2 { |
| | | background-color: #b0de09; |
| | | } |
| | | .legendItemBack3{ |
| | | |
| | | .legendItemBack3 { |
| | | background-color: #0289cc; |
| | | } |
| | | .legendItemBack4{ |
| | | |
| | | .legendItemBack4 { |
| | | background-color: #2001cd; |
| | | } |
| | | .legendItemBack5{ |
| | | |
| | | .legendItemBack5 { |
| | | background-color: #cd0d74; |
| | | } |
| | | .legendItemBack6{ |
| | | |
| | | .legendItemBack6 { |
| | | background-color: #cc0000; |
| | | } |
| | | .legendItemBack7{ |
| | | |
| | | .legendItemBack7 { |
| | | background-color: #00cc00; |
| | | } |
| | | .legendItemBack8{ |
| | | |
| | | .legendItemBack8 { |
| | | background-color: #0000cc; |
| | | } |
| | | .legendItemBack9{ |
| | | |
| | | .legendItemBack9 { |
| | | background-color: #dddddd; |
| | | } |
| | | .legendItemBack10{ |
| | | |
| | | .legendItemBack10 { |
| | | background-color: #999999; |
| | | } |
| | | .legendItemBack11{ |
| | | |
| | | .legendItemBack11 { |
| | | background-color: #333333; |
| | | } |
| | | .legendItemBack12{ |
| | | |
| | | .legendItemBack12 { |
| | | background-color: #990000; |
| | | } |
| | | .legendItemBack13{ |
| | | |
| | | .legendItemBack13 { |
| | | background-color: #92e3d4; |
| | | } |
| | | .legendItemBack14{ |
| | | |
| | | .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> |
对比新文件 |
| | |
| | | |
| | | <template> |
| | | <div class="el-quarter-picker"> |
| | | <el-popover |
| | | v-model="visible" |
| | | :disabled="!canPopover" |
| | | :tabindex="null" |
| | | placement="bottom-start" |
| | | transition="el-zoom-in-top" |
| | | trigger="click"> |
| | | |
| | | <div class="el-date-picker"> |
| | | <div class="el-picker-panel__body"> |
| | | <div class="el-date-picker__header el-date-picker__header--bordered" style="margin:0px; line-height:30px"> |
| | | <button |
| | | type="button" |
| | | @click="clickLast" |
| | | aria-label="前一年" |
| | | class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"></button> |
| | | <span role="button" class="el-date-picker__header-label" @click="clickYear">{{ title }}</span> |
| | | <button |
| | | type="button" |
| | | @click="clickNext" |
| | | aria-label="后一年" |
| | | class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button> |
| | | </div> |
| | | <div class="el-picker-panel__content" style="margin:0px; width:100%"> |
| | | <table class="el-month-table" style=""> |
| | | <tbody> |
| | | <tr v-for="line in lineCount" :key="line"> |
| | | <td v-for="index in (line * 4 <= viewList.length ? 4 : viewList.length - (line - 1) * 4)" :key="index" :class="{ today: viewList[(line - 1) * 4 + index - 1].current, current: viewList[(line - 1) * 4 + index - 1].active }"> |
| | | <div><a class="cell" @click="clickItem(viewList[(line - 1) * 4 + index - 1])">{{ viewList[(line - 1) * 4 + index - 1].label }}</a></div> |
| | | </td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <el-input |
| | | slot="reference" |
| | | @change="changeText" |
| | | @mouseenter.native="mouseEnter" |
| | | @mouseleave.native="mouseLeave" |
| | | :placeholder="placeholder" |
| | | v-model="text" |
| | | :size="size" |
| | | :readonly="!canEdit" |
| | | :disabled="disabled"> |
| | | <i slot="prefix" class="el-input__icon el-icon-date"></i> |
| | | <i slot="suffix" class="el-input__icon el-icon-circle-close" v-show="showClear" style="cursor:pointer" @click.stop="clear"></i> |
| | | </el-input> |
| | | </el-popover> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: 'ElQuarterPicker', |
| | | props: { |
| | | placeholder: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | size: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | readonly: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | clearable: { |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | editable: { |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | disabled: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | format: { |
| | | type: String, |
| | | default: 'yyyy年第Q季度' |
| | | }, |
| | | valueFormat: { |
| | | type: String, |
| | | default: 'yyyy年第q季度' |
| | | }, |
| | | value: { |
| | | type: String, |
| | | default: '' |
| | | } |
| | | }, |
| | | model: { |
| | | prop: 'value', |
| | | event: 'change' |
| | | }, |
| | | watch: { |
| | | value(val) { |
| | | // console.log('change-------', val) |
| | | this.changeValue(val) |
| | | }, |
| | | readonly(val) { |
| | | this.canEdit = !val && this.editable |
| | | this.canPopover = !this.disabled && !val |
| | | }, |
| | | editable(val) { |
| | | this.canEdit = !this.readonly && val |
| | | }, |
| | | disabled(val) { |
| | | this.canPopover = !val && !this.readonly |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | visible: false, |
| | | showClear: false, // 控制清空按钮展示 |
| | | canEdit: true, // 是否可编辑 |
| | | canPopover: true, // 选择器弹出是否可用 |
| | | text: '', // 文本框值 |
| | | viewType: 1, // 视图类型,1季度,2年度 |
| | | viewYear: 0, // 当前年份 |
| | | viewList: [], // 数据列表 |
| | | lineCount: 0, // 数据行数 |
| | | title: '', // 选择器标题 |
| | | data: [0, 0] // 当前选择年度-季度 |
| | | } |
| | | }, |
| | | mounted() { |
| | | // console.log('mounted--------', this.value) |
| | | this.changeValue(this.value) |
| | | |
| | | // 设置文本框是否可编辑 |
| | | this.canEdit = !this.readonly && this.editable |
| | | this.canPopover = !this.disabled && !this.readonly |
| | | |
| | | // 监听按键(上下左右键可以切换季度) |
| | | document.onkeydown = (event) => { |
| | | if (this.visible) { |
| | | const data = [this.data[0], this.data[1]] |
| | | if (data[0] < 1 || data[1] < 1) { |
| | | // 以当前季度为标准 |
| | | const curDate = new Date() |
| | | data[0] = curDate.getFullYear() |
| | | data[1] = parseInt(curDate.getMonth() / 3) + 1 |
| | | } |
| | | if (event.code === 'ArrowLeft') { |
| | | // 上一个季度 |
| | | if (data[1] === 1) { |
| | | data[0] = data[0] - 1 |
| | | data[1] = 4 |
| | | } else { |
| | | data[1] = data[1] - 1 |
| | | } |
| | | } else if (event.code === 'ArrowRight') { |
| | | // 下一个季度 |
| | | if (data[1] === 4) { |
| | | data[0] = data[0] + 1 |
| | | data[1] = 1 |
| | | } else { |
| | | data[1] = data[1] + 1 |
| | | } |
| | | } else if (event.code === 'ArrowUp') { |
| | | // 上一年季度 |
| | | data[0] = data[0] - 1 |
| | | } else if (event.code === 'ArrowDown') { |
| | | // 下一年季度 |
| | | data[0] = data[0] + 1 |
| | | } else { |
| | | return |
| | | } |
| | | |
| | | // 超过年限的不处理 |
| | | if (data[0] < 1000 || data[0] > 9999) { |
| | | return |
| | | } |
| | | this.data = data |
| | | this.viewType = 1 |
| | | this.viewYear = data[0] |
| | | this.$emit('change', this.formatTo(data, this.valueFormat)) |
| | | } |
| | | } |
| | | }, |
| | | destroyed() { |
| | | document.onkeydown = null |
| | | }, |
| | | methods: { |
| | | // 季度文本变更 |
| | | changeText() { |
| | | if (this.checkFormat(this.format, this.text)) { |
| | | // 设置值 |
| | | this.formatFrom(this.text, this.format) |
| | | this.$emit('change', this.formatTo(this.data, this.valueFormat)) |
| | | } else { |
| | | // 输入了无效的格式,还原回原来的值 |
| | | if (this.data[0] < 1 || this.data[1] < 1) { |
| | | this.text = '' |
| | | } else { |
| | | this.text = this.formatTo(this.data, this.format) |
| | | } |
| | | } |
| | | this.visible = false |
| | | }, |
| | | // 鼠标进入 |
| | | mouseEnter() { |
| | | if (!this.disabled && !this.readonly && this.clearable && this.text !== '') { |
| | | this.showClear = true |
| | | } |
| | | }, |
| | | // 鼠标离开 |
| | | mouseLeave() { |
| | | if (!this.disabled && this.clearable) { |
| | | this.showClear = false |
| | | } |
| | | }, |
| | | // 清除季度 |
| | | clear() { |
| | | this.showClear = false |
| | | this.visible = false |
| | | this.$emit('change', '') |
| | | }, |
| | | // 季度值变更 |
| | | changeValue(val) { |
| | | this.viewType = 1 |
| | | if (val) { |
| | | // 反向格式化 |
| | | this.formatFrom(val, this.valueFormat) |
| | | this.text = this.formatTo(this.data, this.format) |
| | | this.viewYear = this.data[0] |
| | | } else { |
| | | this.text = '' |
| | | this.data = [0, 0] |
| | | this.viewYear = new Date().getFullYear() |
| | | } |
| | | this.initView() |
| | | }, |
| | | // 初始化视图数据 |
| | | initView() { |
| | | const list = [] |
| | | const curDate = new Date() |
| | | const curYear = curDate.getFullYear() |
| | | const curQuarter = parseInt(curDate.getMonth() / 3) + 1 |
| | | if (this.viewType === 1) { |
| | | let index = 0 |
| | | for (const i of '一二三四') { |
| | | index++ |
| | | const item = { label: '第' + i + '季度', year: this.viewYear, quarter: index, current: false, active: false } |
| | | if (this.viewYear === curYear && index === curQuarter) { |
| | | item.current = true |
| | | } else if (this.viewYear === this.data[0] && index === this.data[1]) { |
| | | item.active = true |
| | | } |
| | | list.push(item) |
| | | } |
| | | this.title = this.viewYear + ' 年' |
| | | } else { |
| | | const start = parseInt(this.viewYear / 10) * 10 |
| | | this.viewYear = start |
| | | for (let i = 0; i < 10; i++) { |
| | | const year = start + i |
| | | const item = { label: year + '', year: year, current: false, active: false } |
| | | if (year === curYear) { |
| | | item.current = true |
| | | } else if (year === this.data[0]) { |
| | | item.active = true |
| | | } |
| | | list.push(item) |
| | | } |
| | | this.title = start + ' 年 - ' + (start + 9) + ' 年' |
| | | } |
| | | this.viewList = list |
| | | this.lineCount = parseInt(list.length / 4) |
| | | if (list.length % 4 > 0) { |
| | | this.lineCount++ |
| | | } |
| | | }, |
| | | // 校验季度格式是否正确 |
| | | checkFormat(pattern, val) { |
| | | // 格式转成正则表达式 |
| | | let text = '' |
| | | for (const char of pattern) { |
| | | const dict = '\\^$.+?*[]{}!' |
| | | if (dict.indexOf(char) === -1) { |
| | | text += char |
| | | } else { |
| | | text += '\\' + char |
| | | } |
| | | } |
| | | text = text.replace('yyyy', '[1-9]\\d{3}') |
| | | text = text.replace('qq', '0[1-4]') |
| | | text = text.replace('q', '[1-4]') |
| | | text = text.replace('Q', '[一二三四]') |
| | | text = '^' + text + '$' |
| | | const patt = new RegExp(text) |
| | | return patt.test(val) |
| | | }, |
| | | // 格式化季度到指定格式 |
| | | formatTo(data, pattern) { |
| | | let text = pattern.replace('yyyy', '' + data[0]) |
| | | text = text.replace('qq', '0' + data[1]) |
| | | text = text.replace('q', '' + data[1]) |
| | | text = text.replace('Q', '一二三四'.substr(data[1] - 1, 1)) |
| | | return text |
| | | }, |
| | | // 以指定格式解析季度 |
| | | formatFrom(str, pattern) { |
| | | const year = this.findText(str, pattern, 'yyyy') |
| | | const quarter = this.findText(str, pattern, ['qq', 'q', 'Q']) |
| | | this.data = [year, quarter] |
| | | }, |
| | | // 查找文本数值 |
| | | findText(str, pattern, find) { |
| | | if (find instanceof Array) { |
| | | for (const f of find) { |
| | | const val = this.findText(str, pattern, f) |
| | | if (val !== -1) { |
| | | return val |
| | | } |
| | | } |
| | | return -1 |
| | | } |
| | | const index = pattern.indexOf(find) |
| | | if (index === -1) { |
| | | return index |
| | | } |
| | | const val = str.substr(index, find.length) |
| | | if (find === 'Q') { |
| | | return '一二三四'.indexOf(val) + 1 |
| | | } else { |
| | | return parseInt(val) |
| | | } |
| | | }, |
| | | // 年份点击 |
| | | clickYear() { |
| | | if (this.viewType !== 1) { |
| | | return |
| | | } |
| | | // 切换年度选择器 |
| | | this.viewType = 2 |
| | | this.initView() |
| | | }, |
| | | // 季度选择 |
| | | clickItem(item) { |
| | | // console.log('select--------', item) |
| | | if (this.viewType === 1) { |
| | | // 选择季度 |
| | | this.$emit('change', this.formatTo([item.year, item.quarter], this.valueFormat)) |
| | | this.visible = false |
| | | } else { |
| | | // 选择年度 |
| | | this.viewType = 1 |
| | | this.viewYear = item.year |
| | | this.initView() |
| | | } |
| | | }, |
| | | // 上一年 |
| | | clickLast() { |
| | | if (this.viewYear > 1000) { |
| | | if (this.viewType === 1) { |
| | | this.viewYear-- |
| | | this.initView() |
| | | } else { |
| | | this.viewYear = this.viewYear - 10 |
| | | this.initView() |
| | | } |
| | | } |
| | | }, |
| | | // 下一年 |
| | | clickNext() { |
| | | if (this.viewYear < 9999) { |
| | | if (this.viewType === 1) { |
| | | this.viewYear++ |
| | | this.initView() |
| | | } else { |
| | | this.viewYear = this.viewYear + 10 |
| | | this.initView() |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | .el-quarter-picker { |
| | | width: 220px; |
| | | display: inline-block; |
| | | } |
| | | </style> |