Merge branch 'main' of http://42.192.7.176:3000/lizhichao/hitap-chat

pages/investigation/task.vue

@@ -136,10 +136,15 @@
 			</view>
 			<u-picker :show="showPicker" :columns="columnsPicker" keyName="label" @cancel="pickerCancel"
 				@confirm="pickerConfirm"></u-picker>
-			<view class="echarts" v-if="active === 2">
+
+			<!-- 	<view class="echarts" v-if="active === 2">
 				<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
-			</view>
+			</view> -->
 			<view class="formBox form-step-2" v-if="active === 2">
+				<view class="label-box label-box2">
+					<view class="border"></view> 交通流量
+				</view>
+				<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
 				<uni-forms :modelValue="formData" border label-width="120">
 					<uni-forms-item label="最大流量">
 						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
@@ -190,17 +195,52 @@
 							<view class="Height100">辆</view>
 						</view>
 					</uni-forms-item>
+
 				</uni-forms>
 			</view>
+			<view class="formBox form-step-2" v-if="active === 2">
+				<view class="label-box label-box2">
+					<view class="border"></view> 违法情况
+				</view>
+				<view class="label-box label-box2 label-box-small">
+					违法数量
+				</view>
+				<qiun-data-charts type="area" :opts="opts2" :chartData="chartData2" v-if="chartData2.series.length>0" />
+				<view v-else class="nodata">暂无数据</view>
+				<view class="label-box label-box2 label-box-small">
+					违法占比
+				</view>
+				<qiun-data-charts type="rose" :opts="opts3" :chartData="chartData3" v-if="chartData3.series.length>0" />
+				<view v-else class="nodata">暂无数据</view>
+			</view>
+			<view class="formBox form-step-2" v-if="active === 2">
+				<view class="label-box label-box2">
+					<view class="border"></view> 事故情况
+				</view>
+				<view class="label-box label-box2 label-box-small">
+					事故数量
+				</view>
+				<qiun-data-charts type="area" :opts="opts4" :chartData="chartData4" v-if="chartData4.series.length>0" />
+				<view v-else class="nodata">暂无数据</view>
+				<view class="label-box label-box2 label-box-small">
+					事故分布
+				</view>
+				<map id="maps" style="width: 100%; height: 400rpx" :latitude="latitude" :longitude="longitude"
+					:markers="covers">
+				</map>
+
+			</view>
 			<view class="formBox form-step-3" v-if="active === 3">
 				<view class="point">
 					<view class="title">重点排查</view>
 					<view class='row' style="display: flex; flex-wrap: wrap; justify-content: space-between;">
-						<view style="width: 300rpx;" v-for="item in investigationSelectList" :key="item" @longpress="onLongPressZD(item)">
+						<view style="width: 300rpx;" v-for="item in investigationSelectList" :key="item"
+							@longpress="onLongPressZD(item)">
 
 							<view class="item">{{ item.name }}
-								<image style="width: 30px;height: 30px;margin-left: 10px;" src="../../static/task/3879.png" 
-								v-show="nidZD == item.nid" @click.stop="delZD"></image>	
+								<image style="width: 30px;height: 30px;margin-left: 10px;"
+									src="../../static/task/3879.png" v-show="nidZD == item.nid" @click.stop="delZD">
+								</image>
 							</view>
 						</view>
 						<view style="width: 300rpx;" v-show="type!='view'">
@@ -411,7 +451,7 @@
 	import BottomButtonTwo from "../../components/bottom-button/index.vue";
 	import NoData from "../../components/no-data.vue";
 	import TopTitle from "../../components/top-title.vue";
-
+  import { wgs84LL2gcjLL2 } from "../map/c.js";
 	import InvestigationItem from "./components/investigation-item.vue";
 	import InvestigationItem2 from "./components/investigation-item2.vue";
 	import ProblemTreeItem from "./components/problem-tree-item.vue";
@@ -430,6 +470,7 @@
 		},
 		onReady() {
 			this.getChartsData();
+			this.getChartsData2()
 		},
 		onLoad(e) {
 			this.boxHeight = uni.getSystemInfoSync().windowHeight;
@@ -443,6 +484,8 @@
 				this.getBaseData(e.id);
 				this.getStreetCommunity()
 			}
+			 this.getLocationInfo();
+			 this.getSystemInfo()
 		},
 		data() {
 			return {
@@ -512,6 +555,7 @@
 						type: "item",
 						i: 3
 					},
+
 				],
 				formData: {
 					roadType: "",
@@ -543,9 +587,50 @@
 					hdPic: "",
 					hdInfo: "",
 				},
