lizhichao
/
hitap-chat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
main
zhangqun 11 months ago
parent 8a541c22f3 804e8edae1
commit 75333991e9
1 changed files with 258 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 302
      pages/investigation/task.vue

302
pages/investigation/task.vue
Unescape View File

@ -67,7 +67,7 @@
</view>
<uni-forms-item label="道路类型" name="roadType" required label-width="80">
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
<input v-if="isEdit" type="text" class="BorderNone Height100 formInput"
<input v-if="isEdit" type="text" class="BorderNone Height100 formInput"
v-model="formData.roadType" placeholder="请输入道路类型" @focus="focus" />
<view class="Height100" v-else>{{ formData.roadType }}</view>
<view class="Height100"></view>
@ -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'">
@ -212,15 +252,15 @@
</view>
</view>
<u-checkbox-group v-model="checked" iconPlacement="right" placement="column">
<view v-for="(itemData,indexData) in reversedTroubleshootingData" :key="indexData">
{{ indexData + 1 }}.
{{ itemData.length > 0 ? itemData[0].nname : '' }}
<u-checkbox v-for="(item,index) in itemData" :key="index" :label="item.itemname"
activeColor="#2663BF" :name="item.id" @click="showInvestigationTag2(item)"
style="padding: 8px 12px;"></u-checkbox>
activeColor="#2663BF" :name="item.id" @click="showInvestigationTag2(item)"
style="padding: 8px 12px;"></u-checkbox>
</view>
</u-checkbox-group>
<u-popup :show="showInvestigation" @close="showInvestigation = false">
<InvestigationItem :type="type" @select="select2"></InvestigationItem>
@ -297,8 +337,8 @@
<view style="width: 80%;line-height: 30px;">
{{ item.hdTermName||item.dangerProblem }}
</view>
<image style="width: 30px;height: 30px;" src="../../static/task/3879.png"
v-show="nidYH == item.nid" @click.stop="delYH"></image>
<image style="width: 30px;height: 30px;" src="../../static/task/3879.png"
v-show="nidYH == item.nid" @click.stop="delYH"></image>
<view v-show="!(nidYH == item.nid)">
<view class="check" @click="onHiddenDangerList(item,index)">
<image style="width: 10px; height: 16px"
@ -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: "",
@ -530,10 +574,10 @@
required: true,
errorMessage: '请选择道路类型',
},
]
},
},
describe: {
bigCategory: "",
@ -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: [],
@ -1203,7 +1387,7 @@
{
name: "大车",
legendShape: "line",
data: [],
data: [],
},
{
name: "小车",
@ -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>
Write Preview
Loading…
Cancel
Save