战立标
2 years ago
25 changed files with 2985 additions and 466 deletions
|
After Width: | Height: | Size: 674 B |
|
After Width: | Height: | Size: 468 B |
|
After Width: | Height: | Size: 491 B |
|
After Width: | Height: | Size: 463 B |
|
After Width: | Height: | Size: 487 B |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
@ -0,0 +1,40 @@ |
|||
.tree { |
|||
background: rgba(10, 35, 81, 0.66); |
|||
border: 1px solid #488CC5; |
|||
border-radius: 2px; |
|||
height: 600px; |
|||
overflow-y: auto; |
|||
|
|||
.el-tree { |
|||
background: none; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
/deep/ .el-tree-node__content { |
|||
height: 42px; |
|||
background: none; |
|||
border-bottom: 1px solid; |
|||
border-image: linear-gradient(to right, #000 0%, #4eafd5 50%, #000 100%); |
|||
border-image-slice: 1; |
|||
position: relative; |
|||
text-indent: 2em; |
|||
} |
|||
/deep/ .el-tree-node:focus>.el-tree-node__content, |
|||
/deep/ .el-tree-node__content:hover { |
|||
background: linear-gradient(90deg, #2aadff80 0%, #8fd4ff0f 50%) !important; |
|||
&:after { |
|||
content: ""; |
|||
background: #1487ff; |
|||
width: 5px; |
|||
height: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
color: #6FF3FF; |
|||
} |
|||
} |
|||
/deep/ .el-tree-node__expand-icon { |
|||
position: absolute; |
|||
right: 0; |
|||
} |
|||
@ -0,0 +1,84 @@ |
|||
<template> |
|||
<div class="title"> |
|||
<span v-for="(item, index) in list" |
|||
:key="item.value" |
|||
:class="value2 === item.value ? 'cur' : ''" |
|||
class="text" |
|||
@click="tabClick(index)" |
|||
> |
|||
<span class="txt">{{ item.label }}</span> |
|||
</span> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Tabs", |
|||
props: { |
|||
list: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
value: { |
|||
type: [String, Number], |
|||
default: "", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
value2: this.value, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.value2 = this.value; |
|||
}, |
|||
methods: { |
|||
tabClick(index) { |
|||
this.value2 = this.list[index].value; |
|||
this.$emit("changeVal", this.value2); |
|||
this.$emit("changeLabel", this.list[index].label); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.title { |
|||
// width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 40px; |
|||
padding: 8px 16px 8px 29px; |
|||
background: url(@/assets/images/shuju/overview/title-small-bg.png) no-repeat; |
|||
background-size: 100% 100%; |
|||
|
|||
.text { |
|||
font-size: 18px; |
|||
font-weight: 400; |
|||
// font-family: HYShuYuanHeiJ; |
|||
position: relative; |
|||
color: #fff; |
|||
line-height: 30px; |
|||
padding-left: 11px; |
|||
opacity: .4; |
|||
&.cur { |
|||
background: url("@/assets/images/overview/tab_cur.png") no-repeat; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.txt { |
|||
font-family: PingFang SC; |
|||
position: relative; |
|||
// -webkit-text-fill-color: transparent; |
|||
z-index: 2; |
|||
-webkit-background-clip: text; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.no-bg { |
|||
background: none; |
|||
} |
|||
</style> |
|||
|
|||
File diff suppressed because it is too large
@ -0,0 +1,407 @@ |
|||
<template> |
|||
<div class="m-pop" ref="pop" @mousewheel="handleWheel" v-show="!hidden"> |
|||
<div class="info"> |
|||
<div v-if="type === '1'"> |
|||
<div class="u-info-title"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/jm-logo.png" |
|||
alt |
|||
/> |
|||
<span>居民信息</span> |
|||
</div> |
|||
|
|||
<div @click="handleClickBtn('watch-resi')" class="more-btn"> |
|||
查看更多 > |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="field">姓名：</span> |
|||
<span>{{ info.user_name || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">所属网格：</span> |
|||
<span>{{ info.grid || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">所属小区：</span> |
|||
<span>{{ info.village || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="field">联系电话：</span> |
|||
<span>{{ info.telephone || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">性别：</span> |
|||
<span>{{ info.genderShow || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="field">证件号：</span> |
|||
<span>{{ info.idcard || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="field">工作单位：</span> |
|||
<span>{{ info.workunit || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">人户状况：</span> |
|||
<span>{{ info.household || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">人员类别：</span> |
|||
<span>{{ info.classtype || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="operate" v-if="false"> |
|||
<div |
|||
@click="handleClickBtn('create-demand')" |
|||
v-if="info.agencyId == $store.state.user.agencyId" |
|||
class="btn z-blue" |
|||
> |
|||
发布需求 |
|||
</div> |
|||
|
|||
<div |
|||
v-if=" |
|||
info.agencyId == $store.state.user.agencyId && |
|||
type === 'volunteer' |
|||
" |
|||
@click="handleClickBtn('create-service')" |
|||
class="btn z-yellow" |
|||
> |
|||
发起服务 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="type === '2'"> |
|||
<div class="u-info-title"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<span>小区信息</span> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="field">所属组织：</span> |
|||
<span>{{ info.community || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">所属网格：</span> |
|||
<span>{{ info.grid || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">小区名称：</span> |
|||
<span>{{ info.village_name || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">关联物业：</span> |
|||
<span>{{ info.property || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">实有楼栋：</span> |
|||
<span>{{ info.building || "--" }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="type === '3'"> |
|||
<div class="u-info-title"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<span>楼栋信息</span> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="field">所属小区：</span> |
|||
<span>{{ info.village_name || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">楼栋名称：</span> |
|||
<span>{{ info.village_name || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">楼栋类型：</span> |
|||
<span>{{ info.building_type || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">单元数：</span> |
|||
<span>{{ info.unit_count || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">层数：</span> |
|||
<span>{{ info.levels_count || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">总户数：</span> |
|||
<span>{{ info.households || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">人口数：</span> |
|||
<span>{{ info.resident_count || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">楼长姓名：</span> |
|||
<span>{{ info.hm_name || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">楼长电话：</span> |
|||
<span>{{ info.hm_phone || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">详细地址：</span> |
|||
<span>{{ info.location || "--" }}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="type === '4'"> |
|||
<div class="u-info-title"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<span>房屋信息</span> |
|||
</div> |
|||
|
|||
<div @click="handleClickBtn('watch-house')" class="more-btn"> |
|||
查看更多 > |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="field">房屋名称：</span> |
|||
<span>{{ info.title || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">房屋类型：</span> |
|||
<span>{{ info.house_type || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">房屋用途：</span> |
|||
<span>{{ info.house_usage || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">房屋状态：</span> |
|||
<span>{{ info.house_state || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">房主姓名：</span> |
|||
<span>{{ info.holder_name || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">联系方式：</span> |
|||
<span>{{ info.holder_phone || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">房主证件号：</span> |
|||
<span>{{ info.holder_idcard || "--" }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="field">备注：</span> |
|||
<span>{{ info.remark || "--" }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
name: "popup", |
|||
|
|||
props: { |
|||
item: { |
|||
type: Object, |
|||
default: () => ({}), |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
hidden: true, |
|||
type: "", |
|||
srcItem: {}, |
|||
info: {}, |
|||
list: [], |
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
watch: {}, |
|||
|
|||
mounted() {}, |
|||
|
|||
methods: { |
|||
handleWheel(e) { |
|||
if (this.$refs.pop.clientHeight >= 321) { |
|||
e.stopPropagation(); |
|||
} |
|||
}, |
|||
|
|||
handleClickBtn(type) { |
|||
this.$emit("operate", type, { |
|||
type: this.type, |
|||
id: this.srcItem.id, |
|||
...this.info, |
|||
}); |
|||
}, |
|||
|
|||
handleClickListItem(item) { |
|||
console.log("handleClickListItem", item); |
|||
this.$emit("clickListItem", item); |
|||
}, |
|||
|
|||
async show(item) { |
|||
console.log("-----------------show:", item); |
|||
const { type, latitude, longitude } = item; |
|||
if (!type) { |
|||
return false; |
|||
} |
|||
if (!latitude || !longitude) { |
|||
this.$message.warning("请先完善坐标位置"); |
|||
return false; |
|||
} |
|||
|
|||
this.type = item.type; |
|||
this.srcItem = item; |
|||
this.info = item; |
|||
this.hidden = false; |
|||
return true; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/c/config.scss"; |
|||
@import "@/assets/scss/c/function.scss"; |
|||
@import "@/assets/scss/modules/visual/c/common.scss"; |
|||
|
|||
.m-pop { |
|||
@include scrollBar2; |
|||
box-sizing: border-box; |
|||
padding: 10px 0; |
|||
width: 350px; |
|||
color: #fff; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
max-height: 500px; |
|||
overflow-y: auto; |
|||
|
|||
.info { |
|||
padding: 10px; |
|||
.u-info-title { |
|||
margin-bottom: 10px; |
|||
line-height: 20px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
|
|||
img { |
|||
position: relative; |
|||
top: 2px; |
|||
margin-right: 6px; |
|||
width: 16px; |
|||
vertical-align: top; |
|||
} |
|||
} |
|||
|
|||
.item-pics { |
|||
display: flex; |
|||
margin: 20px 0; |
|||
img { |
|||
display: block; |
|||
width: 32%; |
|||
height: 90px; |
|||
margin-right: 9px; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
} |
|||
.item { |
|||
@include toe; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(#ffffff, 0.85); |
|||
line-height: 28px; |
|||
.field { |
|||
display: inline-block; |
|||
margin-right: 5px; |
|||
min-width: 90px; |
|||
text-align: right; |
|||
color: rgba(#ffffff, 0.65); |
|||
} |
|||
} |
|||
|
|||
.list { |
|||
.item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 5px; |
|||
padding: 5px; |
|||
border-bottom: 1px dashed #124584; |
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
.item-cnt { |
|||
@include toe; |
|||
width: 90%; |
|||
} |
|||
.i-arrow { |
|||
margin-left: auto; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.operate { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.more-btn { |
|||
position: absolute; |
|||
right: 20px; |
|||
top: 28px; |
|||
width: 80px; |
|||
height: 24px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #1a95ff; |
|||
line-height: 20px; |
|||
font-size: 14px; |
|||
text-align: right; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.btn { |
|||
margin-top: 20px; |
|||
margin-right: 20px; |
|||
width: 110px; |
|||
line-height: 30px; |
|||
border: 1px solid #eee; |
|||
text-align: center; |
|||
font-size: 18px; |
|||
border-radius: 2px; |
|||
cursor: pointer; |
|||
&.z-blue { |
|||
background: #09a5ff; |
|||
border-color: #09a5ff; |
|||
} |
|||
&.z-yellow { |
|||
background: #fe6b53; |
|||
border-color: #fe6b53; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,166 @@ |
|||
<template> |
|||
<div class="charts"> |
|||
<el-select v-model="date" class="select" placeholder="请选择" popper-class="selectPopClass" @change="timeChange"> |
|||
<el-option v-for="item in dateList" :key="item.value" :label="item.label" :value="item.value"/> |
|||
</el-select> |
|||
<div id="DemandCharts"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import * as echarts from "echarts"; |
|||
|
|||
export default { |
|||
name: "DemandCharts", |
|||
props: { |
|||
data: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dateList: [{ |
|||
label: '上月', |
|||
value: 1 |
|||
}, { |
|||
label: '近三个月', |
|||
value: 2 |
|||
}, { |
|||
label: '近半年', |
|||
value: 3 |
|||
}, { |
|||
label: '近一年', |
|||
value: 4 |
|||
}], |
|||
date: 4 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initChart(); |
|||
}, |
|||
methods: { |
|||
timeChange() { |
|||
|
|||
}, |
|||
initChart() { |
|||
let div = document.getElementById('DemandCharts'); |
|||
this.myChart = echarts.init(div); |
|||
var getname = ['健康知识专业讲座', '未成年人兴趣培养', '老年人现代智能···', '老年群体的心理···', '配合社区安全巡···', '其他']; // 课程名 |
|||
var getNum = [8, 9, 16, 21, 26, 62]; |
|||
|
|||
var data = []; |
|||
for (var i = 0; i < getname.length; i++) { |
|||
data.push({name: getname[i], value: getNum[i]}) |
|||
} |
|||
const color = ['#16A7EB', '#5974FF', '#04C790', '#FFAA01', '#FF6701', '#EF3B00'] |
|||
|
|||
var option = { |
|||
color, |
|||
tooltip: { |
|||
trigger: "item" |
|||
}, |
|||
legend: { |
|||
type: "plain", |
|||
orient: "vertical", |
|||
right: 0, |
|||
top: "center", |
|||
align: "left", |
|||
itemGap: 10, |
|||
itemWidth: 8, |
|||
itemHeight: 8, |
|||
symbolKeepAspect: false, |
|||
selectedMode: false, |
|||
formatter: function (name) { |
|||
for (var i = 0; i < getname.length; i++) { |
|||
if (name == data[i].name) { |
|||
return '{name|' + name + '}{num|' + getNum[i] + '人}' |
|||
} |
|||
} |
|||
}, |
|||
textStyle: { |
|||
rich: { |
|||
name: { |
|||
fontSize: 12, |
|||
width: 96, |
|||
overflow: 'hidden', |
|||
textOverflow: 'ellipsis', |
|||
padding: [0, 29, 0, 5], |
|||
color: '#A3B9DA', |
|||
}, |
|||
num: { |
|||
fontSize: 12, |
|||
fontWeight: 500, |
|||
align: 'right', |
|||
color: '#FFFFFF', |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
series: [{ |
|||
name: '', |
|||
type: "pie", |
|||
radius: ["65%", "90%"], |
|||
center: ["20%", "50%"], |
|||
avoidLabelOverlap: false, |
|||
|
|||
label: { |
|||
show: true, |
|||
position: "center", |
|||
color: "rgba(13, 17, 29,0)", |
|||
formatter: `{primary|${3289}}\n{point|总数}`, |
|||
rich: { |
|||
primary: { |
|||
fontSize: 24, |
|||
color: '#7FCEFF', |
|||
align: 'center' |
|||
}, |
|||
point: { |
|||
fontSize: 12, |
|||
fontWeight: 400, |
|||
color: "#A3B9DA", |
|||
align: 'center' |
|||
} |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: data, |
|||
zlevel: 30 |
|||
}] |
|||
}; |
|||
this.myChart.setOption(option, true); |
|||
window.addEventListener("resize", () => this.myChart.resize()); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/deep/ .el-input__inner { |
|||
width: 90px !important; |
|||
height: 24px !important; |
|||
color: #a0cdff; |
|||
border: 1px solid #125aaa !important; |
|||
border-radius: 12px !important; |
|||
background: #021c49 !important; |
|||
} |
|||
|
|||
/deep/ .el-input__icon { |
|||
line-height: 24px !important; |
|||
color: #a0cdff; |
|||
} |
|||
|
|||
.charts { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
#DemandCharts { |
|||
flex: calc(100% - 100px); |
|||
width: calc(100% - 100px); |
|||
height: 150px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,128 @@ |
|||
<template> |
|||
<div class="t-list f-hflex"> |
|||
<swiper ref="orderSwiper" :options="swiperOptions"> |
|||
<swiper-slide |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
class="swiper-slide" |
|||
> |
|||
<div |
|||
class="item f-flex bto-border" |
|||
@click="handleView(item)" |
|||
> |
|||
<span>{{ item.createdTime }}</span> |
|||
<span>{{ item.eventContent }}</span> |
|||
</div> |
|||
</swiper-slide> |
|||
</swiper> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {swiper, swiperSlide} from "vue-awesome-swiper"; |
|||
|
|||
export default { |
|||
name: "DemandSwiperList", |
|||
components: { |
|||
swiper, |
|||
swiperSlide, |
|||
}, |
|||
props: { |
|||
list: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
swiperOptions: { |
|||
direction: "vertical", // 滑动方向，可以是 'horizontal' 或 'vertical' |
|||
slidesPerView: 3, |
|||
autoplay: { |
|||
delay: 1000, // 自动切换的间隔时间，单位是毫秒 |
|||
disableOnInteraction: true, // 用户操作后是否禁止自动切换 |
|||
}, |
|||
loop: true, // 是否启用循环模式 |
|||
speed: 2000, // 滑动速度，单位是毫秒 |
|||
}, |
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
handleView(item) { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
.f-hflex { |
|||
width: 83px; |
|||
} |
|||
|
|||
.f-flex { |
|||
margin-top: 4px; |
|||
} |
|||
|
|||
.f-darkGray { |
|||
margin-top: 15px; |
|||
} |
|||
|
|||
.no-data { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
opacity: .6; |
|||
color: #fff; |
|||
} |
|||
|
|||
.t-list { |
|||
position: relative; |
|||
flex: 1; |
|||
width: 100%; |
|||
|
|||
.swiper-container { |
|||
width: 100%; |
|||
height: 120px; |
|||
} |
|||
|
|||
.item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
height: 40px; |
|||
cursor: pointer; |
|||
color: #fff; |
|||
|
|||
span { |
|||
//text-align: center; |
|||
} |
|||
|
|||
> :nth-child(1) { |
|||
width: 50px; |
|||
color: #A3B9DA |
|||
} |
|||
|
|||
> :nth-child(2) { |
|||
overflow: hidden; |
|||
flex: 1; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.swiper-slide { |
|||
padding: 0 4px; |
|||
//height: 36px!important; |
|||
.bto-border { |
|||
border-bottom: 1px solid; |
|||
border-image: linear-gradient(to right, #1c3e69 0%, #4eafd5 50%, #1c3e69 100%); |
|||
border-image-slice: 1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,81 @@ |
|||
<template> |
|||
<div class="container"> |
|||
<div class="tab" style="margin-top: 0;"> |
|||
<Tabs :list="tab" :value="tabval" @changeVal="(val) => tabval = val"/> |
|||
</div> |
|||
<DemandSwiperList v-if="tabval === 1" :list="list"/> |
|||
<DemandCharts v-else/> |
|||
<div class="tab"> |
|||
<Tabs :list="tab2" :value="tabval2" @changeVal="(val) => tabval2 = val"/> |
|||
</div> |
|||
<DemandSwiperList v-if="tabval2 === 1" :list="list"/> |
|||
<DemandCharts v-else/> |
|||
<ServiceDetails ref="ServiceDetails"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Tabs from "@/views/dataBoard/cpts/Tabs.vue"; |
|||
import DemandSwiperList from "@/views/dataBoard/overview/components/DemandSwiperList.vue"; |
|||
import DemandCharts from "@/views/dataBoard/overview/components/DemandCharts.vue"; |
|||
import ServiceDetails from "@/views/dataBoard/overview/components/ServiceDetails.vue"; |
|||
|
|||
export default { |
|||
name: "RequirementList", |
|||
components: { |
|||
Tabs, |
|||
DemandCharts, |
|||
DemandSwiperList, |
|||
ServiceDetails |
|||
}, |
|||
data() { |
|||
return { |
|||
tabval: 1, |
|||
tabval2: 1, |
|||
list: [{ |
|||
createdTime: '今天', |
|||
eventContent: '失能老人基础护理服务', |
|||
}, { |
|||
createdTime: '昨天', |
|||
eventContent: '失能老人基础护理服务', |
|||
}, { |
|||
createdTime: '5-20', |
|||
eventContent: '失能老人基础护理服务', |
|||
}, { |
|||
createdTime: '5-19', |
|||
eventContent: '失能老人基础护理服务', |
|||
}], |
|||
tab: [{ |
|||
label: '个性需求未完成清单', |
|||
value: 1 |
|||
}, { |
|||
label: '个性需求分类统计', |
|||
value: 2 |
|||
}], |
|||
tab2: [{ |
|||
label: '共性需求未承接清单', |
|||
value: 1 |
|||
}, { |
|||
label: '共性需求分类统计', |
|||
value: 2 |
|||
}] |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$refs.ServiceDetails.open(); |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
padding: 19px 16px; |
|||
} |
|||
|
|||
.tab { |
|||
margin: 10px 0; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,107 @@ |
|||
<template> |
|||
<el-dialog |
|||
:before-close="handleClose" |
|||
:modal="true" |
|||
:modal-append-to-body="false" |
|||
:visible.sync="dialogVisible" |
|||
class="dissatisfied-detail" |
|||
title="" |
|||
width="1118px" |
|||
> |
|||
<div class="content"> |
|||
<div class="main-title main-title2"> |
|||
<Title text="资源调度"/> |
|||
</div> |
|||
|
|||
<div class="contents"> |
|||
<el-row> |
|||
<el-col :span="6"> |
|||
<div class="tree"> |
|||
<el-tree |
|||
:data="data" |
|||
:default-expand-all="true" |
|||
:props="defaultProps" |
|||
icon-class="el-icon-arrow-right" |
|||
@node-click="handleNodeClick" |
|||
/> |
|||
</div> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
|
|||
export default { |
|||
name: "ResourceScheduling", |
|||
components: {Title}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
data: [{ |
|||
label: '一级 1', |
|||
children: [{ |
|||
label: '二级 1-1', |
|||
children: [{ |
|||
label: '三级 1-1-1' |
|||
}] |
|||
}] |
|||
}, { |
|||
label: '一级 2', |
|||
children: [{ |
|||
label: '二级 2-1', |
|||
children: [{ |
|||
label: '三级 2-1-1' |
|||
}] |
|||
}, { |
|||
label: '二级 2-2', |
|||
children: [{ |
|||
label: '三级 2-2-1' |
|||
}] |
|||
}] |
|||
}, { |
|||
label: '一级 3', |
|||
children: [{ |
|||
label: '二级 3-1', |
|||
children: [{ |
|||
label: '三级 3-1-1' |
|||
}] |
|||
}, { |
|||
label: '二级 3-2', |
|||
children: [{ |
|||
label: '三级 3-2-1' |
|||
}] |
|||
}] |
|||
}], |
|||
defaultProps: { |
|||
children: 'children', |
|||
label: 'label' |
|||
} |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleClose(done) { |
|||
this.dialogVisible = false; |
|||
}, |
|||
open(id) { |
|||
this.dialogVisible = true; |
|||
this.getDetail(id); |
|||
}, |
|||
getDetail(id) { |
|||
|
|||
}, |
|||
handleNodeClick() { |
|||
|
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/dialog.scss"; |
|||
@import "@/assets/scss/dataBoard/tree.scss"; |
|||
</style> |
|||
@ -0,0 +1,209 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
<el-dialog |
|||
:before-close="handleClose" |
|||
:modal="true" |
|||
:modal-append-to-body="false" |
|||
:visible.sync="dialogVisible" |
|||
class="dissatisfied-detail" |
|||
title="" |
|||
width="1118px" |
|||
> |
|||
<div class="content"> |
|||
<div class="main-title main-title2"> |
|||
<Title text="个性服务详情"/> |
|||
</div> |
|||
|
|||
<div class="contents"> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">所属网格：</div> |
|||
<div class="value">xxxx社区第一网格</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">需求类型：</div> |
|||
<div class="value">公益事业类-社会困难群体生活帮扶</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">上报类型：</div> |
|||
<div class="value">社区帮办</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">上报人：</div> |
|||
<div class="value">张俊男</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">上报人联系电话：</div> |
|||
<div class="value">182****8989</div> |
|||
<el-button class="tel-btn" icon="el-icon-phone" plain round size="small" type="primary">拨打</el-button> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">上报时间：</div> |
|||
<div class="value">2023-08-22 15:20:20</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="hr"></div> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">需求人：</div> |
|||
<div class="value">李兵</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">需求人联系电话：</div> |
|||
<div class="value">133****5656</div> |
|||
<el-button class="tel-btn" icon="el-icon-phone" plain round size="small" type="primary">拨打</el-button> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">服务时间：</div> |
|||
<div class="value">2023-08-23 14:20:30</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="items"> |
|||
<div class="label">需求内容：</div> |
|||
<div class="value"> |
|||
一直失业在家，没有生活来源，生活比较困难。希望社区能给与帮助，找一份稳定的工作维持生活开销。 |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="hr"></div> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">服务方：</div> |
|||
<div class="value">志愿者-王佳俊</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">服务方联系电话：</div> |
|||
<div class="value">156****5656</div> |
|||
<el-button class="tel-btn" icon="el-icon-phone" plain round size="small" type="primary">拨打</el-button> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<div class="btn-group"> |
|||
<el-button class="green" plain round type="success" @click="handleDispatch">资源调度</el-button> |
|||
<el-button class="orange" plain round type="warning">催办督办</el-button> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
<ResourceScheduling ref="ResourceScheduling"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import ResourceScheduling from "@/views/dataBoard/overview/components/ResourceScheduling.vue"; |
|||
|
|||
export default { |
|||
name: "ServiceDetails", |
|||
components: {Title, ResourceScheduling}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleClose(done) { |
|||
this.dialogVisible = false; |
|||
}, |
|||
open(id) { |
|||
this.dialogVisible = true; |
|||
this.getDetail(id); |
|||
}, |
|||
getDetail(id) { |
|||
|
|||
}, |
|||
handleDispatch() { |
|||
this.$refs.ResourceScheduling.open() |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/dialog.scss"; |
|||
|
|||
.contents { |
|||
padding: 40px 50px; |
|||
|
|||
.items { |
|||
font-size: 14px; |
|||
position: relative; |
|||
display: flex; |
|||
margin-bottom: 17px; |
|||
|
|||
.label { |
|||
color: #9CB4D3; |
|||
} |
|||
|
|||
.value { |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hr { |
|||
height: 1px; |
|||
margin: 25px 0; |
|||
opacity: .4; |
|||
border-bottom: 1px #0E79D6 dashed; |
|||
} |
|||
|
|||
.tel-btn { |
|||
margin-top: -10px; |
|||
margin-left: 10px; |
|||
color: #06ebff; |
|||
border: 1px solid #06ebff; |
|||
border-radius: 18px; |
|||
background: rgba(#06ebff, 0.3); |
|||
} |
|||
|
|||
.btn-group { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-top: 20px; |
|||
|
|||
.green { |
|||
color: #00CD96; |
|||
border: 1px solid #00CD96; |
|||
border-radius: 18px; |
|||
background: rgba(39, 189, 127, 0.3); |
|||
} |
|||
|
|||
.el-button { |
|||
margin: 0 20px; |
|||
} |
|||
|
|||
.orange { |
|||
color: #FD8904; |
|||
border: 1px solid #FD8904; |
|||
border-radius: 18px; |
|||
background: rgba(253, 137, 4, 0.3); |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue