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.
625 lines
15 KiB
625 lines
15 KiB
<template>
|
|
<div class="warning-box">
|
|
<cpt-card class="card-wr">
|
|
<div class="card-title">
|
|
<img class="title-icon"
|
|
src="../../../../assets/img/shuju/title-tip.png" />
|
|
<div class="title-label">
|
|
党员风采
|
|
<!-- <el-cascader v-model="selectAgency"
|
|
:options="propTree"
|
|
:props="{ checkStrictly: true }"
|
|
:show-all-levels="false"
|
|
clearable
|
|
@change="handleCascader">
|
|
</el-cascader> -->
|
|
|
|
</div>
|
|
<!-- <div class="second-select">
|
|
<el-select v-model="serviceMatter"
|
|
placeholder="请选择"
|
|
@change="handleSelectChange"
|
|
@clear="handleSelectChange">
|
|
<el-option v-for="item in unitList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="second-select">
|
|
<el-date-picker v-model="timeRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
prefix-icon="el-icon-caret-bottom"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
:clearable="false"
|
|
:default-time="['00:00:00', '23:59:59']">
|
|
</el-date-picker>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div class="elegant-list">
|
|
<div v-for="(item, index) in tableData" :key="item.id" class="elegant-item" @click="handleLook(item)">
|
|
<div class="item-img">
|
|
<img v-if="item.imageList.length > 0" :src="item.imageList[0]" />
|
|
<img v-else src="../../../../assets/img/shuju/elegant.png" />
|
|
</div>
|
|
<div class="item-user">{{item.name}}（{{ item.gridName}}）</div>
|
|
<div class="item-cate">{{ item.categoryName }}</div>
|
|
<div class="item-desc">{{ item.mainDeed }}</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="pagination">
|
|
<el-pagination
|
|
:current-page="pageNo"
|
|
:page-size="pageSize"
|
|
background
|
|
layout="prev, pager, next"
|
|
@size-change="pageSizeChangeHandleNew"
|
|
@current-change="pageCurrentChangeHandleNew"
|
|
:total="total"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</cpt-card>
|
|
<elegant-info v-show="showedMoreInfo"
|
|
:info="detailInfo"
|
|
@close="showedMoreInfo = false" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { requestPost } from "@/js/dai/request";
|
|
import cptCard from "@/views/modules/visual/cpts/card";
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
import elegantInfo from './elegantInfo.vue'
|
|
|
|
export default {
|
|
name: "warning-box",
|
|
components: {
|
|
cptCard,
|
|
elegantInfo
|
|
},
|
|
data () {
|
|
return {
|
|
|
|
showedMoreInfo: false,
|
|
tableLoading: false,
|
|
tableData: [
|
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
|
|
],
|
|
detailId: '',
|
|
agencyId: '',
|
|
value2: '',
|
|
timeRange: '',
|
|
visibleLoading: true,
|
|
serviceMatter: 'all',
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
activeIndex: 0,
|
|
activeLevel: "1",
|
|
selectAgency: '',
|
|
unitList: [],
|
|
propTree: [],
|
|
cateInfo: [],
|
|
//地图相关数据
|
|
isfirstInit: true,//记录是否是首次加载地图
|
|
agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
|
|
|
|
detailInfo: {}
|
|
};
|
|
},
|
|
async mounted () {
|
|
const { user } = this.$store.state
|
|
this.agencyId = user.agencyId
|
|
console.log('agencyId-------', this.agencyId)
|
|
this.initTime()
|
|
await nextTick(100);
|
|
await this.getAgencyList()
|
|
this.getList(this.agencyId)
|
|
|
|
await this.getWorkUserInfo()
|
|
},
|
|
watch: {
|
|
timeRange (val) {
|
|
console.log('val-www', val)
|
|
this.getList(this.agencyId);
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
//具体人员列表
|
|
async getList (agencyId) {
|
|
this.visibleLoading = true
|
|
|
|
const url = "/resi/partymember/icpartymemberstyle/showlist"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
|
|
let params = {
|
|
agencyId,
|
|
pageSize: this.pageSize,
|
|
pageNo: this.pageNo
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.total = data.total
|
|
this.tableData = data.list.map((item, index) => {
|
|
return {
|
|
...item,
|
|
index: index + 1
|
|
}
|
|
})
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
this.visibleLoading = false
|
|
},
|
|
async getAgencyList () {
|
|
// const url = "/gov/org/customeragency/staffinagencylist";
|
|
// const url = '/gov/org/customeragency/agencygridtree'
|
|
const url = '/gov/org/customeragency/staffinagencylist'
|
|
// let params = {
|
|
// agencyId: this.$store.state.user.agencyId,
|
|
// };
|
|
const { data, code, msg } = await requestPost(url);
|
|
if (code === 0) {
|
|
console.log('data-org----o', data)
|
|
let { agencyList, subAgencyList } = data
|
|
this.selectAgency = [`${agencyList.agencyId}-${agencyList.level}`]
|
|
let arr = []
|
|
agencyList.subAgencyList = subAgencyList
|
|
arr.push(agencyList)
|
|
this.propTree = arr && this.getTreeData(arr)
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
getTreeData (data) {
|
|
if (!Array.isArray(data)) return []
|
|
let arr = data.map(item => {
|
|
let _item = {}
|
|
if (item.subAgencyList) {
|
|
if (item.subAgencyList.length === 0) {
|
|
_item = {
|
|
label: item.agencyName,
|
|
value: item.agencyId + '-' + item.level,
|
|
level: item.level,
|
|
children: undefined
|
|
}
|
|
} else _item = {
|
|
label: item.agencyName,
|
|
value: item.agencyId + '-' + item.level,
|
|
level: item.level,
|
|
children: this.getTreeData(item.subAgencyList)
|
|
}
|
|
} else {
|
|
_item = {
|
|
label: item.agencyName,
|
|
value: item.agencyId + '-' + item.level,
|
|
level: item.level,
|
|
}
|
|
}
|
|
return _item
|
|
})
|
|
return arr
|
|
},
|
|
|
|
|
|
async getDetail (id) {
|
|
|
|
const url = "/heart/icpartyactivity/detail"
|
|
let params = {
|
|
id: id
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.detailInfo = data
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
handleCascader (val) {
|
|
console.log('val-vvv', val)
|
|
if (val.length > 0) {
|
|
const _arr = val[val.length - 1].split('-')
|
|
const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
|
|
this.agencyId = _arr[0]
|
|
this.getList(_arr[0])
|
|
}
|
|
|
|
},
|
|
initTime () {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
console.log('time-rtt', this.timeFormat(start), this.timeFormat(end))
|
|
this.timeRange = [this.timeFormat(start), this.timeFormat(end)]
|
|
},
|
|
timeFormat (date) {
|
|
if (!date || typeof date === 'string') {
|
|
return false
|
|
}
|
|
var y = date.getFullYear() //年
|
|
var m = date.getMonth() + 1 //月
|
|
if (m < 10) m = '0' + m
|
|
var d = date.getDate() //日
|
|
if (d < 10) d = '0' + d
|
|
|
|
return y + '-' + m + '-' + d + ' 00:00:00'
|
|
},
|
|
|
|
// 获取当前管理员信息
|
|
getWorkUserInfo () {
|
|
const url = '/epmetuser/customerstaff/staffbasicinfo'
|
|
let params = {}
|
|
window.app.ajax.post(
|
|
url,
|
|
params,
|
|
(data, rspMsg) => {
|
|
this.agencyInfo = data
|
|
if (!data.latitude) {
|
|
this.agencyInfo.latitude = 36.072227
|
|
}
|
|
if (!data.longitude) {
|
|
this.agencyInfo.longitude = 120.389455
|
|
}
|
|
if (!data.level) {
|
|
this.agencyInfo.level = 'street'
|
|
}
|
|
|
|
},
|
|
(rspMsg, data) => {
|
|
this.$message.error(rspMsg)
|
|
}
|
|
)
|
|
|
|
},
|
|
//点击项目
|
|
clickProject (feature) {
|
|
console.log('标注信息', feature.values_.properties)
|
|
},
|
|
async handleLook (val) {
|
|
|
|
this.detailId = val.id
|
|
this.detailInfo = val
|
|
// await this.getDetail(val.id)
|
|
this.showedMoreInfo = true
|
|
},
|
|
|
|
handleSelectChange (val) {
|
|
this.getList(this.agencyId);
|
|
},
|
|
pageSizeChangeHandleNew (val) {
|
|
// this.pageNo = 1;
|
|
this.pageSize = val;
|
|
this.getList(this.agencyId);
|
|
},
|
|
pageCurrentChangeHandleNew (val) {
|
|
this.pageNo = val;
|
|
this.getList(this.agencyId);
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/warning.scss"
|
|
scoped
|
|
></style>
|
|
<style lang="scss" scoped>
|
|
.warning-box {
|
|
display: flex;
|
|
.card-wr {
|
|
flex: 1;
|
|
}
|
|
.card-wr:last-child {
|
|
margin-left: 20px;
|
|
}
|
|
::v-deep .table-body {
|
|
overflow: auto;
|
|
&::-webkit-scrollbar {
|
|
width: 8px;
|
|
// background: linear-gradient(270deg, #0063FE, #0095FF);
|
|
}
|
|
|
|
&::-webkit-scrollbar-corner,
|
|
/* 滚动条角落 */
|
|
&::-webkit-scrollbar-thumb,
|
|
&::-webkit-scrollbar-track {
|
|
/*滚动条的轨道*/
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-corner,
|
|
&::-webkit-scrollbar-track {
|
|
/* 滚动条轨道 */
|
|
|
|
background: rgba(12, 129, 254, 0.24);
|
|
// box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
/* 滚动条手柄 */
|
|
background: linear-gradient(270deg, #0063fe, #0095ff);
|
|
}
|
|
}
|
|
}
|
|
.card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
.title-icon {
|
|
display: block;
|
|
width: 46px;
|
|
height: 34px;
|
|
box-sizing: border-box;
|
|
margin-right: 6px;
|
|
}
|
|
.title-label {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
::v-deep .el-input {
|
|
width: 180px;
|
|
margin-left: 10px;
|
|
.el-input__inner {
|
|
font-size: 18px;
|
|
// font-weight: 800;
|
|
color: #fff;
|
|
background: #06186d;
|
|
border: 1px solid #1a64cc;
|
|
}
|
|
.el-icon-arrow-down::before {
|
|
content: "\e790";
|
|
}
|
|
}
|
|
}
|
|
::v-deep .el-dropdown {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
font-weight: 800;
|
|
}
|
|
}
|
|
.second-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
.second-title-label {
|
|
position: relative;
|
|
padding-left: 40px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
}
|
|
.second-title-label::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 20px;
|
|
width: 12px;
|
|
height: 12px;
|
|
box-sizing: border-box;
|
|
margin-top: -6px;
|
|
background: #2865fa;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.second-select {
|
|
margin: 0 10px 0 10px;
|
|
::v-deep .el-input {
|
|
width: 180px;
|
|
height: 36px;
|
|
.el-input__inner {
|
|
height: 100%;
|
|
padding: 0 10px;
|
|
color: #fff;
|
|
line-height: 36px;
|
|
background: #06186d;
|
|
border: 1px solid #1a64cc;
|
|
}
|
|
|
|
.el-icon-arrow-up:before {
|
|
content: "\e78f";
|
|
}
|
|
// .el-select__caret:before {
|
|
// content: '\E790'
|
|
// }
|
|
}
|
|
::v-deep .el-date-editor {
|
|
width: 360px;
|
|
position: relative;
|
|
background: #06186d;
|
|
border: 1px solid #1a64cc;
|
|
.el-range-input {
|
|
color: #fff;
|
|
background: #06186d;
|
|
}
|
|
.el-range-separator {
|
|
color: #fff;
|
|
}
|
|
.el-range__icon {
|
|
position: absolute;
|
|
right: 5px;
|
|
// float: right;
|
|
}
|
|
.el-input__prefix {
|
|
left: unset;
|
|
right: 5px;
|
|
}
|
|
}
|
|
}
|
|
.second-select:last-child {
|
|
margin-left: 0;
|
|
}
|
|
.box-wr {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
.box-left {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
.box-left-item {
|
|
.box-label {
|
|
font-size: 16px;
|
|
color: rgba(255, 255, 255, 0.72);
|
|
}
|
|
.box-num {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.box-right {
|
|
flex: 1;
|
|
.box-map {
|
|
height: 400px;
|
|
// border: 1px solid #2865fa;
|
|
|
|
.map {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.box-left-w400 {
|
|
flex-wrap: wrap;
|
|
width: 400px;
|
|
box-sizing: border-box;
|
|
padding-top: 60px;
|
|
padding-left: 100px;
|
|
.box-left-item {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
.box-wr-400 {
|
|
height: 400px;
|
|
.box-left {
|
|
width: 300px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.box-left-item:last-child {
|
|
margin-top: 100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.map-tips {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
padding-top: 10px;
|
|
padding-bottom: 20px;
|
|
.map-tips-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
margin-right: 40px;
|
|
.map-tips-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
box-sizing: border-box;
|
|
margin-right: 10px;
|
|
// background: #DD2719;
|
|
// border-radius: 2px;
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.map-tips-label {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.elegant-list {
|
|
width: 100%;
|
|
max-height: 890px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
// align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: 30px 0 20px;
|
|
.elegant-item {
|
|
width: calc((100% - 80px) / 5);
|
|
margin-right: 20px;
|
|
margin-bottom: 36px;
|
|
box-sizing: border-box;
|
|
.item-img {
|
|
width: 100%;
|
|
height: 230px;
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.item-user {
|
|
margin-top: 20px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
}
|
|
.item-cate {
|
|
margin-top: 16px;
|
|
height: 16px;
|
|
font-size: 16px;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 24px;
|
|
}
|
|
.item-desc {
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
font-size: 18px;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 24px;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.elegant-item:nth-child(5n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
}
|
|
.pagination {
|
|
text-align: right;
|
|
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
background: #0266d1;
|
|
color: #000d3f;
|
|
}
|
|
|
|
/deep/ .el-pagination .el-pager li {
|
|
background: #002e74;
|
|
}
|
|
|
|
/deep/ .el-pagination .btn-prev {
|
|
background: #002e74;
|
|
}
|
|
|
|
/deep/ .el-pagination .btn-next {
|
|
background: #002e74;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|