elink-star
/
epmet-work-pc-chengyang
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

可视化党员信息样式调整

feature
jiangyy 3 years ago
parent
39973e940a
commit
5ca0a953c5
2 changed files with 302 additions and 290 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 202
      src/views/modules/visual/communityParty/crateForm.vue
  2. 106
      src/views/modules/visual/communityParty/party.vue

202
src/views/modules/visual/communityParty/crateForm.vue
View File

@ -1,103 +1,92 @@
<template> <template>
<div class="dialog-h-content scroll-h pd0">
<el-form label-width="120px" :model="form" :inline="true" <div class="m-pop">
:disabled="disabled" :rules="rules" ref="ruleForm" <div class="wrap">
class="form-wr"> <cpt-card>
<div class="flex-div"> <div class="title">
<el-form-item label="所属党组织" prop="sszb" class="wd50"> <img src="@/assets/img/shuju/title-tip.png" />
<el-cascader <span>党员信息</span>
v-model="form.sszb" </div>
:options="partyList"
:props="partyProps" <div class="btn-close"
clearable @click="handleCancle">
class="input-width" <img src="@/assets/img/shuju/people/close.png" />
@change="handlePartyChange"></el-cascader> </div>
</el-form-item> <div class="m-top">
<el-form-item label="党员中心户" prop="isDyzxh" class="wd50">
<el-radio-group v-model="form.isDyzxh"> <div class="m-info-left">
<el-radio label="1">是</el-radio> <div class="m-info">
<el-radio label="0">否</el-radio> <div class="info-prop">
</el-radio-group> <span>所属党组织：</span>
</el-form-item> <span>{{ form.orgName }}</span>
</div> </div>
<div class="flex-div"> <div class="info-prop">
<el-form-item label="姓名" prop="name" class="wd50"> <span>姓名：</span>
<el-input v-model="form.name" placeholder="请输入" :disabled="disabled" class="input-width" clearable></el-input> <span>{{ form.name }}</span>
</el-form-item>
<el-form-item label="免学习" prop="isMxx" class="wd50">
<el-radio-group v-model="form.isMxx">
<el-radio label="1">是</el-radio>
<el-radio label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</div> </div>
<div class="flex-div"> <div class="info-prop">
<el-form-item label="手机号" prop="mobile" class="wd50"> <span>手机号：</span>
<el-input v-model="form.mobile" placeholder="请输入" :disabled="disabled" class="input-width" clearable /> <span>{{ form.mobile }}</span>
</el-form-item>
<el-form-item label="职务" prop="partyZw" class="wd50">
<el-select v-model="form.partyZw" filterable :disabled="disabled" placeholder="请选择" class="input-width" clearable>
<el-option
v-for="item in zwList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</div> </div>
<div class="flex-div"> <div class="info-prop">
<el-form-item label="身份证" prop="idCard" class="wd50"> <span>身份证：</span>
<el-input v-model="form.idCard" placeholder="请输入" :disabled="disabled" <span>{{ form.idCard }}</span>
class="input-width" clearable @blur="handleValidBlur" /> </div>
</el-form-item> <div class="info-prop">
<el-form-item label="文化程度" prop="culture" class="wd50"> <span>地址：</span>
<el-select v-model="form.culture" filterable :disabled="disabled" placeholder="请选择" class="input-width" clearable> <span>{{ form.address|| "--" }}</span>
<el-option </div>
v-for="item in eduList" <div class="info-prop">
:key="item.value" <span>流动党员：</span>
:label="item.label" <span>{{ form.isLd==='1'?'是':'否' }}</span>
:value="item.value"> </div>
</el-option>
</el-select> <div class="info-prop">
</el-form-item> <span>备注：</span>
<span>{{ form.remark || "--" }}</span>
</div>
</div>
</div>
<div class="m-info-right">
<div class="m-info">
<div class="info-prop">
<span>党员中心户：</span>
<span>{{ form.isDyzxh==='1'?'是':'否' }}</span>
</div>
<div class="info-prop">
<span>免学习：</span>
<span>{{ form.isMxx==='1'?'是':'否' }}</span>
</div>
<div class="info-prop">
<span>职务：</span>
<span>{{ form.postName|| "--" }}</span>
</div>
<div class="info-prop">
<span>文化程度：</span>
<span>{{ form.cultureName || "--" }}</span>
</div> </div>
<div class="flex-div"> <div class="info-prop">
<el-form-item label="地址" prop="address" class="wd50"> <span>入党时间：</span>
<el-input v-model="form.address" placeholder="请输入" :disabled="disabled || isAuto" class="input-width" clearable></el-input> <span>{{ form.rdsj || "--" }}</span>
</el-form-item>
<el-form-item label="入党时间" prop="rdsj" class="wd50">
<el-date-picker
v-model="form.rdsj"
:disabled="disabled"
type="date"
class="input-width"
clearable
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</div> </div>
<div class="flex-div"> <div class="info-prop">
<el-form-item label="流动党员" prop="isLd" class="wd50"> <span>党员流动号：</span>
<el-radio-group v-model="form.isLd" class="input-width"> <span>{{ form.ldzh || "--" }}</span>
<el-radio label="1">是</el-radio>
<el-radio label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="流动党员号" prop="ldzh" class="wd50">
<el-input v-model="form.ldzh" placeholder="请输入" :disabled="disabled" class="input-width" clearable></el-input>
</el-form-item>
</div> </div>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" :autosize="{ minRows: 4, maxRows: 10}" :disabled="disabled" type="textarea" clearable class="input-width-textarea" placeholder="请输入内容"></el-input> </div>
</el-form-item> </div>
<div >
</div>
<div class="m-btn">
<div style="margin-top: 20px; text-align: center;"> <div style="margin-top: 20px; text-align: center;">
<el-button size="small" :disabled="false" @click="handleCancle">取消</el-button> <el-button size="small"
<el-button :disabled="false"
v-if="form.icResiUser != null && form.icResiUser != ''" @click="handleCancle">取消</el-button>
<el-button v-if="form.icResiUser != null && form.icResiUser != ''"
type="primary" type="primary"
:disabled="false" :disabled="false"
size="small" size="small"
@ -105,17 +94,20 @@
</div> </div>
</div> </div>
</el-form> </cpt-card>
</div>
</div> </div>
</template> </template>
<script> <script>
import { isCard, isMobile } from '@/utils/validate' import { isCard, isMobile } from '@/utils/validate'
import { computedCard } from '@/utils/index' import { computedCard } from '@/utils/index'
import cptCard from "@/views/modules/visual/cpts/card";
export default { export default {
components: { components: {
cptCard
}, },
props: { props: {
partyList: { partyList: {
@ -227,24 +219,20 @@ export default {
console.log('partyList', this.partyList) console.log('partyList', this.partyList)
}, },
mounted () { mounted () {
const w = document.getElementsByClassName('dialog-h-content')[0] // const w = document.getElementsByClassName('dialog-h-content')[0]
this.formItemWd = w.clientWidth + 'px' // this.formItemWd = w.clientWidth + 'px'
}, },
destroyed () { destroyed () {
// this.$refs['ruleForm'].resetFields() // this.$refs['ruleForm'].resetFields()
}, },
methods: { methods: {
handleCancle () { handleCancle () {
this.$refs['ruleForm'].resetFields() // this.$refs['ruleForm'].resetFields()
this.$emit('cancle') this.$emit('cancle')
}, },
handlePartyChange(val) {
console.log('val------pp', val)
// if (val.length > 0) {
// const i = val.length - 1
// this.form.sszb = val[i]
// } else this.form.sszb = ''
},
handleValidBlur (n) { handleValidBlur (n) {
if (!isCard(this.form.idCard)) return if (!isCard(this.form.idCard)) return
const { age } = computedCard(this.form.idCard) const { age } = computedCard(this.form.idCard)
@ -429,3 +417,9 @@ export default {
padding: 0 !important; padding: 0 !important;
} }
</style> </style>
<style
lang="scss"
src="@/assets/scss/modules/visual/incident-info.scss"
scoped
></style>

106
src/views/modules/visual/communityParty/party.vue
View File

@ -2,7 +2,8 @@
<div class="warning-box"> <div class="warning-box">
<cpt-card :min-full-screen="true"> <cpt-card :min-full-screen="true">
<div class="card-title"> <div class="card-title">
<img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" /> <img class="title-icon"
src="../../../../assets/img/shuju/title-tip.png" />
<div class="title-label"> <div class="title-label">
党员信息统计&nbsp;&nbsp; 党员信息统计&nbsp;&nbsp;
<!-- <el-cascader <!-- <el-cascader
@ -13,8 +14,7 @@
:getCheckedNodes="getCheckedNodes" :getCheckedNodes="getCheckedNodes"
clearable @change="handleCascader"> clearable @change="handleCascader">
</el-cascader> --> </el-cascader> -->
<el-cascader <el-cascader v-model="partyOrgs"
v-model="partyOrgs"
:options="partyOrgList" :options="partyOrgList"
:props="{ :props="{
label: 'partyOrgName', label: 'partyOrgName',
@ -22,7 +22,8 @@
checkStrictly: true checkStrictly: true
}" }"
:show-all-levels="false" :show-all-levels="false"
clearable @change="handlePartyCascader"> clearable
@change="handlePartyCascader">
</el-cascader> </el-cascader>
</div> </div>
</div> </div>
@ -39,8 +40,11 @@
</div> </div>
<div class="echarts-tips echarts-tips-wd50"> <div class="echarts-tips echarts-tips-wd50">
<div class="tips-lists"> <div class="tips-lists">
<div v-for="(item, index) in ageItem" :key="index" class="tips-items"> <div v-for="(item, index) in ageItem"
<div class="tips-items-title" :class="'tips-items-title' + item.code"> :key="index"
class="tips-items">
<div class="tips-items-title"
:class="'tips-items-title' + item.code">
{{ item.name }} {{ item.name }}
</div> </div>
<div class="tips-items-num"> <div class="tips-items-num">
@ -54,18 +58,18 @@
</div> </div>
<div class="ecahrts-button"> <div class="ecahrts-button">
<el-button type="warning" size="small" @click="handleExport('age')">导出</el-button> <el-button type="warning"
size="small"
@click="handleExport('age')">导出</el-button>
</div> </div>
<div class="warning-box-bottom"> <div class="warning-box-bottom">
<screen-table <screen-table :headerList="headerList"
:headerList="headerList"
:tableData="ageList" :tableData="ageList"
:headerStyle="headerStyle" :headerStyle="headerStyle"
:tableContentStyle="headerStyle" :tableContentStyle="headerStyle"
:visibleLoading="visibleAgeLoading" :visibleLoading="visibleAgeLoading"
:operate="false" :operate="false"
@row="handleClickRow" @row="handleClickRow"></screen-table>
></screen-table>
<div class="pagination"> <div class="pagination">
<el-pagination hide-on-single-page <el-pagination hide-on-single-page
:current-page="agePageNo" :current-page="agePageNo"
@ -74,8 +78,7 @@
layout="prev, pager, next" layout="prev, pager, next"
@size-change="pageSizeChangeHandleAge" @size-change="pageSizeChangeHandleAge"
@current-change="pageCurrentChangeHandleAge" @current-change="pageCurrentChangeHandleAge"
:total="ageTotal" :total="ageTotal">
>
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
@ -90,10 +93,14 @@
@myChartMethod="pieInitOks" @myChartMethod="pieInitOks"
ref="eduChart"></screen-echarts-frame> ref="eduChart"></screen-echarts-frame>
</div> </div>
<div v-if="false" class="echarts-tips"> <div v-if="false"
class="echarts-tips">
<div class="tips-list"> <div class="tips-list">
<div v-for="item in eduItem" :key="item.value" class="tips-item"> <div v-for="item in eduItem"
<div class="tips-item-icon" :style="'background:' + item.color"></div> :key="item.value"
class="tips-item">
<div class="tips-item-icon"
:style="'background:' + item.color"></div>
<div class="tips-item-text">{{item.name}}</div> <div class="tips-item-text">{{item.name}}</div>
</div> </div>
@ -101,18 +108,18 @@
</div> </div>
</div> </div>
<div class="ecahrts-button"> <div class="ecahrts-button">
<el-button type="warning" size="small" @click="handleExport('edu')">导出</el-button> <el-button type="warning"
size="small"
@click="handleExport('edu')">导出</el-button>
</div> </div>
<div class="warning-box-bottom"> <div class="warning-box-bottom">
<screen-table <screen-table :headerList="headerEduList"
:headerList="headerEduList"
:tableData="eduList" :tableData="eduList"
:headerStyle="headerStyle" :headerStyle="headerStyle"
:tableContentStyle="headerStyle" :tableContentStyle="headerStyle"
:visibleLoading="visibleLoading" :visibleLoading="visibleLoading"
:operate="false" :operate="false"
@row="handleClickRow" @row="handleClickRow"></screen-table>
></screen-table>
<div class="pagination"> <div class="pagination">
<el-pagination hide-on-single-page <el-pagination hide-on-single-page
:current-page="pageNo" :current-page="pageNo"
@ -121,17 +128,22 @@
layout="prev, pager, next" layout="prev, pager, next"
@size-change="pageSizeChangeHandleNew" @size-change="pageSizeChangeHandleNew"
@current-change="pageCurrentChangeHandleNew" @current-change="pageCurrentChangeHandleNew"
:total="total" :total="total">
>
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</cpt-card> </cpt-card>
<el-dialog
<crate-form v-if="memberDialog"
:info="memberDetailInfo"
:partyList="optionsG"
:disabled="disabled"
@saveBase="jumpDetail"
@cancle="handlerCancle" />
<!-- <el-dialog
title="党员信息" title="党员信息"
:visible.sync="memberDialog" :visible.sync="memberDialog"
width="60%" width="60%"
@ -142,7 +154,7 @@
:before-close="handlerCancle"> :before-close="handlerCancle">
<crate-form v-if="memberDialog" :info="memberDetailInfo" :partyList="optionsG" :disabled="disabled" <crate-form v-if="memberDialog" :info="memberDetailInfo" :partyList="optionsG" :disabled="disabled"
@saveBase="jumpDetail" @cancle="handlerCancle" /> @saveBase="jumpDetail" @cancle="handlerCancle" />
</el-dialog> </el-dialog> -->
</div> </div>
</template> </template>
@ -749,7 +761,8 @@ export default {
label: item.agencyName, label: item.agencyName,
value: item.agencyId + '-' + item.level, value: item.agencyId + '-' + item.level,
level: item.level, level: item.level,
children: this.getTreeData(item.subAgencyList)} children: this.getTreeData(item.subAgencyList)
}
} else { } else {
_item = { _item = {
label: item.agencyName, label: item.agencyName,
@ -939,8 +952,8 @@ export default {
color: #fff; color: #fff;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
background: #06186D; background: #06186d;
border: 1px solid #1A64CC; border: 1px solid #1a64cc;
border-radius: 2px; border-radius: 2px;
} }
.el-input__prefix { .el-input__prefix {
@ -952,7 +965,6 @@ export default {
line-height: 24px; line-height: 24px;
} }
} }
} }
} }
.title-label { .title-label {
@ -960,7 +972,6 @@ export default {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 800; font-weight: 800;
::v-deep .el-input { ::v-deep .el-input {
width: 180px; width: 180px;
.el-input__inner { .el-input__inner {
font-size: 18px; font-size: 18px;
@ -998,7 +1009,7 @@ export default {
color: #fff; color: #fff;
} }
.card-left-title::after { .card-left-title::after {
content: ''; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 20px; left: 20px;
@ -1006,7 +1017,7 @@ export default {
height: 12px; height: 12px;
box-sizing: border-box; box-sizing: border-box;
margin-top: -6px; margin-top: -6px;
background: #2865FA; background: #2865fa;
border-radius: 50%; border-radius: 50%;
} }
.echart-wr { .echart-wr {
@ -1049,7 +1060,10 @@ export default {
.echarts-tips-wd50 { .echarts-tips-wd50 {
width: 320px; width: 320px;
} }
.tips-list, .tips-item, .tips-lists, .tips-items-num { .tips-list,
.tips-item,
.tips-lists,
.tips-items-num {
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -1069,12 +1083,12 @@ export default {
height: 10px; height: 10px;
box-sizing: border-box; box-sizing: border-box;
margin-right: 8px; margin-right: 8px;
background: #1B51FF; background: #1b51ff;
border-radius: 2px; border-radius: 2px;
} }
.tips-item-text { .tips-item-text {
font-size: 16px; font-size: 16px;
color: #D2E7FF; color: #d2e7ff;
} }
} }
} }
@ -1095,19 +1109,24 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding-left: 6px; padding-left: 6px;
font-size: 16px; font-size: 16px;
color: #EFF0F1; color: #eff0f1;
background: url('../../../../assets/img/shuju/measure/huang@2x.png') no-repeat left bottom; background: url("../../../../assets/img/shuju/measure/huang@2x.png")
no-repeat left bottom;
&1 { &1 {
background: url('../../../../assets/img/shuju/measure/lv@2x.png') no-repeat left bottom; background: url("../../../../assets/img/shuju/measure/lv@2x.png")
no-repeat left bottom;
} }
&2 { &2 {
background: url('../../../../assets/img/shuju/measure/zi@2x.png') no-repeat left bottom; background: url("../../../../assets/img/shuju/measure/zi@2x.png")
no-repeat left bottom;
} }
&3 { &3 {
background: url('../../../../assets/img/shuju/measure/lan@2x.png') no-repeat left bottom; background: url("../../../../assets/img/shuju/measure/lan@2x.png")
no-repeat left bottom;
} }
&4 { &4 {
background: url('../../../../assets/img/shuju/measure/lanlv@2x.png') no-repeat left bottom; background: url("../../../../assets/img/shuju/measure/lanlv@2x.png")
no-repeat left bottom;
} }
} }
.tips-items-num { .tips-items-num {
@ -1135,8 +1154,7 @@ export default {
padding-right: 30px; padding-right: 30px;
text-align: right; text-align: right;
::v-deep .el-button--warning { ::v-deep .el-button--warning {
background: linear-gradient(90deg, #0863ea, #3b9ffc);
background: linear-gradient(90deg, #0863EA, #3B9FFC);
border: 0; border: 0;
} }
} }

Write Preview
Loading…
Cancel
Save