<template>
|
<!-- 任务总览 -->
|
<div class="class_overview">
|
<div style="height: 50px;background-color: rgb(247, 248, 249);">
|
<el-form label-position='left' :inline="true" :model="queryData" ref="ruleForm" label-width="100px">
|
<el-form-item label="时间断选择" label-width="90px">
|
<el-date-picker v-if="isRefreshSelect" @change="setisRefreshSelect" size="small" v-model="queryData.timeList" type="daterange" align="right" unlink-panels range-separator="至"
|
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="项目" label-width="50px">
|
<el-select clearable size="small" v-model="queryData.schemeId" placeholder="请选择活动区域" style="width: 240px;">
|
<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 label="负责人" label-width="60px">
|
<el-cascader
|
clearable
|
style="width: 240px;"
|
size="small"
|
:options="options_charge"
|
:props="{ expandTrigger: 'hover' }"
|
v-model="queryData.charge_id_array"
|
placeholder="请选择负责人"
|
>
|
</el-cascader>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div style="text-align: left; background-color: rgb(247, 248, 249);">
|
<!-- 查询-->
|
<el-button type="primary" class="submit" size="small" @click="query_">查 询</el-button>
|
<!-- 重置-->
|
<el-button @click="empty_" size="small">重 置</el-button>
|
</div>
|
<div v-loading="loading_myChart" style="padding: 10px 0px; width: 100%; height: 75vh; box-sizing: border-box; background-color: rgb(247, 248, 249);">
|
<div class="z_shadow" style="margin-top: 0px; width: 100%; height: 100%; border: 1px solid #e4eef9;">
|
<div id="myChart" :style="{width: '100%', height: '100%'}"></div>
|
</div>
|
</div>
|
|
<el-dialog custom-class="z_master_dialog" :title="time_ + ' 任务详情'" v-if="dialog_detail" :visible.sync="dialog_detail" width="900px">
|
<el-table
|
:data="tableData"
|
v-loading="loading_table"
|
style="width: 100%"
|
row-key="id"
|
height="300px"
|
:header-cell-style="{'width': '100%', 'text-align': 'center'}"
|
>
|
<el-table-column prop="schemeName" label="项目名称" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="typeStr" label="模块" width="100" align="center"></el-table-column>
|
<el-table-column prop="budget" label="金额" width="100" align="center"></el-table-column>
|
<el-table-column prop="userId" label="负责人" width="100" align="center"></el-table-column>
|
<el-table-column prop="startTime" label="开始日期" width="120" show-overflow-tooltip align="center" :formatter="createTime_"></el-table-column>
|
<el-table-column prop="endTime" label="结束日期" width="120" show-overflow-tooltip align="center" :formatter="createTime_"></el-table-column>
|
<el-table-column prop="delay" label="是否逾期" width="80" align="center" :formatter="finish_"></el-table-column>
|
</el-table>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
options: [],
|
myChart: null,
|
loading_myChart: false,
|
queryData: {},
|
queryList: {},
|
isRefreshSelect: true,
|
options_charge: [],
|
pickerOptions: {
|
shortcuts: [{
|
text: '最近一周',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '最近一个月',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '最近三个月',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
picker.$emit('pick', [start, end]);
|
}
|
}]
|
},
|
|
xData: ['05-01'],
|
overdueData: [2],
|
planData:[4],
|
dialog_detail: false,
|
time_: null,
|
loading_table: true,
|
tableData: [],
|
}
|
},
|
mounted() {
|
let me = this;
|
this.myChart = this.$echarts.init(document.getElementById('myChart'));
|
this.myChart.on('click', function (params) {
|
me.time_ = params.name;
|
me.dialog_detail = true;
|
me.getData(params.name);
|
});
|
this.initSelect();
|
this.getUserCharge();
|
this.empty_();
|
},
|
|
methods: {
|
initSelect() {
|
var me = this;
|
this.$axios.get("/api/scheme/all")
|
.then(data_ => {
|
if (data_.data.success) {
|
me.options = [];
|
var datas = data_.data.data;
|
datas.forEach(function(one) {
|
if (!me.value) {
|
me.value = one.id;
|
}
|
|
var item = {
|
value: one.id,
|
label: one.name
|
}
|
me.options.push(item);
|
});
|
}
|
}).catch(error => {})
|
},
|
getUserCharge() {
|
let me = this;
|
let url = "/api/sysRoleMapping/detail";
|
this.$axios.get(url)
|
.then(data_ => {
|
let list = data_.data.data;
|
let parId = "";
|
let obj = {};
|
let result = [];
|
|
list.map(el => {
|
obj[el.id] = el;
|
})
|
for(let i=0, len = list.length; i < len; i++) {
|
let id = list[i].roleName;
|
//设置显示字段
|
list[i].value = list[i].id;
|
list[i].label = list[i].name;
|
|
if(id == parId || !id) {
|
if(!obj[list[i].id].children) {
|
obj[list[i].id].children = [];
|
}
|
result.push(list[i]);
|
continue;
|
}
|
if(obj[id].children) {
|
obj[id].children.push(list[i]);
|
} else {
|
obj[id].children = [list[i]];
|
}
|
}
|
me.options_charge = result;
|
}).catch(error =>{
|
})
|
},
|
/* 重置事件 */
|
empty_() {
|
this.queryData = {
|
timeList: [],
|
};
|
this.queryList = {};
|
|
let date_ = new Date();
|
this.queryData.timeList = [];
|
this.queryData.timeList[0] = date_;
|
this.queryData.timeList[1] = date_;
|
|
this.queryList.startTime = this.$moment(date_).format('YYYY-MM-DD');
|
this.queryList.endTime = this.$moment(date_).format('YYYY-MM-DD');
|
this.setisRefreshSelect();
|
|
this.query_();
|
},
|
|
/* 数据的强制刷新 */
|
setisRefreshSelect() {
|
this.isRefreshSelect = false;
|
this.isRefreshSelect = true;
|
},
|
|
/* 查询事件 */
|
query_() {
|
var me = this;
|
this.queryList = {};
|
if (this.queryData != {}) {
|
if (this.queryData.timeList && this.queryData.timeList.length > 0){
|
this.queryList.startTime = this.$moment(this.queryData.timeList[0]).format('YYYY-MM-DD');
|
this.queryList.endTime = this.$moment(this.queryData.timeList[1]).format('YYYY-MM-DD');
|
}
|
else {
|
let date_ = new Date();
|
this.queryData.timeList = [];
|
this.queryData.timeList[0] = date_;
|
this.queryData.timeList[1] = date_;
|
|
this.queryList.startTime = this.$moment(date_).format('YYYY-MM-DD');
|
this.queryList.endTime = this.$moment(date_).format('YYYY-MM-DD');
|
this.setisRefreshSelect();
|
}
|
if (this.queryData.charge_id_array) {
|
this.queryList.userId = this.queryData.charge_id_array[1];
|
}
|
if (this.queryData.schemeId) {
|
this.queryList.schemeId = this.queryData.schemeId;
|
}
|
}
|
else {
|
let date_ = new Date();
|
|
this.queryData.timeList[0] = date_;
|
this.queryData.timeList[1] = date_;
|
|
this.queryList.startTime = this.$moment(date_).format('YYYY-MM-DD');
|
this.queryList.endTime = this.$moment(date_).format('YYYY-MM-DD');
|
this.setisRefreshSelect();
|
}
|
|
let url = "/api/detail/view";
|
let parameter = "";
|
if (this.queryList != {}) {
|
parameter = "?";
|
let i = 0;
|
for (let e in this.queryList) {
|
if (i == 0) {
|
parameter += e + "=" + this.queryList[e];
|
}
|
else {
|
parameter += "&" + e + "=" + this.queryList[e];
|
}
|
i++;
|
}
|
}
|
this.loading_myChart = true;
|
this.$axios.get(
|
url + parameter
|
)
|
.then(data_ => {
|
window.console.log(data_);
|
me.loading_myChart = false;
|
me.xData = data_.data.data.date,
|
me.overdueData = data_.data.data.delay,
|
me.planData = data_.data.data.runtime,
|
me.initChart();
|
}).catch(error => {
|
|
})
|
},
|
|
initChart(datas) {
|
this.myChart.setOption({
|
backgroundColor: "#344b58",
|
"tooltip": {
|
"trigger": "axis",
|
"axisPointer": {
|
"type": "shadow",
|
textStyle: {
|
color: "#fff"
|
}
|
},
|
},
|
"grid": {
|
"borderWidth": 0,
|
"top": 50,
|
"bottom": 95,
|
textStyle: {
|
color: "#fff"
|
}
|
},
|
"legend": {
|
top: '10px',
|
textStyle: {
|
color: '#90979c',
|
},
|
"data": ['已逾期', '计划中']
|
},
|
|
"calculable": true,
|
"xAxis": [{
|
"type": "category",
|
"boundaryGap": ['20%', '20%'],
|
"axisLine": {
|
lineStyle: {
|
color: '#90979c'
|
}
|
},
|
"splitLine": {
|
"show": false
|
},
|
"axisTick": {
|
"show": false
|
},
|
"splitArea": {
|
"show": false
|
},
|
"data": this.xData,
|
}],
|
"yAxis": [{
|
"type": "value",
|
"splitLine": {
|
"show": false
|
},
|
"axisLine": {
|
lineStyle: {
|
color: '#90979c'
|
}
|
},
|
"axisTick": {
|
"show": false
|
},
|
"axisLabel": {
|
"interval": 0,
|
|
},
|
"splitArea": {
|
"show": false
|
},
|
|
}],
|
"dataZoom": [{
|
"show": true,
|
"height": 30,
|
"xAxisIndex": [
|
0
|
],
|
bottom: 30,
|
"start": 10,
|
"end": 80,
|
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
handleSize: '110%',
|
handleStyle:{
|
color:"#d3dee5",
|
|
},
|
textStyle:{
|
color:"#fff"},
|
borderColor:"#90979c"
|
|
|
}, {
|
"type": "inside",
|
"show": true,
|
"height": 15,
|
"start": 1,
|
"end": 35
|
}],
|
"series": [{
|
"name": "已逾期",
|
"type": "bar",
|
"stack": "总量",
|
"barMaxWidth": 35,
|
"barGap": "10%",
|
"itemStyle": {
|
"normal": {
|
"color": "rgba(255,144,128,1)",
|
"label": {
|
"show": true,
|
"textStyle": {
|
"color": "#fff"
|
},
|
"position": "insideTop",
|
formatter: function(p) {
|
return p.value > 0 ? (p.value) : '';
|
}
|
}
|
}
|
},
|
"data": this.overdueData,
|
},
|
|
{
|
"name": "计划中",
|
"type": "bar",
|
"stack": "总量",
|
"itemStyle": {
|
"normal": {
|
"color": "rgba(0,191,183,1)",
|
"barBorderRadius": 0,
|
"label": {
|
"show": true,
|
"position": "top",
|
formatter: function(p) {
|
return p.value > 0 ? (p.value) : '';
|
}
|
}
|
}
|
},
|
"data": this.planData
|
}
|
]
|
});
|
},
|
|
getData (t) {
|
var me = this;
|
|
this.loading_table = true;
|
this.tableData = [];
|
|
let queryList_ = {
|
startTime: t
|
};
|
if (this.queryData.charge_id_array) {
|
queryList_.userId = this.queryData.charge_id_array[1];
|
}
|
if (this.queryData.schemeId) {
|
queryList_.schemeId = this.queryData.schemeId;
|
}
|
|
let url = "/api/detail/view/detail";
|
let parameter = "";
|
if (queryList_ != {}) {
|
parameter = "?";
|
let i = 0;
|
for (let e in queryList_) {
|
if (i == 0) {
|
parameter += e + "=" + queryList_[e];
|
}
|
else {
|
parameter += "&" + e + "=" + queryList_[e];
|
}
|
i++;
|
}
|
}
|
|
this.$axios.get(
|
url + parameter
|
)
|
.then(data_ => {
|
window.console.log(data_);
|
me.loading_table = false;
|
me.tableData = data_.data.data;
|
}).catch(error => {
|
|
})
|
},
|
|
createTime_(row, column, cellValue, index) {
|
if (cellValue) {
|
return this.$moment(cellValue).format('YYYY-MM-DD');
|
}
|
return "";
|
},
|
|
finish_(row, column, cellValue, index) {
|
if (cellValue) {
|
return "逾期";
|
}
|
else {
|
return "";
|
}
|
},
|
|
},
|
}
|
</script>
|
|
<style>
|
.class_overview {
|
text-align: left;
|
background-color: #dee0e2;
|
}
|
|
.files_div {
|
height: 90%;
|
margin-top: 10px;
|
margin-left: 10px;
|
overflow: auto;
|
}
|
|
.file_div {
|
width: 30%;
|
height: 20px;
|
float: left;
|
}
|
|
.file_div :hover {
|
cursor: pointer;
|
font-weight: bold;
|
}
|
</style>
|
