|
|
@@ -1,9 +1,9 @@
|
|
|
<template>
|
|
|
<div class="w-full h-full" v-loading="loading">
|
|
|
<div class="c-title flex justify-between">
|
|
|
- <span>目标完成情况(年)</span>
|
|
|
+ <span>目标完成情况</span>
|
|
|
<div>
|
|
|
- <!-- <el-select
|
|
|
+ <el-select
|
|
|
size="mini"
|
|
|
style="width: 100px; margin-right: 10px"
|
|
|
v-model="queryParams.type"
|
|
|
@@ -12,9 +12,10 @@
|
|
|
>
|
|
|
<el-option label="按年展示" value="reportYear"></el-option>
|
|
|
<el-option label="按月展示" value="reportDate"></el-option>
|
|
|
- </el-select> -->
|
|
|
+ </el-select>
|
|
|
|
|
|
<el-date-picker
|
|
|
+ v-if="queryParams.type == 'reportYear'"
|
|
|
style="width: 90px"
|
|
|
size="mini"
|
|
|
v-model="queryParams.reportYear"
|
|
|
@@ -27,48 +28,47 @@
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
<el-select
|
|
|
+ v-else
|
|
|
size="mini"
|
|
|
- style="width: 100px; margin-left: 10px"
|
|
|
- v-model="zdlx"
|
|
|
- @change="dateLxChange"
|
|
|
- placeholder="请选择"
|
|
|
+ style="width: 90px"
|
|
|
+ v-model="queryParams.month"
|
|
|
+ @change="initEcharts"
|
|
|
+ placeholder="选择月"
|
|
|
>
|
|
|
<el-option
|
|
|
- v-for="(ite, i) in yearTypeList"
|
|
|
- :key="i"
|
|
|
- :label="ite.label"
|
|
|
- :value="ite.key"
|
|
|
+ v-for="(it, i) in 12"
|
|
|
+ :key="i + 1"
|
|
|
+ :label="`${i + 1}月`"
|
|
|
+ :value="i + 1 < 10 ? '0' + (i + 1) : i + 1"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
<el-select
|
|
|
- v-if="queryParams.type == 'reportDate'"
|
|
|
size="mini"
|
|
|
- style="width: 120px; margin-left: 10px"
|
|
|
- v-model="currentCompany"
|
|
|
- @change="dateCpChange"
|
|
|
+ style="width: 100px; margin-left: 10px"
|
|
|
+ v-model="zdlx"
|
|
|
+ @change="initEcharts"
|
|
|
placeholder="请选择"
|
|
|
>
|
|
|
<el-option
|
|
|
- v-for="(ite, i) in cpList"
|
|
|
+ v-for="(ite, i) in yearTypeList"
|
|
|
:key="i"
|
|
|
- :label="ite"
|
|
|
- :value="ite"
|
|
|
+ :label="ite.label"
|
|
|
+ :value="ite.key"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
- v-if="queryParams.type == 'reportYear'"
|
|
|
ref="barChart"
|
|
|
id="barChart"
|
|
|
:style="{ height: height, width: width }"
|
|
|
></div>
|
|
|
- <div
|
|
|
+ <!-- <div
|
|
|
v-else
|
|
|
ref="stopTargetLineRef"
|
|
|
id="stopTimeMonth"
|
|
|
:style="{ height: height, width: width }"
|
|
|
- ></div>
|
|
|
+ ></div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -97,6 +97,7 @@ export default {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
reportDate: null,
|
|
|
+ month: new Date().getMonth() + 1,
|
|
|
reportYear: moment(new Date()).format("yyyy"),
|
|
|
},
|
|
|
zdlx: 1,
|
|
|
@@ -134,25 +135,20 @@ export default {
|
|
|
value2: { 0: "errorStopTimeMonth", 1: "errorStopMonth" },
|
|
|
},
|
|
|
],
|
|
|
- currentCompany: "",
|
|
|
- cpList: [],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getList();
|
|
|
},
|
|
|
methods: {
|
|
|
- dateCpChange(e) {
|
|
|
- this.currentCompany = e;
|
|
|
- if (this.queryParams.type == "reportYear") {
|
|
|
- this.initEcharts();
|
|
|
- } else {
|
|
|
- this.initEcharts2();
|
|
|
- }
|
|
|
- },
|
|
|
dateTypeChange(e) {
|
|
|
this.queryParams.type = e;
|
|
|
this.dataList = [];
|
|
|
+ if (e == "reportDate") {
|
|
|
+ this.queryParams.reportYear = moment(new Date()).format("yyyy");
|
|
|
+ } else {
|
|
|
+ this.queryParams.month = new Date().getMonth() + 1;
|
|
|
+ }
|
|
|
this.getList();
|
|
|
},
|
|
|
dateLxChange(e) {
|
|
|
@@ -170,17 +166,14 @@ export default {
|
|
|
this.dataList = response.rows.filter(
|
|
|
(ite) => ite.companyName != "总计"
|
|
|
);
|
|
|
- this.cpList = this.dataList.map((ite) => ite.companyName);
|
|
|
- this.currentCompany = this.cpList ? this.cpList[0] : "";
|
|
|
+ // this.cpList = this.dataList.map((ite) => ite.companyName);
|
|
|
+ // this.currentCompany = this.cpList ? this.cpList[0] : "";
|
|
|
this.loading = false;
|
|
|
- if (this.queryParams.type == "reportYear") {
|
|
|
- this.initEcharts();
|
|
|
- } else {
|
|
|
- this.currentCompany = this.dataList
|
|
|
- ? this.dataList[0].companyName
|
|
|
- : "";
|
|
|
- this.initEcharts2();
|
|
|
- }
|
|
|
+ // if (this.queryParams.type == "reportYear") {
|
|
|
+ this.initEcharts();
|
|
|
+ // } else {
|
|
|
+ // this.initEcharts2();
|
|
|
+ // }
|
|
|
});
|
|
|
},
|
|
|
initEcharts() {
|
|
|
@@ -190,11 +183,32 @@ export default {
|
|
|
if (myChart == null) {
|
|
|
myChart = echarts.init(document.getElementById("barChart"));
|
|
|
}
|
|
|
- const zdlx = this.yearTypeList.find((ite) => ite.key == this.zdlx).value;
|
|
|
const yAxisData = this.dataList.map((ite) => ite.companyName);
|
|
|
- const targetData = this.dataList.map((ite) => ite[zdlx[0]] || 0);
|
|
|
- const actualData = this.dataList.map((ite) => ite[zdlx[1]] || 0);
|
|
|
- const ratioData = this.dataList.map((ite) => ite[zdlx[2]] || "0%");
|
|
|
+ let targetData = [];
|
|
|
+ let actualData = [];
|
|
|
+ let ratioData = [];
|
|
|
+ if (this.queryParams.type == "reportYear") {
|
|
|
+ const zdlx = this.yearTypeList.find(
|
|
|
+ (ite) => ite.key == this.zdlx
|
|
|
+ ).value;
|
|
|
+ targetData = this.dataList.map((ite) => ite[zdlx[0]] || 0);
|
|
|
+ actualData = this.dataList.map((ite) => ite[zdlx[1]] || 0);
|
|
|
+ ratioData = this.dataList.map((ite) => ite[zdlx[2]] || "0%");
|
|
|
+ } else {
|
|
|
+ const zdlx = this.yearTypeList.find(
|
|
|
+ (ite) => ite.key == this.zdlx
|
|
|
+ ).value2;
|
|
|
+ targetData = this.dataList.map(
|
|
|
+ (ite) => ite[`${zdlx[0]}${this.queryParams.month}`] || 0
|
|
|
+ );
|
|
|
+ actualData = this.dataList.map(
|
|
|
+ (ite) => ite[`${zdlx[1]}${this.queryParams.month}Actual`] || 0
|
|
|
+ );
|
|
|
+ ratioData = this.dataList.map(
|
|
|
+ (ite) => ite[`${zdlx[2]}${this.queryParams.month}Ratio`] || "0%"
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
title: {
|
cfofpp