From f96e393e62b4c7496f7ace44b6aa5abb69ae58df Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 11 九月 2023 21:54:55 +0800
Subject: [PATCH] bug修改
---
src/views/intelligentPatrol/trendAnalysis/index.vue | 134 ++++++++++++++++++++++++++++++++++++++++----
1 files changed, 120 insertions(+), 14 deletions(-)
diff --git a/src/views/intelligentPatrol/trendAnalysis/index.vue b/src/views/intelligentPatrol/trendAnalysis/index.vue
index dc2095e..b827ad9 100644
--- a/src/views/intelligentPatrol/trendAnalysis/index.vue
+++ b/src/views/intelligentPatrol/trendAnalysis/index.vue
@@ -62,7 +62,10 @@
:visible.sync="echartsDialogVisible"
:before-close="handleClose"
>
- <div style="height: 500px; width: 500px" id="echarts"></div>
+ <div style="display: flex">
+ <div style="height: 500px; width: 500px" id="echarts"></div>
+ <div style="height: 500px; width: 500px" id="typeEcharts"></div>
+ </div>
</el-dialog>
</div>
</div>
@@ -72,7 +75,8 @@
import * as echarts from "echarts";
import basecase from "@/api/operate/basecase";
import { CATEGOTY } from "@/utils/helper";
-import MyMap from "@/components/map";
+// import MyMap from "@/components/map";
+import MyMap from "@/components/map/leafletMap.vue";
export default {
components: { MyMap },
@@ -94,6 +98,8 @@
return {
echartsDateList: [],
echartsDataList: null,
+ echartsTypeList: [],
+ echartsTypeDataList: null,
echartsDialogVisible: false,
search: {
type: null,
@@ -140,6 +146,95 @@
},
],
});
+
+ let typeEcharts = echarts.init(document.getElementById("typeEcharts"));
+
+ let option = {
+ series: this.echartsTypeDataList.map(function (data, idx) {
+ return {
+ type: "pie",
+ radius: [20, 60],
+ left: "center",
+ width: 400,
+ itemStyle: {
+ borderColor: "#fff",
+ borderWidth: 1,
+ },
+ label: {
+ alignTo: "edge",
+ formatter: "{name|{b}}\n{count|{c} 浠秨",
+ minMargin: 5,
+ edgeDistance: 10,
+ lineHeight: 15,
+ rich: {
+ time: {
+ fontSize: 10,
+ color: "#999",
+ },
+ },
+ },
+ labelLine: {
+ length: 5,
+ length2: 0,
+ maxSurfaceAngle: 80,
+ },
+ data: data,
+ };
+ }),
+ };
+ let data = [];
+ this.echartsTypeDataList.forEach((item) => {
+ data.push({
+ name: item.name,
+ value: item.count,
+ });
+ });
+
+ typeEcharts.setOption({
+ series: [
+ {
+ type: "pie",
+ radius: [20, 60],
+ left: "center",
+ width: 400,
+ itemStyle: {
+ borderColor: "#fff",
+ borderWidth: 1,
+ },
+ label: {
+ alignTo: "edge",
+ formatter: "{name|{b}}\n{value|{c} 浠秨",
+ minMargin: 5,
+ edgeDistance: 5,
+ lineHeight: 15,
+ rich: {
+ time: {
+ fontSize: 10,
+ color: "#999",
+ },
+ },
+ },
+ labelLine: {
+ length: 15,
+ length2: 0,
+ maxSurfaceAngle: 80,
+ },
+ data: data,
+ // labelLayout: function (params) {
+ // const isLeft = params.labelRect.x < typeEcharts.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.echartsTypeDataList,
+ },
+ ],
+ });
},
async searchList() {
const [startTime, endTime] = this.search.timeRange ?? [null, null];
@@ -164,21 +259,32 @@
x: data.longitude,
y: data.latitude,
};
- this.zoom = 19;
+ this.zoom = 18;
this.mark = { title: data.address };
+
+ const [startTime, endTime] = this.search.timeRange ?? [null, null];
basecase
.getPointTrendAnalysisData({
- longitude: data.longitude,
- latitude: data.latitude,
+ pointId: data.id,
+ startTime: startTime,
+ endTime: endTime,
})
.then((res) => {
// const countList = res.map(item => +item.count);
this.echartsDataList = [];
this.echartsDateList = [];
- res.forEach((item) => {
+ res.timeList.forEach((item) => {
this.echartsDataList.push(item.count);
this.echartsDateList.push(item.dateTime);
});
+
+ this.echartsTypeDataList = res.typeList;
+ // this.echartsTypeDataList = [];
+ // this.echartsTypeList = [];
+ // res.typeList.forEach((item) => {
+ // this.echartsTypeDataList.push(item.count);
+ // this.echartsTypeList.push(item.name);
+ // });
// this.renderEchart(countList);
})
.catch((err) => this.$message.error(err));
@@ -205,7 +311,7 @@
width: 30vw;
text-align: left;
height: 100%;
- border: 1px solid #09152f;
+ // border: 1px solid #09152f;
.trend-input-area {
display: flex;
@@ -232,7 +338,7 @@
.el-button {
flex: 1;
- border: 2px solid #09152f;
+ // border: 2px solid #09152f;
}
.el-button + .el-button {
@@ -256,7 +362,7 @@
.trend-main {
flex: 1;
- border: 1px solid #09152f;
+ // border: 1px solid #09152f;
display: flex;
margin-left: 20px;
.trend-main-echarts {
@@ -265,11 +371,11 @@
}
}
- .trend-footer {
- ::v-deep .el-range-input {
- background-color: #09152f;
- }
- }
+ // .trend-footer {
+ // ::v-deep .el-range-input {
+ // // background-color: #09152f;
+ // }
+ // }
}
.map {
height: 100%;
--
Gitblit v1.8.0