lizhichao
/
hitap-chat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
47 Commits
1 Branch
0 Tags
37 MiB
Tag: Branch: Tree: 4f55cff1a7
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '4f55cff1a7'
${ noResults }
hitap-chat/pages/investigation/task-zancun.vue

737 lines
25 KiB
Raw Normal View History Unescape

1
11 months ago
<template>
<view id="page">
<view class="Width100 Box BorderBox">
<view class="Content BorderBox Width100">
<top-title :is-show-left="true" :title="'排查'" :rightWidth='40' class="custom_bg">
<template slot="right">
<image :src="$.imgSrc + '/mine/search.png'" @click="$.open('/pages/mine/setting')" mode="aspectFit" class="InlineBlock imgIcon" style="width: 32rpx"></image>
</template>
</top-title>
</view>
<view class="stepBox">
<view class="step-item-box step PositionR" v-for="(item, index) in tablist" :key="index">
<view class="step-item" v-if="item.type === 'item'">
<view class="stepItem">
<view :class="{'stepCircleActive': item.i === active, 'stepCircle': true}">
{{ item.i }}
</view>
<view class="stepText PositionA" :style="{'color': item.i === active ? '#000000' : '#bcc3cd'}">
{{ item.title }}
</view>
</view>
</view>
<view v-else class="circles">
<view :class="{'circleActive': index < active, 'circle': index >= active}" v-for="i in 16" :key="i" />
</view>
</view>
</view>
<view class="formBox" v-if="active === 1">
<uni-forms :modelValue="formData" border>
<uni-forms-item label="道路类型">
<input v-if="isEdit" type="text" class="BorderNone Height100" v-model="formData.roadType" placeholder="请输入道路类型" />
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.roadType }}</text>
</uni-forms-item>
<uni-forms-item label="道路宽度">
<input v-if="isEdit" type="number" class="BorderNone Height100" v-model="formData.roadWidth" placeholder="请输入道路宽度" />
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.roadWidth }}米</text>
</uni-forms-item>
<uni-forms-item label="车辆数">
<input v-if="isEdit" type="number" class="BorderNone Height100" v-model="formData.laneCount" placeholder="请输入车辆数" />
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.laneCount }}车道</text>
</uni-forms-item>
<uni-forms-item label="路面结构">
<input v-if="isEdit" type="text" class="BorderNone Height100" v-model="formData.roadStructure" placeholder="请输入路面结构" />
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.roadStructure }}</text>
</uni-forms-item>
<uni-forms-item label="路侧防护">
<input v-if="isEdit" type="text" class="BorderNone Height100" v-model="formData.sideProtec" placeholder="请输入路侧防护" />
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.sideProtec }}</text>
</uni-forms-item>
<uni-forms-item label="中央隔离">
<input v-if="isEdit" type="text" class="BorderNone Height100" v-model="formData.centerSeparate" placeholder="请输入中央隔离" />
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.centerSeparate }}</text>
</uni-forms-item>
<uni-forms-item label="设计时速">
<input v-if="isEdit" type="number" class="BorderNone Height100" v-model="formData.designSpeed" placeholder="请输入设计时速" />
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.designSpeed }}Km/h</text>
</uni-forms-item>
<uni-forms-item label="限速">
<input v-if="isEdit" type="number" class="BorderNone Height100" v-model="formData.limitSpeed" placeholder="请输入限速" />
<text class="Height100 Flex Flex_C_S-Center Flex_end" v-else>{{ formData.limitSpeed }}Km/h</text>
</uni-forms-item>
</uni-forms>
<view class="photo">
<image src="/static/base.jpg" mode="widthFix"></image>
</view>
</view>
<view class="echarts" v-if="active === 2">
<qiun-data-charts
type="area"
:opts="opts"
:chartData="chartData"
/>
</view>
<view class="formBox form-step-2" v-if="active === 2">
<uni-forms :modelValue="formData" border label-width="120">
<uni-forms-item label="最大流量">
<input v-if="isEditStep2" type="number" class="BorderNone Height100" v-model="formData.maxTraffic" placeholder="请输入最大流量" />
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.maxTraffic }}辆</text>
</uni-forms-item>
<uni-forms-item label="高峰流量">
<input v-if="isEditStep2" type="number" class="BorderNone Height100" v-model="formData.peakTraffic" placeholder="请输入高峰流量" />
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.peakTraffic }}辆</text>
</uni-forms-item>
<uni-forms-item label="高峰时段">
<input v-if="isEditStep2" type="number" class="BorderNone Height100" v-model="formData.peakHours" placeholder="请输入高峰时段" />
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.peakHours }}</text>
</uni-forms-item>
<uni-forms-item label="平峰流量">
<input v-if="isEditStep2" type="number" class="BorderNone Height100" v-model="formData.normalTraffic" placeholder="请输入平峰流量" />
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.normalTraffic }}辆</text>
</uni-forms-item>
<uni-forms-item label="大车占比">
<input v-if="isEditStep2" type="number" class="BorderNone Height100" v-model="formData.largeVehicleRate" placeholder="请输入大车占比" />
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.largeVehicleRate }}%</text>
</uni-forms-item>
<uni-forms-item label="非机动车流量">
<input v-if="isEditStep2" type="number" class="BorderNone Height100" v-model="formData.nonvehicleTraffic" placeholder="请输入非机动车流量" />
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.nonvehicleTraffic }}辆</text>
</uni-forms-item>
</uni-forms>
</view>
<view class="formBox form-step-3" v-if="active === 3">
<view class="point">
<view class="title">重点排查</view>
<u-row :gutter="10" justify="flex-start" style="flex-wrap: wrap">
<u-col :span="6" v-for="item in investigationSelectList" :key="item">
<view class="item">{{ item }}</view>
</u-col>
<u-col :span="6">
<view class="item add" @click="showInvestigation = true">
<uni-icons type="plusempty" size="24" style="margin-right: 10rpx; color:#2663BF;"/>
新增排查
</view>
</u-col>
</u-row>
</view>
<u-popup :show="showInvestigation" @close="showInvestigation = false">
<view class="custom-pop-head">
<view class="left" @click="showInvestigation = false">取消</view>
<view class="title">重点排查</view>
<view class="right" @click="investigationHandle(1)">确认</view>
</view>
<investigation-item @select="handleSelectInvestigation" />
<view class="blank" />
</u-popup>
<u-popup :show="showInvestigationDetail" @close="showInvestigationDetail = false">
<view class="custom-pop-head">
<view class="left" @click="showInvestigationDetail = false">取消</view>
<view class="title">{{ investigationDetailTitle }}</view>
<view class="right" @click="investigationDetailHandle">确认</view>
</view>
<view class="investigation-item"
v-for="(item, index) in investigationDetailList"
:key="index"
style="width: 96%; padding: 0"
>
<view class="detail-item" v-if="item.type === 'number'">
<uni-forms-item label="平峰流量" label-width="100px" style="display: flex;align-items: center">
<u-input
placeholder="请输入"
border="none"
v-model="formData.roadMet"
inputAlign="right"
type="number"
>
<u-text
text="km/h"
slot="suffix"
margin="0 3px 0 0"
type="tips"
></u-text>
</u-input>
</uni-forms-item>
</view>
<view class="detail-item" v-else-if="item.type === 'text'">
<uni-forms-item label="平峰流量" label-width="100px" style="display: flex;align-items: center">
<u-input
placeholder="请输入"
border="none"
v-model="formData.roadMet"
inputAlign="right"
/>
</uni-forms-item>
</view>
<view class="detail-item" v-else-if="item.type === 'check'">
<uni-forms-item label="平峰流量" label-width="100px" style="display: flex;align-items: center">
<u-checkbox
v-model="formData.roadMet"
:customStyle="{justifyContent: 'space-between'}"
:name="'sdfs'"
/>
</uni-forms-item>
</view>
<view class="detail-item" v-else-if="item.type === 'upload'">
<uni-forms-item label="平峰流量" label-position="top" label-width="100px" style="display: flex;align-items: center" />
<u-upload
:fileList="fileList1"
@afterRead="afterRead"
@delete="deletePic"
name="1"
multiple
:maxCount="10"
></u-upload>
</view>
</view>
<view class="blank" />
</u-popup>
</view>
<view class="formBox form-step-3" v-if="active === 3">
<view class="point">
<view class="title">存在隐患</view>
<u-row :gutter="0" justify="flex-start" style="flex-wrap: wrap">
<u-col :span="12" v-for="item in hiddenDangerList" :key="item">
<view class="problem-item">
<u-row>
<u-col :span="10.5">
{{ item.hdTerm }}
</u-col>
<u-col :span="1.5">
<view class="check">
<uni-icons type="right" size="24" style="color:#2663BF;"/>
</view>
</u-col>
</u-row>
<view class="text">{{ item.hdTerm }}</view>
<view class="text">{{ item.hdDesc }}</view>
</view>
</u-col>
<u-col :span="12">
<view class="problem-item add" @click="showProblem = true">
<uni-icons type="plusempty" size="24" style="margin-right: 10rpx; color:#2663BF;"/>
新增隐患
</view>
</u-col>
</u-row>
</view>
<u-popup :show="showProblem" @close="showProblem = false">
<view class="custom-pop-head">
<view class="left" @click="showProblem = false">取消</view>
<view class="title">存在隐患</view>
<view class="right" @click="investigationHandle(2)">确认</view>
</view>
<problem-box @change="problemChange" />
<view class="blank" />
</u-popup>
<u-popup :show="showProblemTreeSelect" @close="showProblemTreeSelect = false">
<view class="custom-pop-head">
<view class="left" @click="showProblemTreeSelect = false">取消</view>
<view class="title">选择隐患</view>
<view class="right" @click="showProblemTreeSelectHandle">确认</view>
</view>
<problem-tree-item />
<view class="blank" />
</u-popup>
</view>
<view class="blank" />
</view>
<bottom-button-two v-if="active === 1" @cancel="isEdit = !isEdit" :cancelText="'更改'" @confirm="isEdit=false;active = 2" />
<bottom-button v-else-if="active === 2" :secondText="'更改'" @second="isEditStep2 = !isEditStep2" @first="active = 1" @last="active = 3"/>
<bottom-button v-else-if="active === 3" @first="active = 2"/>
</view>
</template>
<script>
import BottomButton from "../../components/bottom-button/three.vue";
import BottomButtonTwo from "../../components/bottom-button/index.vue";
import NoData from "../../components/no-data.vue";
import TopTitle from "../../components/top-title.vue";
import InvestigationItem from "./components/investigation-item.vue";
import ProblemTreeItem from "./components/problem-tree-item.vue";
import ProblemBox from "./components/problem-box.vue";
export default {
components: {
TopTitle, NoData,
BottomButton,
BottomButtonTwo,
InvestigationItem,
ProblemTreeItem,
ProblemBox
},
onReady() {
this.getChartsData()
},
onLoad(e) {
if (e.id) {
this.getBaseData(e.id)
}
},
data() {
return {
$: this.$,
fileList1: [],
showInvestigation: false,
investigationSelectList: [],
investigationSelectIDList: [],
排查隐患
11 months ago
investigationList: [],
1
11 months ago
investigationSelect: 1,
showInvestigationDetail: false,
investigationDetailList: [
{ type: 'check', value: '' },
{ type: 'text', value: '' },
{ type: 'number', value: '' },
{ type: 'upload', value: '' },
],
investigationDetailTitle: 'title',
isEdit: false,
isEditStep2: false,
active: 3,
tablist: [
{ title: '基本信息', type: 'item', i: 1 },
{ title: '基本信息', type: 'point' },
{ title: '统计信息', type: 'item', i: 2 },
{ title: '统计信息', type: 'point' },
{ title: '隐患排查', type: 'item', i: 3 },
],
formData: {
roadType: '',
roadWidth: 0,
laneCount: 0,
roadStructure: '',
sideProtec: '',
centerSeparate: '',
designSpeed: 0,
limitSpeed: 0,
},
chartData: {},
//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
opts: {
color: ["#1890FF","#FAC858","#91CB74","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,15,15,15],
enableScroll: false,
legend: {
icon: 'rect',
position: 'top',
float: 'right',
padding: 15
},
xAxis: {
disableGrid: true
},
yAxis: {
gridType: "dash",
dashLength: 2
},
extra: {
area: {
type: "straight",
opacity: 0.2,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow"
}
}
},
showProblem: false,
showProblemTreeSelect: true,
problemTreeSelect: 0,
problemTreeSelectList: [
{name: 'ashfjshfjsd1'},
{name: 'ashfjshfjsd2'},
{name: 'ashfjshfjs3d'},
{name: 'ashfjshfjsd4'},
{name: 'ashfjshfjsd5'},
{name: 'ashfjshfjsd6'},
{name: 'ashfjshfjsd8'},
{name: 'ashfjshfjsd7'},
],
problemTreeSelectConfirmList: [],
hiddenDangerList: []
};
},
methods: {
problemChange(form){
console.log(form)
},
handleSelectInvestigation(index, item) {
console.log(index, item);
},
getBaseData(businessId){
this.$request.globalRequest('/hiddenDanger/highDanger/getSectionInfo', { nuserid: this.$.getData('token'), businessId }, 'GET').then(res => {
if (res.code === 200) {
this.formData = { ...this.formData, ...res.result }
}
})
this.$request.globalRequest('/hiddenDanger/highDanger/getSectionTraffic', { nuserid: this.$.getData('token'), businessId }, 'GET').then(res => {
if (res.code === 200) {
// todo 无数据结构
this.formData = { ...this.formData, ...res.result }
}
})
this.$request.globalRequest('/hiddenDanger/highDanger/getImportDangerDisplay', { nuserid: this.$.getData('token'), businessId }, 'GET').then(res => {
if (res.code === 200) {
// todo 无数据结构
this.formData = { ...this.formData, ...res.result }
}
})
this.$request.globalRequest('/hiddenDanger/highDanger/getImportDangers', { nuserid: this.$.getData('token'), businessId }, 'GET').then(res => {
if (res.code === 200) {
this.investigationList = res.result
}
})
this.$request.globalRequest('/hiddenDanger/highDanger/getUserHiddenDangerList', { nuserid: this.$.getData('token'), businessId }, 'GET').then(res => {
if (res.code === 200) {
this.hiddenDangerList = res.result
}
})
},
handleSelectProblem(item, index) {
this.problemTreeSelectConfirmList.push(item)
},
showProblemTreeSelectHandle() {
},
investigationHandle() {
排查隐患
11 months ago
// console.log(this.investigationSelect)
1
11 months ago
if(!this.investigationSelectIDList.includes(this.investigationList[this.investigationSelect].nid)){
this.investigationSelectList.push(this.investigationList[this.investigationSelect].name)
this.investigationSelectIDList.push(this.investigationList[this.investigationSelect].nid)
this.showInvestigation = false
}else {
this.$.toast('已添加');
}
},
investigationDetailHandle() {
this.showInvestigationDetail = true
},
getChartsData() {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
categories: ["2018","2019","2020","2021","2022","2023"],
series: [
{
name: "总量",
legendShape: 'line',
data: [35,8,25,37,4,20]
},
{
name: "大车",
legendShape: 'line',
data: [70,40,65,100,44,68]
},
{
name: "小车",
legendShape: 'line',
data: [100,80,95,150,112,132]
}
]
};
this.chartData = JSON.parse(JSON.stringify(res));
},
// 删除图片
deletePic(event, key) {
this[key].splice(event.index, 1)
},
//获取随机id
uuid(len, binary) {
len = !len ? 36 : len;
binary = !binary ? 16 : binary;
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * binary | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(binary);
}).substring(0, len)
},
// 新增图片
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: this.$.baseUrl + '/hiddenDanger/ftp/uploadFileToFtp', // 仅为示例，非真实的接口地址
filePath: url,
name: 'file',
success: (res) => {
resolve(res.data)
}
});
})
},
async afterRead(event, key) {
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
const id = this.uuid()
this[key].push({
id,
...event.file,
status: 'uploading',
message: '上传中'
})
const result = await this.uploadFilePromise(this[key][0].url)
const resultInfo = JSON.parse(result)
const index = this[key].findIndex(v => v.id === id)
if (resultInfo.code == 200) {
this[key].splice(index, 1, Object.assign(this[key][0], {
status: 'success',
message: '',
result: resultInfo,
url: resultInfo.result
}))
} else {
this.$.toast('上传失败')
this[key].splice(index, 1, Object.assign(this[key][0], {
status: 'error',
message: '失败',
}))
}
},
}
}
</script>
<style lang="scss">
#page {
background: #F6F8FA;
}
.Box {
padding-top:var(--status-bar-height);
.Content {
padding-bottom: 88rpx;
}
}
.stepBox {
width: 100%;
box-sizing: border-box;
padding: 40rpx 40rpx 100rpx 40rpx;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #ffffff;
box-shadow: 0 2px 8px #cccccc;
.step {
display: flex;
justify-content: space-around;
align-items: center;
height: 100rpx;
.stepItem {
display: flex;
flex-direction: column;
align-items: center;
zoom: 1.2;
}
.circles {
display: flex;
// justify-content: space-between;
padding: 22px 0;
.circle {
width: 4rpx;
height: 4rpx;
border-radius: 50%;
background-color: #e9edf5;
margin: 0 1px;
}
.circleActive {
width: 4rpx;
height: 4rpx;
border-radius: 50%;
background-color: #ccc;
margin: 0 1px;
}
}
.stepCircle {
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 50%;
background-color: #e9edf5;
color: #a0abbd;
text-align: center;
margin-bottom: 10rpx;
}
.stepCircleActive {
zoom: 1.5;
width: 50rpx;
height: 50rpx;
line-height: 50rpx;
border-radius: 50%;
background-color: #295cbc;
color: #ffffff;
text-align: center;
margin-bottom: 4rpx;
border: 5px solid #c6d8fc;
}
.stepText {
font-size: 14px;
color: #bcc3cd;
width: 120rpx;
text-align: center;
bottom: -60rpx;
}
}
}
.blank {
width: 100%;
height: 100rpx;
}
.formBox {
margin:30rpx 20rpx;
border: 1px solid #E6E6E6;
background: #FFFFFF;
padding:0 20rpx 20rpx;
box-sizing: border-box;
/deep/ .uni-forms-item--border .uni-forms-item__content {
justify-content: flex-end;
text-align: right;
}
.photo {
width: 100%;
image {
width: 100%;
}
}
}
.echarts {
background: #FFFFFF;
width: calc(100% - 40rpx);
margin: 20rpx;
box-sizing: border-box;
border: 1px solid #E6E6E6;
}
.point {
width: 100%;
padding: 20rpx;
box-sizing: border-box;
.title {
font-size: 20px;
position: relative;
margin-bottom: 20rpx;
}
.title::after {
content: ' ';
position: absolute;
left: -20rpx;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 80%;
vertical-align: middle;
background: #2663BF;
z-index: 90;
}
.item {
background: #F0F3F7;
padding: 20rpx;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8rpx;
margin-bottom: 20rpx;
height: 100rpx;
box-sizing: border-box;
overflow: hidden;
&.add {
background: #DFEBF8;
color: #2663BF;
}
}
.problem-item {
background: #F0F3F7;
padding: 20rpx;
border-radius: 8rpx;
margin-bottom: 20rpx;
.check {
background: #DCE4F2;
border-radius: 20rpx;
width: 60rpx;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
}
&.add {
background: #DFEBF8;
color: #2663BF;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.custom-pop-head {
width: 100%;
padding: 20rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #E6E6E6;
margin-bottom: 20rpx;
.left {
color: #666666;
}
.title {
font-size: 16px;
}
.right {
color: #2663BF;
}
}
.investigation-item {
margin:0 auto 20rpx;
width: 90%;
border-radius: 8rpx;
padding: 20rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
&.active {
background: #DFEBF8;
}
}
.detail-item {
width: 100%;
background: #F0F3F7;
padding: 20rpx 30rpx;
border-radius: 8rpx;
box-sizing: border-box;
/deep/ .uni-forms-item__content {
justify-content: flex-end;
text-align: right;
display: flex;
}
/deep/ .uni-forms-item {
margin-bottom: 0;
}
/deep/ .uni-forms-item__label {
font-size: 16px;
}
}
.problem-box {
width: 100%;
padding: 20rpx;
box-sizing: border-box;
.detail-item {
margin-bottom: 20rpx;
}
}
.breadcrumb {
padding: 0 20rpx;
overflow-x: auto;
}
</style>