You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1272 lines
41 KiB
1272 lines
41 KiB
<template>
|
|
<div class="page flex-col">
|
|
<div class="group_1 flex-col">
|
|
<div class="box_1 flex-row">
|
|
<div class="group_2 flex-col">
|
|
<div class="text-wrapper_1 flex-col">
|
|
<span class="text_1">建设项目</span>
|
|
</div>
|
|
<div class="box_2 flex-col justify-end">
|
|
<div class="text-wrapper_2 flex-row justify-between">
|
|
<span class="text_2">{{ total }}</span>
|
|
<span class="text_3">{{ acc["noAcc"] || 0 }}</span>
|
|
<span class="text_4">{{ acc["acc"] || 0 }}</span>
|
|
</div>
|
|
<div class="text-wrapper_3 flex-row justify-between">
|
|
<span class="text_5">初设批复(个)</span>
|
|
<span class="text_6">施工中(个)</span>
|
|
<span class="text_7">已完工(个)</span>
|
|
</div>
|
|
<div class="box_3 flex-col">
|
|
<div class="box_4 flex-row">
|
|
<span class="text_8">项目类型</span>
|
|
<div class="text-wrapper_4 flex-col">
|
|
<span class="text_9">重大项目</span>
|
|
</div>
|
|
<div class="text-wrapper_5 flex-col">
|
|
<span class="text_10">面上项目</span>
|
|
</div>
|
|
</div>
|
|
<div ref="Ele" style="width: 400px; height: 360px"></div>
|
|
<!-- <div class="box_5 flex-row justify-between">
|
|
<div class="box_6 flex-row"></div>
|
|
</div>
|
|
<div class="box_7 flex-row">
|
|
<div class="image-text_2 flex-row justify-between">
|
|
<div class="text-group_2 flex-col justify-between"></div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="text-wrapper_8 flex-col">
|
|
<span class="text_16">投资完成情况</span>
|
|
</div>
|
|
<div class="box_8 flex-col">
|
|
<div ref="bar" style="width: 400px; height: 299px"></div>
|
|
</div>
|
|
</div>
|
|
<div class="group_4 flex-col justify-between">
|
|
<div class="group_5 flex-col justify-end">
|
|
<div class="map-wrapper" style="">
|
|
<div id="content">
|
|
<div id="map" ref="map"></div>
|
|
<!-- <div id="popup" class="ol-popup" style="background-color: #fff">
|
|
<div id="popup-closer" class="popup-closer">
|
|
<i class="el-icon-error"></i>
|
|
</div>
|
|
<div id="popup-content" class="popup-content"></div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<!-- <div class="box_13 flex-row">
|
|
<div class="text-wrapper_11 flex-col">
|
|
<span class="text_30">预警中心</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-wrapper_12 flex-row"></div>
|
|
<div class="box_15 flex-row">
|
|
<div class="image-text_8 flex-row justify-between"></div>
|
|
</div>
|
|
<div class="box_16 flex-row">
|
|
<div class="image-text_9 flex-row justify-between"></div>
|
|
</div>
|
|
<div class="box_18 flex-row justify-between">
|
|
<div class="text-wrapper_13 flex-col">
|
|
<span class="text_34">预警规程</span>
|
|
</div>
|
|
<div class="section_2 flex-col justify-between">
|
|
<div class="image-text_10 flex-row justify-between"></div>
|
|
</div>
|
|
</div> -->
|
|
<div class="box_20 flex-row">
|
|
<div class="text-wrapper_14 flex-col">
|
|
<span class="text_35">首页</span>
|
|
</div>
|
|
<div class="block_1 flex-col"></div>
|
|
<span class="text_36">智慧水利水工程应用</span>
|
|
<div class="text-wrapper_15 flex-col">
|
|
<span class="text_37">工作平台</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="group_7 flex-col">
|
|
<div class="text-wrapper_16 flex-col">
|
|
<span class="text_38">风险管控</span>
|
|
</div>
|
|
<div class="text-wrapper_17 flex-row">
|
|
<span class="text_39">序号</span>
|
|
<span class="text_40">预警事项</span>
|
|
<span class="text_41">预警</span>
|
|
<span class="text_42">提醒</span>
|
|
</div>
|
|
|
|
<div
|
|
class="text-wrapper_18 flex-row"
|
|
v-for="(item, index) in warnInfo"
|
|
:key="item.warnType + index"
|
|
>
|
|
<span class="text_43">{{ index + 1 }}</span>
|
|
<span class="text_44">{{ zdWarningType(item.warnType) }}</span>
|
|
<span class="text_45" style="width: auto">{{
|
|
item.alert_type == "0" ? item.number : 0
|
|
}}</span>
|
|
|
|
<span class="text_47" style="width: auto">{{
|
|
item.alert_type == "1" ? item.number : 0
|
|
}}</span>
|
|
</div>
|
|
<!-- <div class="box_21 flex-row">
|
|
<img
|
|
class="thumbnail_5"
|
|
referrerpolicy="no-referrer"
|
|
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9dce4be4630a692ecf02f202ea77eb2b3e546f06799529092a1effe690e5e197"
|
|
/>
|
|
<span class="text_49">2</span>
|
|
<span class="text_50">超批复投资</span>
|
|
<span class="text_51">12</span> <span class="text_52">条</span>
|
|
<span class="text_53">12</span> <span class="text_54">条</span>
|
|
</div>
|
|
<div class="text-wrapper_19 flex-row">
|
|
<span class="text_55">3</span>
|
|
<span class="text_56">直接发包分析</span>
|
|
<span class="text_57">8</span> <span class="text_58">条</span>
|
|
<span class="text_59">8</span> <span class="text_60">条</span>
|
|
</div>
|
|
<div class="text-wrapper_20 flex-row">
|
|
<span class="text_61">4</span>
|
|
<span class="text_62">图标串标分析</span>
|
|
<span class="text_63">21</span> <span class="text_64">条</span>
|
|
<span class="text_65">21</span> <span class="text_66">条</span>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="group_8 flex-col">
|
|
<div class="text-wrapper_21 flex-col">
|
|
<span class="text_67">建设市场</span>
|
|
</div>
|
|
<div class="group_9 flex-col">
|
|
<div class="box_22 flex-row justify-between">
|
|
<span class="text_68">参建单位</span>
|
|
<template v-if="rightInfoData.total">
|
|
<div
|
|
class="text-wrapper_22 flex-col"
|
|
v-for="(item, index) in rightInfoData.total
|
|
.toString()
|
|
.split('')"
|
|
:key="index"
|
|
>
|
|
<span class="text_69">{{ item }}</span>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="text-wrapper_22 flex-col">
|
|
<span class="text_69">0</span>
|
|
</div>
|
|
</template>
|
|
<span class="text_73">家</span>
|
|
</div>
|
|
<div class="text-wrapper_26 flex-row">
|
|
<span class="text_74">省内企业</span>
|
|
<span class="text_75" style="width: auto">{{
|
|
rightInfoData.typeNumber
|
|
? rightInfoData.typeNumber.InProvince
|
|
: 0
|
|
}}</span>
|
|
<span class="text_76">家</span>
|
|
<span class="text_77" style="margin-left: 130px">外省企业</span>
|
|
<span class="text_78" style="width: auto">{{
|
|
rightInfoData.typeNumber
|
|
? rightInfoData.typeNumber.OutProvince
|
|
: 0
|
|
}}</span>
|
|
<span class="text_79">家</span>
|
|
</div>
|
|
<div class="box_23 flex-row">
|
|
<img
|
|
class="image_7"
|
|
referrerpolicy="no-referrer"
|
|
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngbf8bce55ec7d5ac0d129d1f631d1e109058088a45ac23031be85db2647989b8c"
|
|
:style="{
|
|
width: `${
|
|
rightInfoData.typeNumber
|
|
? (rightInfoData.typeNumber.InProvince /
|
|
(rightInfoData.typeNumber.InProvince +
|
|
rightInfoData.typeNumber.OutProvince)) *
|
|
100
|
|
: 0
|
|
}%`,
|
|
}"
|
|
/>
|
|
<div
|
|
class="block_2 flex-col"
|
|
:style="{
|
|
width: `${
|
|
rightInfoData.typeNumber
|
|
? (rightInfoData.typeNumber.OutProvince /
|
|
(rightInfoData.typeNumber.InProvince +
|
|
rightInfoData.typeNumber.OutProvince)) *
|
|
100
|
|
: 0
|
|
}%`,
|
|
}"
|
|
></div>
|
|
</div>
|
|
<div class="box_24 flex-row justify-between">
|
|
<div class="text-wrapper_27 flex-col">
|
|
<span class="text_80">施工(家)</span>
|
|
<span
|
|
class="text_81"
|
|
style="text-align: center; width: auto; margin: unset"
|
|
>{{
|
|
rightInfoData.typeNumber ? rightInfoData.typeNumber[0] : 0
|
|
}}</span
|
|
>
|
|
</div>
|
|
<div class="text-wrapper_28 flex-col">
|
|
<span class="text_82">设计(家)</span>
|
|
<span
|
|
class="text_83"
|
|
style="text-align: center; width: auto; margin: unset"
|
|
>{{
|
|
rightInfoData.typeNumber ? rightInfoData.typeNumber[0] : 0
|
|
}}</span
|
|
>
|
|
</div>
|
|
<div class="text-wrapper_29 flex-col">
|
|
<span class="text_84">监理(家)</span>
|
|
<span
|
|
class="text_85"
|
|
style="text-align: center; width: auto; margin: unset"
|
|
>{{
|
|
rightInfoData.typeNumber ? rightInfoData.typeNumber[0] : 0
|
|
}}</span
|
|
>
|
|
</div>
|
|
<div class="text-wrapper_30 flex-col">
|
|
<span class="text_86">咨询(家)</span>
|
|
<span
|
|
class="text_87"
|
|
style="text-align: center; width: auto; margin: unset"
|
|
>{{
|
|
rightInfoData.typeNumber ? rightInfoData.typeNumber[0] : 0
|
|
}}</span
|
|
>
|
|
</div>
|
|
<div class="text-wrapper_31 flex-col">
|
|
<span class="text_88">监测(家)</span>
|
|
<span
|
|
class="text_89"
|
|
style="text-align: center; width: auto; margin: unset"
|
|
>{{
|
|
rightInfoData.typeNumber ? rightInfoData.typeNumber[0] : 0
|
|
}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<span class="text_90">资质等级</span>
|
|
<!-- <div class="box_25 flex-row justify-between"> -->
|
|
<div
|
|
class=""
|
|
style="width: 358px; height: 140px"
|
|
ref="FunnelChart"
|
|
></div>
|
|
<!-- </div> -->
|
|
<span class="text_95">信用等级</span>
|
|
<div class="box_27 flex-row justify-between">
|
|
<div class="text-wrapper_32 flex-col">
|
|
<span class="text_96">信用等级A</span>
|
|
<span class="text_97">30.98%</span>
|
|
</div>
|
|
<div class="group_13 flex-col justify-between">
|
|
<div class="section_4 flex-row justify-between">
|
|
<div class="image-text_16 flex-row justify-between">
|
|
<div class="group_14 flex-col"></div>
|
|
<span class="text-group_16">总承包等级</span>
|
|
</div>
|
|
<span class="text_98">3</span>
|
|
</div>
|
|
<div class="section_5 flex-row justify-between">
|
|
<div class="image-text_17 flex-row justify-between">
|
|
<div class="group_15 flex-col"></div>
|
|
<span class="text-group_17">总承包一级</span>
|
|
</div>
|
|
<span class="text_99">12</span>
|
|
</div>
|
|
<div class="section_6 flex-row justify-between">
|
|
<div class="image-text_18 flex-row justify-between">
|
|
<div class="block_8 flex-col"></div>
|
|
<span class="text-group_18">总承包二级</span>
|
|
</div>
|
|
<span class="text_100">8</span>
|
|
</div>
|
|
<div class="section_7 flex-row justify-between">
|
|
<div class="image-text_19 flex-row justify-between">
|
|
<div class="box_28 flex-col"></div>
|
|
<span class="text-group_19">总承包三级</span>
|
|
</div>
|
|
<span class="text_101">21</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-wrapper_33 flex-col">
|
|
<span class="text_102">失信惩戒</span>
|
|
</div>
|
|
<div class="group_16 flex-col">
|
|
<div class="group_17 flex-row">
|
|
<div class="block_9 flex-col"></div>
|
|
<span class="text_103">黑名单</span>
|
|
<span class="text_104">0</span>
|
|
</div>
|
|
<div class="group_18 flex-row">
|
|
<div class="group_19 flex-col"></div>
|
|
<span class="text_105">重点关注</span>
|
|
<span class="text_106">0</span>
|
|
</div>
|
|
<div class="group_20 flex-row">
|
|
<div class="section_8 flex-col"></div>
|
|
<span class="text_107">失信执行人</span>
|
|
<span class="text_108">0</span>
|
|
</div>
|
|
<div class="group_21 flex-row">
|
|
<div class="group_22 flex-col"></div>
|
|
<span class="text_109">行政处罚</span>
|
|
<span class="text_110">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
import { getTypeNum, getForewarningNum } from "@/api/projectStatistics/sort";
|
|
import { getInfo, getSourceFundsNum } from "@/api/projectStatistics/sort";
|
|
import { codeToText } from "element-china-area-data";
|
|
import { information, getWarnNumber } from "@/api/enterprise/enterpriseInfo";
|
|
|
|
import "ol/ol.css";
|
|
import { Map, View } from "ol";
|
|
import { defaults as defaultControls } from "ol/control";
|
|
import Tile from "ol/layer/Tile";
|
|
import { fromLonLat } from "ol/proj";
|
|
import OSM from "ol/source/OSM";
|
|
import WMTS from "ol/source/WMTS";
|
|
import WMTSTileGrid from "ol/tilegrid/WMTS.js";
|
|
import VectorSource from "ol/source/Vector.js";
|
|
import Cluster from "ol/source/Cluster.js";
|
|
import { TileSuperMapRest } from "@supermap/iclient-ol/mapping/TileSuperMapRest";
|
|
|
|
import VectorLayer from "ol/layer/Vector.js";
|
|
import { Style, Fill, Stroke, Circle, Text } from "ol/style";
|
|
|
|
import { Draw, Select } from "ol/interaction";
|
|
import { SingleClick } from "ol/events/condition";
|
|
|
|
import Feature from "ol/Feature.js";
|
|
import LineString from "ol/geom/LineString.js";
|
|
import Point from "ol/geom/Point.js";
|
|
import { WMTSCapabilities, GML2 } from "ol/format";
|
|
import { getWidth, getTopLeft } from "ol/extent";
|
|
import GeoJSON from "ol/format/GeoJSON.js";
|
|
import Overlay from "ol/Overlay";
|
|
export default {
|
|
data() {
|
|
return {
|
|
status: false,
|
|
constants: {},
|
|
InfoList: [],
|
|
zd_projectTypeOptions: [],
|
|
ms_projectTypeOptions: [],
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
ids: null,
|
|
data: {
|
|
projectName: null,
|
|
projectType: null,
|
|
total: null,
|
|
projectPhase: null,
|
|
},
|
|
},
|
|
total: 0,
|
|
acc: {},
|
|
ms: {},
|
|
zd: {},
|
|
adcd: [
|
|
"1100",
|
|
"4400",
|
|
"4408",
|
|
"4409",
|
|
"4414",
|
|
"4419",
|
|
"4420",
|
|
"4451",
|
|
"4452",
|
|
"4453",
|
|
],
|
|
formattedZd: {},
|
|
formattedMs: {},
|
|
projectType: [],
|
|
sourceFound: {},
|
|
year: "2024",
|
|
rightInfoData: [],
|
|
warnInfo: [],
|
|
zd_warnTypeOptions: [],
|
|
|
|
map: null,
|
|
// projection: "EPSG:4326",
|
|
pointDrawFlag: "",
|
|
lineDrawFlag: "",
|
|
sketch: "", // 存储草图
|
|
geometries: [], // 存储绘制的几何图形
|
|
lastPointFeature: null,
|
|
lastLineFeature: null,
|
|
all_draw_feature: [],
|
|
all_point_coords: [],
|
|
all_line_coords: [],
|
|
pointVectorSource: null,
|
|
lineVectorSource: null,
|
|
ClusterSource: null,
|
|
pointVectorLayer: null,
|
|
lineVectorLayer: null,
|
|
zoom: 10,
|
|
interaction: null,
|
|
lonALat: {
|
|
lon: null,
|
|
lat: null,
|
|
},
|
|
viewCenter: [113.36502, 22.9787],
|
|
};
|
|
},
|
|
created() {
|
|
getWarnNumber().then((res) => {
|
|
this.warnInfo = res.data;
|
|
console.log("---", res);
|
|
});
|
|
this.getDicts("Warning_items").then((response) => {
|
|
this.zd_warnTypeOptions = response.data;
|
|
console.log("字典", response);
|
|
});
|
|
this.getDicts("major_project").then((response) => {
|
|
this.zd_projectTypeOptions = response.data;
|
|
});
|
|
this.getDicts("general_project").then((response) => {
|
|
this.ms_projectTypeOptions = response.data;
|
|
});
|
|
// this.getXMInfo();
|
|
getSourceFundsNum(this.year).then((res) => {
|
|
this.sourceFound = res.data;
|
|
this.adcd = Object.keys(this.sourceFound);
|
|
console.log(res.data);
|
|
this.barInit();
|
|
});
|
|
getForewarningNum().then((res) => {
|
|
this.forewarningNum = res.data;
|
|
console.log(this.forewarningNum);
|
|
});
|
|
getTypeNum(this.queryParams).then((res) => {
|
|
this.zd = res.data.zd;
|
|
this.ms = res.data.ms;
|
|
this.acc = res.data.acc;
|
|
Object.entries(this.zd).forEach(([key, value]) => {
|
|
this.zdTotal = this.zdTotal + Number(value);
|
|
let name = this.zdProjectTypeFormat(key);
|
|
let obj = {
|
|
name: name,
|
|
value: Number(value),
|
|
};
|
|
this.projectType.push(obj);
|
|
});
|
|
Object.entries(this.ms).forEach(([key, value]) => {
|
|
this.msTotal = this.msTotal + Number(value);
|
|
let name = this.msProjectTypeFormat(key);
|
|
let obj = {
|
|
name: name,
|
|
value: Number(value),
|
|
};
|
|
this.projectType.push(obj);
|
|
});
|
|
this.total = Number(this.acc["acc"]) + Number(this.acc["noAcc"]);
|
|
console.log(this.projectType);
|
|
this.eleInit();
|
|
});
|
|
},
|
|
mounted() {
|
|
// this.barInit();
|
|
information().then((res) => {
|
|
this.rightInfoData = res.data;
|
|
this.FunnelChartInit();
|
|
});
|
|
this.initMap();
|
|
},
|
|
methods: {
|
|
goIndex() {
|
|
this.status = true;
|
|
this.$router.push("/");
|
|
},
|
|
eleInit() {
|
|
let chartDom = this.$refs.Ele;
|
|
let myChart = echarts.init(chartDom);
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
grid: {
|
|
top: "00%", // 控制图表上方的间距
|
|
bottom: "40%", // 控制图表下方的间距
|
|
left: "60%", // 控制图表左侧的间距
|
|
right: "0%", // 控制图表右侧的间距
|
|
},
|
|
legend: {
|
|
orient: "vertical", // 图例竖向排列
|
|
left: 0, // 图例放置在图形右侧，右边距 10
|
|
top: "bottom", // 图例垂直居中
|
|
itemWidth: 20, // 图例项的宽度
|
|
itemHeight: 14, // 图例项的高度
|
|
icon: "circle", // 图例项的图标为圆形
|
|
padding: [0, 10, 0, 10], // 图例四周的内边距，防止与图形重叠
|
|
textStyle: {
|
|
fontSize: 10, // 设置字体大小为12px
|
|
color: "#fff", // 设置字体颜色，默认为#333（深灰色）
|
|
},
|
|
},
|
|
color: ["#2E8B57", "#66CDAA", "#20B2AA", "#3CB371", "#228B22"], // 设置绿色系颜色
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["40%", "60%"],
|
|
// center: ["30%", "50%"],
|
|
avoidLabelOverlap: true,
|
|
padAngle: 5,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
},
|
|
label: {
|
|
alignTo: "edge",
|
|
formatter: "{name|{b}}\n{time|{c} 小时}",
|
|
minMargin: 5,
|
|
edgeDistance: 10,
|
|
lineHeight: 15,
|
|
rich: {
|
|
time: {
|
|
fontSize: 10,
|
|
color: "#999",
|
|
},
|
|
},
|
|
},
|
|
labelLine: {
|
|
length: 15,
|
|
length2: 0,
|
|
maxSurfaceAngle: 80,
|
|
},
|
|
labelLayout: function (params) {
|
|
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
|
|
const points = params.labelLinePoints;
|
|
// Update the end point.
|
|
points[2][0] = isLeft
|
|
? params.labelRect.x
|
|
: params.labelRect.x + params.labelRect.width;
|
|
return {
|
|
labelLinePoints: points,
|
|
};
|
|
},
|
|
data: this.projectType.map((item) => ({
|
|
...item,
|
|
name: this.truncateName(item.name),
|
|
})),
|
|
},
|
|
],
|
|
};
|
|
option && myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
|
|
barInit() {
|
|
const progressPlanValues = Object.values(this.sourceFound).map(
|
|
(obj) => obj.progressPlan
|
|
);
|
|
const actualValues = Object.values(this.sourceFound).map(
|
|
(obj) => obj.actual
|
|
);
|
|
|
|
const maxProgressPlan = Math.max(...progressPlanValues);
|
|
const maxActual = Math.max(...actualValues);
|
|
|
|
// 过滤掉 undefined 的项，并获取有效数据的索引
|
|
const validIndices = this.adcd
|
|
.map((item, index) => (codeToText[item] ? index : null))
|
|
.filter((index) => index !== null);
|
|
|
|
// 根据有效索引过滤 xAxis 数据
|
|
const filteredData = this.adcd
|
|
.filter((item, index) => validIndices.includes(index))
|
|
.map((item) => codeToText[item]);
|
|
|
|
// 根据有效索引过滤 series 数据
|
|
const filteredSourceFound = Object.values(this.sourceFound).filter(
|
|
(_, index) => validIndices.includes(index)
|
|
);
|
|
|
|
const indexedSourceFound = filteredSourceFound.map((obj, index) => ({
|
|
...obj,
|
|
index,
|
|
}));
|
|
const indexedActuals = indexedSourceFound.map((obj) => obj.actual);
|
|
|
|
// 根据 actuals 从大到小排序
|
|
const sortedByActuals = indexedSourceFound
|
|
.map((obj) => ({ ...obj, actual: indexedActuals[obj.index] }))
|
|
.sort((a, b) => b.actual - a.actual);
|
|
|
|
// 提取排序后的索引
|
|
const sortedIndices = sortedByActuals.map((obj) => obj.index);
|
|
|
|
// 根据排序后的索引重新排列 filteredData 和 filteredSourceFound
|
|
const sortedFilteredData = sortedIndices.map(
|
|
(index) => filteredData[index]
|
|
);
|
|
const sortedFilteredSourceFound = sortedIndices.map(
|
|
(index) => filteredSourceFound[index]
|
|
);
|
|
|
|
const progressPlans = sortedFilteredSourceFound.map(
|
|
(obj) => obj.progressPlan
|
|
);
|
|
const actuals = sortedFilteredSourceFound.map((obj) => obj.actual);
|
|
|
|
// 取两个最大值中的最大值作为 yAxis 的 max
|
|
const yAxisMax = Math.max(maxProgressPlan, maxActual);
|
|
let chartDom = this.$refs.bar;
|
|
let myChart = echarts.init(chartDom);
|
|
let option = {
|
|
grid: {
|
|
left: "15%",
|
|
right: "5%",
|
|
// top: "5%",
|
|
// bottom: "20%",
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
crossStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
data: ["年度计划", "实际完成"],
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
axisLine: {
|
|
show: false, // 隐藏 X 轴线
|
|
lineStyle: {
|
|
color: "#c1c1c1",
|
|
},
|
|
},
|
|
axisLabel: { interval: 0, rotate: 45 },
|
|
type: "category",
|
|
data: sortedFilteredData,
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
|
|
axisTick: {
|
|
alignWithLabel: true, // 使刻度线与标签对齐
|
|
},
|
|
interval: 0,
|
|
fontSize: 2, // 设置字体大小
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
axisLine: {
|
|
show: false, // 隐藏 X 轴线
|
|
lineStyle: {
|
|
color: "#c1c1c1",
|
|
},
|
|
},
|
|
type: "value",
|
|
name: "金额/万元",
|
|
min: 0,
|
|
max: yAxisMax,
|
|
interval: yAxisMax / 10,
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "年度计划",
|
|
type: "bar",
|
|
color: "#00B7E6",
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value;
|
|
},
|
|
},
|
|
data: progressPlans,
|
|
},
|
|
{
|
|
name: "实际完成",
|
|
type: "bar",
|
|
color: "#FA795B",
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value;
|
|
},
|
|
},
|
|
data: actuals,
|
|
},
|
|
],
|
|
};
|
|
option && myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
FunnelChartInit() {
|
|
let Chartkeys = ["总承包等级", "总承包一级", "总承包二级", "总承包三级"];
|
|
let chartDom = this.$refs.FunnelChart;
|
|
let myChart = echarts.init(chartDom);
|
|
let chartData = Object.keys(this.rightInfoData.qualificationLevel).map(
|
|
(item, index) => {
|
|
return { value: item, name: Chartkeys[index] };
|
|
}
|
|
);
|
|
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{a} <br/>{b} : {c}%",
|
|
},
|
|
legend: {
|
|
orient: "vertical",
|
|
left: "right",
|
|
top: "center",
|
|
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "Funnel",
|
|
type: "funnel",
|
|
sort: "ascending",
|
|
left: 10,
|
|
top: 10,
|
|
bottom: 10,
|
|
// gap: 2,
|
|
label: {
|
|
show: true,
|
|
position: "inside",
|
|
},
|
|
labelLine: {
|
|
length: 10,
|
|
lineStyle: {
|
|
width: 1,
|
|
type: "solid",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
borderColor: "#fff",
|
|
borderWidth: 1,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
fontSize: 20,
|
|
},
|
|
},
|
|
data: chartData,
|
|
},
|
|
],
|
|
};
|
|
option && myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
truncateName(name) {
|
|
if (name.length > 4) {
|
|
return name.substring(0, 4) + "..";
|
|
}
|
|
return name;
|
|
},
|
|
msProjectTypeFormat(key) {
|
|
return this.selectDictLabel(this.ms_projectTypeOptions, key);
|
|
},
|
|
zdProjectTypeFormat(key) {
|
|
return this.selectDictLabel(this.zd_projectTypeOptions, key);
|
|
},
|
|
zdWarningType(key) {
|
|
return this.selectDictLabel(this.zd_warnTypeOptions, key);
|
|
},
|
|
|
|
/**
|
|
* 初始化一个 openlayers 地图
|
|
*/
|
|
initMap() {
|
|
let that = this;
|
|
const projection = "EPSG:4326";
|
|
this.map = new Map({
|
|
target: "map",
|
|
view: new View({
|
|
center: that.viewCenter,
|
|
zoom: 10,
|
|
// maxZoom: 12,
|
|
minZoom: 5,
|
|
projection: projection,
|
|
multiWorld: true,
|
|
}),
|
|
});
|
|
var matrixIds = new Array(18);
|
|
var resolutions = [];
|
|
for (var z = 0; z < 18; ++z) {
|
|
var res = 360 / 512; //0.703125
|
|
resolutions[z] = res / Math.pow(2, z - 1);
|
|
matrixIds[z] = z;
|
|
}
|
|
|
|
// 加载第一层地图轮廓图层
|
|
var osm = new Tile({
|
|
source: new WMTS({
|
|
url: "http://t0.tianditu.gov.cn/img_c/wmts?tk=42a5dfa93ea7a9cbf423c4c1bb9ec16d",
|
|
service: "wmts",
|
|
version: "1.0.0",
|
|
matrixSet: "c",
|
|
layer: "img",
|
|
format: "Tile",
|
|
projection: "EPSG:4326",
|
|
tileGrid: new WMTSTileGrid({
|
|
extent: [-180, -90, 180, 90],
|
|
origin: [-180, 90],
|
|
resolutions: resolutions,
|
|
matrixIds: matrixIds,
|
|
}),
|
|
style: "default",
|
|
// wrapX: false
|
|
}),
|
|
});
|
|
this.map.addLayer(osm);
|
|
|
|
// let point = new Point([115.36502, 22.7787]);
|
|
// this.map.addLayer(point);
|
|
|
|
// 加载其他数据图层
|
|
// 所需展示的所有图层列表
|
|
// 不同类型的地图服务主要区分于type
|
|
const layerList = [
|
|
// {
|
|
// index: 0,
|
|
// code: 'YZT1610609202768',
|
|
// name: '广东2020年7_17级矢量图',
|
|
// url: 'http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke',
|
|
// type: 'YZT-WMTS'
|
|
// },
|
|
// {
|
|
// index: 1,
|
|
// code: "YZT1597746916315",
|
|
// name: "广东7_17级界线电子地图",
|
|
// url: "http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke",
|
|
// type: "YZT-WMTS",
|
|
// },
|
|
{
|
|
index: 2,
|
|
code: "YZT1610609681389",
|
|
name: "广东2020年7_17级矢量注记",
|
|
url: "http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke",
|
|
type: "YZT-WMTS",
|
|
},
|
|
{
|
|
index: 3,
|
|
code: "0",
|
|
text: "",
|
|
url: "http://19.25.37.25:8090/iserver/services/map-XingZhengQuHua/rest/maps/行政区划",
|
|
type: "rest-map",
|
|
},
|
|
// {
|
|
// index: 4,
|
|
// code: "0",
|
|
// text: "",
|
|
// url: "http://19.25.35.204:31190/iserver/services/map-GuangDongShengDaoLu/rest/maps/广东省道路",
|
|
// type: "rest-map",
|
|
// },
|
|
{
|
|
index: 5,
|
|
code: "0",
|
|
text: "",
|
|
url: "http://19.25.35.204:31190/iserver/services/map-ShengJiXingZhengQuHuaMian/rest/maps/省级行政区划面",
|
|
type: "rest-map",
|
|
},
|
|
// {
|
|
// index: 6,
|
|
// code: '0',
|
|
// text: '',
|
|
// url: 'http://19.25.35.204:31190/iserver/services/map-YiZhangTuShuiKu/rest/maps/水库',
|
|
// type: 'rest-map'
|
|
// },
|
|
// {
|
|
// index: 7,
|
|
// code: '0',
|
|
// text: '',
|
|
// url: 'http://19.25.35.204:31190/iserver/services/map-ShiJiXingZhengQuHuaMian/rest/maps/市级行政区划面',
|
|
// type: 'rest-map'
|
|
// },
|
|
// {
|
|
// index: 8,
|
|
// code: '0',
|
|
// text: '',
|
|
// url: 'http://19.25.35.204:31190/iserver/services/map-XianJiXingZhengQuHuaMian/rest/maps/县级行政区划面',
|
|
// type: 'rest-map'
|
|
// },
|
|
// {
|
|
// index: 9,
|
|
// code: '0',
|
|
// text: '',
|
|
// url: 'http://19.25.35.204:31190/iserver/services/map-ZhenJiXingZhengQuHuaMian/rest/maps/镇级行政区划面',
|
|
// type: 'rest-map'
|
|
// },
|
|
// {
|
|
// index: 10,
|
|
// code: '0',
|
|
// text: '',
|
|
// url: 'http://19.25.35.204:31190/iserver/services/map-CunJiXingZhengQuHuaMian/rest/maps/村级行政区划面',
|
|
// type: 'rest-map'
|
|
// }
|
|
{
|
|
index: 11,
|
|
code: "0",
|
|
text: "",
|
|
url: "http://19.25.35.204:31190/iserver/services/map-YiZhangTuShuiZha/rest/maps/水闸",
|
|
type: "rest-map",
|
|
},
|
|
{
|
|
index: 12,
|
|
code: "0",
|
|
text: "",
|
|
url: "http://19.25.35.204:31190/iserver/services/map-YiZhangTuDiFang/rest/maps/堤防",
|
|
type: "rest-map",
|
|
},
|
|
];
|
|
// 绘制图层列表
|
|
for (let i = 0; i < layerList.length; i++) {
|
|
loadIndex(layerList[i].type, i);
|
|
}
|
|
|
|
// 初始化绘制点、线图层
|
|
// 创建一个矢量数据源
|
|
this.pointVectorSource = new VectorSource({
|
|
wrapX: false,
|
|
});
|
|
// 创建一个矢量图层并将数据源与之关联
|
|
this.pointVectorLayer = new VectorLayer({
|
|
source: this.pointVectorSource,
|
|
style: new Style({
|
|
fill: new Fill({
|
|
color: "rgba(255, 255, 255, 0.2)", // 填充颜色
|
|
}),
|
|
stroke: new Stroke({
|
|
// color: "#409eff", // 边框颜色
|
|
width: 4, // 边框宽度
|
|
}),
|
|
image: new Circle({
|
|
radius: 8, // 圆点半径
|
|
fill: new Fill({
|
|
color: "blue", // 圆点填充颜色
|
|
}),
|
|
}),
|
|
}),
|
|
});
|
|
this.lineVectorLayer = new VectorLayer({
|
|
source: this.lineVectorSource,
|
|
style: new Style({
|
|
fill: new Fill({
|
|
color: "rgba(255, 255, 255, 0.2)", // 填充颜色
|
|
}),
|
|
stroke: new Stroke({
|
|
// color: "#409eff", // 边框颜色
|
|
width: 4, // 边框宽度
|
|
}),
|
|
image: new Circle({
|
|
radius: 8, // 圆点半径
|
|
fill: new Fill({
|
|
color: "blue", // 圆点填充颜色
|
|
}),
|
|
}),
|
|
}),
|
|
});
|
|
// this.map.addLayer(this.pointVectorLayer);
|
|
this.map.addLayer(this.lineVectorLayer);
|
|
|
|
// 监听事件
|
|
// 监听点图层的change事件来获取点坐标
|
|
|
|
// this.map.getViewport().addEventListener('click', () => {
|
|
// this.pointVectorSource.on('addfeature', (event) => {
|
|
// const coordinate = event.feature.getGeometry().getCoordinates();
|
|
// console.log(coordinate);
|
|
// });
|
|
// });
|
|
|
|
function loadIndex(type, index) {
|
|
var path = "";
|
|
if (type === "YZT-WMTS") {
|
|
path = "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities";
|
|
} else if (type === "rest-map") {
|
|
} else {
|
|
path = "VERSION=1.0.0&REQUEST=GetFeature&SERVICE=WFS";
|
|
}
|
|
let xhr = new XMLHttpRequest();
|
|
let sign = "";
|
|
xhr.open(
|
|
"GET",
|
|
layerList[index].url.replace(
|
|
/{{serviceCode}}/,
|
|
layerList[index].code
|
|
) +
|
|
sign +
|
|
path
|
|
);
|
|
xhr.onload = function () {
|
|
let data = xhr.response;
|
|
if (type === "YZT-WMTS") {
|
|
addYztWmtsLayer(data, index);
|
|
} else if (type === "YZT-YSFW") {
|
|
addYsfwLayer(data, index);
|
|
} else {
|
|
addRestMapLayer(layerList[index], index);
|
|
}
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
// 加载wmts服务
|
|
function addYztWmtsLayer(res, index) {
|
|
console.log(layerList[index]);
|
|
console.log("加载次数");
|
|
// console.log("输出WMTS服务数据", res);
|
|
var format = new WMTSCapabilities();
|
|
if (!res) {
|
|
return;
|
|
}
|
|
var result = format.read(res);
|
|
const item = result.Contents.Layer[0];
|
|
const layerParam = {
|
|
layerName: item.Abstract || item.Title,
|
|
styleName: item.Style[0].Identifier,
|
|
tilematrixset: item.TileMatrixSetLink[0].TileMatrixSet,
|
|
format: item.Format[0],
|
|
};
|
|
var projectionExtent = [-180, -90, 180, 90];
|
|
const size = getWidth(projectionExtent) / 256;
|
|
const resolutionsYzt = [];
|
|
const matrixIdsTzt = [];
|
|
for (var z = 2; z < 19; ++z) {
|
|
resolutionsYzt[z] = size / Math.pow(2, z);
|
|
matrixIdsTzt.push(z - 2);
|
|
}
|
|
const source = new WMTS({
|
|
url:
|
|
layerList[index].url.replace(
|
|
/{{serviceCode}}/,
|
|
layerList[index].code
|
|
) +
|
|
"?layer=" +
|
|
layerParam.layerName,
|
|
style: layerParam.styleName,
|
|
matrixSet: layerParam.tilematrixset,
|
|
format: layerParam.format,
|
|
wrapX: true,
|
|
tileGrid: new WMTSTileGrid({
|
|
origin: getTopLeft(projectionExtent),
|
|
resolutions: resolutionsYzt,
|
|
matrixIds: matrixIdsTzt,
|
|
}),
|
|
});
|
|
let lastIndex = index + 10 * (1 + index);
|
|
var layer = new Tile({
|
|
id: lastIndex,
|
|
source: source,
|
|
});
|
|
console.log(source.urls);
|
|
layer.setZIndex(lastIndex);
|
|
that.map.addLayer(layer);
|
|
}
|
|
// -------------------------------------------------------------------------------------
|
|
// 接入粤政图要素服务(wfs)
|
|
function addYsfwLayer(res, index) {
|
|
console.log("输出WFS服务数据", res);
|
|
var result = res;
|
|
var format = new GML2();
|
|
var features = format.readFeatures(result);
|
|
var style = null;
|
|
if (features[0].getGeometry() instanceof ol.geom.Polygon) {
|
|
style = new Style({
|
|
stroke: new Stroke({
|
|
color: "#868f98",
|
|
width: 1,
|
|
}),
|
|
fill: new Fill({
|
|
color: "#DEECFB",
|
|
}),
|
|
});
|
|
} else if (features[0].getGeometry() instanceof ol.geom.Point) {
|
|
features.forEach((each) => {
|
|
var info = each.values_;
|
|
var name = "";
|
|
for (let key in info) {
|
|
if (key.indexOf("名称") > -1) {
|
|
name = info[key];
|
|
break;
|
|
}
|
|
}
|
|
style = new Style({
|
|
image: new Circle({
|
|
fill: new Fill({
|
|
color: "#ff0721",
|
|
}),
|
|
radius: 5,
|
|
}),
|
|
text: new Text({
|
|
text: name,
|
|
offsetY: 30,
|
|
font: "12px Calibri,sans-serif",
|
|
fill: new Fill({
|
|
color: "#fff",
|
|
}),
|
|
stroke: new Stroke({
|
|
color: "#f00",
|
|
width: 3,
|
|
}),
|
|
}),
|
|
});
|
|
each.setStyle(style);
|
|
});
|
|
} else if (features[0].getGeometry() instanceof ol.geom.LineString) {
|
|
style = new Style({
|
|
stroke: new Stroke({
|
|
color: "#2899fb",
|
|
width: 4,
|
|
}),
|
|
});
|
|
}
|
|
var source = new VectorSource({
|
|
features: features,
|
|
});
|
|
var wfsObj = { source: source, style: style };
|
|
|
|
var vectorLayer = new VectorLayer({
|
|
id: layerList[index].code,
|
|
source: wfsObj.source,
|
|
style: wfsObj.style,
|
|
});
|
|
that.map.addLayer(vectorLayer);
|
|
}
|
|
|
|
// 接入rest-map服务
|
|
function addRestMapLayer(params, index) {
|
|
var restLayer = new Tile({
|
|
source: new TileSuperMapRest({
|
|
url: params.url,
|
|
prjCoordSys: { epsgCode: 4326 },
|
|
projection: "EPSG:4326",
|
|
}),
|
|
});
|
|
let lastIndex = index + 10 * (1 + index);
|
|
restLayer.setZIndex(lastIndex);
|
|
that.map.addLayer(restLayer);
|
|
}
|
|
|
|
// 缩放
|
|
this.map.on("moveend", function () {
|
|
that.zoom = that.map.getView().getZoom();
|
|
console.log("zomm", that.zoom);
|
|
});
|
|
// 鼠标移入元素样式
|
|
this.map.on("pointermove", (e) => {
|
|
let pixel = this.map.getEventPixel(e.originalEvent);
|
|
let feature = this.map.forEachFeatureAtPixel(pixel, (feature) => {
|
|
return feature;
|
|
});
|
|
|
|
if (feature != undefined) {
|
|
this.map.getTargetElement().style.cursor = "pointer";
|
|
} else {
|
|
this.map.getTargetElement().style.cursor = "auto";
|
|
}
|
|
});
|
|
|
|
// this.addGuangdongJson();
|
|
// this.ProjectCoordinatePoint();
|
|
// this.addPopup();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/css/largeScreen_index.scss";
|
|
@import "@/assets/css/largeScreen_common.scss";
|
|
.largeBox {
|
|
position: relative;
|
|
.btn {
|
|
position: absolute;
|
|
// top: 20px;
|
|
// left: 20px;
|
|
top: 72px;
|
|
left: 20px;
|
|
width: 200px;
|
|
background: #101f48;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
border: 1px solid #fff;
|
|
// transform: skew(40deg);
|
|
}
|
|
.large {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
}
|
|
|
|
.map-wrapper {
|
|
width: 100%;
|
|
height: 650px;
|
|
|
|
#content {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.ol-popup {
|
|
position: relative;
|
|
padding: 20px;
|
|
width: 400px;
|
|
height: auto;
|
|
background-color: rgb(255, 255, 255);
|
|
border-radius: 5px;
|
|
|
|
.popup-closer {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
|
|
&:hover {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|