+				latitude: 39.909,
+				longitude: 116.39742,
+				covers: [],
 				chartData: {},
 				//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
 				opts: {
+					color: [
+						"#1890FF",
+						"#FAC858",
+						"#91CB74",
+						"#EE6666",
+						"#73C0DE",
+						"#3CA272",
+						"#FC8452",
+						"#9A60B4",
+						"#ea7ccc",
+					],
+					padding: [0, 15, 15, 15],
+					enableScroll: false,
+					legend: {
+						icon: "rect",
+						position: "top",
+						float: "right",
+						padding: 10,
+					},
+					xAxis: {
+						disableGrid: true,
+					},
+					yAxis: {
+						gridType: "dash",
+						dashLength: 2,
+					},
+					extra: {
+						area: {
+							type: "straight",
+							opacity: 0.2,
+							addLine: true,
+							width: 2,
+							gradient: true,
+							activeType: "hollow",
+						},
+					},
+				},
+				opts2: {
 					color: [
 						"#1890FF",
 						"#FAC858",
@@ -563,7 +648,8 @@
 						icon: "rect",
 						position: "top",
 						float: "right",
-						padding: 15,
+						padding: 10,
+						show: false,
 					},
 					xAxis: {
 						disableGrid: true,
@@ -583,6 +669,39 @@
 						},
 					},
 				},
+				chartData2: {},
+				opts3: {
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+						"#ea7ccc"
+					],
+					padding: [5, 5, 5, 5],
+					enableScroll: false,
+					legend: {
+						show: true,
+						position: "right",
+						lineHeight: 25
+					},
+					extra: {
+						rose: {
+							type: "radius",
+							minRadius: 50,
+							activeOpacity: 0.5,
+							activeRadius: 10,
+							offsetAngle: 0,
+							labelWidth: 15,
+							border: true,
+							borderWidth: 2,
+							borderColor: "#FFFFFF",
+							linearType: "custom"
+						}
+					}
+				},
+				chartData3: {
+					series: []
+				},
+				chartData4: {
+					series: []
+				},
 				showProblem: false,
 				showProblemTreeSelect: false,
 				problemTreeSelect: 0,
