From 3d5cc34ad6e69be337399cb128199d236e7ea08e Mon Sep 17 00:00:00 2001
From: cqf <2252655793@qq.com>
Date: 星期二, 24 五月 2022 17:51:16 +0800
Subject: [PATCH] 隐患图表接口对接
---
src/views/chartAnalysis/index.vue | 260 +++++++++++++++++++++++++++++++++++++++------------
1 files changed, 197 insertions(+), 63 deletions(-)
diff --git a/src/views/chartAnalysis/index.vue b/src/views/chartAnalysis/index.vue
index e69c6d1..e6bea92 100644
--- a/src/views/chartAnalysis/index.vue
+++ b/src/views/chartAnalysis/index.vue
@@ -38,24 +38,30 @@
</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>
@@ -72,8 +78,9 @@
<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="至"
@@ -81,11 +88,39 @@
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>
@@ -100,7 +135,8 @@
<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>
@@ -109,7 +145,7 @@
</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,
@@ -126,6 +162,7 @@
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);
@@ -134,8 +171,11 @@
export default {
name: "index",
+ components: {ElQuarterPicker},
+
data() {
return {
+ value: '',
form: {
name: '众泰煤焦化',
time: '',
@@ -148,7 +188,7 @@
},
formData: {
"echart_type": "line", //line:折线图；column：柱状图；pie :饼状图
- "model": "1", //0：
+ "model": "0", //0：
"beginTime": "", //开始时间
"endTime": "", //结束时间
"ht_typesub": [], //隐患类别
@@ -174,8 +214,12 @@
JCLBList: [],
YHBMList: [],
YHJBList: [],
+ THDB: false,
+ THDBBegin: "",
+ THDBEnd: "",
+ timeDes: "month",
YHZTList: [],
- columnXData:[]
+ columnXData: []
}
},
mounted() {
@@ -187,17 +231,38 @@
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) {
@@ -220,7 +285,6 @@
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})
}
@@ -313,24 +377,72 @@
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 = {
@@ -346,13 +458,13 @@
})
}
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 = {}
@@ -389,7 +501,6 @@
}
this.lineChartData.timeList = timeList;
this.lineChartData.dataList = dataList;
- console.log(this.lineChartData)
this.initLineChart()
} else {
this.pieChartData = []
@@ -490,15 +601,15 @@
// 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'],
@@ -526,35 +637,33 @@
},
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,
@@ -605,11 +714,14 @@
</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;
@@ -617,63 +729,81 @@
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;
@@ -779,4 +909,8 @@
background-color: #034ea2;
border: 1px solid #034ea2;
}
+
+>>> .center .time[data-v-21f55eb3] .el-input__inner {
+ width: 100px;
+}
</style>
--
Gitblit v1.9.2