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