|
@@ -1,18 +1,21 @@
|
|
|
<template>
|
|
|
<div class="h-full">
|
|
|
<div class="c-title flex justify-between">
|
|
|
- <span>当日作业计划</span>
|
|
|
+ <span>作业计划</span>
|
|
|
<el-date-picker
|
|
|
size="mini"
|
|
|
- v-model="year"
|
|
|
- type="year"
|
|
|
- placeholder="选择年"
|
|
|
- style="padding-left: 40px"
|
|
|
+ v-model="dateRange"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyyMMdd"
|
|
|
+ style="width: 240px"
|
|
|
+ @change="init"
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
<div class="flex align-middle">
|
|
|
- <!--el-button type="primary" style="margin-left: 4px">导出</el-button-->
|
|
|
<el-button @click="back" type="text" v-if="currentMap != '衡阳市'"
|
|
|
>返回></el-button
|
|
|
>
|
|
@@ -46,25 +49,48 @@ const mapEnum = {
|
|
|
蒸湘区: require("./蒸湘区.json"),
|
|
|
珠晖区: require("./珠晖区.json"),
|
|
|
};
|
|
|
+import { getWorkNumStatistics } from "@/api/powerdistribution/home";
|
|
|
+import moment from "moment";
|
|
|
export default {
|
|
|
name: "map",
|
|
|
data() {
|
|
|
return {
|
|
|
- year: "2024",
|
|
|
- loading: true,
|
|
|
- itemData: [
|
|
|
- { lable: "日计划完成情况" },
|
|
|
- { lable: "周计划完成情况" },
|
|
|
- { lable: "月计划完成情况" },
|
|
|
- { lable: "年计划完成情况" },
|
|
|
+ dateRange: [
|
|
|
+ moment().endOf("day").format("YYYYMMDD"),
|
|
|
+ moment().endOf("day").format("YYYYMMDD"),
|
|
|
],
|
|
|
+ loading: true,
|
|
|
+ itemData: [{ lable: "作业数量" }],
|
|
|
currentMap: "",
|
|
|
+ mapData: [],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.back();
|
|
|
+ this.init();
|
|
|
},
|
|
|
methods: {
|
|
|
+ async init() {
|
|
|
+ await this.getData();
|
|
|
+ this.back();
|
|
|
+ },
|
|
|
+ async getData() {
|
|
|
+ const params = {
|
|
|
+ startDate: this.dateRange[0],
|
|
|
+ endDate: this.dateRange[1],
|
|
|
+ };
|
|
|
+ this.mapData = [];
|
|
|
+ const data = await getWorkNumStatistics(params);
|
|
|
+ Object.keys(mapEnum).forEach((key) => {
|
|
|
+ (data || []).map((ite) => {
|
|
|
+ if (key.includes(ite.submitOrgNm)) {
|
|
|
+ this.mapData.push({
|
|
|
+ name: key,
|
|
|
+ value: ite.workNum ?? 0,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
back() {
|
|
|
this.currentMap = "衡阳市";
|
|
|
this.initCharts();
|
|
@@ -76,39 +102,28 @@ export default {
|
|
|
var option = {
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
- // trigger: "axis",
|
|
|
alwaysShowContent: true,
|
|
|
formatter: function (params) {
|
|
|
- return (
|
|
|
- params.name +
|
|
|
- "<br/>日计划完成情况" +
|
|
|
- params.value +
|
|
|
- "<br/>周计划完成情况" +
|
|
|
- params.value +
|
|
|
- "<br/>月计划完成情况" +
|
|
|
- params.value +
|
|
|
- "<br/>年计划完成情况" +
|
|
|
- params.value
|
|
|
- );
|
|
|
- },
|
|
|
- },
|
|
|
- visualMap: {
|
|
|
- show: false,
|
|
|
- min: 0,
|
|
|
- max: 100,
|
|
|
- text: ["低", "高"],
|
|
|
- left: 10,
|
|
|
- y: "center",
|
|
|
- calculable: true,
|
|
|
- inRange: {
|
|
|
- color: ["#3a92fe", "#173881"],
|
|
|
- },
|
|
|
- itemWidth: 10,
|
|
|
- itemHeight: 100,
|
|
|
- textStyle: {
|
|
|
- color: "#fff",
|
|
|
+ return params.name + "<br/>作业数量 " + params.value;
|
|
|
},
|
|
|
},
|
|
|
+ // visualMap: {
|
|
|
+ // show: false,
|
|
|
+ // min: 0,
|
|
|
+ // max: 100,
|
|
|
+ // text: ["低", "高"],
|
|
|
+ // left: 10,
|
|
|
+ // y: "center",
|
|
|
+ // calculable: true,
|
|
|
+ // inRange: {
|
|
|
+ // color: ["#3a92fe", "#173881"],
|
|
|
+ // },
|
|
|
+ // itemWidth: 10,
|
|
|
+ // itemHeight: 100,
|
|
|
+ // textStyle: {
|
|
|
+ // color: "#fff",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
geo: [
|
|
|
// {
|
|
|
// show: true,
|
|
@@ -148,7 +163,7 @@ export default {
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
- formatter: "{t|}\n\n{b}",
|
|
|
+ // formatter: "{t|}\n\n{b}",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
},
|
|
@@ -191,7 +206,7 @@ export default {
|
|
|
areaColor: "#5a6fc0", // 选中的区域颜色
|
|
|
},
|
|
|
},
|
|
|
- data: [],
|
|
|
+ data: this.mapData,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
@@ -202,7 +217,7 @@ export default {
|
|
|
myChart.dispatchAction({
|
|
|
type: "showTip",
|
|
|
seriesIndex: 0,
|
|
|
- dataIndex: 0,
|
|
|
+ dataIndex: 3,
|
|
|
});
|
|
|
myChart.on("click", (params) => {
|
|
|
this.currentMap = params.name;
|