lihenian
6 years ago
6 changed files with 264 additions and 21 deletions
@ -0,0 +1,220 @@ |
|||||
|
<template> |
||||
|
<div class="project-handle"> |
||||
|
|
||||
|
<div class="project-detail"> |
||||
|
<el-form label-position="right" label-width="120px"> |
||||
|
<el-form-item label="议题内容："> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="议题图片："> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="上报时间："> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="上报人："> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="电话："> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="所属类别："> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="项目态度:"> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="项目评论："> |
||||
|
<el-button type="text">查看评论</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div class="container"> |
||||
|
<div class="location">上报位置: 山东省青岛市市北区南宁路138号</div> |
||||
|
<div id="map"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="project-progress"> |
||||
|
<el-timeline> |
||||
|
<el-timeline-item |
||||
|
v-for="(activity, index) in activities" |
||||
|
:key="index" |
||||
|
:icon="activity.icon" |
||||
|
:type="activity.type" |
||||
|
:color="activity.color" |
||||
|
:size="activity.size"> |
||||
|
<div v-html="activity.content"></div> |
||||
|
</el-timeline-item> |
||||
|
</el-timeline> |
||||
|
</div> |
||||
|
|
||||
|
<div class="handle-operation"> |
||||
|
<el-form label-position="right" label-width="120px"> |
||||
|
<el-form-item label="处理:"> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="吹哨部门:"> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="回复居民意见"> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="项目处理意见"> |
||||
|
|
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import BMap from 'BMap' |
||||
|
import 'element-ui/lib/theme-chalk/timeline.css' |
||||
|
import 'element-ui/lib/theme-chalk/timeline-item.css' |
||||
|
export default { |
||||
|
name: 'projectHandle', |
||||
|
data () { |
||||
|
return { |
||||
|
map: '', |
||||
|
activities: [{ |
||||
|
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
||||
|
color: '#0980ff' |
||||
|
}, |
||||
|
{ |
||||
|
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
||||
|
color: '#FF4C52' |
||||
|
}, |
||||
|
{ |
||||
|
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
||||
|
color: '#FF4C52' |
||||
|
}, |
||||
|
{ |
||||
|
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
||||
|
color: '#FF4C52' |
||||
|
}, |
||||
|
{ |
||||
|
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
||||
|
color: '#FF4C52' |
||||
|
}, |
||||
|
{ |
||||
|
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
||||
|
color: '#FF4C52' |
||||
|
}, |
||||
|
{ |
||||
|
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
||||
|
color: '#FF4C52' |
||||
|
}, |
||||
|
{ |
||||
|
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
||||
|
color: '#FF4C52' |
||||
|
}, |
||||
|
{ |
||||
|
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
||||
|
color: '#FF4C52' |
||||
|
}, |
||||
|
{ |
||||
|
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
||||
|
color: '#FF4C52' |
||||
|
}, |
||||
|
{ |
||||
|
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
||||
|
color: '#FF4C52' |
||||
|
}, |
||||
|
{ |
||||
|
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>' |
||||
|
}] |
||||
|
} |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.initBmap() |
||||
|
}, |
||||
|
methods: { |
||||
|
initBmap () { |
||||
|
this.map = new BMap.Map('map') |
||||
|
const point = new BMap.Point(120.38821849395045, 36.120219258412966) |
||||
|
var marker = new BMap.Marker(point) |
||||
|
this.map.addOverlay(marker) |
||||
|
this.map.centerAndZoom(point, 13) |
||||
|
this.map.enableScrollWheelZoom(true) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.project-handle { |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
box-sizing: border-box; |
||||
|
padding: 10px; |
||||
|
.project-detail { |
||||
|
width: 79%; |
||||
|
height: 49%; |
||||
|
border: 2px solid #ccc; |
||||
|
box-sizing: border-box; |
||||
|
padding: 10px; |
||||
|
float:left; |
||||
|
margin-bottom: 1%; |
||||
|
.el-form { |
||||
|
width: 58%; |
||||
|
height: 100%; |
||||
|
float:left; |
||||
|
overflow-y:auto; |
||||
|
&::-webkit-scrollbar { |
||||
|
width: 5px; |
||||
|
height: 1px; |
||||
|
} |
||||
|
&::-webkit-scrollbar-thumb { |
||||
|
border-radius: 5px; |
||||
|
background: #fff; |
||||
|
} |
||||
|
&::-webkit-scrollbar-track { |
||||
|
border-radius: 10px; |
||||
|
background: #fff; |
||||
|
} |
||||
|
} |
||||
|
.container { |
||||
|
width: 40%; |
||||
|
height: 100%; |
||||
|
float: right; |
||||
|
.location { |
||||
|
height: 30px; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
#map { |
||||
|
width: 100%; |
||||
|
height: calc(100% - 30px); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.project-progress { |
||||
|
width: 20%; |
||||
|
height: 100%; |
||||
|
float: right; |
||||
|
border: 2px solid #ccc; |
||||
|
box-sizing: border-box; |
||||
|
margin-left: 1%; |
||||
|
padding-top: 20px; |
||||
|
overflow-y:auto; |
||||
|
&::-webkit-scrollbar { |
||||
|
width: 5px; |
||||
|
height: 1px; |
||||
|
} |
||||
|
&::-webkit-scrollbar-thumb { |
||||
|
border-radius: 5px; |
||||
|
background: #aaa; |
||||
|
} |
||||
|
&::-webkit-scrollbar-track { |
||||
|
border-radius: 10px; |
||||
|
background: #ccc; |
||||
|
} |
||||
|
} |
||||
|
.handle-operation { |
||||
|
width: 79%; |
||||
|
height: 49%; |
||||
|
box-sizing: border-box; |
||||
|
border: 2px solid #ccc; |
||||
|
float:left; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue