30 changed files with 8237 additions and 1612 deletions
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,63 @@ |
|||
/deep/ .el-input.is-disabled .el-input__inner, |
|||
/deep/ .el-textarea.is-disabled textarea.el-textarea__inner { |
|||
// border:none;background-color: transparent; |
|||
} |
|||
.div_btn { |
|||
text-align: right; |
|||
} |
|||
.div_map { |
|||
width: 100%; |
|||
height: 320px; |
|||
margin-left: 0px; |
|||
} |
|||
/deep/.el-dialog__body { |
|||
padding: 30px 80px; |
|||
} |
|||
/deep/.el-dialog__footer { |
|||
padding: 10px 80px 20px; |
|||
} |
|||
.form-item::v-deep .el-form-item__label { |
|||
color: #fff; |
|||
} |
|||
.form-item { |
|||
.el-radio { |
|||
color: #fff; |
|||
} |
|||
|
|||
.el-checkbox { |
|||
color: #fff; |
|||
} |
|||
} |
|||
.verifyRed::before { |
|||
content: '*'; |
|||
color: #f56c6c; |
|||
margin-right: 4px; |
|||
} |
|||
.form_label_box { |
|||
width: 150px; |
|||
display: inline-block; |
|||
text-align: right; |
|||
padding-right: 12px; |
|||
} |
|||
|
|||
/deep/.m-record { |
|||
h3 { |
|||
&::before { |
|||
display: inline-block; |
|||
width: 4px; |
|||
height: 12px; |
|||
background: #0056D6; |
|||
content: ''; |
|||
/** |
|||
这个指为正的话 小方块就往上， 为负的话，小方块就往下 |
|||
*/ |
|||
vertical-align: 1px; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
/deep/.recordBox .m-table-item{ |
|||
margin-top:0px; |
|||
max-height:200px; |
|||
overflow: auto; |
|||
} |
|||
@ -0,0 +1,132 @@ |
|||
@import "c/config"; |
|||
@import "c/function"; |
|||
|
|||
|
|||
|
|||
.wrap2 { |
|||
box-sizing: border-box; |
|||
padding: 20px; |
|||
height: 90vh; |
|||
width: 1180px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
position: relative; |
|||
} |
|||
|
|||
.title { |
|||
padding: 10px; |
|||
font-size: 22px; |
|||
font-family: PingFang SC; |
|||
font-weight: 800; |
|||
color: #333; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
img { |
|||
display: block; |
|||
margin-right: 5px; |
|||
} |
|||
span { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.div_tuomin{ |
|||
position: absolute; |
|||
top:25px; |
|||
right:40px; |
|||
} |
|||
|
|||
.btn-close { |
|||
position: absolute; |
|||
z-index: 2; |
|||
top: -30px; |
|||
right: -30px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 10px 30px; |
|||
|
|||
.item { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
padding: 0 15px; |
|||
width: 33%; |
|||
color: #fff; |
|||
font-size: 18px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333; |
|||
line-height: 24px; |
|||
margin: 15px 0; |
|||
|
|||
&.z-long { |
|||
width: 100%; |
|||
} |
|||
|
|||
&::before { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 9px; |
|||
content: ""; |
|||
display: block; |
|||
width: 7px; |
|||
height: 7px; |
|||
background: #ddd; |
|||
border-radius: 3px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.line { |
|||
margin: 20px auto; |
|||
width: 900px; |
|||
height: 1px; |
|||
border: 1px dashed #ddd; |
|||
} |
|||
|
|||
.tabs { |
|||
margin-top: 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 20px; |
|||
|
|||
.tab-btn { |
|||
margin: 0 5px; |
|||
width: 30px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
padding: 10px 0; |
|||
border-radius: 3px; |
|||
background-color: rgba(#000, 0.3); |
|||
} |
|||
|
|||
.tab { |
|||
@include toe; |
|||
margin: 0 5px; |
|||
min-width: 80px; |
|||
padding: 0 8px; |
|||
height: 36px; |
|||
background: #fff; |
|||
border: 1px solid #eee; |
|||
box-shadow: 0 0 10px 0 inset #ddd; |
|||
border-radius: 2px; |
|||
text-align: center; |
|||
font-size: 17px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333; |
|||
line-height: 36px; |
|||
cursor: pointer; |
|||
transition: all ease 0.1s; |
|||
&.z-on { |
|||
background: linear-gradient(90deg, #1a5afd, #009cff); |
|||
box-shadow: none; |
|||
color: #ffffff; |
|||
border: 1px solid #1a5afd; |
|||
} |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,513 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="dialogVisible" width="1100px" :before-close="handleCancle" top="5vh"> |
|||
<span slot="title"> |
|||
<span v-if="pageType == 'add'">新增</span> |
|||
<span v-if="pageType == 'edit'">修改</span> |
|||
<span v-if="pageType == 'view'">查看</span> |
|||
</span> |
|||
<div> |
|||
<div class="dialog-h-content2 scroll-h"> |
|||
<el-form :inline="true" :model="formData" ref="form" :rules="dataRule" v-if="pageType != 'view'"> |
|||
<el-row> |
|||
<el-col :span="6"> |
|||
<el-form-item label="场所名称" prop="placeOrgName"> |
|||
<el-input v-model="formData.placeOrgName" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="场所类型" prop="placeType"> |
|||
<el-select class="u-item-width-normal" :disabled="disabled" v-model="formData.placeType" placeholder="全部" size="small" clearable> |
|||
<el-option v-for="item in placeTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="占地面积" prop="areaCovered"> |
|||
<el-input v-model="formData.areaCovered" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="场所规模" prop="scaleTotal"> |
|||
<el-input |
|||
type="number" |
|||
v-model="formData.scaleTotal" |
|||
:disabled="disabled" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入可容纳人数" |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="所属组织" prop="gridId"> |
|||
<el-select v-model="formData.gridId" class="u-item-width-normal" :disabled="disabled" placeholder="全部" size="small" clearable> |
|||
<el-option v-for="item in gridList" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="场所类别" prop="placeCategory"> |
|||
<el-select v-model="formData.placeCategory" :disabled="disabled" placeholder="请选择" size="small" clearable class="u-item-width-normal"> |
|||
<el-option v-for="item in placeCategoryArray" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="6"> |
|||
<el-form-item label="负责人" prop="personInCharge"> |
|||
<el-input v-model="formData.personInCharge" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="联系电话" prop="mobile"> |
|||
<el-input v-model="formData.mobile" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="场所地址" prop="address" style="display: block"> |
|||
<el-select |
|||
v-model="formData.address" |
|||
:disabled="disabled" |
|||
filterable |
|||
remote |
|||
:reserve-keyword="true" |
|||
placeholder="请输入关键词" |
|||
:remote-method="remoteMethod" |
|||
:loading="loading" |
|||
> |
|||
<el-option |
|||
v-for="(item, index) in searchOptions" |
|||
@click.native="handleClickKey(index)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<div id="app_event" class="div_map"></div> |
|||
</el-form> |
|||
<el-form :inline="false" :model="formData" ref="form" label-width="140px" v-if="pageType == 'view'"> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="场所类别" prop="placeCategory">{{ formData.placeCategoryName }}</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="12"> |
|||
<el-form-item label="场所类型" prop="placeType">{{ formData.placeTypeName }}</el-form-item> |
|||
</el-col> |
|||
<!-- <el-col :span="12"> |
|||
<el-form-item label="占地面积" prop="areaCovered">{{ formData.areaCovered }}</el-form-item> |
|||
</el-col> |
|||
--> |
|||
<el-col :span="12"> |
|||
<el-form-item label="场所区域" prop="gridId">{{ formData.gridName }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="场所名称" prop="placeOrgName">{{ formData.placeOrgName }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="场所规模" prop="scaleTotal">{{ formData.scaleTotal }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="负责人" prop="personInCharge">{{ formData.personInCharge }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="联系电话" prop="mobile">{{ formData.mobile }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="场所地址" prop="address"> |
|||
<div id="app_event" class="div_map"></div> |
|||
{{ formData.address }} |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
|
|||
<div class="div_btn" style="text-align: center;"><el-button size="small" @click="handleCancle">取消</el-button></div> |
|||
<div class="div_btn" v-if="pageType != 'view'"> |
|||
<el-button size="small" @click="handleCancle">取 消</el-button> |
|||
<!-- <el-button size="small" @click="resetData" v-if="pageType != 'view'">重置</el-button> --> |
|||
<el-button size="small" type="primary" :disabled="btnDisable" @click="handleComfirm">保 存</el-button> |
|||
</div> |
|||
<div class="recordBox"><record v-if="pageType != 'add' && detailId" :formType="pageType" :id="detailId" :info="{ agencyId: agencyId }"></record></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<span slot="footer" class="dialog-footer"> |
|||
<!-- <el-button @click="handleCancle">关 闭</el-button> --> |
|||
<!-- <el-button type="primary" @click="handleComfirm">确 定</el-button> --> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { isMobile } from '@/utils/validate'; |
|||
import { mapGetters } from 'vuex'; |
|||
import { Loading } from 'element-ui'; // 引入Loading服务 |
|||
import { requestPost, requestGet } from '@/js/dai/request'; |
|||
import daiMap from '@/utils/dai-map'; |
|||
import nextTick from 'dai-js/tools/nextTick'; |
|||
import record from './record'; |
|||
let loading; // 加载动画 |
|||
let map; |
|||
var search; |
|||
var markers; |
|||
var infoWindowList; |
|||
var geocoder; // 新建一个正逆地址解析类 |
|||
|
|||
export default { |
|||
props: { |
|||
dialogVisible: { |
|||
type: Boolean, |
|||
default: '' |
|||
}, |
|||
defaultData: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
pageType: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
detailId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
detailData: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
|
|||
data() { |
|||
let checkNum = (rule, value, callback) => { |
|||
if (!value) { |
|||
return callback(new Error('场所规模不能为空')); |
|||
} |
|||
setTimeout(() => { |
|||
if (!Number.isInteger(value)) { |
|||
callback(new Error('请输入数字值')); |
|||
} |
|||
}, 1000); |
|||
}; |
|||
let checkMObile = (rule, value, callback) => { |
|||
if (value === '') { |
|||
callback(new Error('请输入联系电话')); |
|||
} else { |
|||
if (!isMobile(value)) { |
|||
callback(new Error('联系电话格式不正确')); |
|||
} |
|||
callback(); |
|||
} |
|||
}; |
|||
return { |
|||
btnDisable: false, |
|||
user: '', |
|||
agencyId: '', |
|||
gridList: [], //所属网格list--场所区域 |
|||
placeTypeList: [], //场所类型 |
|||
resultArray: [{ value: '0', label: '合格' }, { value: '1', label: '不合格' }], |
|||
placeCategoryArray: [{ value: '0', label: '九小场所' }, { value: '1', label: '企事业单位' }], |
|||
list: {}, |
|||
formData: { |
|||
placeOrgName: '', |
|||
scaleTotal: '', |
|||
gridId: '', |
|||
latestResult: '', |
|||
placeCategory: '', |
|||
placeType: '', |
|||
personInCharge: '', |
|||
address: '', |
|||
mobile: '', |
|||
// result: '', |
|||
remark: '' |
|||
}, |
|||
dataRule: { |
|||
placeOrgName: [{ required: true, message: '场所名称不能为空', trigger: 'bulr' }], |
|||
placeCategory: [{ required: true, message: '场所类别不能为空', trigger: 'bulr' }], |
|||
placeType: [{ required: true, message: '场所类型不能为空', trigger: 'bulr' }], |
|||
result: [{ required: true, message: '巡查结果不能为空', trigger: 'bulr' }], |
|||
scaleTotal: [{ required: true, validator: checkNum, trigger: 'bulr' }], |
|||
gridId: [{ required: true, message: '所属组织不能为空', trigger: 'bulr' }], |
|||
personInCharge: [{ required: true, message: '负责人不能为空', trigger: 'bulr' }], |
|||
mobile: [{ required: true, validator: checkMObile, trigger: 'blur' }], |
|||
address: [{ required: true, message: '场所地址不能为空', trigger: 'blur' }] |
|||
// content: [{ required: true, message: '详细说明不能为空', trigger: 'bulr' }, { max: 1000, message: '不能超出1000个字符', trigger: 'blur' }] |
|||
}, |
|||
//地图 |
|||
loading: false, |
|||
|
|||
searchValue: '', |
|||
searchOptions: [] |
|||
}; |
|||
}, |
|||
watch: {}, |
|||
components: { record }, |
|||
created() {}, |
|||
async mounted() { |
|||
this.user = this.$store.state.user; |
|||
this.agencyId = this.user.agencyId; |
|||
this.startLoading(); |
|||
this.loadGrid(); |
|||
this.loadplaceType(); |
|||
if (this.pageType != 'add') { |
|||
this.getDetail(); |
|||
} else { |
|||
this.initMap(); |
|||
} |
|||
await this.endLoading(); |
|||
this.endLoading(); |
|||
}, |
|||
|
|||
methods: { |
|||
async loadGrid() { |
|||
const url = '/gov/org/customergrid/gridoption'; |
|||
let params = { |
|||
agencyId: this.agencyId, |
|||
purpose: 'query' |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.gridList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
//场所类型 |
|||
async loadplaceType() { |
|||
const url = '/sys/dict/data/dictlist'; |
|||
|
|||
let params = { |
|||
dictType: 'ic_enterprise_place_type' |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.placeTypeList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getDetail() { |
|||
const url = `/gov/org/enterprise/detail/${this.detailId}`; |
|||
const { data, code, msg } = await requestPost(url); |
|||
if (code === 0) { |
|||
this.formData = { ...data }; |
|||
this.initMap(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
handleComfirm() { |
|||
this.save(); |
|||
}, |
|||
async handleAdd() { |
|||
// this.btnDisable = true; |
|||
// setTimeout(() => { |
|||
// this.btnDisable = false; |
|||
// }, 10000); |
|||
// nextTick(1000); |
|||
// const form = new Promise((resolve, reject) => { |
|||
// this.$refs['form'].validate(valid => { |
|||
// if (valid) resolve(); |
|||
// }); |
|||
// }); |
|||
// const form1 = new Promise((resolve, reject) => { |
|||
// this.$refs['form1'].validate(valid => { |
|||
// if (valid) resolve(); |
|||
// }); |
|||
// }); |
|||
// Promise.all([form1, form]) |
|||
// .then(() => { |
|||
// this.addFuwu(); |
|||
// }) |
|||
// .catch(() => { |
|||
// app.util.validateRule(messageObj); |
|||
// this.btnDisable = false; |
|||
// }); |
|||
}, |
|||
|
|||
async save() { |
|||
this.formData.agencyId = this.agencyId; |
|||
var url = ''; |
|||
var params = {}; |
|||
url = '/gov/org/enterprise/addOrUpdate'; |
|||
params = { ...this.formData }; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$message.success('操作成功'); |
|||
|
|||
this.handleCancle(); |
|||
// // this.resetData(); |
|||
// this.$emit('handleComfirm'); |
|||
} else if (code >= 8000) { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleCancle() { |
|||
// this.resetData(); |
|||
this.$emit('handleClose'); |
|||
}, |
|||
resetData() { |
|||
this.$refs.form.resetFields(); |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading() { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}); |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading() { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close(); |
|||
} |
|||
}, // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap() { |
|||
let { latitude, longitude } = this.$store.state.user; |
|||
|
|||
if (this.formData.latitude && this.formData.longitude) { |
|||
latitude = this.formData.latitude; |
|||
longitude = this.formData.longitude; |
|||
} |
|||
if (!latitude || latitude == '' || latitude == '0') { |
|||
latitude = 39.9088810666821; |
|||
longitude = 116.39743841556731; |
|||
} |
|||
|
|||
this.$nextTick(() => { |
|||
map = new daiMap( |
|||
document.getElementById('app_event'), |
|||
{ latitude, longitude }, |
|||
{ |
|||
zoom: 16.2, // 设置地图缩放级别 |
|||
pitch: 43.5, // 设置俯仰角 |
|||
rotation: 45 // 设置地图旋转角度 |
|||
} |
|||
); |
|||
// 监听地图平移结束 |
|||
map.on('dragend', e => { |
|||
this.handleMoveCenter(e); |
|||
}); |
|||
|
|||
map.setCenter(latitude, longitude); |
|||
if (this.formData.latitude) { |
|||
map.setMarker(latitude, longitude); |
|||
} |
|||
}); |
|||
}, |
|||
async handleMoveCenter() { |
|||
//修改地图中心点 |
|||
const { lat, lng } = map.getCenter(); |
|||
this.formData.latitude = lat; |
|||
this.formData.longitude = lng; |
|||
map.setMarker(lat, lng); |
|||
|
|||
let { msg, data } = await map.getAddress(lat, lng); |
|||
if (msg == 'success') { |
|||
this.formData.address = data.address; |
|||
this.searchValue = data.address; |
|||
this.searchOptions = []; |
|||
} |
|||
}, |
|||
async remoteMethod(query) { |
|||
if (query !== '') { |
|||
this.loading = true; |
|||
const { msg, data } = await map.searchNearby(query); |
|||
this.loading = false; |
|||
this.resultList = []; |
|||
|
|||
if (msg == 'success' && data.resultList && data.resultList.length > 0) { |
|||
if (data.resultList && data.resultList.length > 0) { |
|||
this.resultList = data.resultList; |
|||
this.searchOptions = this.resultList.map(item => { |
|||
return { value: `${item.id}`, label: `${item.address + item.name}` }; |
|||
}); |
|||
} |
|||
} else { |
|||
this.searchOptions = [ |
|||
{ |
|||
value: '0', |
|||
label: '未检索到结果' |
|||
} |
|||
]; |
|||
} |
|||
} else { |
|||
this.searchOptions = []; |
|||
} |
|||
}, |
|||
handleClickKey(index) { |
|||
let selPosition = this.resultList[index]; |
|||
let lonlat = selPosition.lonlat.split(' '); |
|||
map.setCenter(lonlat[1], lonlat[0]); |
|||
map.setMarker(lonlat[1], lonlat[0]); |
|||
this.formData.latitude = lonlat[1]; |
|||
this.formData.longitude = lonlat[0]; |
|||
this.formData.address = selPosition.address + selPosition.name; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/modules/management/form-main.scss'; |
|||
@import '@/assets/scss/modules/management/form.scss'; |
|||
// @import '@/assets/scss/modules/visual/a_customize.scss'; |
|||
.div_map{ |
|||
width: 350px; |
|||
} |
|||
/deep/.el-dialog__header { |
|||
padding: 25px 20px 10px 25px; |
|||
font-size: 18px; |
|||
font-family: PingFang SC; |
|||
font-weight: normal; |
|||
color: #333; |
|||
} |
|||
/deep/.el-dialog__body { |
|||
padding: 30px 0px 30px 40px; |
|||
} |
|||
/deep/.el-dialog__footer { |
|||
text-align: center; |
|||
} |
|||
/deep/.el-form { |
|||
.el-form-item { |
|||
position: relative; |
|||
margin-bottom: 22px; |
|||
.el-form-item__label { |
|||
font-size: 14px; |
|||
padding-left: 15px; |
|||
text-align: left; |
|||
&::before { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 12px; |
|||
content: ''; |
|||
display: block; |
|||
width: 7px; |
|||
height: 7px; |
|||
background: #0c81fe; |
|||
border-radius: 3px; |
|||
} |
|||
} |
|||
.el-form-item__content { |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
/deep/.dialog-h-content2 { |
|||
max-height: calc(83vh - 90px); |
|||
box-sizing: border-box; |
|||
padding: 0 10px; |
|||
overflow: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,541 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="dialogVisible" width="900px" :before-close="handleCancle" top="5vh"> |
|||
<span slot="title"> |
|||
<span v-if="pageType == 'add'">新增</span> |
|||
<span v-if="pageType == 'edit'">修改</span> |
|||
<span v-if="pageType == 'view'">查看房屋</span> |
|||
</span> |
|||
<div> |
|||
<div class="dialog-h-content2 scroll-h"> |
|||
<div v-if="view_real_data" class="div_tuomin" style="margin-top: 20px;"> |
|||
<el-button size="mini" class="diy-button--search" @click="handleTuomin">显示脱敏信息</el-button> |
|||
</div> |
|||
<el-form :inline="true" :model="formData" ref="form" :rules="dataRule" v-if="pageType != 'view'"> |
|||
<el-row> |
|||
<el-col :span="6"> |
|||
<el-form-item label="场所名称" prop="placeOrgName"> |
|||
<el-input v-model="formData.placeOrgName" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="场所类型" prop="placeType"> |
|||
<el-select class="u-item-width-normal" :disabled="disabled" v-model="formData.placeType" placeholder="全部" size="small" clearable> |
|||
<el-option v-for="item in placeTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="占地面积" prop="areaCovered"> |
|||
<el-input v-model="formData.areaCovered" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="场所规模" prop="scaleTotal"> |
|||
<el-input |
|||
type="number" |
|||
v-model="formData.scaleTotal" |
|||
:disabled="disabled" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入可容纳人数" |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="所属组织" prop="gridId"> |
|||
<el-select v-model="formData.gridId" class="u-item-width-normal" :disabled="disabled" placeholder="全部" size="small" clearable> |
|||
<el-option v-for="item in gridList" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="场所类别" prop="placeCategory"> |
|||
<el-select v-model="formData.placeCategory" :disabled="disabled" placeholder="请选择" size="small" clearable class="u-item-width-normal"> |
|||
<el-option v-for="item in placeCategoryArray" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="6"> |
|||
<el-form-item label="负责人" prop="personInCharge"> |
|||
<el-input v-model="formData.personInCharge" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="联系电话" prop="mobile"> |
|||
<el-input v-model="formData.mobile" :disabled="disabled" class="u-item-width-normal" size="small" clearable placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="场所地址" prop="address" style="display: block"> |
|||
<el-select |
|||
v-model="formData.address" |
|||
:disabled="disabled" |
|||
filterable |
|||
remote |
|||
:reserve-keyword="true" |
|||
placeholder="请输入关键词" |
|||
:remote-method="remoteMethod" |
|||
:loading="loading" |
|||
> |
|||
<el-option |
|||
v-for="(item, index) in searchOptions" |
|||
@click.native="handleClickKey(index)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<div id="app_event" class="div_map"></div> |
|||
</el-form> |
|||
|
|||
<el-form :inline="false" :model="formData" ref="form" v-if="pageType == 'view'"> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="房屋名称" prop="fullName">{{ formData.fullName }}</el-form-item> |
|||
</el-col> |
|||
<!-- <el-col :span="24"> |
|||
<el-form-item label="" prop="placeCategory"></el-form-item> |
|||
<el-button size="mini" class="diy-button--search" @click="handleTuomin">显示脱敏信息</el-button> |
|||
</el-col> --> |
|||
<el-col :span="24"> |
|||
<el-form-item label="单元号" prop="unitName">{{ formData.unitName ? formData.unitName : '--' }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="门牌号" prop="doorName">{{ formData.doorName }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="房屋编码" prop="coding">{{ formData.coding ? formData.coding : '--' }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="房屋类型" prop="houseTypeName">{{ formData.houseTypeName ? formData.houseTypeName : '--' }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="房屋用途" prop="purposeName">{{ formData.purposeName ? formData.purposeName : '--' }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="房屋状态" prop="rentName">{{ formData.rentName ? formData.rentName : '--' }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="房主姓名" prop="ownerName">{{ formData.ownerName ? formData.ownerName : '--' }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="联系方式" prop="showOwnerPhone">{{ formData.showOwnerPhone ? formData.showOwnerPhone : '--' }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="房主身份证" prop="showOwnerIdCard">{{ formData.showOwnerIdCard ? formData.showOwnerIdCard : '--' }}</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="备注" prop="remark">{{ formData.remark ? formData.remark : '--' }}</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- <div id="app_event" class="div_map"></div> --> |
|||
</el-form> |
|||
</div> |
|||
<div class="div_btn" v-if="pageType != 'view'"> |
|||
<el-button size="small" @click="handleCancle">取 消</el-button> |
|||
<!-- <el-button size="small" @click="resetData" v-if="pageType != 'view'">重置</el-button> --> |
|||
<el-button size="small" type="primary" :disabled="btnDisable" @click="handleComfirm">保 存</el-button> |
|||
</div> |
|||
<!-- <div class="recordBox"><record v-if="pageType != 'add' && detailId" :formType="pageType" :id="detailId" :info="{ agencyId: agencyId }"></record></div> --> |
|||
</div> |
|||
|
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="handleCancle">关 闭</el-button> |
|||
<!-- <el-button type="primary" @click="handleComfirm">确 定</el-button> --> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { isMobile } from '@/utils/validate'; |
|||
import { mapGetters } from 'vuex'; |
|||
import { Loading } from 'element-ui'; // 引入Loading服务 |
|||
import { requestPost, requestGet } from '@/js/dai/request'; |
|||
import daiMap from '@/utils/dai-map'; |
|||
import nextTick from 'dai-js/tools/nextTick'; |
|||
import record from './record'; |
|||
let loading; // 加载动画 |
|||
let map; |
|||
var search; |
|||
var markers; |
|||
var infoWindowList; |
|||
var geocoder; // 新建一个正逆地址解析类 |
|||
|
|||
export default { |
|||
props: { |
|||
dialogVisible: { |
|||
type: Boolean, |
|||
default: '' |
|||
}, |
|||
defaultData: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
pageType: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
detailId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
detailData: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
|
|||
data() { |
|||
let checkNum = (rule, value, callback) => { |
|||
if (!value) { |
|||
return callback(new Error('场所规模不能为空')); |
|||
} |
|||
setTimeout(() => { |
|||
if (!Number.isInteger(value)) { |
|||
callback(new Error('请输入数字值')); |
|||
} |
|||
}, 1000); |
|||
}; |
|||
let checkMObile = (rule, value, callback) => { |
|||
if (value === '') { |
|||
callback(new Error('请输入联系电话')); |
|||
} else { |
|||
if (!isMobile(value)) { |
|||
callback(new Error('联系电话格式不正确')); |
|||
} |
|||
callback(); |
|||
} |
|||
}; |
|||
return { |
|||
agencyObj: {}, |
|||
view_real_data: false, |
|||
btnDisable: false, |
|||
user: '', |
|||
agencyId: '', |
|||
gridList: [], //所属网格list--场所区域 |
|||
placeTypeList: [], //场所类型 |
|||
resultArray: [{ value: '0', label: '合格' }, { value: '1', label: '不合格' }], |
|||
placeCategoryArray: [{ value: '0', label: '九小场所' }, { value: '1', label: '企事业单位' }], |
|||
list: {}, |
|||
formData: { |
|||
placeOrgName: '', |
|||
scaleTotal: '', |
|||
gridId: '', |
|||
latestResult: '', |
|||
placeCategory: '', |
|||
placeType: '', |
|||
personInCharge: '', |
|||
address: '', |
|||
mobile: '', |
|||
// result: '', |
|||
remark: '' |
|||
}, |
|||
dataRule: { |
|||
placeOrgName: [{ required: true, message: '场所名称不能为空', trigger: 'bulr' }], |
|||
placeCategory: [{ required: true, message: '场所类别不能为空', trigger: 'bulr' }], |
|||
placeType: [{ required: true, message: '场所类型不能为空', trigger: 'bulr' }], |
|||
result: [{ required: true, message: '巡查结果不能为空', trigger: 'bulr' }], |
|||
scaleTotal: [{ required: true, validator: checkNum, trigger: 'bulr' }], |
|||
gridId: [{ required: true, message: '所属组织不能为空', trigger: 'bulr' }], |
|||
personInCharge: [{ required: true, message: '负责人不能为空', trigger: 'bulr' }], |
|||
mobile: [{ required: true, validator: checkMObile, trigger: 'blur' }], |
|||
address: [{ required: true, message: '场所地址不能为空', trigger: 'blur' }] |
|||
// content: [{ required: true, message: '详细说明不能为空', trigger: 'bulr' }, { max: 1000, message: '不能超出1000个字符', trigger: 'blur' }] |
|||
}, |
|||
//地图 |
|||
loading: false, |
|||
|
|||
searchValue: '', |
|||
searchOptions: [] |
|||
}; |
|||
}, |
|||
watch: {}, |
|||
components: { record }, |
|||
created() {}, |
|||
async mounted() { |
|||
this.user = this.$store.state.user; |
|||
this.agencyId = this.user.agencyId; |
|||
this.startLoading(); |
|||
this.loadGrid(); |
|||
this.loadplaceType(); |
|||
if (this.pageType != 'add') { |
|||
this.getDetail(); |
|||
} else { |
|||
// this.initMap(); |
|||
} |
|||
await this.endLoading(); |
|||
this.endLoading(); |
|||
}, |
|||
|
|||
methods: { |
|||
async handleTuomin() { |
|||
const url = '/data/aggregator/epmetuser/detailByType'; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
id: this.detailId, |
|||
type: 'checkHouse' |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.$set(this.formData, 'showOwnerPhone', data.mobile); |
|||
this.$set(this.formData, 'showOwnerIdCard', data.idCard); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async loadGrid() { |
|||
const url = '/gov/org/customergrid/gridoption'; |
|||
let params = { |
|||
agencyId: this.agencyId, |
|||
purpose: 'query' |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.gridList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
//场所类型 |
|||
async loadplaceType() { |
|||
const url = '/sys/dict/data/dictlist'; |
|||
|
|||
let params = { |
|||
dictType: 'ic_enterprise_place_type' |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.placeTypeList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getDetail() { |
|||
const url = `/gov/org/ichouse/${this.detailId}`; |
|||
const { data, code, msg } = await requestGet(url); |
|||
if (code === 0) { |
|||
this.formData = { ...data }; |
|||
this.houseType = this.formData.houseType; |
|||
this.purpose = this.formData.purpose; |
|||
this.rentFlag = parseInt(this.formData.rentFlag); |
|||
|
|||
// this.initMap(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
handleComfirm() { |
|||
this.save(); |
|||
}, |
|||
async handleAdd() { |
|||
// this.btnDisable = true; |
|||
// setTimeout(() => { |
|||
// this.btnDisable = false; |
|||
// }, 10000); |
|||
// nextTick(1000); |
|||
// const form = new Promise((resolve, reject) => { |
|||
// this.$refs['form'].validate(valid => { |
|||
// if (valid) resolve(); |
|||
// }); |
|||
// }); |
|||
// const form1 = new Promise((resolve, reject) => { |
|||
// this.$refs['form1'].validate(valid => { |
|||
// if (valid) resolve(); |
|||
// }); |
|||
// }); |
|||
// Promise.all([form1, form]) |
|||
// .then(() => { |
|||
// this.addFuwu(); |
|||
// }) |
|||
// .catch(() => { |
|||
// app.util.validateRule(messageObj); |
|||
// this.btnDisable = false; |
|||
// }); |
|||
}, |
|||
|
|||
async save() { |
|||
this.formData.agencyId = this.agencyId; |
|||
var url = ''; |
|||
var params = {}; |
|||
url = '/gov/org/enterprise/addOrUpdate'; |
|||
params = { ...this.formData }; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$message.success('操作成功'); |
|||
|
|||
this.handleCancle(); |
|||
// // this.resetData(); |
|||
// this.$emit('handleComfirm'); |
|||
} else if (code >= 8000) { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleCancle() { |
|||
// this.resetData(); |
|||
this.$emit('handleClose'); |
|||
}, |
|||
resetData() { |
|||
this.$refs.form.resetFields(); |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading() { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}); |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading() { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close(); |
|||
} |
|||
}, // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap() { |
|||
let { latitude, longitude } = this.$store.state.user; |
|||
|
|||
if (this.formData.latitude && this.formData.longitude) { |
|||
latitude = this.formData.latitude; |
|||
longitude = this.formData.longitude; |
|||
} |
|||
if (!latitude || latitude == '' || latitude == '0') { |
|||
latitude = 39.9088810666821; |
|||
longitude = 116.39743841556731; |
|||
} |
|||
|
|||
this.$nextTick(() => { |
|||
map = new daiMap( |
|||
document.getElementById('app_event'), |
|||
{ latitude, longitude }, |
|||
{ |
|||
zoom: 16.2, // 设置地图缩放级别 |
|||
pitch: 43.5, // 设置俯仰角 |
|||
rotation: 45 // 设置地图旋转角度 |
|||
} |
|||
); |
|||
// 监听地图平移结束 |
|||
map.on('dragend', e => { |
|||
this.handleMoveCenter(e); |
|||
}); |
|||
|
|||
map.setCenter(latitude, longitude); |
|||
if (this.formData.latitude) { |
|||
map.setMarker(latitude, longitude); |
|||
} |
|||
}); |
|||
}, |
|||
async handleMoveCenter() { |
|||
//修改地图中心点 |
|||
const { lat, lng } = map.getCenter(); |
|||
this.formData.latitude = lat; |
|||
this.formData.longitude = lng; |
|||
map.setMarker(lat, lng); |
|||
|
|||
let { msg, data } = await map.getAddress(lat, lng); |
|||
if (msg == 'success') { |
|||
this.formData.address = data.address; |
|||
this.searchValue = data.address; |
|||
this.searchOptions = []; |
|||
} |
|||
}, |
|||
async remoteMethod(query) { |
|||
if (query !== '') { |
|||
this.loading = true; |
|||
const { msg, data } = await map.searchNearby(query); |
|||
this.loading = false; |
|||
this.resultList = []; |
|||
|
|||
if (msg == 'success' && data.resultList && data.resultList.length > 0) { |
|||
if (data.resultList && data.resultList.length > 0) { |
|||
this.resultList = data.resultList; |
|||
this.searchOptions = this.resultList.map(item => { |
|||
return { value: `${item.id}`, label: `${item.address + item.name}` }; |
|||
}); |
|||
} |
|||
} else { |
|||
this.searchOptions = [ |
|||
{ |
|||
value: '0', |
|||
label: '未检索到结果' |
|||
} |
|||
]; |
|||
} |
|||
} else { |
|||
this.searchOptions = []; |
|||
} |
|||
}, |
|||
handleClickKey(index) { |
|||
let selPosition = this.resultList[index]; |
|||
let lonlat = selPosition.lonlat.split(' '); |
|||
map.setCenter(lonlat[1], lonlat[0]); |
|||
map.setMarker(lonlat[1], lonlat[0]); |
|||
this.formData.latitude = lonlat[1]; |
|||
this.formData.longitude = lonlat[0]; |
|||
this.formData.address = selPosition.address + selPosition.name; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/modules/management/form-main.scss'; |
|||
@import '@/assets/scss/modules/management/form.scss'; |
|||
// @import '@/assets/scss/modules/visual/a_customize.scss'; |
|||
.div_tuomin { |
|||
position: absolute; |
|||
top: 25px; |
|||
right: 40px; |
|||
} |
|||
/deep/.el-dialog__header { |
|||
padding: 30px 20px 10px 30px; |
|||
font-size: 18px; |
|||
font-family: PingFang SC; |
|||
font-weight: normal; |
|||
color: #333; |
|||
} |
|||
/deep/.el-dialog__body { |
|||
padding:30px 0px 30px 90px; |
|||
} |
|||
/deep/.el-dialog__footer{text-align: center;} |
|||
/deep/.el-form { |
|||
.el-form-item { |
|||
position: relative; |
|||
margin-bottom: 12px; |
|||
.el-form-item__label { |
|||
font-size: 15px; |
|||
padding-left: 15px; |
|||
&::before { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 12px; |
|||
content: ''; |
|||
display: block; |
|||
width: 7px; |
|||
height: 7px; |
|||
background: #0c81fe; |
|||
border-radius: 3px; |
|||
} |
|||
} |
|||
.el-form-item__content { |
|||
font-size: 15px; |
|||
} |
|||
} |
|||
} |
|||
/deep/.dialog-h-content2 { |
|||
max-height: calc(83vh - 130px); |
|||
box-sizing: border-box; |
|||
padding: 0 10px; |
|||
overflow: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,626 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="dialogVisible" width="1180px" :before-close="handleCancle" top="5vh"> |
|||
<span slot="title"> |
|||
<span v-if="pageType == 'add'">新增</span> |
|||
<span v-if="pageType == 'edit'">修改</span> |
|||
<span v-if="pageType == 'view'">更多信息</span> |
|||
</span> |
|||
<div> |
|||
<div class="dialog-h-content2 scroll-h"> |
|||
<div v-if="view_real_data" class="div_tuomin" style="margin-top: 20px;"> |
|||
<el-button size="mini" class="diy-button--search" @click="handleTuomin">显示脱敏信息</el-button> |
|||
</div> |
|||
<el-form :inline="false" :model="formData" ref="form" v-if="pageType == 'view'"> |
|||
<template v-for="(fieldSubList, index) in fieldList"> |
|||
<el-row> |
|||
<!-- :key="'fieldSubList' + index" --> |
|||
<el-col :span="8"> |
|||
<div v-if="index == 0"> |
|||
<el-form-item label="所属网格">{{ detailData.gridName }}</el-form-item> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div v-if="index == 0"> |
|||
<el-form-item label="所属小区">{{ detailData.villageName }}</el-form-item> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div v-if="index == 0"> |
|||
<el-form-item label="所属楼栋">{{ detailData.buildName }}</el-form-item> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div v-if="index == 0"> |
|||
<el-form-item label="所属家庭">{{ detailData.doorName }}</el-form-item> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<template v-for="field in fieldSubList"> |
|||
<el-col :span="8"> |
|||
<el-form-item :label="field.label"> |
|||
<span v-if="field.columnName === 'MOBILE' || field.columnName === 'ID_CARD'">{{ info[field.columnName] || '--' }}</span> |
|||
<span v-else-if="field.itemType == 'select' || field.itemType == 'radio' || field.itemType == 'checkbox' || field.itemType == 'cascader'"> |
|||
{{ info[field.columnName] == null ? '--' : getOptionLabel(field.options, info[field.columnName], field.itemType) }} |
|||
</span> |
|||
<span v-else>{{ info[field.columnName] == null ? '--' : info[field.columnName] }}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</template> |
|||
</el-row> |
|||
<div class="line"></div> |
|||
</template> |
|||
</el-form> |
|||
|
|||
<div class="tabs"> |
|||
<div class="tab-btn" @click="subStartGroupIndex" v-if="groupList.length > 9"><img src="@/assets/img/shuju/people/arrow-double-left.png" /></div> |
|||
<div |
|||
v-show="index >= startGroupIndex && index < startGroupIndex + 9" |
|||
class="tab" |
|||
:class="groupIndex % groupList.length == index ? 'z-on' : ''" |
|||
:key="'tab' + index" |
|||
@click="groupIndex = index" |
|||
v-for="(item, index) in groupList" |
|||
> |
|||
{{ item.label }} |
|||
</div> |
|||
<div class="tab-btn" @click="addStartGroupIndex" v-if="groupList.length > 9"><img src="@/assets/img/shuju/people/arrow-double-right.png" /></div> |
|||
</div> |
|||
|
|||
<div :key="'group' + index" v-show="groupIndex % groupList.length == index" v-for="(group, index) in groupList"> |
|||
<div v-if="group.tableName == 'ic_resi_demand' && Array.isArray(allInfo.ic_resi_demand) && allInfo.ic_resi_demand.length > 0"> |
|||
<div class="list" :key="'ic_resi_demand' + infoIndex" v-for="(infoItem, infoIndex) in allInfo.ic_resi_demand"> |
|||
<div class="item" :key="field.itemId" v-for="field in group.itemList"> |
|||
<span class="item-field">{{ field.label }}：</span> |
|||
<span v-if="field.itemType == 'select' || field.itemType == 'radio' || field.itemType == 'checkbox' || field.itemType == 'cascader'"> |
|||
{{ infoItem[field.columnName] == null ? '--' : getOptionLabel(field.options, infoItem[field.columnName], field.itemType) }} |
|||
</span> |
|||
|
|||
<span v-else>{{ infoItem[field.columnName] == null ? '--' : infoItem[field.columnName] }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div v-else-if="group.tableName == 'ic_hs'" style="margin-top: 10px; padding: 0 20px"> |
|||
<el-table class="table" :data="natList" border height="400" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" style="width: 100%"> |
|||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50"></el-table-column> |
|||
|
|||
<el-table-column prop="testTime" header-align="center" align="center" label="检测时间" width="150"></el-table-column> |
|||
<el-table-column prop="address" header-align="center" align="center" label="检测机构" show-overflow-tooltip min-width="180"></el-table-column> |
|||
<el-table-column prop="result" header-align="center" align="center" label="检测结果" width="240"></el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div v-else-if="group.tableName == 'ic_xc'" style="margin-top: 10px; padding: 0 20px"> |
|||
<el-table class="table" :data="tripList" border height="400" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" style="width: 100%"> |
|||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50"></el-table-column> |
|||
|
|||
<el-table-column prop="fromRegion" header-align="center" align="center" label="来自地区" show-overflow-tooltip min-width="100"></el-table-column> |
|||
<el-table-column prop="arrivalTime" header-align="center" align="center" label="来到本地时间" width="140"></el-table-column> |
|||
<el-table-column prop="leaveTime" header-align="center" align="center" label="离开本地时间" width="140"></el-table-column> |
|||
<el-table-column prop="noticeTime" header-align="center" align="center" label="最近一次通知时间" width="140"></el-table-column> |
|||
<el-table-column prop="remark" header-align="center" align="center" label="备注" show-overflow-tooltip width="120"></el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div v-else-if="group.tableName == 'ic_ym'" style="margin-top: 10px; padding: 0 20px"> |
|||
<el-table |
|||
v-if="vaccineList" |
|||
class="table" |
|||
:data="vaccineList" |
|||
border |
|||
height="400" |
|||
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50"></el-table-column> |
|||
|
|||
<el-table-column prop="vaccinateTime" header-align="center" align="center" label="接种时间" show-overflow-tooltip min-width="100"></el-table-column> |
|||
<el-table-column prop="address" header-align="center" align="center" label="接种地点"></el-table-column> |
|||
<el-table-column prop="manufactor" header-align="center" align="center" label="疫苗厂家"></el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div class="list" v-else> |
|||
<div class="item" :class="{ 'z-long': group.itemList.length == 1 }" :key="field.itemId" v-for="field in group.itemList"> |
|||
<span class="item-field">{{ field.label }}：</span> |
|||
<span v-if="field.itemType == 'select' || field.itemType == 'radio' || field.itemType == 'checkbox' || field.itemType == 'cascader'"> |
|||
{{ |
|||
!allInfo[group.tableName] || allInfo[group.tableName][0][field.columnName] == null |
|||
? '--' |
|||
: getOptionLabel(field.options, allInfo[group.tableName][0][field.columnName], field.itemType) |
|||
}} |
|||
</span> |
|||
|
|||
<span v-else> |
|||
{{ !allInfo[group.tableName] || allInfo[group.tableName][0][field.columnName] == null ? '--' : allInfo[group.tableName][0][field.columnName] }} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="handleCancle">关 闭</el-button> |
|||
<!-- <el-button type="primary" @click="handleComfirm">确 定</el-button> --> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptCard from '@/views/modules/visual/cpts/card'; |
|||
import { requestPost } from '@/js/dai/request'; |
|||
|
|||
export default { |
|||
name: 'peopleMore', |
|||
props: { |
|||
dialogVisible: { |
|||
type: Boolean, |
|||
default: '' |
|||
}, |
|||
pageType: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
userId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
detailData: { |
|||
type: Object, |
|||
default: '' |
|||
} |
|||
}, |
|||
|
|||
components: { |
|||
cptCard |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
view_real_data: false, |
|||
formData: {}, |
|||
customerId: '', |
|||
isXiaozhaizi: false, |
|||
|
|||
fieldList: [], |
|||
groupList: [], |
|||
groupIndex: 0, |
|||
startGroupIndex: 0, |
|||
info: {}, |
|||
allInfo: {}, |
|||
|
|||
xiaoquList: [], |
|||
louList: [], |
|||
danyuanList: [], |
|||
homeList: [], |
|||
natList: [], // 核酸检测 |
|||
tripList: [], // 行程信息 |
|||
|
|||
vaccineList: [] |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
isShundeju() { |
|||
return this.$store.state.user.customerId == '1550309684576591874'; |
|||
}, |
|||
|
|||
xiaoquName() { |
|||
const { |
|||
xiaoquList, |
|||
info: { VILLAGE_ID } |
|||
} = this; |
|||
if (Array.isArray(xiaoquList) && xiaoquList.length > 0 && VILLAGE_ID) { |
|||
let item = xiaoquList.find(item => item.value == VILLAGE_ID); |
|||
if (item) { |
|||
return item.label; |
|||
} |
|||
} |
|||
return ''; |
|||
}, |
|||
louName() { |
|||
const { |
|||
louList, |
|||
info: { BUILD_ID } |
|||
} = this; |
|||
if (Array.isArray(louList) && louList.length > 0 && BUILD_ID) { |
|||
let item = louList.find(item => item.value == BUILD_ID); |
|||
if (item) { |
|||
return item.label; |
|||
} |
|||
} |
|||
return ''; |
|||
}, |
|||
danyuanName() { |
|||
const { |
|||
danyuanList, |
|||
info: { UNIT_ID } |
|||
} = this; |
|||
if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) { |
|||
let item = danyuanList.find(item => item.value == UNIT_ID); |
|||
if (item) { |
|||
return item.label; |
|||
} |
|||
} |
|||
return ''; |
|||
}, |
|||
danyuanName() { |
|||
const { |
|||
danyuanList, |
|||
info: { UNIT_ID } |
|||
} = this; |
|||
if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) { |
|||
let item = danyuanList.find(item => item.value == UNIT_ID); |
|||
if (item) { |
|||
return item.label; |
|||
} |
|||
} |
|||
return ''; |
|||
}, |
|||
homeName() { |
|||
const { |
|||
homeList, |
|||
info: { HOME_ID } |
|||
} = this; |
|||
if (Array.isArray(homeList) && homeList.length > 0 && HOME_ID) { |
|||
let item = homeList.find(item => item.value == HOME_ID); |
|||
if (item) { |
|||
return item.label; |
|||
} |
|||
} |
|||
return ''; |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
userId() { |
|||
this.getApiData(); |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
//磐石街道：1580460084738760705 |
|||
//烟台客户id: 1535072605621841922 |
|||
//小寨子客户id: 1536638904600752130 |
|||
this.customerId = localStorage.getItem('customerId'); |
|||
|
|||
this.isXiaozhaizi = false; |
|||
|
|||
if (this.customerId === '1536638904600752130') { |
|||
this.isXiaozhaizi = true; |
|||
} |
|||
this.getApiData(); |
|||
}, |
|||
|
|||
methods: { |
|||
async handleTuomin() { |
|||
const url = '/data/aggregator/epmetuser/detailByType'; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
id: this.userId, |
|||
type: 'checkIcResiUser' |
|||
}); |
|||
console.log(data); |
|||
if (code === 0) { |
|||
this.$set(this.info, 'MOBILE', data.mobile); |
|||
this.$set(this.info, 'ID_CARD', data.idCard); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
addStartGroupIndex() { |
|||
const { startGroupIndex, groupList } = this; |
|||
if (startGroupIndex < groupList.length - 9) { |
|||
this.startGroupIndex = startGroupIndex + 1; |
|||
} else { |
|||
this.startGroupIndex = groupList.length - 9; |
|||
} |
|||
}, |
|||
subStartGroupIndex() { |
|||
const { startGroupIndex, groupList } = this; |
|||
if (startGroupIndex > 0) { |
|||
this.startGroupIndex = startGroupIndex - 1; |
|||
} else { |
|||
this.startGroupIndex = 0; |
|||
} |
|||
}, |
|||
handleCancle() { |
|||
// this.resetData(); |
|||
this.$emit('handleClose'); |
|||
}, |
|||
|
|||
async getApiData() { |
|||
await this.getField(); |
|||
await this.getInfo(); |
|||
this.getDetailList(); |
|||
this.getXiaoquList(); |
|||
this.getLouList(); |
|||
this.getDanyuanList(); |
|||
this.getHomeList(); |
|||
}, |
|||
|
|||
getOptionLabel(options, value, type = '') { |
|||
if (Array.isArray(options)) { |
|||
let valueArr = value.split(','); |
|||
if (type == 'cascader') { |
|||
let finalValue = []; |
|||
this.getNodePath(options, value, finalValue); |
|||
return finalValue.join('-'); |
|||
} else { |
|||
return valueArr |
|||
.map(val => { |
|||
let item = options.find(item => item.value == val); |
|||
if (item && item.label) { |
|||
return item.label; |
|||
} |
|||
return '--'; |
|||
}) |
|||
.join('、'); |
|||
} |
|||
} |
|||
return '--'; |
|||
}, |
|||
|
|||
getNodePath(node, val, path) { |
|||
// node:所有数据，val:后台返回的id, path:要渲染的数组id |
|||
for (let i = 0; i < node.length; i++) { |
|||
const ele = node[i]; |
|||
if (ele.value === val) { |
|||
path.push(ele.label); |
|||
return path; |
|||
} else if (ele.children && ele.children.length > 0) { |
|||
if (ele.children.some(row => row.value === val)) { |
|||
path.unshift(ele.label); |
|||
this.getNodePath(ele.children, val, path); |
|||
} else { |
|||
this.getNodePath(ele.children, val, path); |
|||
} |
|||
} |
|||
} |
|||
return path; |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getField() { |
|||
const url = '/oper/customize/icform/getcustomerform'; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
dynamic: true, |
|||
formCode: 'resi_base_info' |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.groupList = data.groupList; |
|||
this.fieldList = (function(arr) { |
|||
let col = []; |
|||
let ele = []; |
|||
for (let i = 0; i < arr.length; i++) { |
|||
let item = arr[i]; |
|||
if (item.itemType == 'divider' || i == arr.length - 1) { |
|||
col.push([...ele]); |
|||
ele = []; |
|||
} else { |
|||
ele.push(item); |
|||
} |
|||
} |
|||
return col; |
|||
})(data.itemList); |
|||
|
|||
this.fieldList.forEach((subList, index) => { |
|||
subList.forEach(async (item, subIndex) => { |
|||
if (item.optionSourceType == 'remote' && item.optionSourceValue) { |
|||
this.fieldList[index][subIndex].options = await this.getOptions(item.optionSourceValue); |
|||
} |
|||
}); |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getInfo() { |
|||
const url = '/epmetuser/icresiuser/detail'; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
icResiUserId: this.userId, |
|||
formCode: 'resi_base_info' |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.info = data.ic_resi_user[0]; |
|||
this.allInfo = data; |
|||
|
|||
this.fieldList.forEach((subList, index) => { |
|||
subList.forEach((item, subIndex) => { |
|||
if (item.itemType == 'radio' && item.childGroup && this.allInfo[item.tableName] && this.allInfo[item.tableName][0][item.columnName] == '1') { |
|||
this.groupList = [...this.groupList, item.childGroup]; |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
await Promise.all( |
|||
this.groupList.map((subList, index) => { |
|||
return Promise.all( |
|||
subList.itemList.map(async (item, subIndex) => { |
|||
if (item.optionSourceType == 'remote' && item.optionSourceValue) { |
|||
this.groupList[index].itemList[subIndex].options = await this.getOptions(item.optionSourceValue); |
|||
} |
|||
}) |
|||
); |
|||
}) |
|||
); |
|||
console.log('44444444', this.groupList); |
|||
let arr = [ |
|||
{ |
|||
groupId: 'hs123', |
|||
itemList: [], |
|||
label: '核酸检测信息', |
|||
sort: 998, |
|||
supportAdd: false, |
|||
tableName: 'ic_hs' |
|||
} |
|||
]; |
|||
|
|||
if (!this.isShundeju && !this.isXiaozhaizi) { |
|||
arr = [ |
|||
...arr, |
|||
{ |
|||
groupId: 'hs124', |
|||
itemList: [], |
|||
label: '行程信息', |
|||
sort: 999, |
|||
supportAdd: false, |
|||
tableName: 'ic_xc' |
|||
}, |
|||
{ |
|||
groupId: 'hs125', |
|||
itemList: [], |
|||
label: '疫苗信息', |
|||
sort: 999, |
|||
supportAdd: false, |
|||
tableName: 'ic_ym' |
|||
} |
|||
]; |
|||
this.groupList = [...this.groupList, ...arr]; |
|||
} else { |
|||
this.groupList = [...arr, ...this.groupList]; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getOptions(url) { |
|||
if (!url) return []; |
|||
|
|||
const { data, code, msg } = await requestPost(url, {}); |
|||
|
|||
if (code === 0) { |
|||
return data; |
|||
} else { |
|||
return []; |
|||
} |
|||
}, |
|||
|
|||
async getXiaoquList() { |
|||
const url = '/gov/org/icneighborhood/neighborhoodoption'; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
agencyId: this.info.AGENCY_ID, |
|||
gridId: this.info.GRID_ID |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.xiaoquList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getLouList() { |
|||
const url = '/gov/org/icbuilding/buildingoption'; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
neighborHoodId: this.info.VILLAGE_ID |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.louList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getDanyuanList() { |
|||
const url = '/gov/org/icbuildingunit/unitoption'; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
buildingId: this.info.BUILD_ID |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.danyuanList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getHomeList() { |
|||
const url = '/gov/org/ichouse/houseoption'; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
unitId: this.info.UNIT_ID |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.homeList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getDetailList() { |
|||
const url = '/epmetuser/epidemicPrevention/info'; |
|||
let params = { |
|||
id: this.userId |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
const { vaccineList, natList, tripList } = data; |
|||
this.vaccineList = vaccineList; |
|||
this.natList = natList; |
|||
this.tripList = tripList; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/people-info2.scss" scoped></style> |
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/modules/management/form-main.scss'; |
|||
@import '@/assets/scss/modules/management/form.scss'; |
|||
/deep/.el-dialog__header { |
|||
padding: 30px 20px 10px 30px; |
|||
font-size: 22px; |
|||
font-family: PingFang SC; |
|||
font-weight: 800; |
|||
color: #333; |
|||
} |
|||
/deep/.el-dialog__body { |
|||
padding:30px 0px 30px 50px; |
|||
} |
|||
/deep/.el-form { |
|||
.el-form-item { |
|||
position: relative; |
|||
.el-form-item__label { |
|||
font-size: 18px; |
|||
padding-left: 15px; |
|||
&::before { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 12px; |
|||
content: ''; |
|||
display: block; |
|||
width: 7px; |
|||
height: 7px; |
|||
background: #ddd; |
|||
border-radius: 3px; |
|||
} |
|||
} |
|||
.el-form-item__content { |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
} |
|||
.line { |
|||
margin: 20px auto; |
|||
width: 900px; |
|||
height: 1px; |
|||
border: 1px dashed #ddd; |
|||
} |
|||
/deep/.dialog-h-content2 { |
|||
max-height: calc(83vh - 130px); |
|||
box-sizing: border-box; |
|||
padding: 0 10px; |
|||
overflow: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,493 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
<div> |
|||
<div class="div_search"> |
|||
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'80px'"> |
|||
<div> |
|||
<el-form-item label="所属组织" prop="gridId"> |
|||
<el-cascader |
|||
ref="myCascader" |
|||
filterable |
|||
v-model="formData.orgId" |
|||
:options="orgOptions" |
|||
:props="orgOptionProps" |
|||
clearable |
|||
:show-all-levels="false" |
|||
@change="handleChangeAgency" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="上报时间" prop="startTime"> |
|||
<el-date-picker |
|||
v-model="formData.startDate" |
|||
:picker-options="startPickerOptions" |
|||
class="item_width_2" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间" |
|||
></el-date-picker> |
|||
<span class="data-tag">至</span> |
|||
<el-date-picker |
|||
v-model="formData.endDate" |
|||
:picker-options="endPickerOptions" |
|||
class="item_width_2 data-tag" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
value="yyyy-MM-dd" |
|||
placeholder="结束时间" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
<el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<div class="div_table"> |
|||
<div class="div_table_title">社区活跃情况</div> |
|||
<div class="census_searchcensus2"> |
|||
<div class="census_searchcensus_box"> |
|||
<img src="../../../assets/img/census/活跃.png" /> |
|||
<div> |
|||
<h2>{{ censusData.activityCount }}</h2> |
|||
<h3>社区活跃数量</h3> |
|||
</div> |
|||
</div> |
|||
<el-button size="small" class="diy-button--output" @click="handleExport(1)">导出</el-button> |
|||
</div> |
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" |
|||
class="table" |
|||
style="width: 100%" |
|||
:height="maxTableHeight" |
|||
> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="agencyName" align="center" label="组织名称" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="loginCount" label="登录次数" min-width="140" align="center" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="accountActivityCount" label="活跃账号数" align="center" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="accountCount" align="center" width="110" label="总账号数" :show-overflow-tooltip="true"></el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[10, 20, 50, 100, 200]" |
|||
:page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total" |
|||
></el-pagination> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="div_table"> |
|||
<div class="div_table_title">社区不活跃情况</div> |
|||
<div class="census_searchcensus2"> |
|||
<div class="census_searchcensus_box"> |
|||
<img src="../../../assets/img/census/不活跃.png" /> |
|||
<div> |
|||
<h2>{{ censusData.inactivityCount }}</h2> |
|||
<h3>社区不活跃数量</h3> |
|||
</div> |
|||
</div> |
|||
<el-button size="small" class="diy-button--output" @click="handleExport(0)">导出</el-button> |
|||
</div> |
|||
<el-table |
|||
:data="tableData2" |
|||
border |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" |
|||
class="table" |
|||
style="width: 100%" |
|||
:height="maxTableHeight" |
|||
> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="agencyName" align="center" label="组织名称" :show-overflow-tooltip="true"></el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
@size-change="handleSizeChange2" |
|||
@current-change="handleCurrentChange2" |
|||
:current-page.sync="pageNo2" |
|||
:page-sizes="[10, 20, 50, 100, 200]" |
|||
:page-size="parseInt(pageSize2)" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total2" |
|||
></el-pagination> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from '@/js/dai/request'; |
|||
import nextTick from 'dai-js/tools/nextTick'; |
|||
import { mapGetters } from 'vuex'; |
|||
|
|||
import axios from 'axios'; |
|||
|
|||
export default { |
|||
components: {}, |
|||
|
|||
data() { |
|||
let endDisabledDate = time => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
if (this.formData.startTime) { |
|||
let startTime = new Date(this.formData.startTime); |
|||
return time.getTime() > nowData || time.getTime() < startTime || time.getTime() === startTime; |
|||
} else { |
|||
return time.getTime() > nowData; |
|||
} |
|||
}; |
|||
let startDisabledDate = time => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
return time.getTime() > nowData; |
|||
}; |
|||
|
|||
return { |
|||
tableLoading: false, |
|||
pageType: 'list', // 列表list 新增add 处理dispose 详情info |
|||
user: {}, |
|||
agencyId: '', |
|||
gridList: [], //所属网格list--场所区域 |
|||
agencyIdArray: [], |
|||
orgOptions: [], |
|||
orgOptionProps: { |
|||
// multiple: false, |
|||
// value: 'agencyId', |
|||
// label: 'agencyName', |
|||
// children: 'subAgencyList', |
|||
// checkStrictly: true |
|||
multiple: false, |
|||
checkStrictly: true, |
|||
emitPath: false, |
|||
children: 'subAgencyList', |
|||
label: 'agencyName', |
|||
value: 'agencyId' |
|||
}, |
|||
tableData: [], |
|||
tableData2: [], |
|||
formData: { |
|||
orgId: '', |
|||
startDate: '', |
|||
endDate: '' |
|||
}, |
|||
orgId: '', |
|||
cateOptions: [], |
|||
eventTypeCheck: [], |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem('pageSize') || 20, |
|||
pageNo2: 1, |
|||
pageSize2: window.localStorage.getItem('pageSize2') || 20, |
|||
total: 0, |
|||
total2: 0, |
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
censusData: {} |
|||
}; |
|||
}, |
|||
computed: { |
|||
maxTableHeight() { |
|||
return this.$store.state.inIframe ? this.clientHeight - 439 + this.iframeHeigh : this.clientHeight - 439; |
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
watch: { |
|||
'formData.endDate': function(val) { |
|||
if (val && val != '') { |
|||
let arrayTemp = val.split(' '); |
|||
this.formData.endDate = arrayTemp[0] + ' 23:59:59'; |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
console.log(this.$store.state); |
|||
this.user = this.$store.state.user; |
|||
this.agencyId = this.user.agencyId; |
|||
this.orgId = this.agencyId; |
|||
this.getOrgTreeList(); |
|||
this.getTableData(); |
|||
this.getTableData2(); |
|||
this.getCountLevel(); |
|||
}, |
|||
methods: { |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
window.localStorage.setItem('pageSize', val); |
|||
this.getTableData(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
handleSizeChange2(val) { |
|||
this.pageSize2 = val; |
|||
window.localStorage.setItem('pageSize2', val); |
|||
this.getTableData2(); |
|||
}, |
|||
handleCurrentChange2(val) { |
|||
this.pageNo2 = val; |
|||
this.getTableData2(); |
|||
}, |
|||
handleChangeAgency(val) { |
|||
let obj = this.$refs['myCascader'].getCheckedNodes()[0].data; |
|||
console.log(obj); |
|||
this.formData.level = obj.level; |
|||
}, |
|||
|
|||
handleSearch(val) { |
|||
let tmp = this.formData.orgId; |
|||
if (!(tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null)) { |
|||
this.orgId = this.agencyId; |
|||
this.formData.level = ''; |
|||
} else { |
|||
this.orgId = this.formData.orgId; |
|||
} |
|||
console.log(this.formData); |
|||
this.pageNo = 1;this.pageNo2 = 1; |
|||
this.getTableData(); |
|||
this.getTableData2(); |
|||
this.getCountLevel(); |
|||
}, |
|||
|
|||
getOrgTreeList() { |
|||
const { user } = this.$store.state; |
|||
this.$http |
|||
.post('gov/org/customeragency/staffinagencylist', {}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
console.log('获取组织树成功', res.data); |
|||
let { agencyList, subAgencyList } = res.data; |
|||
const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }]; |
|||
this.orgOptions = this.deepTree(_arr); |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误'); |
|||
}); |
|||
}, |
|||
|
|||
async handleExport(type) { |
|||
const url = '/gov/org/staffLoginLog/accountActivityInfo-export'; |
|||
|
|||
const { data, code, msg } = await requestPost(url, param); |
|||
|
|||
axios({ |
|||
url: window.SITE_CONFIG['apiURL'] + url, |
|||
method: 'post', |
|||
data: { |
|||
isActivity: type, |
|||
orgId: this.orgId, |
|||
startDate: this.formData.startDate, |
|||
endDate: this.formData.endDate |
|||
}, |
|||
responseType: 'blob' |
|||
}) |
|||
.then(res => { |
|||
let fileName = window.decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]); |
|||
console.log('filename', fileName); |
|||
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }); |
|||
var url = window.URL.createObjectURL(blob); |
|||
var aLink = document.createElement('a'); |
|||
aLink.style.display = 'none'; |
|||
aLink.href = url; |
|||
aLink.setAttribute('download', fileName); |
|||
document.body.appendChild(aLink); |
|||
aLink.click(); |
|||
document.body.removeChild(aLink); //下载完成移除元素 |
|||
window.URL.revokeObjectURL(url); //释放掉blob对象 |
|||
}) |
|||
.catch(err => { |
|||
console.log('获取导出情失败', err); |
|||
return this.$message.error('网络错误'); |
|||
}); |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async handleDispose(row) { |
|||
this.eventId = row.icEventId; |
|||
const url = '/gov/project/icEvent/detail'; |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/detail"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
icEventId: this.eventId |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.eventDetailData = { ...data }; |
|||
this.pageType = 'dispose'; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getCountLevel() { |
|||
const url = '/gov/org/staffLoginLog/getActivityTotal'; |
|||
// const url = 'http://yapi.elinkservice.cn/mock/356/gov/org/staffLoginLog/count-level'; |
|||
let param = { orgId: this.orgId, startDate: this.formData.startDate, endDate: this.formData.endDate }; |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
console.log('getCountLeveldata', data); |
|||
if (code === 0) { |
|||
this.censusData = data; |
|||
console.log('this.censusData ', this.censusData); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getTableData() { |
|||
this.tableLoading = true; |
|||
|
|||
const url = '/gov/org/staffLoginLog/getAccountActivityInfo'; |
|||
|
|||
let param = { |
|||
orgId: this.orgId, |
|||
startDate: this.formData.startDate, |
|||
endDate: this.formData.endDate, |
|||
isActivity: 1, |
|||
isPage: true, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
|
|||
this.tableLoading = false; |
|||
if (code === 0) { |
|||
this.total = data.total || 0; |
|||
this.tableData = data.list |
|||
? data.list.map(item => { |
|||
return item; |
|||
}) |
|||
: []; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getTableData2() { |
|||
this.tableLoading2 = true; |
|||
|
|||
const url = '/gov/org/staffLoginLog/getAccountActivityInfo'; |
|||
|
|||
let param = { |
|||
orgId: this.orgId, |
|||
startDate: this.formData.startDate, |
|||
endDate: this.formData.endDate, |
|||
isActivity: 0, |
|||
isPage: true, |
|||
pageNo: this.pageNo2, |
|||
pageSize: this.pageSize2 |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
|
|||
this.tableLoading2 = false; |
|||
if (code === 0) { |
|||
this.total2 = data.total || 0; |
|||
console.log(this.total2) |
|||
this.tableData2 = data.list |
|||
? data.list.map(item => { |
|||
return item; |
|||
}) |
|||
: []; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
deepTree(arr) { |
|||
if (Array.isArray(arr)) { |
|||
return arr.map(item => { |
|||
return { |
|||
...item, |
|||
subAgencyList: (item.subAgencyList.length > 0 && this.deepTree(item.subAgencyList)) || null |
|||
}; |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/buttonstyle.scss'; |
|||
@import '@/assets/scss/modules/management/list-main.scss'; |
|||
@import '@/assets/scss/modules/shequzhili/event-info.scss'; |
|||
.btnSearch { |
|||
width: 100px; |
|||
height: 36px; |
|||
background: #2195fe; |
|||
box-shadow: 0px 2px 6px 0px rgba(28, 107, 253, 0.31); |
|||
border-radius: 6px; |
|||
color: #fff; |
|||
} |
|||
.div_search { |
|||
.item_width_2 { |
|||
width: 200px; |
|||
} |
|||
} |
|||
// /这里是不一样的,居左，从下对齐 |
|||
.census_searchcensus2 { |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
|
|||
justify-content: space-between; |
|||
align-items: flex-end; |
|||
margin-bottom: 20px; |
|||
margin-top: 20px; |
|||
.census_searchcensus_box { |
|||
align-items: flex-end; |
|||
display: flex; |
|||
img { |
|||
width: 64px; |
|||
height: 64px; |
|||
margin-right: 20px; |
|||
} |
|||
h2 { |
|||
font-size: 28px; |
|||
color: #333333; |
|||
|
|||
text-align: left; |
|||
line-height: 40px; |
|||
margin: 0px; |
|||
} |
|||
h3 { |
|||
font-size: 14px; |
|||
color: #333333; |
|||
|
|||
text-align: left; |
|||
|
|||
margin: 0px; |
|||
font-weight: normal; |
|||
} |
|||
} |
|||
} |
|||
.div_table_title { |
|||
margin-top: 20px; |
|||
line-height: 30px; |
|||
font-size: 20px; |
|||
|
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
.diy-button--output { |
|||
width: 100px; |
|||
height: 38px; |
|||
background: #feb349; |
|||
box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31); |
|||
border-radius: 6px; |
|||
color: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,623 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
<div> |
|||
<div class="div_search"> |
|||
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'80px'"> |
|||
<div> |
|||
<el-form-item label="所属组织" prop="orgId"> |
|||
<el-cascader |
|||
ref="myCascader" |
|||
filterable |
|||
v-model="formData.orgId" |
|||
:options="orgOptions" |
|||
:props="orgOptionProps" |
|||
clearable |
|||
@change="handleChangeAgency" |
|||
:show-all-levels="false" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="上报时间" prop="startDate"> |
|||
<el-date-picker |
|||
v-model="formData.startDate" |
|||
:picker-options="startPickerOptions" |
|||
class="item_width_2" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间" |
|||
></el-date-picker> |
|||
<span class="data-tag">至</span> |
|||
<el-date-picker |
|||
v-model="formData.endDate" |
|||
:picker-options="endPickerOptions" |
|||
class="item_width_2 data-tag" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
value="yyyy-MM-dd" |
|||
placeholder="结束时间" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
<el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button> |
|||
</div> |
|||
</el-form> |
|||
<div class="flex"> |
|||
<div class="census_searchcensus" v-if="censusData.cityCount > -1"> |
|||
<div class="census_searchcensus_box"> |
|||
<img src="../../../assets/img/census/市级.png" /> |
|||
<div> |
|||
<h2>{{ censusData.cityCount }}</h2> |
|||
<h3>市级账号登录总次数</h3> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="census_searchcensus" v-if="censusData.districtCount > -1" @click="show(1)"> |
|||
<div class="census_searchcensus_box"> |
|||
<img src="../../../assets/img/census/区级.png" /> |
|||
<div> |
|||
<h2>{{ censusData.districtCount }}</h2> |
|||
<h3>区级账号登录总次数</h3> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="census_searchcensus" v-if="censusData.streetCount > -1" @click="show(2)"> |
|||
<div class="census_searchcensus_box"> |
|||
<img src="../../../assets/img/census/镇街.png" /> |
|||
<div> |
|||
<h2>{{ censusData.streetCount }}</h2> |
|||
<h3>镇街账号登录总次数</h3> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="census_searchcensus" v-if="censusData.communityCount > -1" @click="show(3)"> |
|||
<div class="census_searchcensus_box"> |
|||
<img src="../../../assets/img/census/社区.png" /> |
|||
<div> |
|||
<h2>{{ censusData.communityCount }}</h2> |
|||
<h3>社区账号登录总次数</h3> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<div class="div_table"> |
|||
<div class="div_table_title">下级社区账号登录次数排名</div> |
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" |
|||
class="table" |
|||
style="width: 100%" |
|||
:height="maxTableHeight" |
|||
> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="agencyName" align="center" label="社区名称" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="streetName" label="所属街道" min-width="140" align="center" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="districtName" label="所属区县" align="center" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="count" align="center" width="110" label="登录次数" :show-overflow-tooltip="true"></el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="div_table"> |
|||
<div class="div_table_title">下级组织账号登录次数汇总</div> |
|||
<div :style="'height:' + TableHeight + 'px;margin-top:20px'"> |
|||
<screen-echarts-frame |
|||
@handelClickMyPei="handelClickMyPei" |
|||
:style="{ width: '100%', height: '100%' }" |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<el-dialog :title="title" :visible.sync="dialogVisible" v-if="dialogVisible" width="30%" :before-close="handleClose"> |
|||
<el-table :data="tableDataView" border v-loading="tableLoading2" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" class="table" style="width: 100%"> |
|||
<template v-if="orgType == 'community'"> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="agencyName" align="center" label="社区名称" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="streetName" label="所属街道" align="center" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="districtName" label="所属区县" align="center" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="count" align="center" width="110" label="登录次数" :show-overflow-tooltip="true"></el-table-column> |
|||
</template> |
|||
<template v-if="orgType == 'street'"> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="agencyName" label="镇街名称" align="center" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="districtName" label="所属区县" align="center" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="count" align="center" width="110" label="登录次数" :show-overflow-tooltip="true"></el-table-column> |
|||
</template> |
|||
<template v-if="orgType == 'district'"> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="agencyName" label="区县名称" align="center" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="count" align="center" width="110" label="登录次数" :show-overflow-tooltip="true"></el-table-column> |
|||
</template> |
|||
</el-table> |
|||
|
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[10, 20, 50, 100, 200]" |
|||
:page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total" |
|||
></el-pagination> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import screenEchartsFrame from './chart'; |
|||
import { requestPost } from '@/js/dai/request'; |
|||
import nextTick from 'dai-js/tools/nextTick'; |
|||
import { mapGetters } from 'vuex'; |
|||
|
|||
import axios from 'axios'; |
|||
|
|||
export default { |
|||
components: {}, |
|||
|
|||
data() { |
|||
let endDisabledDate = time => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
if (this.formData.startDate) { |
|||
let startDate = new Date(this.formData.startDate); |
|||
return time.getTime() > nowData || time.getTime() < startDate || time.getTime() === startDate; |
|||
} else { |
|||
return time.getTime() > nowData; |
|||
} |
|||
}; |
|||
let startDisabledDate = time => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
return time.getTime() > nowData; |
|||
}; |
|||
return { |
|||
optionsA: [], |
|||
pieChart: '', |
|||
pieOption: {}, |
|||
pieInitState: false, |
|||
pieData: [], |
|||
title: '', |
|||
dialogVisible: false, |
|||
tableLoading: false, |
|||
tableLoading2: false, |
|||
pageType: 'list', // 列表list 新增add 处理dispose 详情info |
|||
user: {}, |
|||
agencyId: '', |
|||
gridList: [], //所属网格list--场所区域 |
|||
agencyIdArray: [], |
|||
orgOptions: [], |
|||
orgOptionProps: { |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
emitPath: false, |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
checkStrictly: true |
|||
}, |
|||
tableData: [], |
|||
tableDataView: [], |
|||
censusData: {}, |
|||
formData: { |
|||
orgId: '', |
|||
level: '', |
|||
startDate: '', |
|||
endDate: '' |
|||
}, |
|||
cateOptions: [], |
|||
eventTypeCheck: [], |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem('pageSize') || 10, |
|||
total: 1, |
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
eventId: '', |
|||
orgType: '', |
|||
eventDetailData: {}, |
|||
|
|||
showVoice: false, |
|||
selVoiceUrl: '', |
|||
|
|||
multipleSelection: [], |
|||
TableHeight: '', |
|||
pieData: {} |
|||
}; |
|||
}, |
|||
components: { |
|||
screenEchartsFrame |
|||
}, |
|||
computed: { |
|||
maxTableHeight() { |
|||
this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 425 + this.iframeHeigh : this.clientHeight - 425; |
|||
return this.TableHeight; |
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
watch: { |
|||
'formData.endDate': function(val) { |
|||
if (val && val != '') { |
|||
let arrayTemp = val.split(' '); |
|||
this.formData.endDate = arrayTemp[0] + ' 23:59:59'; |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
console.log(this.$store.state); |
|||
this.user = this.$store.state.user; |
|||
this.agencyId = this.user.agencyId; |
|||
this.getOrgTreeList(); |
|||
this.getCountLevel(); |
|||
this.getTableData(); |
|||
this.getsubData(); |
|||
|
|||
// this.getPie(); |
|||
}, |
|||
methods: { |
|||
handleSearch(val) { |
|||
let tmp = this.formData.orgId; |
|||
if (!(tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null)) { |
|||
this.formData.orgId = ''; |
|||
this.formData.level = ''; |
|||
} |
|||
|
|||
this.getCountLevel(); |
|||
this.getTableData(); |
|||
this.getsubData(); |
|||
}, |
|||
show(type) { |
|||
switch (type) { |
|||
case 1: |
|||
this.orgType = 'district'; |
|||
break; |
|||
case 2: |
|||
this.orgType = 'street'; |
|||
break; |
|||
case 3: |
|||
this.orgType = 'community'; |
|||
break; |
|||
} |
|||
this.orgId = this.formData.orgId; |
|||
this.pageNo = 1; |
|||
this.showNext(); |
|||
this.dialogVisible = true; |
|||
}, |
|||
handleClose() { |
|||
this.dialogVisible = false; |
|||
}, |
|||
async showNext() { |
|||
let url = ''; |
|||
let param = {}; |
|||
console.log('this.orgType', this.orgType); |
|||
// district street community |
|||
// 1 是区县 2是镇街 3是社区 4是下级 |
|||
switch (this.orgType) { |
|||
case 'district': |
|||
this.title = '区县级账号登录情况'; |
|||
url = '/gov/org/staffLoginLog/district-count'; |
|||
break; |
|||
case 'street': |
|||
this.title = '镇街级账号登录情况'; |
|||
url = '/gov/org/staffLoginLog/street-count'; |
|||
break; |
|||
case 'community': |
|||
this.title = '社区级账号登录情况'; |
|||
url = '/gov/org/staffLoginLog/community-count'; |
|||
break; |
|||
} |
|||
param = { |
|||
orgId: this.orgId, |
|||
level: this.orgType, |
|||
startDate: this.formData.startDate, |
|||
endDate: this.formData.endDate, |
|||
isPage: true, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize |
|||
}; |
|||
this.tableLoading2 = true; |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
this.tableLoading2 = false; |
|||
if (code === 0) { |
|||
this.total = data.total || 0; |
|||
this.tableDataView = data.list |
|||
? data.list.map(item => { |
|||
return item; |
|||
}) |
|||
: []; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
handleChangeAgency(val) { |
|||
let obj = this.$refs['myCascader'].getCheckedNodes()[0].data; |
|||
console.log(obj); |
|||
this.formData.level = obj.level; |
|||
}, |
|||
getOrgTreeList() { |
|||
const { user } = this.$store.state; |
|||
this.$http |
|||
.post('gov/org/customeragency/staffinagencylist', {}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
console.log('获取组织树成功', res.data); |
|||
let { agencyList, subAgencyList } = res.data; |
|||
const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }]; |
|||
this.orgOptions = this.deepTree(_arr); |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误'); |
|||
}); |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async handleDispose(row) { |
|||
this.eventId = row.icEventId; |
|||
const url = '/gov/project/icEvent/detail'; |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/detail"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
icEventId: this.eventId |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.eventDetailData = { ...data }; |
|||
this.pageType = 'dispose'; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getCountLevel() { |
|||
const url = '/gov/org/staffLoginLog/count-level'; |
|||
// const url = 'http://yapi.elinkservice.cn/mock/356/gov/org/staffLoginLog/count-level'; |
|||
let param = { ...this.formData }; |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
console.log('getCountLeveldata', data); |
|||
if (code === 0) { |
|||
this.censusData = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getTableData() { |
|||
this.tableLoading = true; |
|||
|
|||
const url = '/gov/org/staffLoginLog/community-count'; |
|||
// const url = 'http://yapi.elinkservice.cn/mock/356/gov/org/staffLoginLog/community-count'; |
|||
|
|||
const { pageSize, pageNo, formData } = this; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
isPage: true, |
|||
...formData |
|||
}); |
|||
|
|||
this.tableLoading = false; |
|||
if (code === 0) { |
|||
this.total = data.total || 0; |
|||
|
|||
this.tableData = data.list |
|||
? data.list.map(item => { |
|||
return item; |
|||
}) |
|||
: []; |
|||
console.log('this.tableData ', this.tableData); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getsubData() { |
|||
this.$refs.pieChart.showLoading(); |
|||
let url = '/gov/org/staffLoginLog/sub-count'; |
|||
let param = { |
|||
orgId: this.formData.orgId, |
|||
level: this.formData.level, |
|||
startDate: this.formData.startDate, |
|||
endDate: this.formData.endDate |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
this.$refs.pieChart.hideLoading(); |
|||
|
|||
if (code === 0) { |
|||
this.pieData = data.list; |
|||
console.log('this.pieData ', this.pieData); |
|||
this.getPie(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
window.localStorage.setItem('pageSize', val); |
|||
this.showNext(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.showNext(); |
|||
}, |
|||
deepTree(arr) { |
|||
if (Array.isArray(arr)) { |
|||
return arr.map(item => { |
|||
return { |
|||
...item, |
|||
subAgencyList: (item.subAgencyList.length > 0 && this.deepTree(item.subAgencyList)) || null |
|||
}; |
|||
}); |
|||
} |
|||
}, |
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.setPieData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
setPieData() { |
|||
let data = [...this.pieData]; |
|||
console.log('data', data); |
|||
let chartData = {}; |
|||
chartData.name = data.map(item => item.agencyName); |
|||
chartData.data = data.map(item => { |
|||
return { value: item.count, id: item.agencyId, level: item.agencyLevel, name: item.agencyName }; |
|||
}); |
|||
console.log('chartData', chartData); |
|||
this.iniPieChart(chartData); |
|||
}, |
|||
// 获取饼状图 |
|||
async iniPieChart(chartData) { |
|||
this.$refs.pieChart.clear(); |
|||
// 获取pieChart配置 |
|||
this.pieOption = { |
|||
tooltip: { |
|||
trigger: 'axis' |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: chartData.name, |
|||
axisLabel: { |
|||
interval: 0, |
|||
interval: 0, //设置横坐标为斜 |
|||
rotate: 30, //文字倾斜角度 |
|||
formatter: function(value) { |
|||
if (value.length > 10) { |
|||
value = value.substring(0, 9) + '..'; |
|||
} |
|||
return value; |
|||
} |
|||
}, |
|||
triggerEvent: true |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
splitArea: { |
|||
show: true, |
|||
areaStyle: { |
|||
color: ['#fff', '#F3F7FD'] |
|||
} |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: chartData.data, |
|||
type: 'bar', |
|||
itemStyle: { |
|||
color: 'rgb(33, 149, 254)' |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
}, |
|||
handelClickMyPei(param) { |
|||
if (param.data.level != 'community') { |
|||
if (param.data.level == 'district') { |
|||
this.orgType = 'street'; |
|||
} |
|||
if (param.data.level == 'street') { |
|||
this.orgType = 'community'; |
|||
} |
|||
|
|||
this.orgId = param.data.id; |
|||
this.orgName = param.data.name; |
|||
this.pageNo = 1; |
|||
this.showNext(); |
|||
this.dialogVisible = true; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/buttonstyle.scss'; |
|||
@import '@/assets/scss/modules/management/list-main.scss'; |
|||
@import '@/assets/scss/modules/shequzhili/event-info.scss'; |
|||
// .div_main .div_search{padding:35px} |
|||
.btnSearch { |
|||
width: 100px; |
|||
height: 36px; |
|||
background: #2195fe; |
|||
box-shadow: 0px 2px 6px 0px rgba(28, 107, 253, 0.31); |
|||
border-radius: 6px; |
|||
color: #fff; |
|||
} |
|||
.div_search { |
|||
.item_width_2 { |
|||
width: 200px; |
|||
} |
|||
} |
|||
.flex { |
|||
display: flex; |
|||
} |
|||
.census_searchcensus { |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-bottom: 30px; |
|||
margin-top: 20px; |
|||
.census_searchcensus_box { |
|||
cursor: pointer; |
|||
display: flex; |
|||
img { |
|||
width: 64px; |
|||
height: 64px; |
|||
margin-right: 20px; |
|||
} |
|||
h2 { |
|||
font-size: 28px; |
|||
color: #333333; |
|||
|
|||
text-align: left; |
|||
line-height: 40px; |
|||
margin: 0px; |
|||
} |
|||
h3 { |
|||
font-size: 14px; |
|||
color: #333333; |
|||
|
|||
text-align: left; |
|||
|
|||
margin: 0px; |
|||
font-weight: normal; |
|||
} |
|||
} |
|||
} |
|||
.div_table_title { |
|||
margin-top: 20px; |
|||
line-height: 30px; |
|||
font-size: 20px; |
|||
|
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
.cur { |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,899 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
<div> |
|||
<div class="div_search"> |
|||
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'80px'"> |
|||
<div> |
|||
<el-form-item label="所属组织" prop="orgId"> |
|||
<el-cascader |
|||
class="customer_cascader" |
|||
ref="myCascader" |
|||
clearable |
|||
v-model="formData.orgId" |
|||
:options="orgOptions" |
|||
:props="orgOptionProps" |
|||
:show-all-levels="false" |
|||
@change="handleChangeAgency" |
|||
></el-cascader> |
|||
</el-form-item> |
|||
<el-form-item label="上报时间" prop="startTime"> |
|||
<el-date-picker |
|||
v-model="formData.startDate" |
|||
:picker-options="startPickerOptions" |
|||
class="item_width_2" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间" |
|||
></el-date-picker> |
|||
<span class="data-tag">至</span> |
|||
<el-date-picker |
|||
v-model="formData.endDate" |
|||
:picker-options="endPickerOptions" |
|||
class="item_width_2 data-tag" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
value="yyyy-MM-dd" |
|||
placeholder="结束时间" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
<el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
<div class="div_table"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<div class="div_table_title">房屋用途统计</div> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div :style="'height:' + TableHeight + 'px;margin-top:20px'"> |
|||
<screen-echarts-frame |
|||
@handelClickMyPei="handelClickMyPei" |
|||
:style="{ width: '100%', height: '100%' }" |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div :style="'height:' + TableHeight + 'px;margin-top:20px;display:flex;align-items: center;'"> |
|||
<div class="legend"> |
|||
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)"> |
|||
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> |
|||
<div class="content"> |
|||
<div class="name">{{ item.name }}</div> |
|||
<div class="num">{{ item.value }}</div> |
|||
<div class="unit" :style="{ color: color[index] }">{{ item.radio }}%</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="div_table_title">房屋状态统计</div> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div :style="'height:' + TableHeight + 'px;margin-top:20px'"> |
|||
<screen-echarts-frame2 |
|||
@handelClickMyPei="handelClickMyPei2" |
|||
:style="{ width: '100%', height: '100%' }" |
|||
@myChartMethod="pieInitOk2" |
|||
ref="pieChart2" |
|||
></screen-echarts-frame2> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div :style="'height:' + TableHeight + 'px;margin-top:20px;display:flex;align-items: center;'"> |
|||
<div class="legend2"> |
|||
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem2(item)"> |
|||
<div class="kuai" v-if="item.name == '自住'"><img src="../../../assets/img/census/自住.png" /></div> |
|||
<div class="kuai" v-if="item.name == '出租'"><img src="../../../assets/img/census/出租.png" /></div> |
|||
<div class="kuai" v-if="item.name == '闲置'"><img src="../../../assets/img/census/闲置.png" /></div> |
|||
<div class="kuai" v-if="item.name == '未售出'"><img src="../../../assets/img/census/未售出.png" /></div> |
|||
<div class="content"> |
|||
<div class="name">{{ item.name }}</div> |
|||
<div class="num">{{ item.value }}</div> |
|||
<div class="unit" :style="{ color: color[index] }">{{ item.radio }}%</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
|
|||
<el-col :span="24"> |
|||
<div class="census_searchcensus2"> |
|||
<div class="census_searchcensus_box"></div> |
|||
<el-button size="small" class="diy-button--output" @click="handleExport(1)">导出</el-button> |
|||
</div> |
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" |
|||
class="table" |
|||
style="width: 100%;" |
|||
:height="maxTableHeight" |
|||
> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="streetName" label="镇街" align="center" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="districtName" label="区县" align="center" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="communityName" align="center" label="社区" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="gridName" align="center" label="网格" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="houseName" align="center" label="房屋名称" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="purposeName" align="center" label="房屋用途" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="rentFlagName" align="center" label="房屋状态" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true"> |
|||
<template slot-scope="scope"> |
|||
<el-button size="small" type="text" @click="show(scope.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[10, 20, 50, 100, 200]" |
|||
:page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total" |
|||
></el-pagination> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<addForm |
|||
v-if="dialogVisible" |
|||
:dialogVisible="dialogVisible" |
|||
:pageType="pageType" |
|||
:disabled="disabled" |
|||
:detailId="detailId" |
|||
:detailData="detailData" |
|||
@handleClose="handleClose" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import screenEchartsFrame from './chart'; |
|||
import screenEchartsFrame2 from './chart'; |
|||
import { requestPost, requestGet } from '@/js/dai/request'; |
|||
import nextTick from 'dai-js/tools/nextTick'; |
|||
import { mapGetters } from 'vuex'; |
|||
import addForm from './addFormHouse'; |
|||
import axios from 'axios'; |
|||
|
|||
export default { |
|||
components: { screenEchartsFrame, screenEchartsFrame2, addForm }, |
|||
data() { |
|||
let endDisabledDate = time => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
if (this.formData.startTime) { |
|||
let startTime = new Date(this.formData.startTime); |
|||
return time.getTime() > nowData || time.getTime() < startTime || time.getTime() === startTime; |
|||
} else { |
|||
return time.getTime() > nowData; |
|||
} |
|||
}; |
|||
let startDisabledDate = time => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
return time.getTime() > nowData; |
|||
}; |
|||
return { |
|||
dialogVisible: false, |
|||
detailId: '', |
|||
detailData: {}, |
|||
pageType: '', |
|||
disabled: false, |
|||
tableLoading: false, |
|||
user: {}, |
|||
gridList: [], //所属网格list--场所区域 |
|||
tableData: [], |
|||
formData: { |
|||
orgId: '' |
|||
}, |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem('pageSize') || 20, |
|||
total: 1, |
|||
endPickerOptions: { |
|||
//时间 |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
//时间 |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
agencyId: '', //组织 |
|||
agencyIdArray: [], //组织 |
|||
orgOptions: [], //组织 |
|||
orgOptionProps: { |
|||
//组织 |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
emitPath: false, |
|||
checkStrictly: true |
|||
}, |
|||
TableHeight: '', |
|||
pieInitState: false, |
|||
pieInitState2: false, |
|||
pieOption: [], |
|||
pieOption2: [], |
|||
color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'], |
|||
chartData: [], |
|||
chartData2: [], |
|||
pieData: [], |
|||
pieData2: [], |
|||
orgId: '', |
|||
purpose: '', |
|||
rentFlag: '', |
|||
orgIdPath: '' |
|||
}; |
|||
}, |
|||
computed: { |
|||
maxTableHeight() { |
|||
this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 675 + this.iframeHeigh : this.clientHeight - 675; |
|||
return this.TableHeight; |
|||
}, |
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
watch: { |
|||
'formData.endDate': function(val) { |
|||
if (val && val != '') { |
|||
let arrayTemp = val.split(' '); |
|||
this.formData.endDate = arrayTemp[0] + ' 23:59:59'; |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
console.log(this.$store.state); |
|||
this.user = this.$store.state.user; |
|||
this.agencyId = this.user.agencyId; |
|||
|
|||
this.getOrgTreeList(); |
|||
}, |
|||
methods: { |
|||
show(row) { |
|||
this.dialogVisible = true; |
|||
this.pageType = 'view'; |
|||
this.detailId = row.houseId; |
|||
|
|||
this.detailData = row; |
|||
}, |
|||
handleClose() { |
|||
this.dialogVisible = false; |
|||
this.pageType = 'list'; |
|||
this.detailId = ''; |
|||
this.getTableData(); |
|||
}, |
|||
async getTableData() { |
|||
this.tableLoading = true; |
|||
// const url = '/gov/org/staffLoginLog/community-count'; |
|||
const url = '/gov/org/ichouse/getHousePictureList'; |
|||
|
|||
const { pageSize, pageNo, formData } = this; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
orgIdPath: this.orgIdPath, |
|||
orgId: this.orgId, |
|||
orgType: this.orgType, |
|||
timeStart: this.formData.startDate, |
|||
timeEnd: this.formData.endDate, |
|||
purpose: this.purpose, |
|||
rentFlag: this.rentFlag |
|||
}); |
|||
|
|||
this.tableLoading = false; |
|||
if (code === 0) { |
|||
this.total = data.total || 0; |
|||
this.tableData = data.list |
|||
? data.list.map(item => { |
|||
return item; |
|||
}) |
|||
: []; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
window.localStorage.setItem('pageSize', val); |
|||
this.getTableData(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
async getsubData() { |
|||
this.$refs.pieChart.showLoading(); |
|||
let url = '/gov/org/ichouse/getHousePurposeCount'; |
|||
let param = { |
|||
orgIdPath: this.orgIdPath, |
|||
timeStart: this.formData.startDate, |
|||
timeEnd: this.formData.endDate, |
|||
orgId: this.orgId, |
|||
orgType: this.orgType |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
this.$refs.pieChart.hideLoading(); |
|||
if (code === 0) { |
|||
this.pieData = data; |
|||
this.getPie(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getsubData2() { |
|||
this.$refs.pieChart2.showLoading(); |
|||
let url = '/gov/org/ichouse/getHouseStatusCount'; |
|||
let param = { |
|||
orgIdPath: this.orgIdPath, |
|||
timeStart: this.formData.startDate, |
|||
timeEnd: this.formData.endDate, |
|||
orgId: this.orgId, |
|||
orgType: this.orgType |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
this.$refs.pieChart2.hideLoading(); |
|||
if (code === 0) { |
|||
this.pieData2 = data; |
|||
|
|||
this.getPie2(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
pieInitOk2() { |
|||
this.pieInitState2 = true; |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.setPieData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
getPie2() { |
|||
if (this.pieInitState2) { |
|||
this.setPieData2(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie2(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
setPieData() { |
|||
let data = [...this.pieData.list]; |
|||
let type = { |
|||
1: '住宅', |
|||
2: '商业', |
|||
3: '办公', |
|||
4: '工业', |
|||
5: '存储', |
|||
6: '商住混用', |
|||
7: '其它' |
|||
}; |
|||
this.chartData.name = data.map(item => type[item.type]); |
|||
this.chartData.data = data.map(item => { |
|||
return { |
|||
value: item.count, |
|||
name: type[item.type], |
|||
code: item.type, |
|||
radio: item.count == 0 ? '0' : ((item.count / this.pieData.total) * 100).toFixed(2) |
|||
}; |
|||
}); |
|||
|
|||
this.iniPieChart(this.chartData); |
|||
}, |
|||
setPieData2() { |
|||
let data = [...this.pieData2.list]; |
|||
let type = { |
|||
1: '出租', |
|||
0: '自住', |
|||
2: '闲置', |
|||
3: '未售出' |
|||
}; |
|||
this.chartData2.name = data.map(item => type[item.type]); |
|||
this.chartData2.data = data.map(item => { |
|||
return { |
|||
value: item.count, |
|||
name: type[item.type], |
|||
code: item.type, |
|||
radio: item.count == 0 ? '0' : ((item.count / this.pieData2.total) * 100).toFixed(2) |
|||
}; |
|||
}); |
|||
|
|||
this.iniPieChart2(this.chartData2); |
|||
}, |
|||
// 获取饼状图 |
|||
async iniPieChart(chartData) { |
|||
this.$refs.pieChart.clear(); |
|||
// 获取pieChart配置 |
|||
this.pieOption = { |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{b}<br/>总数 : {c}<br/> 占比 : {d}%', |
|||
backgroundColor: 'rgb(134,134,134)', |
|||
borderColor: 'rgb(134,134,134)', |
|||
textStyle: { |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
color: this.color, |
|||
title: { |
|||
text: this.pieData.total, |
|||
subtext: '总数', |
|||
x: 'center', |
|||
y: 'center', |
|||
textStyle: { |
|||
fontSize: 26, |
|||
color: '#333333', |
|||
fontWeight: 'bold' |
|||
}, |
|||
subtextStyle: { |
|||
fontSize: 14, |
|||
color: '#333333' |
|||
} |
|||
}, |
|||
|
|||
series: [ |
|||
{ |
|||
type: 'pie', |
|||
radius: ['65%', '80%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
tooltip: { |
|||
show: true |
|||
}, |
|||
|
|||
data: chartData.data |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['60%', '65%'], |
|||
center: ['50%', '50%'], |
|||
selectedMode: false, |
|||
hoverAnimation: false, |
|||
data: [{ value: 1, name: '' }], |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
animation: false, |
|||
cursor: 'auto', |
|||
emphasis: { |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['80%', '85%'], |
|||
center: ['50%', '50%'], |
|||
selectedMode: false, |
|||
hoverAnimation: false, |
|||
data: [{ value: 1, name: '' }], |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
animation: false, |
|||
cursor: 'auto', |
|||
emphasis: { |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
}, |
|||
async iniPieChart2(chartData) { |
|||
this.$refs.pieChart2.clear(); |
|||
// 获取pieChart配置 |
|||
|
|||
this.pieOption2 = { |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{b}<br/>总数 : {c}<br/> 占比 : {d}%', |
|||
backgroundColor: 'rgb(134,134,134)', |
|||
borderColor: 'rgb(134,134,134)', |
|||
textStyle: { |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
color: this.color, |
|||
title: { |
|||
text: this.pieData2.total, |
|||
subtext: '总数', |
|||
x: 'center', |
|||
y: 'center', |
|||
textStyle: { |
|||
fontSize: 26, |
|||
color: '#333333', |
|||
fontWeight: 'bold' |
|||
}, |
|||
subtextStyle: { |
|||
fontSize: 14, |
|||
color: '#333333' |
|||
} |
|||
}, |
|||
|
|||
series: [ |
|||
{ |
|||
type: 'pie', |
|||
radius: ['65%', '80%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
tooltip: { |
|||
show: true |
|||
}, |
|||
|
|||
data: chartData.data |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['60%', '65%'], |
|||
center: ['50%', '50%'], |
|||
selectedMode: false, |
|||
hoverAnimation: false, |
|||
data: [{ value: 1, name: '' }], |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
animation: false, |
|||
cursor: 'auto', |
|||
emphasis: { |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['80%', '85%'], |
|||
center: ['50%', '50%'], |
|||
selectedMode: false, |
|||
hoverAnimation: false, |
|||
data: [{ value: 1, name: '' }], |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
animation: false, |
|||
cursor: 'auto', |
|||
emphasis: { |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
this.$refs.pieChart2.setOption(this.pieOption2); |
|||
}, |
|||
handelClickMyPei(param) { |
|||
this.purpose = param.data.code; |
|||
this.rentFlag = ''; |
|||
this.getTableData(); |
|||
}, |
|||
handelClickMyPei2(param) { |
|||
this.purpose = ''; |
|||
this.rentFlag = param.data.code; |
|||
this.getTableData(); |
|||
}, |
|||
handleClickItem(item) { |
|||
this.purpose = item.code; |
|||
this.rentFlag = ''; |
|||
this.getTableData(); |
|||
}, |
|||
handleClickItem2(item) { |
|||
this.purpose = ''; |
|||
this.rentFlag = item.code; |
|||
this.getTableData(); |
|||
}, |
|||
async handleExport() { |
|||
const url = '/gov/org/ichouse/export'; |
|||
const { pageSize, pageNo, formData } = this; |
|||
axios({ |
|||
url: window.SITE_CONFIG['apiURL'] + url, |
|||
method: 'post', |
|||
data: { |
|||
pageSize, |
|||
pageNo, |
|||
orgIdPath: this.orgIdPath, |
|||
timeStart: this.formData.startDate, |
|||
timeEnd: this.formData.endDate, |
|||
purpose: this.purpose, |
|||
rentFlag: this.rentFlag, |
|||
orgId: this.orgId, |
|||
orgType: this.orgType |
|||
}, |
|||
responseType: 'blob' |
|||
}) |
|||
.then(res => { |
|||
let fileName = window.decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]); |
|||
console.log('filename', fileName); |
|||
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }); |
|||
var url = window.URL.createObjectURL(blob); |
|||
var aLink = document.createElement('a'); |
|||
aLink.style.display = 'none'; |
|||
aLink.href = url; |
|||
aLink.setAttribute('download', fileName); |
|||
document.body.appendChild(aLink); |
|||
aLink.click(); |
|||
document.body.removeChild(aLink); //下载完成移除元素 |
|||
window.URL.revokeObjectURL(url); //释放掉blob对象 |
|||
}) |
|||
.catch(err => { |
|||
console.log('获取导出情失败', err); |
|||
return this.$message.error('网络错误'); |
|||
}); |
|||
}, |
|||
getOrgTreeList() { |
|||
const { user } = this.$store.state; |
|||
this.$http |
|||
.post('/gov/org/customeragency/agencygridtree', {}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
let data = res.data; |
|||
console.log('获取组织树成功', data); |
|||
// let { agencyList, subAgencyList } = data; |
|||
// const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }]; |
|||
// this.orgOptions = this.deepTree(_arr); |
|||
this.orgOptions = []; |
|||
this.orgOptions.push(data); |
|||
this.orgId = data.agencyId; |
|||
this.orgIdPath = data.orgIdPath; |
|||
this.orgType = data.level; |
|||
this.getTableData(); |
|||
this.getsubData(); |
|||
this.getsubData2(); |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误'); |
|||
}); |
|||
}, |
|||
handleSearch(val) { |
|||
this.pageNo = 1; |
|||
this.purpose = ''; |
|||
this.rentFlag = ''; |
|||
this.getTableData(); |
|||
this.getsubData(); |
|||
this.getsubData2(); |
|||
}, |
|||
handleChangeAgency(val) { |
|||
let obj = this.$refs['myCascader'].getCheckedNodes()[0].data; |
|||
let tmp = this.formData.orgId; |
|||
|
|||
if (tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null) { |
|||
this.orgId = this.formData.orgId; |
|||
this.orgIdPath = obj.orgIdPath; |
|||
this.orgType = obj.level; |
|||
} else { |
|||
this.orgId = this.orgOptions.agencyId; |
|||
this.orgIdPath = this.orgOptions.orgIdPath; |
|||
this.orgType = this.orgOptions.level; |
|||
} |
|||
}, |
|||
|
|||
deepTree(arr) { |
|||
if (Array.isArray(arr)) { |
|||
return arr.map(item => { |
|||
return { |
|||
...item, |
|||
subAgencyList: (item.subAgencyList.length > 0 && this.deepTree(item.subAgencyList)) || null |
|||
}; |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/buttonstyle.scss'; |
|||
@import '@/assets/scss/modules/management/list-main.scss'; |
|||
@import '@/assets/scss/modules/shequzhili/event-info.scss'; |
|||
.legend { |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
.legend-row { |
|||
cursor: pointer; |
|||
min-width: 100px; |
|||
display: flex; |
|||
margin-bottom: 30px; |
|||
margin-right: 25px; |
|||
.kuai { |
|||
width: 12px; |
|||
height: 12px; |
|||
margin-right: 10px; |
|||
border-radius: 4px; |
|||
} |
|||
.content { |
|||
.name { |
|||
font-size: 14px; |
|||
color: #999; |
|||
margin-bottom: 10px; |
|||
} |
|||
.num { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
} |
|||
.unit { |
|||
font-size: 16px; |
|||
display: inline-block; |
|||
margin-left: 7px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.legend2 { |
|||
// display: flex; |
|||
// flex-flow: row wrap; |
|||
|
|||
.legend-row { |
|||
cursor: pointer; |
|||
width: 100%; |
|||
display: flex; |
|||
margin-bottom: 16px; |
|||
.kuai { |
|||
margin-right: 10px; |
|||
border-radius: 4px; |
|||
img { |
|||
width: 40px; |
|||
height: 40px; |
|||
} |
|||
} |
|||
.content { |
|||
display: flex; |
|||
align-items: center; |
|||
.name { |
|||
font-size: 14px; |
|||
color: #999; |
|||
width: 60px; |
|||
} |
|||
.num { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
} |
|||
.unit { |
|||
font-size: 16px; |
|||
display: inline-block; |
|||
margin-left: 7px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.btnSearch { |
|||
width: 100px; |
|||
height: 36px; |
|||
background: #2195fe; |
|||
box-shadow: 0px 2px 6px 0px rgba(28, 107, 253, 0.31); |
|||
border-radius: 6px; |
|||
color: #fff; |
|||
} |
|||
.div_search { |
|||
.item_width_2 { |
|||
width: 200px; |
|||
} |
|||
} |
|||
// /这里是不一样的,居左，从下对齐 |
|||
.census_searchcensus2 { |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
|
|||
justify-content: space-between; |
|||
align-items: flex-end; |
|||
margin-bottom: 0px; |
|||
margin-top: 0px; |
|||
.census_searchcensus_box { |
|||
align-items: flex-end; |
|||
display: flex; |
|||
img { |
|||
width: 64px; |
|||
height: 64px; |
|||
margin-right: 20px; |
|||
} |
|||
h2 { |
|||
font-size: 28px; |
|||
color: #333333; |
|||
|
|||
text-align: left; |
|||
line-height: 40px; |
|||
margin: 0px; |
|||
} |
|||
h3 { |
|||
font-size: 14px; |
|||
color: #333333; |
|||
|
|||
text-align: left; |
|||
|
|||
margin: 0px; |
|||
font-weight: normal; |
|||
} |
|||
} |
|||
} |
|||
.div_table_title { |
|||
margin-top: 20px; |
|||
line-height: 30px; |
|||
font-size: 20px; |
|||
|
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
.diy-button--output { |
|||
width: 100px; |
|||
height: 38px; |
|||
|
|||
background: #feb349; |
|||
box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31); |
|||
border-radius: 6px; |
|||
color: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,664 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
<div> |
|||
<div class="div_search"> |
|||
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'80px'"> |
|||
<div> |
|||
<el-form-item label="所属组织" prop="orgId"> |
|||
<el-cascader |
|||
class="customer_cascader" |
|||
ref="myCascader" |
|||
clearable |
|||
v-model="formData.orgId" |
|||
:options="orgOptions" |
|||
:props="orgOptionProps" |
|||
:show-all-levels="false" |
|||
@change="handleChangeAgency" |
|||
></el-cascader> |
|||
</el-form-item> |
|||
|
|||
<el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
<div class="div_table"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="24"> |
|||
<div class="div_table_title">九小场所分析</div> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div style="height:220px;margin-top:20px"> |
|||
<screen-echarts-frame |
|||
@handelClickMyPei="handelClickMyPei" |
|||
:style="{ width: '100%', height: '100%' }" |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div style="height:220px;margin-top:20px;display:flex;align-items: center;"> |
|||
<div class="legend"> |
|||
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)"> |
|||
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> |
|||
<div class="content"> |
|||
<div class="name">{{ item.name }}</div> |
|||
<div class="num">{{ item.value }}</div> |
|||
<div class="unit" :style="{ color: color[index] }">{{ item.radio }}%</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
|
|||
<el-col :span="24"> |
|||
<div class="census_searchcensus2"> |
|||
<div class="census_searchcensus_box"></div> |
|||
<el-button size="small" class="diy-button--output" @click="handleExport(1)">导出</el-button> |
|||
</div> |
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" |
|||
class="table" |
|||
style="width: 100%;" |
|||
:height="maxTableHeight" |
|||
> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="placeOrgName" align="center" label="场所名称" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="placeTypeName" align="center" label="场所类型" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="scaleName" align="center" label="规模" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="personInCharge" align="center" label="负责人" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="mobile" align="center" label="联系方式" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true"> |
|||
<template slot-scope="scope"> |
|||
<el-button size="small" type="text" @click="show(scope.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[10, 20, 50, 100, 200]" |
|||
:page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total" |
|||
></el-pagination> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<addForm |
|||
v-if="dialogVisible" |
|||
:dialogVisible="dialogVisible" |
|||
:pageType="pageType" |
|||
:disabled="disabled" |
|||
:detailId="detailId" |
|||
:detailData="detailData" |
|||
@handleClose="handleClose" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import screenEchartsFrame from './chart'; |
|||
import screenEchartsFrame2 from './chart'; |
|||
import { requestPost } from '@/js/dai/request'; |
|||
import nextTick from 'dai-js/tools/nextTick'; |
|||
import { mapGetters } from 'vuex'; |
|||
import addForm from './addFormEnterprise'; |
|||
|
|||
import axios from 'axios'; |
|||
|
|||
export default { |
|||
components: { screenEchartsFrame, screenEchartsFrame2, addForm }, |
|||
data() { |
|||
let endDisabledDate = time => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
if (this.formData.startTime) { |
|||
let startTime = new Date(this.formData.startTime); |
|||
return time.getTime() > nowData || time.getTime() < startTime || time.getTime() === startTime; |
|||
} else { |
|||
return time.getTime() > nowData; |
|||
} |
|||
}; |
|||
let startDisabledDate = time => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
return time.getTime() > nowData; |
|||
}; |
|||
return { |
|||
orgId: '', |
|||
orgType: 'agency', |
|||
dialogVisible: false, |
|||
detailId: '', |
|||
detailData: {}, |
|||
pageType: '', |
|||
tableLoading: false, |
|||
user: {}, |
|||
gridList: [], //所属网格list--场所区域 |
|||
tableData: [], |
|||
formData: { |
|||
orgId: '' |
|||
}, |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem('pageSize') || 20, |
|||
total: 1, |
|||
endPickerOptions: { |
|||
//时间 |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
//时间 |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
agencyId: '', //组织 |
|||
agencyIdArray: [], //组织 |
|||
orgOptions: [], //组织 |
|||
orgOptionProps: { |
|||
//组织 |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
emitPath: false, |
|||
checkStrictly: true |
|||
}, |
|||
TableHeight: '', |
|||
pieInitState: false, |
|||
pieInitState2: false, |
|||
pieOption: [], |
|||
pieOption2: [], |
|||
color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'], |
|||
chartData: {}, |
|||
placeType: '', |
|||
pieData: [] |
|||
}; |
|||
}, |
|||
computed: { |
|||
maxTableHeight() { |
|||
this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 630 + this.iframeHeigh : this.clientHeight - 630; |
|||
return this.TableHeight; |
|||
}, |
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
watch: { |
|||
'formData.endTime': function(val) { |
|||
if (val && val != '') { |
|||
let arrayTemp = val.split(' '); |
|||
this.formData.endTime = arrayTemp[0] + ' 23:59:59'; |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
console.log(this.$store.state); |
|||
this.user = this.$store.state.user; |
|||
this.agencyId = this.user.agencyId; |
|||
this.getOrgTreeList(); |
|||
this.getTableData(); |
|||
this.getsubData(); |
|||
this.getPie(); |
|||
}, |
|||
methods: { |
|||
show(row) { |
|||
this.dialogVisible = true; |
|||
this.pageType = 'view'; |
|||
this.detailId = row.enterpriseId; |
|||
this.detailData = row; |
|||
}, |
|||
handleClose() { |
|||
this.dialogVisible = false; |
|||
this.pageType = 'list'; |
|||
this.detailId = ''; |
|||
this.getTableData(); |
|||
}, |
|||
handleSearch(val) { |
|||
let tmp = this.formData.orgId; |
|||
if (!(tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null)) { |
|||
this.formData.orgId = ''; |
|||
this.orgType = ''; |
|||
} |
|||
|
|||
this.pageNo = 1; |
|||
this.placeType = ''; |
|||
this.getTableData(); |
|||
this.getsubData(); |
|||
this.getPie(); |
|||
}, |
|||
async getTableData() { |
|||
this.tableLoading = true; |
|||
const url = '/gov/org/enterprise/list'; |
|||
// const url = 'http://yapi.elinkservice.cn/mock/356/gov/org/staffLoginLog/community-count'; |
|||
|
|||
const { pageSize, pageNo, formData } = this; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
orgId: this.formData.orgId, |
|||
orgType: this.orgType, |
|||
placeType: this.placeType |
|||
}); |
|||
|
|||
this.tableLoading = false; |
|||
if (code === 0) { |
|||
this.total = data.total || 0; |
|||
this.tableData = data.list |
|||
? data.list.map(item => { |
|||
return item; |
|||
}) |
|||
: []; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
window.localStorage.setItem('pageSize', val); |
|||
this.getTableData(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
async getsubData() { |
|||
console.log('this.orgType', this.orgType); |
|||
this.$refs.pieChart.showLoading(); |
|||
let url = '/gov/org/enterprise/count-type'; |
|||
let param = { |
|||
orgId: this.formData.orgId, |
|||
orgType: this.orgType |
|||
|
|||
// startDate: this.formData.startDate, |
|||
// endDate: this.formData.endDate |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
this.$refs.pieChart.hideLoading(); |
|||
|
|||
if (code === 0) { |
|||
this.pieData = data; |
|||
console.log('this.pieData ', this.pieData); |
|||
this.getPie(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
|
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.setPieData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
|
|||
setPieData() { |
|||
let data = [...this.pieData.list]; |
|||
this.chartData.name = data.map(item => item.placeTypeName); |
|||
this.chartData.data = data.map(item => { |
|||
return { |
|||
value: item.total, |
|||
id: item.agencyId, |
|||
placeType: item.placeType, |
|||
name: item.placeTypeName, |
|||
radio: item.total == 0 ? '0' : ((item.total / this.pieData.total) * 100).toFixed(2) |
|||
}; |
|||
console.log(item, this.pieData.total); |
|||
}); |
|||
|
|||
console.log('chartData', this.chartData); |
|||
this.iniPieChart(this.chartData); |
|||
}, |
|||
|
|||
// 获取饼状图 |
|||
async iniPieChart(chartData) { |
|||
this.$refs.pieChart.clear(); |
|||
// 获取pieChart配置 |
|||
this.pieOption = { |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{b}<br/>总数 : {c}<br/> 占比 : {d}%', |
|||
backgroundColor: 'rgb(134,134,134)', |
|||
borderColor: 'rgb(134,134,134)', |
|||
textStyle: { |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
color: this.color, |
|||
title: { |
|||
text: this.pieData.total, |
|||
subtext: '总数', |
|||
x: 'center', |
|||
y: 'center', |
|||
textStyle: { |
|||
fontSize: 26, |
|||
color: '#333333', |
|||
fontWeight: 'bold' |
|||
}, |
|||
subtextStyle: { |
|||
fontSize: 14, |
|||
color: '#333333' |
|||
} |
|||
}, |
|||
|
|||
series: [ |
|||
{ |
|||
type: 'pie', |
|||
radius: ['65%', '80%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
tooltip: { |
|||
show: true |
|||
}, |
|||
|
|||
data: chartData.data |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['60%', '65%'], |
|||
center: ['50%', '50%'], |
|||
selectedMode: false, |
|||
hoverAnimation: false, |
|||
data: [{ value: 1, name: '' }], |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
animation: false, |
|||
cursor: 'auto', |
|||
emphasis: { |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['80%', '85%'], |
|||
center: ['50%', '50%'], |
|||
selectedMode: false, |
|||
hoverAnimation: false, |
|||
data: [{ value: 1, name: '' }], |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
animation: false, |
|||
cursor: 'auto', |
|||
emphasis: { |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
}, |
|||
|
|||
handelClickMyPei(param) { |
|||
this.placeType = param.data.placeType; |
|||
this.getTableData(); |
|||
}, |
|||
handleClickItem(item) { |
|||
this.placeType = item.placeType; |
|||
this.getTableData(); |
|||
}, |
|||
async handleExport() { |
|||
const url = '/gov/org/enterprise/export'; |
|||
|
|||
const { pageSize, pageNo } = this; |
|||
|
|||
let tmp = this.formData.orgId; |
|||
if (!(tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null)) { |
|||
this.formData.orgId = ''; |
|||
this.orgType = ''; |
|||
} |
|||
|
|||
axios({ |
|||
url: window.SITE_CONFIG['apiURL'] + url, |
|||
method: 'post', |
|||
data: { |
|||
pageSize, |
|||
pageNo, |
|||
orgId: this.formData.orgId, |
|||
orgType: this.orgType, |
|||
placeType: this.placeType |
|||
}, |
|||
responseType: 'blob' |
|||
}) |
|||
.then(res => { |
|||
let fileName = window.decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]); |
|||
console.log('filename', fileName); |
|||
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }); |
|||
var url = window.URL.createObjectURL(blob); |
|||
var aLink = document.createElement('a'); |
|||
aLink.style.display = 'none'; |
|||
aLink.href = url; |
|||
aLink.setAttribute('download', fileName); |
|||
document.body.appendChild(aLink); |
|||
aLink.click(); |
|||
document.body.removeChild(aLink); //下载完成移除元素 |
|||
window.URL.revokeObjectURL(url); //释放掉blob对象 |
|||
}) |
|||
.catch(err => { |
|||
console.log('获取导出情失败', err); |
|||
return this.$message.error('网络错误'); |
|||
}); |
|||
}, |
|||
getOrgTreeList() { |
|||
const { user } = this.$store.state; |
|||
this.$http |
|||
.post('/gov/org/customeragency/agencygridtree', {}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
console.log('获取组织树成功', res.data); |
|||
// let { agencyList, subAgencyList } = res.data; |
|||
// const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }]; |
|||
// this.orgOptions = this.deepTree(_arr); |
|||
this.orgOptions = []; |
|||
this.orgOptions.push(res.data); |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误'); |
|||
}); |
|||
}, |
|||
handleChangeAgency(val) { |
|||
let obj = this.$refs['myCascader'].getCheckedNodes()[0].data; |
|||
if (obj) { |
|||
this.orgType = obj.level === 'grid' ? 'grid' : 'agency'; |
|||
} else { |
|||
this.orgType = ''; |
|||
} |
|||
}, |
|||
deepTree(arr) { |
|||
if (Array.isArray(arr)) { |
|||
return arr.map(item => { |
|||
return { |
|||
...item, |
|||
subAgencyList: (item.subAgencyList.length > 0 && this.deepTree(item.subAgencyList)) || null |
|||
}; |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/buttonstyle.scss'; |
|||
@import '@/assets/scss/modules/management/list-main.scss'; |
|||
@import '@/assets/scss/modules/shequzhili/event-info.scss'; |
|||
.legend { |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
.legend-row { |
|||
cursor: pointer; |
|||
min-width: 100px; |
|||
display: flex; |
|||
margin-bottom: 30px; |
|||
margin-right: 25px; |
|||
.kuai { |
|||
width: 12px; |
|||
height: 12px; |
|||
margin-right: 10px; |
|||
border-radius: 4px; |
|||
} |
|||
.content { |
|||
.name { |
|||
font-size: 14px; |
|||
color: #999; |
|||
margin-bottom: 10px; |
|||
} |
|||
.num { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
} |
|||
.unit { |
|||
font-size: 16px; |
|||
display: inline-block; |
|||
margin-left: 7px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.legend2 { |
|||
// display: flex; |
|||
// flex-flow: row wrap; |
|||
|
|||
.legend-row { |
|||
width: 100%; |
|||
display: flex; |
|||
margin-bottom: 16px; |
|||
.kuai { |
|||
margin-right: 10px; |
|||
border-radius: 4px; |
|||
img { |
|||
width: 40px; |
|||
height: 40px; |
|||
} |
|||
} |
|||
.content { |
|||
display: flex; |
|||
align-items: center; |
|||
.name { |
|||
font-size: 14px; |
|||
color: #999; |
|||
width: 60px; |
|||
} |
|||
.num { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
} |
|||
.unit { |
|||
font-size: 16px; |
|||
display: inline-block; |
|||
margin-left: 7px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.btnSearch { |
|||
width: 100px; |
|||
height: 36px; |
|||
background: #2195fe; |
|||
box-shadow: 0px 2px 6px 0px rgba(28, 107, 253, 0.31); |
|||
border-radius: 6px; |
|||
color: #fff; |
|||
} |
|||
.div_search { |
|||
.item_width_2 { |
|||
width: 200px; |
|||
} |
|||
} |
|||
// /这里是不一样的,居左，从下对齐 |
|||
.census_searchcensus2 { |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
|
|||
justify-content: space-between; |
|||
align-items: flex-end; |
|||
margin-bottom: 0px; |
|||
margin-top: 0px; |
|||
.census_searchcensus_box { |
|||
align-items: flex-end; |
|||
display: flex; |
|||
img { |
|||
width: 64px; |
|||
height: 64px; |
|||
margin-right: 20px; |
|||
} |
|||
h2 { |
|||
font-size: 28px; |
|||
color: #333333; |
|||
|
|||
text-align: left; |
|||
line-height: 40px; |
|||
margin: 0px; |
|||
} |
|||
h3 { |
|||
font-size: 14px; |
|||
color: #333333; |
|||
|
|||
text-align: left; |
|||
|
|||
margin: 0px; |
|||
font-weight: normal; |
|||
} |
|||
} |
|||
} |
|||
.div_table_title { |
|||
margin-top: 20px; |
|||
line-height: 30px; |
|||
font-size: 20px; |
|||
|
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
.diy-button--output { |
|||
width: 100px; |
|||
height: 38px; |
|||
|
|||
background: #feb349; |
|||
box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31); |
|||
border-radius: 6px; |
|||
color: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,567 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
<div> |
|||
<div class="div_search"> |
|||
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'80px'"> |
|||
<div> |
|||
<el-form-item label="所属组织" prop="orgId"> |
|||
<el-cascader |
|||
class="customer_cascader" |
|||
ref="myCascader" |
|||
filterable |
|||
clearable |
|||
v-model="formData.orgId" |
|||
:options="orgOptions" |
|||
:props="orgOptionProps" |
|||
:show-all-levels="false" |
|||
@change="handleChangeAgency" |
|||
></el-cascader> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="" prop="startDate"> |
|||
<el-date-picker |
|||
v-model="formData.startDate" |
|||
:picker-options="startPickerOptions" |
|||
class="item_width_2" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间" |
|||
@change="handleSearch" |
|||
></el-date-picker> |
|||
<span class="data-tag">至</span> |
|||
<el-date-picker |
|||
v-model="formData.endDate" |
|||
:picker-options="endPickerOptions" |
|||
class="item_width_2 data-tag" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
value="yyyy-MM-dd" |
|||
placeholder="结束时间" |
|||
@change="handleSearch" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button> |
|||
</div> |
|||
</el-form> |
|||
<div class="flex"> |
|||
<div class="census_searchcensus" v-if="level == 'city'"> |
|||
<div class="census_searchcensus_box"> |
|||
<img src="../../../assets/img/census/区级.png" /> |
|||
<div> |
|||
<h2>{{ censusData.district }}</h2> |
|||
<h3>区县数</h3> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="census_searchcensus" v-if="level == 'city' || level == 'district'"> |
|||
<div class="census_searchcensus_box"> |
|||
<img src="../../../assets/img/census/镇街.png" /> |
|||
<div> |
|||
<h2>{{ censusData.street }}</h2> |
|||
<h3>镇街数</h3> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="census_searchcensus" v-if="level == 'city' || level == 'district' || level == 'street'"> |
|||
<div class="census_searchcensus_box"> |
|||
<img src="../../../assets/img/census/社区.png" /> |
|||
<div> |
|||
<h2>{{ censusData.community }}</h2> |
|||
<h3>社区数</h3> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="census_searchcensus"> |
|||
<div class="census_searchcensus_box"> |
|||
<img src="../../../assets/img/census/网格数.png" /> |
|||
<div> |
|||
<h2>{{ censusData.grid }}</h2> |
|||
<h3>网格数</h3> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="census_searchcensus" @click="show(3)"> |
|||
<div class="census_searchcensus_box"> |
|||
<img src="../../../assets/img/census/工作人员.png" /> |
|||
<div> |
|||
<h2>{{ censusData.staff }}</h2> |
|||
<h3>工作人员数</h3> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="24"> |
|||
<div class="div_table"> |
|||
<div class="div_table_title">下级社区数量统计</div> |
|||
<div :style="'height:' + TableHeight + 'px;margin-top:20px'" :h="maxTableHeight"> |
|||
<screen-echarts-frame |
|||
@handelClickMyPei="handelClickMyPei" |
|||
:style="{ width: '100%', height: '100%' }" |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<el-dialog :title="title" :visible.sync="dialogVisible" v-if="dialogVisible" width="30%" :before-close="handleClose"> |
|||
<el-table :data="tableDataView" border v-loading="tableLoading2" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" class="table" style="width: 100%"> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="name" align="center" label="社区名称" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="streeName" label="所属街道" align="center" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="districtName" label="所属区县" align="center" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="createTime" align="center" width="110" label="开通时间" :show-overflow-tooltip="true"></el-table-column> |
|||
</el-table> |
|||
|
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[10, 20, 50, 100, 200]" |
|||
:page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total" |
|||
></el-pagination> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import screenEchartsFrame from './chart'; |
|||
|
|||
import { requestPost, requestGet } from '@/js/dai/request'; |
|||
import nextTick from 'dai-js/tools/nextTick'; |
|||
import { mapGetters } from 'vuex'; |
|||
|
|||
import axios from 'axios'; |
|||
|
|||
export default { |
|||
components: {}, |
|||
|
|||
data() { |
|||
let endDisabledDate = time => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
if (this.formData.startDate) { |
|||
let startDate = new Date(this.formData.startDate); |
|||
return time.getTime() > nowData || time.getTime() < startDate || time.getTime() === startDate; |
|||
} else { |
|||
return time.getTime() > nowData; |
|||
} |
|||
}; |
|||
let startDisabledDate = time => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
return time.getTime() > nowData; |
|||
}; |
|||
return { |
|||
pieChart: '', |
|||
pieOption: {}, |
|||
pieInitState: false, |
|||
pieData: [], |
|||
title: '', |
|||
dialogVisible: false, |
|||
tableLoading: false, |
|||
tableLoading2: false, |
|||
pageType: 'list', // 列表list 新增add 处理dispose 详情info |
|||
user: {}, |
|||
agencyId: '', |
|||
gridList: [], //所属网格list--场所区域 |
|||
agencyIdArray: [], |
|||
orgOptions: [], |
|||
orgOptionProps: { |
|||
multiple: false, |
|||
checkStrictly: true, |
|||
emitPath: false, |
|||
children: 'subAgencyList', |
|||
label: 'agencyName', |
|||
value: 'agencyId' |
|||
}, |
|||
tableData: [], |
|||
tableDataView: [], |
|||
censusData: { district: '', street: '', community: '', grid: '', staff: '' }, |
|||
formData: { |
|||
orgId: '', |
|||
level: '', |
|||
startDate: '', |
|||
endDate: '' |
|||
}, |
|||
|
|||
cateOptions: [], |
|||
eventTypeCheck: [], |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem('pageSize') || 10, |
|||
total: 1, |
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
eventId: '', |
|||
orgType: '', |
|||
eventDetailData: {}, |
|||
|
|||
showVoice: false, |
|||
selVoiceUrl: '', |
|||
|
|||
multipleSelection: [], |
|||
TableHeight: '', |
|||
pieData: {}, |
|||
agencyId: '' |
|||
}; |
|||
}, |
|||
components: { |
|||
screenEchartsFrame |
|||
}, |
|||
computed: { |
|||
maxTableHeight() { |
|||
this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 450 + this.iframeHeigh : this.clientHeight - 450; |
|||
console.log('this.TableHeight', this.TableHeight); |
|||
return this.TableHeight; |
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
watch: { |
|||
'formData.endDate': function(val) { |
|||
if (val && val != '') { |
|||
let arrayTemp = val.split(' '); |
|||
this.formData.endDate = arrayTemp[0] + ' 23:59:59'; |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
console.log(this.$store.state); |
|||
this.user = this.$store.state.user; |
|||
this.agencyId = this.user.agencyId; |
|||
console.log(this.user); |
|||
this.getOrgTreeList(); |
|||
|
|||
this.getTableData(); |
|||
this.getsubData(); |
|||
this.getCountLevel(); |
|||
|
|||
// this.getPie(); |
|||
}, |
|||
methods: { |
|||
handleSearch(val) { |
|||
this.getTableData(); |
|||
this.getsubData(); |
|||
this.getCountLevel(); |
|||
}, |
|||
show() { |
|||
this.pageNo = 1; |
|||
this.showNext(); |
|||
this.dialogVisible = true; |
|||
}, |
|||
handleClose() { |
|||
this.dialogVisible = false; |
|||
}, |
|||
async showNext() { |
|||
let url = ''; |
|||
let param = {}; |
|||
console.log('this.orgType', this.orgType); |
|||
this.title = this.orgName + '社区列表'; |
|||
// district street community |
|||
// 1 是区县 2是镇街 3是社区 4是下级 |
|||
url = '/gov/org/customeragency/getCommunityList'; |
|||
param = { |
|||
agencyId: this.orgId, |
|||
timeStart: this.formData.startDate, |
|||
timeEnd: this.formData.endDate, |
|||
pageNum: this.pageNo, |
|||
pageSize: this.pageSize |
|||
}; |
|||
this.tableLoading2 = true; |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
this.tableLoading2 = false; |
|||
if (code === 0) { |
|||
this.total = data.total || 0; |
|||
this.tableDataView = data.list |
|||
? data.list.map(item => { |
|||
return item; |
|||
}) |
|||
: []; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
handleChangeAgency(val) { |
|||
let obj = this.$refs['myCascader'].getCheckedNodes()[0].data; |
|||
console.log(obj); |
|||
this.formData.orgId = obj.agencyId; |
|||
this.formData.level = obj.level; |
|||
}, |
|||
getOrgTreeList() { |
|||
// gov/org/customeragency/staffinagencylist |
|||
|
|||
const { user } = this.$store.state; |
|||
this.$http |
|||
.post('gov/org/customeragency/staffinAgencyLevelList', {}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
console.log('获取组织树成功', res.data); |
|||
let { agencyList, subAgencyList } = res.data; |
|||
const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }]; |
|||
this.orgOptions = this.deepTree(_arr); |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误'); |
|||
}); |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async handleDispose(row) { |
|||
this.eventId = row.icEventId; |
|||
const url = '/gov/project/icEvent/detail'; |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/detail"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
icEventId: this.eventId |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.eventDetailData = { ...data }; |
|||
this.pageType = 'dispose'; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getCountLevel() { |
|||
console.log('this.formData.orgId', this.formData.orgId); |
|||
|
|||
let agencyId = ''; |
|||
let tmp = this.formData.orgId; |
|||
if (!tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null) { |
|||
agencyId = this.formData.orgId; |
|||
this.level = this.formData.level; |
|||
} else { |
|||
agencyId = this.agencyId; |
|||
this.level = this.user.level; |
|||
} |
|||
|
|||
const url = '/gov/org/customeragency/getAgencyCountList'; |
|||
let params = { agencyId: agencyId }; |
|||
const { data, code, msg } = await requestGet(url, params); |
|||
|
|||
if (code === 0) { |
|||
data.map(item => { |
|||
return (this.censusData[item.level] = item.count); |
|||
}); |
|||
console.log('this.censusData', this.censusData); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getTableData() {}, |
|||
async getsubData() { |
|||
this.$refs.pieChart.showLoading(); |
|||
let url = '/gov/org/customeragency/getCommunityCountList'; |
|||
let agencyId = ''; |
|||
let tmp = this.formData.orgId; |
|||
if (!tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null) { |
|||
agencyId = this.formData.orgId; |
|||
} else { |
|||
agencyId = this.agencyId; |
|||
} |
|||
const { data, code, msg } = await requestPost(url, { agencyId: agencyId, timeStart: this.formData.startDate, timeEnd: this.formData.endDate }); |
|||
|
|||
this.$refs.pieChart.hideLoading(); |
|||
|
|||
if (code === 0) { |
|||
this.pieData = data; |
|||
// console.log('this.pieData ', this.pieData); |
|||
this.getPie(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
window.localStorage.setItem('pageSize', val); |
|||
this.showNext(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.showNext(); |
|||
}, |
|||
deepTree(arr) { |
|||
if (Array.isArray(arr)) { |
|||
return arr.map(item => { |
|||
return { |
|||
...item, |
|||
subAgencyList: (item.subAgencyList.length > 0 && this.deepTree(item.subAgencyList)) || null |
|||
}; |
|||
}); |
|||
} |
|||
}, |
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.setPieData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
setPieData() { |
|||
let data = [...this.pieData]; |
|||
console.log('data', data); |
|||
let chartData = {}; |
|||
chartData.name = data.map(item => item.agencyName); |
|||
chartData.data = data.map(item => { |
|||
return { value: item.count, id: item.agencyId, name: item.agencyName }; |
|||
}); |
|||
console.log('chartData', chartData); |
|||
this.iniPieChart(chartData); |
|||
}, |
|||
// 获取饼状图 |
|||
async iniPieChart(chartData) { |
|||
this.$refs.pieChart.clear(); |
|||
// 获取pieChart配置 |
|||
this.pieOption = { |
|||
tooltip: { |
|||
trigger: 'axis' |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: chartData.name, |
|||
axisLabel: { |
|||
interval: 0, |
|||
interval: 0, //设置横坐标为斜 |
|||
rotate: 30, //文字倾斜角度 |
|||
formatter: function(value) { |
|||
if (value.length > 10) { |
|||
value = value.substring(0, 9) + '..'; |
|||
} |
|||
return value; |
|||
} |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
splitArea: { |
|||
show: true, |
|||
areaStyle: { |
|||
color: ['#fff', '#F3F7FD'] |
|||
} |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: chartData.data, |
|||
type: 'bar', |
|||
itemStyle: { |
|||
color: 'rgb(33, 149, 254)' |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
}, |
|||
handelClickMyPei(param) { |
|||
if (param.data.level != 'community') { |
|||
if (param.data.level == 'district') { |
|||
this.orgType = 'street'; |
|||
} |
|||
if (param.data.level == 'street') { |
|||
this.orgType = 'community'; |
|||
} |
|||
|
|||
this.orgId = param.data.id; |
|||
this.orgName = param.data.name; |
|||
this.pageNo = 1; |
|||
this.show(); |
|||
this.dialogVisible = true; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/buttonstyle.scss'; |
|||
@import '@/assets/scss/modules/management/list-main.scss'; |
|||
@import '@/assets/scss/modules/shequzhili/event-info.scss'; |
|||
// .div_main .div_search{padding:35px} |
|||
.btnSearch { |
|||
width: 100px; |
|||
height: 36px; |
|||
background: #2195fe; |
|||
box-shadow: 0px 2px 6px 0px rgba(28, 107, 253, 0.31); |
|||
border-radius: 6px; |
|||
color: #fff; |
|||
} |
|||
.div_search { |
|||
.item_width_2 { |
|||
width: 200px; |
|||
} |
|||
} |
|||
.flex { |
|||
display: flex; |
|||
} |
|||
.census_searchcensus { |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-bottom: 30px; |
|||
margin-top: 20px; |
|||
.census_searchcensus_box { |
|||
cursor: pointer; |
|||
display: flex; |
|||
img { |
|||
width: 64px; |
|||
height: 64px; |
|||
margin-right: 20px; |
|||
} |
|||
h2 { |
|||
font-size: 28px; |
|||
color: #333333; |
|||
height: 40px; |
|||
text-align: left; |
|||
line-height: 40px; |
|||
margin: 0px; |
|||
} |
|||
h3 { |
|||
font-size: 14px; |
|||
color: #333333; |
|||
|
|||
text-align: left; |
|||
|
|||
margin: 0px; |
|||
font-weight: normal; |
|||
} |
|||
} |
|||
} |
|||
.div_table_title { |
|||
margin-top: 20px; |
|||
line-height: 30px; |
|||
font-size: 20px; |
|||
|
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
.cur { |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,874 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
<div> |
|||
<div class="div_search"> |
|||
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'80px'"> |
|||
<div> |
|||
<el-form-item label="所属组织" prop="orgId"> |
|||
<el-cascader |
|||
class="customer_cascader" |
|||
ref="myCascader" |
|||
clearable |
|||
v-model="formData.orgId" |
|||
:options="orgOptions" |
|||
:props="orgOptionProps" |
|||
:show-all-levels="false" |
|||
@change="handleChangeAgency" |
|||
></el-cascader> |
|||
</el-form-item> |
|||
|
|||
<el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
<div class="div_table"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<div class="div_table_title">居民年龄统计</div> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div :style="'height:220px;margin-top:20px'"> |
|||
<screen-echarts-frame |
|||
@handelClickMyPei="handelClickMyPei" |
|||
:style="{ width: '100%', height: '100%' }" |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div :style="'height:220px;margin-top:20px;display:flex;align-items: center;'"> |
|||
<div class="legend"> |
|||
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)"> |
|||
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> |
|||
<div class="content"> |
|||
<div class="name">{{ item.name }}</div> |
|||
<div class="num">{{ item.value }}</div> |
|||
<div class="unit" :style="{ color: color[index] }">{{ item.value / 100 }}%</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="div_table_title">居民学历统计</div> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div :style="'height:220px;margin-top:20px'"> |
|||
<screen-echarts-frame2 |
|||
@handelClickMyPei="handelClickMyPei2" |
|||
:style="{ width: '100%', height: '100%' }" |
|||
@myChartMethod="pieInitOk2" |
|||
ref="pieChart2" |
|||
></screen-echarts-frame2> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div :style="'height:220px;margin-top:20px;display:flex;align-items: center;'"> |
|||
<div class="legend"> |
|||
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem2(item)"> |
|||
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> |
|||
<div class="content"> |
|||
<div class="name">{{ item.name }}</div> |
|||
<div class="num">{{ item.value }}</div> |
|||
<div class="unit" :style="{ color: color[index] }">{{ item.value / 100 }}%</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
|
|||
<el-col :span="24"> |
|||
<div class="census_searchcensus2"> |
|||
<div class="census_searchcensus_box"></div> |
|||
<el-button size="small" class="diy-button--output" @click="handleExport(1)">导出</el-button> |
|||
</div> |
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" |
|||
class="table" |
|||
style="width: 100%;" |
|||
:height="maxTableHeight" |
|||
> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|||
<el-table-column prop="name" label="姓名" align="center" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="mobile" label="手机号" align="center" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="idCard" align="center" label="证件号" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="genderName" align="center" label="性别" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="age" align="center" label="年龄" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="educationName" align="center" label="学历" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true"> |
|||
<template slot-scope="scope"> |
|||
<el-button size="small" type="text" @click="show(scope.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[10, 20, 50, 100, 200]" |
|||
:page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total" |
|||
></el-pagination> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<!-- :pageType="pageType" --> |
|||
<!-- :disabled="disabled" --> |
|||
<addForm v-if="dialogVisible" :dialogVisible="dialogVisible" :userId="detailId" :pageType="pageType" :detailData="detailData" @handleClose="handleClose" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import screenEchartsFrame from './chart'; |
|||
import screenEchartsFrame2 from './chart'; |
|||
import { requestPost } from '@/js/dai/request'; |
|||
import nextTick from 'dai-js/tools/nextTick'; |
|||
import { mapGetters } from 'vuex'; |
|||
import addForm from './addFormResident.vue'; |
|||
|
|||
import axios from 'axios'; |
|||
|
|||
export default { |
|||
components: { screenEchartsFrame, screenEchartsFrame2, addForm }, |
|||
data() { |
|||
let endDisabledDate = time => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
if (this.formData.startTime) { |
|||
let startTime = new Date(this.formData.startTime); |
|||
return time.getTime() > nowData || time.getTime() < startTime || time.getTime() === startTime; |
|||
} else { |
|||
return time.getTime() > nowData; |
|||
} |
|||
}; |
|||
let startDisabledDate = time => { |
|||
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now(); |
|||
return time.getTime() > nowData; |
|||
}; |
|||
return { |
|||
dialogVisible: false, |
|||
detailId: '', |
|||
detailData: {}, |
|||
pageType: '', |
|||
disabled: false, |
|||
tableLoading: false, |
|||
user: {}, |
|||
gridList: [], //所属网格list--场所区域 |
|||
tableData: [], |
|||
formData: { |
|||
orgId: '' |
|||
}, |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem('pageSize') || 20, |
|||
total: 1, |
|||
endPickerOptions: { |
|||
//时间 |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
//时间 |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
agencyId: '', //组织 |
|||
agencyIdArray: [], //组织 |
|||
orgOptions: [], //组织 |
|||
orgOptionProps: { |
|||
//组织 |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
emitPath: false, |
|||
checkStrictly: true |
|||
}, |
|||
TableHeight: '', |
|||
pieInitState: false, |
|||
pieInitState2: false, |
|||
pieOption: [], |
|||
pieOption2: [], |
|||
color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'], |
|||
chartData: [], |
|||
chartData2: [], |
|||
pieData: [], |
|||
pieData2: [], |
|||
orgId: '', |
|||
orgType: '', |
|||
code: '', |
|||
pieDatatotal: 0, |
|||
pieDatatotal2: 0, |
|||
codeType: 'education' |
|||
}; |
|||
}, |
|||
computed: { |
|||
maxTableHeight() { |
|||
this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 635 + this.iframeHeigh : this.clientHeight - 635; |
|||
return this.TableHeight; |
|||
}, |
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
watch: { |
|||
'formData.endTime': function(val) { |
|||
if (val && val != '') { |
|||
let arrayTemp = val.split(' '); |
|||
this.formData.endTime = arrayTemp[0] + ' 23:59:59'; |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
console.log(this.$store.state); |
|||
this.user = this.$store.state.user; |
|||
this.agencyId = this.user.agencyId; |
|||
// this.orgId = this.agencyId; |
|||
this.getOrgTreeList(); |
|||
this.getTableData(); |
|||
this.getsubData(); |
|||
this.getsubData2(); |
|||
}, |
|||
methods: { |
|||
show(row) { |
|||
this.dialogVisible = true; |
|||
this.pageType = 'view'; |
|||
this.detailId = row.icResiUserId; |
|||
this.detailData = { |
|||
gridName: row.gridName, |
|||
homeName: row.homeName, |
|||
villageName: row.villageName, |
|||
buildName: row.buildName, |
|||
unitName: row.unitName, |
|||
doorName: row.doorName |
|||
}; |
|||
}, |
|||
handleClose() { |
|||
this.dialogVisible = false; |
|||
this.pageType = 'list'; |
|||
this.detailId = ''; |
|||
this.getTableData(); |
|||
}, |
|||
async getTableData() { |
|||
this.tableLoading = true; |
|||
// const url = '/gov/org/staffLoginLog/community-count'; |
|||
const url = '/epmetuser/icresiuser/portrayal-list'; |
|||
|
|||
const { pageSize, pageNo, formData } = this; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
orgId: this.orgId, |
|||
orgType: this.orgType, |
|||
code: this.code, |
|||
codeType: this.codeType |
|||
}); |
|||
|
|||
this.tableLoading = false; |
|||
if (code === 0) { |
|||
this.total = data.total || 0; |
|||
this.tableData = data.list |
|||
? data.list.map(item => { |
|||
return item; |
|||
}) |
|||
: []; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
window.localStorage.setItem('pageSize', val); |
|||
this.getTableData(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
async getsubData() { |
|||
this.$refs.pieChart.showLoading(); |
|||
let url = '/epmetuser/icresiuser/age-distribute'; |
|||
let param = { |
|||
orgId: this.orgId, |
|||
orgType: this.orgType |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
this.$refs.pieChart.hideLoading(); |
|||
if (code === 0) { |
|||
this.pieData = data; |
|||
this.getPie(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getsubData2() { |
|||
this.$refs.pieChart2.showLoading(); |
|||
let url = '/epmetuser/icresiuser/education-distribute'; |
|||
let param = { |
|||
orgId: this.orgId, |
|||
orgType: this.orgType |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
this.$refs.pieChart2.hideLoading(); |
|||
if (code === 0) { |
|||
this.pieData2 = data; |
|||
|
|||
console.log('this.pieData2', this.pieData2); |
|||
this.getPie2(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
pieInitOk2() { |
|||
this.pieInitState2 = true; |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.setPieData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
getPie2() { |
|||
if (this.pieInitState2) { |
|||
this.setPieData2(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie2(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
setPieData() { |
|||
let data = [...this.pieData]; |
|||
this.pieDatatotal = data |
|||
.map(item => item.totalResi) |
|||
.reduce(function(prev, cur, index, arr) { |
|||
console.log(prev, cur, index); |
|||
return prev + cur; |
|||
}); |
|||
this.chartData.name = data.map(item => item.codeName); |
|||
this.chartData.data = data.map(item => { |
|||
return { |
|||
value: item.totalResi, |
|||
name: item.codeName, |
|||
code: item.code, |
|||
radio: item.totalResi == 0 ? '0' : ((item.totalResi / this.pieDatatotal) * 100).toFixed(2) |
|||
}; |
|||
}); |
|||
console.log('chartData', this.chartData); |
|||
this.iniPieChart(this.chartData); |
|||
}, |
|||
setPieData2() { |
|||
let data = [...this.pieData2]; |
|||
|
|||
this.pieDatatotal2 = data |
|||
.map(item => item.totalResi) |
|||
.reduce(function(prev, cur, index, arr) { |
|||
console.log(prev, cur, index); |
|||
return prev + cur; |
|||
}); |
|||
|
|||
this.chartData2.name = data.map(item => item.codeName); |
|||
this.chartData2.data = data.map(item => { |
|||
return { |
|||
value: item.totalResi, |
|||
name: item.codeName, |
|||
code: item.code, |
|||
radio: item.totalResi == 0 ? '0' : ((item.totalResi / this.pieDatatotal2) * 100).toFixed(2) |
|||
}; |
|||
}); |
|||
|
|||
console.log('chartData', this.chartData2); |
|||
this.iniPieChart2(this.chartData2); |
|||
}, |
|||
// 获取饼状图 |
|||
async iniPieChart(chartData) { |
|||
this.$refs.pieChart.clear(); |
|||
// 获取pieChart配置 |
|||
this.pieOption = { |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{b}<br/>总数 : {c}<br/> 占比 : {d}%', |
|||
backgroundColor: 'rgb(134,134,134)', |
|||
borderColor: 'rgb(134,134,134)', |
|||
textStyle: { |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
color: this.color, |
|||
title: { |
|||
text: this.pieDatatotal, |
|||
subtext: '总数', |
|||
x: 'center', |
|||
y: 'center', |
|||
textStyle: { |
|||
fontSize: 26, |
|||
color: '#333333', |
|||
fontWeight: 'bold' |
|||
}, |
|||
subtextStyle: { |
|||
fontSize: 14, |
|||
color: '#333333' |
|||
} |
|||
}, |
|||
|
|||
series: [ |
|||
{ |
|||
type: 'pie', |
|||
radius: ['65%', '80%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
tooltip: { |
|||
show: true |
|||
}, |
|||
|
|||
data: chartData.data |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['60%', '65%'], |
|||
center: ['50%', '50%'], |
|||
selectedMode: false, |
|||
hoverAnimation: false, |
|||
data: [{ value: 1, name: '' }], |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
animation: false, |
|||
cursor: 'auto', |
|||
emphasis: { |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['80%', '85%'], |
|||
center: ['50%', '50%'], |
|||
selectedMode: false, |
|||
hoverAnimation: false, |
|||
data: [{ value: 1, name: '' }], |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
animation: false, |
|||
cursor: 'auto', |
|||
emphasis: { |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
}, |
|||
async iniPieChart2(chartData) { |
|||
this.$refs.pieChart2.clear(); |
|||
// 获取pieChart配置 |
|||
|
|||
this.pieOption2 = { |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{b}<br/>总数 : {c}<br/> 占比 : {d}%', |
|||
backgroundColor: 'rgb(134,134,134)', |
|||
borderColor: 'rgb(134,134,134)', |
|||
textStyle: { |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
color: this.color, |
|||
title: { |
|||
text: this.pieDatatotal2, |
|||
subtext: '总数', |
|||
x: 'center', |
|||
y: 'center', |
|||
textStyle: { |
|||
fontSize: 26, |
|||
color: '#333333', |
|||
fontWeight: 'bold' |
|||
}, |
|||
subtextStyle: { |
|||
fontSize: 14, |
|||
color: '#333333' |
|||
} |
|||
}, |
|||
|
|||
series: [ |
|||
{ |
|||
type: 'pie', |
|||
radius: ['65%', '80%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
tooltip: { |
|||
show: true |
|||
}, |
|||
|
|||
data: chartData.data |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['60%', '65%'], |
|||
center: ['50%', '50%'], |
|||
selectedMode: false, |
|||
hoverAnimation: false, |
|||
data: [{ value: 1, name: '' }], |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
animation: false, |
|||
cursor: 'auto', |
|||
emphasis: { |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
type: 'pie', |
|||
radius: ['80%', '85%'], |
|||
center: ['50%', '50%'], |
|||
selectedMode: false, |
|||
hoverAnimation: false, |
|||
data: [{ value: 1, name: '' }], |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
}, |
|||
label: { |
|||
show: false |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
animation: false, |
|||
cursor: 'auto', |
|||
emphasis: { |
|||
itemStyle: { |
|||
color: '#f7f7f7' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
this.$refs.pieChart2.setOption(this.pieOption2); |
|||
}, |
|||
handelClickMyPei(param) { |
|||
this.code = param.data.code; |
|||
this.codeType = 'age'; |
|||
this.getTableData(); |
|||
}, |
|||
|
|||
handelClickMyPei2(param) { |
|||
this.code = param.data.code; |
|||
this.codeType = 'education'; |
|||
this.getTableData(); |
|||
}, |
|||
handleClickItem(item) { |
|||
this.code = item.code; |
|||
this.codeType = 'age'; |
|||
|
|||
this.getTableData(); |
|||
}, |
|||
handleClickItem2(item) { |
|||
this.code = item.code; |
|||
this.codeType = 'education'; |
|||
this.getTableData(); |
|||
}, |
|||
async handleExport() { |
|||
const url = '/epmetuser/icresiuser/portrayal-listexport'; |
|||
const { pageSize, pageNo, formData } = this; |
|||
let tmp = this.formData.orgId; |
|||
if (!(tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null)) { |
|||
this.formData.orgId = ''; |
|||
this.orgType = ''; |
|||
this.code = ''; |
|||
this.codeType = ''; |
|||
} |
|||
|
|||
axios({ |
|||
url: window.SITE_CONFIG['apiURL'] + url, |
|||
method: 'post', |
|||
data: { |
|||
pageSize, |
|||
pageNo, |
|||
orgId: this.orgId, |
|||
orgType: this.orgType, |
|||
code: this.code, |
|||
codeType: this.codeType |
|||
}, |
|||
responseType: 'blob' |
|||
}) |
|||
.then(res => { |
|||
let fileName = window.decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]); |
|||
console.log('filename', fileName); |
|||
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }); |
|||
var url = window.URL.createObjectURL(blob); |
|||
var aLink = document.createElement('a'); |
|||
aLink.style.display = 'none'; |
|||
aLink.href = url; |
|||
aLink.setAttribute('download', fileName); |
|||
document.body.appendChild(aLink); |
|||
aLink.click(); |
|||
document.body.removeChild(aLink); //下载完成移除元素 |
|||
window.URL.revokeObjectURL(url); //释放掉blob对象 |
|||
}) |
|||
.catch(err => { |
|||
console.log('获取导出情失败', err); |
|||
return this.$message.error('网络错误'); |
|||
}); |
|||
}, |
|||
getOrgTreeList() { |
|||
const { user } = this.$store.state; |
|||
this.$http |
|||
.post('/gov/org/customeragency/agencygridtree', {}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
console.log('获取组织树成功', res.data); |
|||
// let { agencyList, subAgencyList } = res.data; |
|||
// const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }]; |
|||
// this.orgOptions = this.deepTree(_arr); |
|||
this.orgOptions = []; |
|||
this.orgOptions.push(res.data); |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误'); |
|||
}); |
|||
}, |
|||
handleSearch(val) { |
|||
this.pageNo = 1; |
|||
this.code = ''; |
|||
this.codeType = ''; |
|||
this.getTableData(); |
|||
this.getsubData(); |
|||
this.getsubData2(); |
|||
}, |
|||
handleChangeAgency(val) { |
|||
let obj = this.$refs['myCascader'].getCheckedNodes()[0].data; |
|||
if (obj) { |
|||
this.orgType = obj.level === 'grid' ? 'grid' : 'agency'; |
|||
} else { |
|||
this.orgType = ''; |
|||
} |
|||
|
|||
let tmp = this.formData.orgId; |
|||
|
|||
if (tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null) { |
|||
this.orgId = this.formData.orgId; |
|||
} else { |
|||
this.orgId = ''; |
|||
} |
|||
console.log('this.orgId', this.orgId); |
|||
}, |
|||
deepTree(arr) { |
|||
if (Array.isArray(arr)) { |
|||
return arr.map(item => { |
|||
return { |
|||
...item, |
|||
subAgencyList: (item.subAgencyList.length > 0 && this.deepTree(item.subAgencyList)) || null |
|||
}; |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/buttonstyle.scss'; |
|||
@import '@/assets/scss/modules/management/list-main.scss'; |
|||
@import '@/assets/scss/modules/shequzhili/event-info.scss'; |
|||
.legend { |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
.legend-row { |
|||
cursor: pointer; |
|||
min-width: 100px; |
|||
display: flex; |
|||
margin-bottom: 30px; |
|||
margin-right: 25px; |
|||
.kuai { |
|||
width: 12px; |
|||
height: 12px; |
|||
margin-right: 10px; |
|||
border-radius: 4px; |
|||
} |
|||
.content { |
|||
.name { |
|||
font-size: 14px; |
|||
color: #999; |
|||
margin-bottom: 10px; |
|||
} |
|||
.num { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
} |
|||
.unit { |
|||
font-size: 16px; |
|||
display: inline-block; |
|||
margin-left: 7px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.legend2 { |
|||
// display: flex; |
|||
// flex-flow: row wrap; |
|||
|
|||
.legend-row { |
|||
cursor: pointer; |
|||
width: 100%; |
|||
display: flex; |
|||
margin-bottom: 16px; |
|||
.kuai { |
|||
margin-right: 10px; |
|||
border-radius: 4px; |
|||
img { |
|||
width: 40px; |
|||
height: 40px; |
|||
} |
|||
} |
|||
.content { |
|||
display: flex; |
|||
align-items: center; |
|||
.name { |
|||
font-size: 14px; |
|||
color: #999; |
|||
width: 60px; |
|||
} |
|||
.num { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
} |
|||
.unit { |
|||
font-size: 16px; |
|||
display: inline-block; |
|||
margin-left: 7px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.btnSearch { |
|||
width: 100px; |
|||
height: 36px; |
|||
background: #2195fe; |
|||
box-shadow: 0px 2px 6px 0px rgba(28, 107, 253, 0.31); |
|||
border-radius: 6px; |
|||
color: #fff; |
|||
} |
|||
.div_search { |
|||
.item_width_2 { |
|||
width: 200px; |
|||
} |
|||
} |
|||
// /这里是不一样的,居左，从下对齐 |
|||
.census_searchcensus2 { |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
|
|||
justify-content: space-between; |
|||
align-items: flex-end; |
|||
margin-bottom: 0px; |
|||
margin-top: 0px; |
|||
.census_searchcensus_box { |
|||
align-items: flex-end; |
|||
display: flex; |
|||
img { |
|||
width: 64px; |
|||
height: 64px; |
|||
margin-right: 20px; |
|||
} |
|||
h2 { |
|||
font-size: 28px; |
|||
color: #333333; |
|||
|
|||
text-align: left; |
|||
line-height: 40px; |
|||
margin: 0px; |
|||
} |
|||
h3 { |
|||
font-size: 14px; |
|||
color: #333333; |
|||
|
|||
text-align: left; |
|||
|
|||
margin: 0px; |
|||
font-weight: normal; |
|||
} |
|||
} |
|||
} |
|||
.div_table_title { |
|||
margin-top: 20px; |
|||
line-height: 30px; |
|||
font-size: 20px; |
|||
|
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
.diy-button--output { |
|||
width: 100px; |
|||
height: 38px; |
|||
|
|||
background: #feb349; |
|||
box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31); |
|||
border-radius: 6px; |
|||
color: #fff; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,163 @@ |
|||
<template> |
|||
<div class="screenEchartsFrame" |
|||
ref="screenEchartsFrame"></div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
export default { |
|||
name: 'screen-echarts-frame', |
|||
data () { |
|||
return { |
|||
myChart: '' |
|||
} |
|||
}, |
|||
props: { |
|||
chartMethod: { |
|||
type: Function |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.initChart() |
|||
window.onresize = () => { |
|||
this.myChart.resize() |
|||
} |
|||
}, |
|||
beforeDestroy () { |
|||
// 销毁echarts实例对象 |
|||
if (this.myChart) this.myChart.dispose() |
|||
}, |
|||
watch: {}, |
|||
methods: { |
|||
initChart () { |
|||
this.$nextTick(() => { |
|||
const dom = this.$refs.screenEchartsFrame |
|||
this.myChart = echarts.init(dom) |
|||
// this.myChart.setOption(this.chartMethod()) |
|||
this.$emit('myChartMethod', this.myChart) |
|||
}) |
|||
}, |
|||
// 配置option |
|||
setOption (option) { |
|||
this.myChart.setOption(option) |
|||
let than = this |
|||
this.myChart.on('click',function(param){ |
|||
than.$emit('handelClickMyPei',param) |
|||
}) |
|||
}, |
|||
// 获取option |
|||
getOption () { |
|||
if (this.myChart) { |
|||
return this.myChart.getOption() |
|||
} else { |
|||
return null |
|||
} |
|||
}, |
|||
// |
|||
resize () { |
|||
if (this.myChart) { |
|||
this.myChart.resize() |
|||
} |
|||
}, |
|||
clear () { |
|||
if (this.myChart) { |
|||
this.myChart.clear() |
|||
} |
|||
}, |
|||
showLoading () { |
|||
if (this.myChart) { |
|||
this.$nextTick(() => { |
|||
this.myChart.showLoading({ |
|||
text: '', |
|||
color: '#29cdff', |
|||
textColor: '#29cdff', |
|||
maskColor: 'rgba(255, 255, 255, 0)', |
|||
zlevel: 0 |
|||
}) |
|||
}) |
|||
} |
|||
}, |
|||
hideLoading () { |
|||
if (this.myChart) { |
|||
this.myChart.hideLoading() |
|||
} |
|||
}, |
|||
// 启动动画时使用 |
|||
tooltipAnimate (chart, length) { |
|||
// 清除上一次动画 |
|||
this.timeTicket && clearInterval(this.timeTicket) |
|||
const count = 0 |
|||
// 启动动画 |
|||
this._action(chart, count, length) |
|||
chart && // 移除动画 |
|||
chart.on('mouseover', params => { |
|||
this._cleanAction(chart, params) |
|||
}) |
|||
// 重写启动动画 |
|||
chart && |
|||
chart.on('mouseout', () => { |
|||
this._action(chart, count, length) |
|||
}) |
|||
}, |
|||
// tooltip动画action |
|||
_action (chart, count, length) { |
|||
this.timeTicket && clearInterval(this.timeTicket) |
|||
this.timeTicket = setInterval(() => { |
|||
if (!chart) { |
|||
clearInterval(this.timeTicket) |
|||
return |
|||
} |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'downplay', |
|||
seriesIndex: 0 |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'highlight', |
|||
seriesIndex: 0, |
|||
dataIndex: count % length |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'showTip', |
|||
seriesIndex: 0, |
|||
dataIndex: count % length |
|||
}) |
|||
count++ |
|||
}, 1000 * 3) |
|||
}, |
|||
_cleanAction (chart, params) { |
|||
this.timeTicket && clearInterval(this.timeTicket) |
|||
if (!chart) { |
|||
clearInterval(this.timeTicket) |
|||
return |
|||
} |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'downplay', |
|||
seriesIndex: 0 |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'highlight', |
|||
seriesIndex: 0, |
|||
dataIndex: params.dataIndex |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'showTip', |
|||
seriesIndex: 0, |
|||
dataIndex: params.dataIndex |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.screenEchartsFrame { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,422 @@ |
|||
<template> |
|||
<div class="m-record"> |
|||
<h3>巡查记录</h3> |
|||
<div> |
|||
<div class="u-table-btn1 mt10" v-if="formType == 'edit'"> |
|||
<el-button size="small" class="diy-button--blue" :disabled="btnDisabled || disabled" @click="handleAdd">新增</el-button> |
|||
</div> |
|||
<div class="m-table-item"> |
|||
<el-table :data="tableData" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" class="resi-table" row-key="id" border style="width: 100%"> |
|||
<el-table-column label="序号" type="index" align="center" width="50"></el-table-column> |
|||
<el-table-column prop="patrolTime" label="检查时间" align="center" width="200px"> |
|||
<template slot-scope="scope"> |
|||
<el-date-picker |
|||
v-if="scope.row.isEdit" |
|||
v-model="scope.row.patrolTime" |
|||
type="date" |
|||
class="input-width" |
|||
value-format="yyyy-MM-dd" |
|||
placeholder="选择日期" |
|||
></el-date-picker> |
|||
<div v-else class="div-content">{{ scope.row.patrolTime }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="staffId" label="检查人员" align="center" width="200px"> |
|||
<template slot-scope="scope"> |
|||
<el-select |
|||
v-if="scope.row.isEdit" |
|||
v-model="scope.row.staffId" |
|||
placeholder="请选择" |
|||
class="input-width" |
|||
@change="handleChangeStaff(scope.row)" |
|||
clearable |
|||
> |
|||
<el-option v-for="subItem in optionStaff" :key="subItem.value" :label="subItem.label" :value="subItem.value"></el-option> |
|||
</el-select> |
|||
<div v-else class="div-content">{{ scope.row.staffName }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="mobile" label="联系电话" align="center" width="200px"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-if="scope.row.isEdit" type="number" v-model="scope.row.mobile" placeholder="请输入" class="input-width" clearable disabled></el-input> |
|||
<div v-else class="div-content">{{ scope.row.mobile }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="result" label="检查结果" align="center" width="200px"> |
|||
<template slot-scope="scope"> |
|||
<el-select v-if="scope.row.isEdit" v-model="scope.row.result" placeholder="请选择" class="input-width" size="small" clearable> |
|||
<el-option v-for="subItem in optionResult" :key="subItem.value" :label="subItem.label" :value="subItem.value"></el-option> |
|||
</el-select> |
|||
<div v-else class="div-content">{{ scope.row.result == 1 ? '正常' : '异常' }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<!-- <el-table-column |
|||
prop="detailed" |
|||
label="隐患明细" |
|||
align="center" |
|||
width="200px" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
v-if="scope.row.isEdit" |
|||
type="text" |
|||
v-model="scope.row.detailed" |
|||
placeholder="请输入" |
|||
class="input-width" |
|||
maxlength="500" |
|||
clearable |
|||
></el-input> |
|||
<div v-else class="div-content"> |
|||
{{ scope.row.detailed }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> --> |
|||
|
|||
<el-table-column prop="imgList" label="图片列表" align="center"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.isEdit"> |
|||
<el-upload |
|||
:headers="$getElUploadHeaders()" |
|||
class="avatar-uploader" |
|||
:action="uploadUrl" |
|||
:data="{ customerId: customerId }" |
|||
:show-file-list="true" |
|||
:limit="3" |
|||
:file-list="scope.row.imgList" |
|||
:on-success="res => handleImgSuccess(res, scope.row)" |
|||
:on-remove="res => handleImgRemove(res, scope.row)" |
|||
list-type="picture" |
|||
:before-upload="beforeImgUpload" |
|||
> |
|||
<i class="el-icon-plus avatar-uploader-icon"></i> |
|||
最多三张图片 |
|||
</el-upload> |
|||
</div> |
|||
|
|||
<div v-else class="div-content"> |
|||
<el-image |
|||
v-if="scope.row.imgList.length > 0" |
|||
style="width: 100px; height: 50px" |
|||
:src="scope.row.imgList[0]" |
|||
fit="cover" |
|||
:preview-src-list="scope.row.imgList" |
|||
></el-image> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="reviewTime" label="拟复查时间" align="center" width="200px"> |
|||
<template slot-scope="scope"> |
|||
<el-date-picker |
|||
v-if="scope.row.isEdit" |
|||
v-model="scope.row.reviewTime" |
|||
type="date" |
|||
class="input-width" |
|||
value-format="yyyy-MM-dd" |
|||
placeholder="选择日期" |
|||
></el-date-picker> |
|||
<div v-else class="div-content">{{ scope.row.reviewTime }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column v-if="!disabled" fixed="right" label="操作" align="center" width="120"> |
|||
<template slot-scope="scope"> |
|||
<template v-if="scope.row.isEdit"> |
|||
<el-button @click="handleEdit(scope.row)" type="text" size="small" class="btn-color-edit">保存</el-button> |
|||
<el-button @click="handleChange(scope.row, 'cancle')" type="text" size="small" class="btn-color-edit">取消</el-button> |
|||
</template> |
|||
<template v-else> |
|||
<el-button v-if="formType == 'edit'" @click="handleChange(scope.row, 'edit')" type="text" size="small" :disabled="disabled" class="btn-color-edit"> |
|||
修改 |
|||
</el-button> |
|||
<el-popconfirm v-if="formType == 'edit'" title="删除之后无法恢复，确认删除？" @onConfirm="del(scope.row)" @confirm="del(scope.row)"> |
|||
<el-button slot="reference" type="text" size="small" class="btn-color-del" style="margin-left: 10px">删除</el-button> |
|||
</el-popconfirm> |
|||
</template> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost, requestGet } from '@/js/dai/request'; |
|||
export default { |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
info: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
formType: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
source: { |
|||
//展示来源：manage 管理平台 visiual 可视化平台 |
|||
type: String, |
|||
default: 'manage' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
uploadUrl: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2', |
|||
customerId: localStorage.getItem('customerId'), |
|||
|
|||
btnDisabled: false, |
|||
btnType: 'cancle', |
|||
isEdit: false, |
|||
tableData: [], |
|||
tempRow: {}, |
|||
|
|||
optionResult: [ |
|||
{ |
|||
label: '异常', |
|||
value: '0' |
|||
}, |
|||
{ |
|||
label: '正常', |
|||
value: '1' |
|||
} |
|||
], |
|||
optionStaff: [ |
|||
// { |
|||
// label: "人名", |
|||
// value: "inspectStaffId", |
|||
// }, |
|||
] |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
allowOperate() { |
|||
const { |
|||
info: { agencyId } |
|||
} = this; |
|||
return agencyId && agencyId == this.$store.state.user.agencyId; |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
id: { |
|||
handler(val) { |
|||
if (val.length > 0) { |
|||
this.btnDisabled = false; |
|||
this.getList(); |
|||
} else this.btnDisabled = true; |
|||
}, |
|||
immediate: true |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
this.getOptionStaff(); |
|||
}, |
|||
|
|||
methods: { |
|||
beforeImgUpload(file) { |
|||
console.log(file); |
|||
const isLt1M = file.size / 1024 / 1024 < 10; |
|||
const srcType = file.type; |
|||
const format = file.name.split('.').pop(); |
|||
|
|||
if (!isLt1M) { |
|||
this.$message.error('上传文件大小不能超过 10MB!'); |
|||
return false; |
|||
} |
|||
if (srcType.indexOf('image') == -1) { |
|||
this.$message.error('仅限图片格式'); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
|
|||
handleImgSuccess(res, row) { |
|||
if (res.code === 0 && res.msg === 'success') { |
|||
row.imgList.push(res.data.url); |
|||
this.computeImgShowList(row); |
|||
} else { |
|||
this.$message.error(res.msg); |
|||
} |
|||
}, |
|||
|
|||
computeImgShowList(row) { |
|||
row.imgShowList = row.imgList.map(url => { |
|||
return { name: '', url }; |
|||
}); |
|||
}, |
|||
|
|||
handleImgRemove(file, row) { |
|||
let url = file.url || file.response.data.url; |
|||
if (url) { |
|||
row.imgList = row.imgList.filter(item => item !== url); |
|||
this.computeImgShowList(row); |
|||
} |
|||
}, |
|||
|
|||
getRowClass({ rowIndex, columnIndex }) { |
|||
if (rowIndex === 0) { |
|||
return 'background: #2195fe; color: #fff;'; |
|||
} |
|||
}, |
|||
|
|||
handleChange(row, type) { |
|||
if (type == 'cancle') { |
|||
row = { ...this.tempRow }; |
|||
row.isEdit = false; |
|||
if (this.btnType == 'add') this.tableData.pop(); |
|||
this.getList(); |
|||
} else { |
|||
this.tempRow = { ...row }; |
|||
row.isEdit = true; |
|||
} |
|||
this.btnType = type; |
|||
this.isEdit = !this.isEdit; |
|||
}, |
|||
|
|||
handleChangeStaff(row) { |
|||
const { staffId } = row; |
|||
const { optionStaff } = this; |
|||
let item = optionStaff.find(item => item.value == staffId); |
|||
if (item) { |
|||
row.staffName = item.name; |
|||
row.mobile = item.mobile; |
|||
} |
|||
}, |
|||
|
|||
async getOptionStaff() { |
|||
let url = `/data/aggregator/org/staff-select-list/${this.$store.state.user.agencyId}`; |
|||
const { data, code, msg } = await requestPost(url, {}); |
|||
|
|||
if (code === 0) { |
|||
this.optionStaff = data || []; |
|||
} else { |
|||
this.$message.error('请求工作人员数据失败！'); |
|||
} |
|||
}, |
|||
|
|||
async handleEdit(row) { |
|||
if (row.result == '0' && row.reviewTime == '') { |
|||
this.$message.error('拟复查时间不能为空'); |
|||
} else { |
|||
if (this.btnType == 'add') this.save(row); |
|||
else this.edit(row); |
|||
} |
|||
}, |
|||
|
|||
handleAdd() { |
|||
this.btnType = 'add'; |
|||
this.isEdit = true; |
|||
|
|||
const item = { |
|||
isEdit: true, |
|||
enterpriseId: this.id, |
|||
patrolTime: '', |
|||
staffId: '', |
|||
staffName: '', |
|||
mobile: '', |
|||
result: '', |
|||
reviewTime: '', |
|||
imgList: [] |
|||
}; |
|||
this.computeImgShowList(item); |
|||
this.tableData.push(item); |
|||
}, |
|||
|
|||
async save(row) { |
|||
const params = { |
|||
enterpriseId: this.id, |
|||
...row |
|||
}; |
|||
const url = `/gov/org/enterprise/addorupdate-patrol`; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$message.success('保存成功'); |
|||
row.isEdit = false; |
|||
this.isEdit = false; |
|||
this.btnType = 'cancle'; |
|||
this.getList(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async edit(row) { |
|||
const params = { |
|||
...row |
|||
}; |
|||
const url = `/gov/org/enterprise/addorupdate-patrol`; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$message.success('保存成功'); |
|||
row.isEdit = false; |
|||
this.isEdit = false; |
|||
this.getList(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async del(row) { |
|||
const url = `/gov/org/enterprise/del-patrol/${row.patrolId}`; |
|||
const { data, code, msg } = await requestPost(url); |
|||
|
|||
if (code === 0) { |
|||
this.$message.success('删除成功'); |
|||
this.getList(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getList() { |
|||
const url = `/gov/org/enterprise/patrollist/${this.id}`; |
|||
console.log('getList---------------------------------------------------------------------------', url); |
|||
const { data, code, msg } = await requestPost(url); |
|||
if (code === 0) { |
|||
console.log('data', data); |
|||
this.tableData = data.list.map(item => { |
|||
this.computeImgShowList(item); |
|||
return { |
|||
...item, |
|||
isEdit: false |
|||
}; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/buttonstyle.scss'; |
|||
@import '@/assets/scss/modules/management/list-main.scss'; |
|||
.m-record h3{ |
|||
font-size: 1.17em; |
|||
&::before { |
|||
display: none; |
|||
} |
|||
|
|||
} |
|||
.mt10 { |
|||
margin-bottom: 10px; |
|||
} |
|||
.input-width { |
|||
width: 170px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,163 @@ |
|||
<template> |
|||
<div class="screenEchartsFrame" |
|||
ref="screenEchartsFrame"></div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
export default { |
|||
name: 'screen-echarts-frame', |
|||
data () { |
|||
return { |
|||
myChart: '' |
|||
} |
|||
}, |
|||
props: { |
|||
chartMethod: { |
|||
type: Function |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.initChart() |
|||
window.onresize = () => { |
|||
this.myChart.resize() |
|||
} |
|||
}, |
|||
beforeDestroy () { |
|||
// 销毁echarts实例对象 |
|||
if (this.myChart) this.myChart.dispose() |
|||
}, |
|||
watch: {}, |
|||
methods: { |
|||
initChart () { |
|||
this.$nextTick(() => { |
|||
const dom = this.$refs.screenEchartsFrame |
|||
this.myChart = echarts.init(dom) |
|||
// this.myChart.setOption(this.chartMethod()) |
|||
this.$emit('myChartMethod', this.myChart) |
|||
}) |
|||
}, |
|||
// 配置option |
|||
setOption (option) { |
|||
this.myChart.setOption(option) |
|||
let than = this |
|||
this.myChart.on('click',function(param){ |
|||
than.$emit('handelClickMyPei',param) |
|||
}) |
|||
}, |
|||
// 获取option |
|||
getOption () { |
|||
if (this.myChart) { |
|||
return this.myChart.getOption() |
|||
} else { |
|||
return null |
|||
} |
|||
}, |
|||
// |
|||
resize () { |
|||
if (this.myChart) { |
|||
this.myChart.resize() |
|||
} |
|||
}, |
|||
clear () { |
|||
if (this.myChart) { |
|||
this.myChart.clear() |
|||
} |
|||
}, |
|||
showLoading () { |
|||
if (this.myChart) { |
|||
this.$nextTick(() => { |
|||
this.myChart.showLoading({ |
|||
text: '', |
|||
color: '#29cdff', |
|||
textColor: '#29cdff', |
|||
maskColor: 'rgba(255, 255, 255, 0)', |
|||
zlevel: 0 |
|||
}) |
|||
}) |
|||
} |
|||
}, |
|||
hideLoading () { |
|||
if (this.myChart) { |
|||
this.myChart.hideLoading() |
|||
} |
|||
}, |
|||
// 启动动画时使用 |
|||
tooltipAnimate (chart, length) { |
|||
// 清除上一次动画 |
|||
this.timeTicket && clearInterval(this.timeTicket) |
|||
const count = 0 |
|||
// 启动动画 |
|||
this._action(chart, count, length) |
|||
chart && // 移除动画 |
|||
chart.on('mouseover', params => { |
|||
this._cleanAction(chart, params) |
|||
}) |
|||
// 重写启动动画 |
|||
chart && |
|||
chart.on('mouseout', () => { |
|||
this._action(chart, count, length) |
|||
}) |
|||
}, |
|||
// tooltip动画action |
|||
_action (chart, count, length) { |
|||
this.timeTicket && clearInterval(this.timeTicket) |
|||
this.timeTicket = setInterval(() => { |
|||
if (!chart) { |
|||
clearInterval(this.timeTicket) |
|||
return |
|||
} |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'downplay', |
|||
seriesIndex: 0 |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'highlight', |
|||
seriesIndex: 0, |
|||
dataIndex: count % length |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'showTip', |
|||
seriesIndex: 0, |
|||
dataIndex: count % length |
|||
}) |
|||
count++ |
|||
}, 1000 * 3) |
|||
}, |
|||
_cleanAction (chart, params) { |
|||
this.timeTicket && clearInterval(this.timeTicket) |
|||
if (!chart) { |
|||
clearInterval(this.timeTicket) |
|||
return |
|||
} |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'downplay', |
|||
seriesIndex: 0 |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'highlight', |
|||
seriesIndex: 0, |
|||
dataIndex: params.dataIndex |
|||
}) |
|||
chart && |
|||
chart.dispatchAction({ |
|||
type: 'showTip', |
|||
seriesIndex: 0, |
|||
dataIndex: params.dataIndex |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.screenEchartsFrame { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue