|
|
@@ -35,7 +35,7 @@
|
|
|
size="mini"
|
|
|
@click="download"
|
|
|
:disabled="disabled"
|
|
|
- >{{ disabled ? "下载中..." : "下载统计结果" }}</el-button
|
|
|
+ >{{ disabled ? '下载中...' : '下载统计结果' }}</el-button
|
|
|
>
|
|
|
</div>
|
|
|
<el-card class="box-card">
|
|
|
@@ -50,17 +50,17 @@
|
|
|
|
|
|
<script>
|
|
|
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
|
|
|
-import * as echarts from "echarts";
|
|
|
+import * as echarts from 'echarts';
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
components: {},
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
- monvalue: "", //月份
|
|
|
+ monvalue: '', //月份
|
|
|
useroptions: [], //监测人员名单
|
|
|
uservalue: [],
|
|
|
- disabled: false,
|
|
|
+ disabled: false
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -72,12 +72,12 @@ export default {
|
|
|
//监督人员列表
|
|
|
getuserlist() {
|
|
|
this.$axios({
|
|
|
- method: "POST",
|
|
|
- url: "/api/api_gateway?method=control_center.task.task_user_list",
|
|
|
+ method: 'POST',
|
|
|
+ url: '/api/api_gateway?method=control_center.task.task_user_list',
|
|
|
data: this.qs.stringify({
|
|
|
- user_type: "operator",
|
|
|
- }),
|
|
|
- }).then((res) => {
|
|
|
+ user_type: 'operator'
|
|
|
+ })
|
|
|
+ }).then(res => {
|
|
|
// console.log(res.data.data);
|
|
|
this.useroptions = res.data.data;
|
|
|
});
|
|
|
@@ -85,19 +85,19 @@ export default {
|
|
|
//任务列表 data_report.report.task_report
|
|
|
gettasklist(start_time, end_time) {
|
|
|
// console.log(JSON.stringify(this.uservalue));
|
|
|
- var operator_user_id_list = "";
|
|
|
+ var operator_user_id_list = '';
|
|
|
if (this.uservalue.length != 0) {
|
|
|
operator_user_id_list = JSON.stringify(this.uservalue);
|
|
|
}
|
|
|
this.$axios({
|
|
|
- method: "POST",
|
|
|
- url: "/api/api_gateway?method=data_report.report.task_report",
|
|
|
+ method: 'POST',
|
|
|
+ url: '/api/api_gateway?method=data_report.report.task_report',
|
|
|
data: this.qs.stringify({
|
|
|
operator_user_id_list, // 非必填 任务处理人id数组 ['1', '2']
|
|
|
start_time, //月份
|
|
|
- end_time, //结束
|
|
|
- }),
|
|
|
- }).then((res) => {
|
|
|
+ end_time //结束
|
|
|
+ })
|
|
|
+ }).then(res => {
|
|
|
console.log(res.data.data);
|
|
|
// this.useroptions = res.data.data;
|
|
|
var tasklist = res.data.data;
|
|
|
@@ -130,53 +130,53 @@ export default {
|
|
|
tooltip: {},
|
|
|
legend: {
|
|
|
show: true,
|
|
|
- top: "8%",
|
|
|
- selectedMode: false, //取消图例上的点击事件
|
|
|
+ top: '8%',
|
|
|
+ selectedMode: false //取消图例上的点击事件
|
|
|
},
|
|
|
grid: {
|
|
|
- left: "3%",
|
|
|
- right: "3%",
|
|
|
- bottom: "5%",
|
|
|
- top: "20%",
|
|
|
- containLabel: true,
|
|
|
+ left: '3%',
|
|
|
+ right: '3%',
|
|
|
+ bottom: '5%',
|
|
|
+ top: '20%',
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
- type: "category",
|
|
|
+ type: 'category',
|
|
|
data: userlist,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: "#999",
|
|
|
+ color: '#999'
|
|
|
},
|
|
|
- show: true,
|
|
|
+ show: true
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- color: "#333",
|
|
|
+ color: '#333',
|
|
|
fontSize: 14,
|
|
|
interval: 0,
|
|
|
- rotate:-50
|
|
|
+ rotate: -50
|
|
|
},
|
|
|
nameTextStyle: {
|
|
|
- color: "#ff0",
|
|
|
+ color: '#ff0',
|
|
|
padding: [0, 0, -10, 0],
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
},
|
|
|
yAxis: {
|
|
|
- type: "value",
|
|
|
+ type: 'value',
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: "#333",
|
|
|
- width: 1,
|
|
|
+ color: '#333',
|
|
|
+ width: 1
|
|
|
// "type": "dashed"
|
|
|
},
|
|
|
- show: true,
|
|
|
- },
|
|
|
+ show: true
|
|
|
+ }
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: "已完成任务数量",
|
|
|
- type: "bar",
|
|
|
- stack: "account",
|
|
|
+ name: '已完成任务数量',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'account',
|
|
|
barWidth: 26,
|
|
|
itemStyle: {
|
|
|
color: {
|
|
|
@@ -184,98 +184,113 @@ export default {
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
- type: "linear",
|
|
|
+ type: 'linear',
|
|
|
global: false,
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: "rgb(164,215,251,0.3)",
|
|
|
+ color: 'rgb(164,215,251,0.3)'
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: "#369ef6",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
+ color: '#369ef6'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
},
|
|
|
- data: offtask,
|
|
|
+ data: offtask
|
|
|
},
|
|
|
{
|
|
|
- name: "未完成任务数量",
|
|
|
- type: "bar",
|
|
|
- stack: "account",
|
|
|
+ name: '未完成任务数量',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'account',
|
|
|
barWidth: 26,
|
|
|
itemStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: "rgb(251,220,155,0.3)" },
|
|
|
- { offset: 1, color: "#ed9163" },
|
|
|
- ]),
|
|
|
+ { offset: 0, color: 'rgb(251,220,155,0.3)' },
|
|
|
+ { offset: 1, color: '#ed9163' }
|
|
|
+ ])
|
|
|
},
|
|
|
- data: nonetask,
|
|
|
+ data: nonetask
|
|
|
},
|
|
|
{
|
|
|
- name: "逾期完成任务数量",
|
|
|
- type: "bar",
|
|
|
- stack: "account",
|
|
|
+ name: '逾期完成任务数量',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'account',
|
|
|
barWidth: 26,
|
|
|
itemStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: "rgb(254,173,161,0.3)" },
|
|
|
- { offset: 1, color: "#fd7371" },
|
|
|
- ]),
|
|
|
+ { offset: 0, color: 'rgb(254,173,161,0.3)' },
|
|
|
+ { offset: 1, color: '#fd7371' }
|
|
|
+ ])
|
|
|
},
|
|
|
- data: overdueoff,
|
|
|
+ data: overdueoff
|
|
|
},
|
|
|
{
|
|
|
z: 3,
|
|
|
- type: "pictorialBar",
|
|
|
- symbolPosition: "end",
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbolPosition: 'end',
|
|
|
data: offtask,
|
|
|
- symbol: "diamond",
|
|
|
- symbolOffset: [0, "-50%"],
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolOffset: [0, '-50%'],
|
|
|
symbolSize: [26, 10],
|
|
|
symbolRotate: 0,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
borderWidth: 0,
|
|
|
- color: "#369ef6",
|
|
|
- },
|
|
|
+ color: '#369ef6'
|
|
|
+ }
|
|
|
},
|
|
|
+ tooltip: {
|
|
|
+ formatter(params, ticker) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
z: 3,
|
|
|
- type: "pictorialBar",
|
|
|
- symbolPosition: "end",
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbolPosition: 'end',
|
|
|
data: sumlist2,
|
|
|
- symbol: "diamond",
|
|
|
- symbolOffset: [0, "-50%"],
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolOffset: [0, '-50%'],
|
|
|
symbolSize: [26, 10],
|
|
|
symbolRotate: 0,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
borderWidth: 0,
|
|
|
- color: "#e76422",
|
|
|
- },
|
|
|
+ color: '#e76422'
|
|
|
+ }
|
|
|
},
|
|
|
+ tooltip: {
|
|
|
+ formatter(params, ticker) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
z: 3,
|
|
|
- type: "pictorialBar",
|
|
|
- symbolPosition: "end",
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbolPosition: 'end',
|
|
|
data: sumlist,
|
|
|
- symbol: "diamond",
|
|
|
- symbolOffset: [0, "-50%"],
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolOffset: [0, '-50%'],
|
|
|
symbolSize: [26, 10],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
borderWidth: 0,
|
|
|
- color: "#fd7371",
|
|
|
- },
|
|
|
+ color: '#fd7371'
|
|
|
+ }
|
|
|
},
|
|
|
- },
|
|
|
- ],
|
|
|
+ tooltip: {
|
|
|
+ formatter(params, ticker) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
- echarts.init(document.getElementById("mychartpie")).setOption(option);
|
|
|
+ echarts.init(document.getElementById('mychartpie')).setOption(option);
|
|
|
},
|
|
|
pickerchange() {
|
|
|
this.searchchilk();
|
|
|
@@ -287,50 +302,50 @@ export default {
|
|
|
this.gettasklist(start_time, end_time);
|
|
|
},
|
|
|
timetag(i) {
|
|
|
- var time = "";
|
|
|
+ var time = '';
|
|
|
if (this.monvalue) {
|
|
|
if (this.monvalue.length != 0) {
|
|
|
time =
|
|
|
this.monvalue[i].getFullYear() +
|
|
|
- "-" +
|
|
|
+ '-' +
|
|
|
(this.monvalue[i].getMonth() + 1 < 10
|
|
|
- ? "0" + (this.monvalue[i].getMonth() + 1)
|
|
|
+ ? '0' + (this.monvalue[i].getMonth() + 1)
|
|
|
: this.monvalue[i].getMonth() + 1);
|
|
|
}
|
|
|
}
|
|
|
return time;
|
|
|
},
|
|
|
download(start_time, end_time) {
|
|
|
- var operator_user_id_list = "";
|
|
|
+ var operator_user_id_list = '';
|
|
|
if (this.uservalue.length != 0) {
|
|
|
operator_user_id_list = JSON.stringify(this.uservalue);
|
|
|
}
|
|
|
this.disabled = true;
|
|
|
this.$axios({
|
|
|
- method: "POST",
|
|
|
- url: "/api/api_gateway?method=data_report.report.task_export",
|
|
|
+ method: 'POST',
|
|
|
+ url: '/api/api_gateway?method=data_report.report.task_export',
|
|
|
data: this.qs.stringify({
|
|
|
operator_user_id_list, // 非必填 任务处理人id数组 ['1', '2']
|
|
|
start_time, //月份
|
|
|
- end_time, //结束
|
|
|
+ end_time //结束
|
|
|
}),
|
|
|
- responseType: "blob",
|
|
|
- }).then((res) => {
|
|
|
+ responseType: 'blob'
|
|
|
+ }).then(res => {
|
|
|
console.log(res.data.data);
|
|
|
- this.downloadFile(res, "监测任务统计.xls");
|
|
|
+ this.downloadFile(res, '监测任务统计.xls');
|
|
|
});
|
|
|
},
|
|
|
downloadFile(res, name) {
|
|
|
- let link = document.createElement("a");
|
|
|
+ let link = document.createElement('a');
|
|
|
link.href = window.URL.createObjectURL(new Blob([res.data]));
|
|
|
- link.target = "_blank";
|
|
|
+ link.target = '_blank';
|
|
|
//文件名和格式
|
|
|
link.download = name;
|
|
|
document.body.appendChild(link);
|
|
|
link.click();
|
|
|
document.body.removeChild(link);
|
|
|
this.disabled = false;
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
@@ -345,7 +360,7 @@ export default {
|
|
|
updated() {}, //生命周期 - 更新之后
|
|
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
destroyed() {}, //生命周期 - 销毁完成
|
|
|
- activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+ activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
@@ -396,4 +411,4 @@ export default {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|