@@ -654,14 +773,16 @@
 		},
 		computed: {
 			reversedTroubleshootingData() {
-				const array = Array.from({ length: this.investigationSelectList.length }, (_, i) => []); 
+				const array = Array.from({
+					length: this.investigationSelectList.length
+				}, (_, i) => []);
 				let nidname = this.investigationSelectList.length > 0 ? this.investigationSelectList[0].name : ''
 				let nx = 0
 				this.troubleshootingData.map(r => {
 					this.investigationSelectList.map(m => {
-						if(r.nid == m.nid) {
+						if (r.nid == m.nid) {
 							r.nname = m.name
-							if(r.nname == nidname){
+							if (r.nname == nidname) {
 								array[nx].push(r)
 							} else {
 								nidname = r.nname
@@ -675,6 +796,70 @@
 			}
 		},
 		methods: {
+			// 确认授权后，获取用户位置
+			getLocationInfo() {
+			  uni.getLocation({
+			    type: "wgs84",
+			    success: (res) => {
+			      console.log(res);
+			      const coord = wgs84LL2gcjLL2(res.longitude, res.latitude);
+			      this.longitude = coord[0]; //118.787575;
+			      this.latitude = coord[1]; //32.05024;
+			      //   this.longitude = 120.38771;
+			      //   this.latitude = 36.110146;
+			      
+			    },
+			  });
+			},
+			getSystemInfo() {
+			  // #ifdef APP-PLUS
+			  // 在 App 端执行的代码
+			  // 获取系统信息
+			  uni.getSystemInfo({
+			    success: function (res) {
+			      // 判断运行环境是否为 App
+			      // if (res.platform === 'android' || res.platform === 'ios') {
+			      // 在 App 端执行获取定位信息的逻辑
+			      uni.getLocation({
+			        success: function (locationRes) {
+			          console.log('已获取定位信息', locationRes);
+			          // 在这里处理定位成功的逻辑
+			        },
+			        fail: function (error) {
+			          console.error('获取定位信息失败', error);
+			          if (error.errMsg.indexOf('auth deny') !== -1) {
+			            // 用户拒绝授权定位权限，可以引导用户打开权限设置页面
+			            uni.showModal({
+			              title: '提示',
+			              content: '请授权使用您的定位服务',
+			              confirmText: '去授权',
+			              success: function (modalRes) {
+			                if (modalRes.confirm) {
+			                  uni.openSetting({
+			                    success: (settingRes) => {
+			                      console.log('openSetting success', settingRes.authSetting);
+			                      // 在这里可以处理打开设置页面后的逻辑
+								  this.getLocationInfo();
+			                    },
+			                    fail: (settingError) => {
+			                      console.log('openSetting fail', settingError);
+			                      // 打开设置页面失败的处理逻辑
+			                    }
+			                  });
+			                }
+			              }
+			            });
+			          }
+			        }
+			      });
+			      // } else {
+			      //     console.log('当前不在 App 环境中');
+			      //     // 在非 App 环境中的处理逻辑
+			      // }
+			    }
+			  });
+			  // #endif
+			},
 			showInvestigationTag(v) {
 				console.log(v)
 				this.showInvestigation2 = true;
@@ -1193,9 +1378,8 @@
 			getChartsData() {
 				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
 				let res = {
-					categories: ["01", "02", "03", "04", "05", "06","07", "08", "09", "10", "11", "12"],
-					series: [
-						{
+					categories: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
+					series: [{
 							name: "总量",
 							legendShape: "line",
 							data: [],
@@ -1214,6 +1398,14 @@
 				};
 				this.chartData = JSON.parse(JSON.stringify(res));
 			},
+			getChartsData2() {
+				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+				let res = {
+					categories: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
+					series: [],
+				};
+				this.chartData2 = JSON.parse(JSON.stringify(res));
+			},
 			// 删除图片
 			deletePic(event, key) {
 				this[key].splice(event.index, 1);
@@ -1278,22 +1470,22 @@
 					);
 				}
 			},
-			bottomButtonTwo(){
-				// if(!this.formData.roadType){
-				// 	return this.$.toast("请输入道路类型");
-				// }
-				// if(!this.formData.roadWidth){
-				// 	return this.$.toast("请输入道路宽度");
-				// }
-				// if(!this.formData.laneCount){
-				// 	return this.$.toast("请输入车道数");
-				// }
-				// if(!this.formData.designSpeed){
-				// 	return this.$.toast("请输入设计时速");
-				// }
-				// if(!this.formData.limitSpeed){
-				// 	return this.$.toast("请输入限速");
-				// }
+			bottomButtonTwo() {
+				if (!this.formData.roadType) {
+					return this.$.toast("请输入道路类型");
+				}
+				if (!this.formData.roadWidth) {
+					return this.$.toast("请输入道路宽度");
+				}
+				if (!this.formData.laneCount) {
+					return this.$.toast("请输入车道数");
+				}
+				if (!this.formData.designSpeed) {
+					return this.$.toast("请输入设计时速");
+				}
+				if (!this.formData.limitSpeed) {
+					return this.$.toast("请输入限速");
+				}
 				this.isEdit = false;
 				this.active = 2;
 			},
@@ -1559,14 +1751,14 @@
 					this.nidZD = item.nid
 				}
 			},
-			delZD(){
+			delZD() {
 				this.troubleshootingData = this.troubleshootingData.filter(r => {
-					if(r.nid != this.nidZD){
+					if (r.nid != this.nidZD) {
 						return r
 					}
 				})
 				this.investigationSelectList = this.investigationSelectList.filter(r => {
-					if(r.nid != this.nidZD){
+					if (r.nid != this.nidZD) {
 						return r
 					}
 				})
@@ -1587,9 +1779,9 @@
 					this.nidYH = item.nid
 				}
 			},
-			delYH(){
+			delYH() {
 				this.hiddenDangerList = this.hiddenDangerList.filter(r => {
-					if(r.nid != this.nidYH){
+					if (r.nid != this.nidYH) {
 						return r
 					}
 				})
@@ -1930,6 +2122,7 @@
 		align-items: center;
 		height: 110rpx;
 		font-size: 30rpx;
+		font-weight: 600;
 
 		.border {
 			background-color: #2663BF;
@@ -1939,6 +2132,18 @@
 		}
 	}
 
+	.label-box2 {
+		height: 100rpx;
+
+
+	}
+
+	.label-box-small {
+		font-size: 28rpx;
+		margin-top: -25rpx;
+		font-weight: 500;
+	}
+
 	.border-bottom {
 		border-bottom: 1px #eee solid;
 	}
@@ -1946,7 +2151,16 @@
 	.border-top {
 		border-top: 1px #eee solid;
 	}
+
 	// .uni-forms-item__labe{
 	// 	width: ;
 	// }
+	.nodata {
+		width: 100%;
+		text-align: center;
+		height: 300rpx;
+		line-height: 300rpx;
+		font-size: 28rpx;
+		color: #ccc;
+	}
 </style>