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.
436 lines
10 KiB
436 lines
10 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">
|
|
区域化党建
|
|
</div>
|
|
</div>
|
|
<div class="second-title">
|
|
<div class="second-title-label">党建单位分类统计</div>
|
|
<div class="second-select">
|
|
<el-select v-model="serviceMatter" clearable 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"
|
|
@change="handleSelectChange"
|
|
@clear="handleSelectChange">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
<div class="box-wr box-wr-400">
|
|
<div class="box-left">
|
|
<div class="box-left-item">
|
|
<div class="box-label">组织单位</div>
|
|
<div class="box-num">1233</div>
|
|
</div>
|
|
<div class="box-left-item">
|
|
<div class="box-label">组织活动</div>
|
|
<div class="box-num">1233</div>
|
|
</div>
|
|
</div>
|
|
<div class="box-right">
|
|
<div class="warning-box-bottom">
|
|
<screen-table
|
|
:headerList="headerList"
|
|
:tableData="tableData"
|
|
:visibleLoading="visibleLoading"
|
|
:operate="true"
|
|
></screen-table>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="second-title">
|
|
<div class="second-title-label">党建单位分类统计</div>
|
|
</div>
|
|
|
|
<div class="box-wr">
|
|
<div class="box-left box-left-w400">
|
|
<div v-for="item in partyItem" :key="item.value" class="box-left-item">
|
|
<div class="box-label">{{ item.name }}</div>
|
|
<div class="box-num" :style="'color:' + item.color">{{ item.value }}</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="box-right">
|
|
<div class="box-map">这是地图容器</div>
|
|
<div class="map-tips">
|
|
<div v-for="item in partyItem" :key="item.value" class="map-tips-item">
|
|
<div class="map-tips-icon">
|
|
<img :src="item.icon" />
|
|
</div>
|
|
<div class="map-tips-label">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</cpt-card>
|
|
<dialog-info
|
|
v-show="showedMoreInfo"
|
|
@close="showedMoreInfo = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { requestPost } from "@/js/dai/request";
|
|
import screenTable from "../components/screen-table/index";
|
|
import cptCard from "@/views/modules/visual/cpts/card";
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
import dialogInfo from './dialogInfo.vue'
|
|
|
|
export default {
|
|
name: "warning-box",
|
|
components: {
|
|
cptCard,
|
|
screenTable,
|
|
dialogInfo
|
|
},
|
|
data() {
|
|
return {
|
|
showedMoreInfo: true,
|
|
tableLoading: false,
|
|
warningList: [],
|
|
headerList: [
|
|
{ title: "序号", coulmn: 'index' },
|
|
{ title: "区域化党建单位名称", coulmn: 'unitName' },
|
|
{ title: "活动标题", coulmn: 'title' },
|
|
{ title: "活动地址", coulmn: 'address' },
|
|
{ title: "服务事项", coulmn: 'serviceMatter' },
|
|
{ title: "服务人数", coulmn: 'peopleCount' },
|
|
{ title: "活动时间", coulmn: 'activityTime' }
|
|
],
|
|
tableData: [
|
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
|
|
],
|
|
agencyId: '',
|
|
value2: '',
|
|
timeRange: '',
|
|
visibleLoading: true,
|
|
serviceMatter: '',
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
activeIndex: 0,
|
|
activeLevel: "1",
|
|
unitList: [],
|
|
partyItem: [
|
|
{
|
|
name: '楼宇党建',
|
|
value: 1,
|
|
color: 'rgba(250, 32, 10, 1)',
|
|
icon: require('../../../../assets/img/shuju/measure/ly@2x.png')
|
|
}, {
|
|
name: '机关直属部门',
|
|
value: 2,
|
|
color: 'rgba(65, 181, 104, 1)',
|
|
icon: require('../../../../assets/img/shuju/measure/jgzs@2x.png')
|
|
}, {
|
|
name: '两新党建',
|
|
value: 3,
|
|
color: 'rgba(251, 177, 4, 1)',
|
|
icon: require('../../../../assets/img/shuju/measure/lxdj@2x.png')
|
|
}, {
|
|
name: '辖区单位',
|
|
value: 4,
|
|
color: 'rgba(80, 194, 237, 1)',
|
|
icon: require('../../../../assets/img/shuju/measure/xq@2x.png')
|
|
}, {
|
|
name: '其他',
|
|
value: 5,
|
|
color: 'rgba(192, 21, 195, 1)',
|
|
icon: require('../../../../assets/img/shuju/measure/qita.png')
|
|
}
|
|
],
|
|
};
|
|
},
|
|
async mounted() {
|
|
const { user } = this.$store.state
|
|
this.agencyId = user.agencyId
|
|
await nextTick(100);
|
|
this.loadUnit()
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
|
|
//具体人员列表
|
|
async getList() {
|
|
this.visibleLoading = true
|
|
|
|
const url = "/heart/icpartyactivity/search"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
|
|
let params = {
|
|
agencyId: this.agencyId,
|
|
pageSize: this.pageSize,
|
|
pageNo: this.pageNo,
|
|
serviceMatter: this.serviceMatter,
|
|
startTime: this.timeRange.length > 0 && this.timeRange[0] || '',
|
|
endTime: this.timeRange.length > 0 && this.timeRange[1] || ''
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.total = data.total
|
|
this.tableData = data.list
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
this.visibleLoading = false
|
|
},
|
|
async loadUnit () {
|
|
const url = "/heart/icresidemanddict/subcodelist"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/option"
|
|
|
|
let params = {
|
|
parentCategoryCode: '1010'
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.unitList = data
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
handleSelectChange() {
|
|
this.getList();
|
|
},
|
|
pageSizeChangeHandleNew(val) {
|
|
this.pageNo = 1;
|
|
this.pageSize = val;
|
|
this.getList();
|
|
},
|
|
pageCurrentChangeHandleNew(val) {
|
|
this.pageNo = val;
|
|
this.getList();
|
|
},
|
|
},
|
|
};
|
|
</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;
|
|
}
|
|
}
|
|
.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: 16px;
|
|
font-weight: 800;
|
|
}
|
|
::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 40px;
|
|
::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, .72);
|
|
}
|
|
.box-num {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.box-right {
|
|
flex: 1;
|
|
.box-map {
|
|
height: 400px;
|
|
border: 1px solid #2865FA;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|