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.
736 lines
25 KiB
736 lines
25 KiB
<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: [], |
|
investigationList: [], |
|
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() { |
|
// console.log(this.investigationSelect) |
|
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>
|
|
|