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

统计信息

Browse Source
main
limingtao 11 months ago
parent a3545c0946
commit f1a8d8c718
1 changed files with 145 additions and 11 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. 156
      pages/investigation/task.vue

156
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,8 +195,35 @@
<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>
<view class="formBox form-step-3" v-if="active === 3">
<view class="point">
<view class="title">重点排查</view>
@ -419,6 +451,7 @@
},
onReady() {
this.getChartsData();
this.getChartsData2()
},
onLoad(e) {
this.boxHeight = uni.getSystemInfoSync().windowHeight;
@ -519,10 +552,10 @@
required: true,
errorMessage: '请选择道路类型',
},
]
},
},
describe: {
bigCategory: "",
@ -535,6 +568,44 @@
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",
@ -552,7 +623,8 @@
icon: "rect",
position: "top",
float: "right",
padding: 15,
padding: 10,
show: false,
},
xAxis: {
disableGrid: true,
@ -572,6 +644,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,
@ -1156,9 +1261,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: [],
@ -1166,7 +1270,7 @@
{
name: "大车",
legendShape: "line",
data: [],
data: [],
},
{
name: "小车",
@ -1177,6 +1281,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);
@ -1241,7 +1353,7 @@
);
}
},
bottomButtonTwo(){
bottomButtonTwo() {
// if(!this.formData.roadType){
// return this.$.toast("请输入道路类型");
// }
@ -1843,6 +1955,7 @@
align-items: center;
height: 110rpx;
font-size: 30rpx;
font-weight: 600;
.border {
background-color: #2663BF;
@ -1852,6 +1965,18 @@
}
}
.label-box2 {
height: 100rpx;
}
.label-box-small {
font-size: 28rpx;
margin-top: -25rpx;
font-weight: 500;
}
.border-bottom {
border-bottom: 1px #eee solid;
}
@ -1859,7 +1984,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