elink-star
/
epmet-oper-gov
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'yantai_dev' into yantai_master

jly/task002
tianq 3 years ago
parent
a6d9be69f6 56b98f767f
commit
85f3bed16d
8 changed files with 300 additions and 224 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/views/modules/census/census-accountActiveList.vue
  2. 96
      src/views/modules/census/census-accountList.vue
  3. 18
      src/views/modules/census/census-houseList.vue
  4. 1
      src/views/modules/census/census-nineList.vue
  5. 5
      src/views/modules/census/census-orgStatusList.vue
  6. 55
      src/views/modules/census/census-residentList.vue
  7. 116
      src/views/modules/census/chart.vue
  8. 18
      src/views/modules/communityParty/dyhx/party.vue

7
src/views/modules/census/census-accountActiveList.vue
View File

@ -67,10 +67,10 @@
:height="maxTableHeight" :height="maxTableHeight"
> >
<el-table-column label="序号" type="index" align="center" width="50" /> <el-table-column label="序号" 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="agencyName" align="center" width="200" label="组织名称" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="loginCount" label="登录次数" width="110" align="center" :show-overflow-tooltip="true" /> <el-table-column prop="loginCount" label="登录次数" 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="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-column prop="accountCount" align="center" label="总账号数" :show-overflow-tooltip="true"></el-table-column>
</el-table> </el-table>
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
@ -228,6 +228,7 @@ export default {
if (typeof this.formData[n] == 'object') this.formData[n] = []; if (typeof this.formData[n] == 'object') this.formData[n] = [];
else this.formData[n] = ''; else this.formData[n] = '';
} }
this.handleSearch();
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.pageSize = val; this.pageSize = val;

96
src/views/modules/census/census-accountList.vue
View File

@ -15,7 +15,7 @@
:show-all-levels="false" :show-all-levels="false"
/> />
</el-form-item> </el-form-item>
<el-form-item label="上报时间" prop="startDate"> <el-form-item label="登录时间" prop="startDate">
<el-date-picker <el-date-picker
v-model="formData.startDate" v-model="formData.startDate"
:picker-options="startPickerOptions" :picker-options="startPickerOptions"
@ -123,12 +123,12 @@
<el-dialog :title="title" :visible.sync="dialogVisible" v-if="dialogVisible" width="50%" :before-close="handleClose"> <el-dialog :title="title" :visible.sync="dialogVisible" v-if="dialogVisible" width="50%" :before-close="handleClose">
<div <div
style=" text-align: right; style=" text-align: right;
margin-top: -30px; margin-top: -10px;
margin-bottom: 10px;" margin-bottom: 10px;"
> >
<el-button size="small" class="diy-button--output" @click="handleExport()">导出</el-button> <el-button size="small" v-if="orgType == 'community'" class="diy-button--output" @click="handleExport()">导出</el-button>
</div> </div>
<el-table :data="tableDataView" border v-loading="tableLoading2" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" class="table" style="width: 100%"> <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'"> <template v-if="orgType == 'community'">
<el-table-column label="序号" type="index" align="center" width="50" /> <el-table-column label="序号" 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="agencyName" align="center" label="社区名称" :show-overflow-tooltip="true"></el-table-column>
@ -159,6 +159,7 @@
:total="total" :total="total"
></el-pagination> ></el-pagination>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -281,6 +282,7 @@ export default {
if (typeof this.formData[n] == 'object') this.formData[n] = []; if (typeof this.formData[n] == 'object') this.formData[n] = [];
else this.formData[n] = ''; else this.formData[n] = '';
} }
this.handleSearch();
}, },
async handleExport() { async handleExport() {
const url = '/gov/org/staffLoginLog/community-count-export'; const url = '/gov/org/staffLoginLog/community-count-export';
@ -375,7 +377,7 @@ export default {
endDate: this.formData.endDate, endDate: this.formData.endDate,
isPage: true, isPage: true,
pageNo: this.pageNo, pageNo: this.pageNo,
pageSize: this.pageSize pageSize: this.pageSize,
}; };
this.tableLoading2 = true; this.tableLoading2 = true;
const { data, code, msg } = await requestPost(url, param); const { data, code, msg } = await requestPost(url, param);
@ -453,7 +455,7 @@ export default {
const { pageSize, pageNo, formData } = this; const { pageSize, pageNo, formData } = this;
const { data, code, msg } = await requestPost(url, { const { data, code, msg } = await requestPost(url, {
pageSize, pageSize:10,
pageNo, pageNo,
isPage: true, isPage: true,
dataRange: 'exclude_zero', dataRange: 'exclude_zero',
@ -476,6 +478,7 @@ export default {
}, },
async getsubData() { async getsubData() {
this.$refs.pieChart.showLoading(); this.$refs.pieChart.showLoading();
// staffLoginLog/streetTotal
let url = '/gov/org/staffLoginLog/sub-count'; let url = '/gov/org/staffLoginLog/sub-count';
let param = { let param = {
orgId: this.formData.orgId, orgId: this.formData.orgId,
@ -494,6 +497,62 @@ export default {
this.$message.error(msg); this.$message.error(msg);
} }
}, },
async getPiesubData(orgId, orgType) {
// staffLoginLog/streetTotal
console.log(orgType);
let url = '';
if (orgType == 'street') {
url = '/gov/org/staffLoginLog/community-count';
} else {
url = '/gov/org/staffLoginLog/streetTotal';
}
this.dialogVisible = true;
let param = {};
console.log('orgType', 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: orgId,
level: 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) {
console.log('ddd data', data);
this.dialogVisible = true;
this.total = data.total || 0;
this.tableDataView = data.list
? data.list.map(item => {
return item;
})
: [];
} else {
this.$message.error(msg);
}
},
handleSizeChange(val) { handleSizeChange(val) {
this.pageSize = val; this.pageSize = val;
window.localStorage.setItem('pageSize', val); window.localStorage.setItem('pageSize', val);
@ -590,8 +649,8 @@ export default {
color: '#F3F7FD' color: '#F3F7FD'
} }
}, },
min:0, min: 0,
max:1000, max: 1000
}, },
series: [ series: [
{ {
@ -600,17 +659,19 @@ export default {
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
color: 'rgb(33, 149, 254)', color: 'rgb(33, 149, 254)',
borderRadius: [4, 4, 0, 0], borderRadius: [4, 4, 0, 0]
} }
} }
] ]
}; };
if (chartData.data.length>0) { if (chartData.data.length > 0) {
this.pieOption.yAxis.max=null this.pieOption.yAxis.max = null;
} }
this.$refs.pieChart.setOption(this.pieOption); this.$refs.pieChart.setOption(this.pieOption);
}, },
handelClickMyPei(param) { handelClickMyPei(param) {
console.log('param', param);
if (param.data.level != 'community') { if (param.data.level != 'community') {
if (param.data.level == 'district') { if (param.data.level == 'district') {
this.orgType = 'street'; this.orgType = 'street';
@ -619,11 +680,8 @@ export default {
this.orgType = 'community'; this.orgType = 'community';
} }
this.orgId = param.data.id;
this.orgName = param.data.name;
this.pageNo = 1; this.pageNo = 1;
this.showNext(); this.getPiesubData(param.data.id, param.data.level);
this.dialogVisible = true;
} }
} }
} }
@ -686,8 +744,8 @@ export default {
} }
} }
} }
.div_table{ .div_table {
padding: 30px!important; padding: 30px !important;
} }
.div_table_title { .div_table_title {
margin-top: -10px; margin-top: -10px;
@ -718,5 +776,7 @@ export default {
flex: 1; flex: 1;
} }
} }
/deep/.el-table::before {
z-index: inherit;
}
</style> </style>

18
src/views/modules/census/census-houseList.vue
View File

@ -62,10 +62,10 @@
<div class="flex1"> <div class="flex1">
<div class="box"> <div class="box">
<div class="legend"> <div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartDataData" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color1[index] }"></div> <div class="kuai" :style="{ backgroundColor: color1[index] }"></div>
<div class="content"> <div class="content">
<div class="name">{{ index }}{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div class="num">{{ item.value }}</div> <div class="num">{{ item.value }}</div>
<div class="unit" :style="{ color: color1[index] }">{{ item.radio }}%</div> <div class="unit" :style="{ color: color1[index] }">{{ item.radio }}%</div>
</div> </div>
@ -91,7 +91,7 @@
<div class="flex1"> <div class="flex1">
<div class="box"> <div class="box">
<div class="legend2"> <div class="legend2">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem2(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartData2Data" @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="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>
@ -242,7 +242,9 @@ export default {
orgId: '', orgId: '',
purpose: '', purpose: '',
rentFlag: '', rentFlag: '',
orgIdPath: '' orgIdPath: '',
chartDataData:[],
chartData2Data:[]
}; };
}, },
computed: { computed: {
@ -276,6 +278,7 @@ export default {
this.orgId = this.optionData.agencyId; this.orgId = this.optionData.agencyId;
this.orgIdPath = this.optionData.orgIdPath; this.orgIdPath = this.optionData.orgIdPath;
this.orgType = this.optionData.level; this.orgType = this.optionData.level;
this.handleSearch();
}, },
show(row) { show(row) {
this.dialogVisible = true; this.dialogVisible = true;
@ -412,7 +415,8 @@ export default {
radio: item.count == 0 ? '0' : ((item.count / this.pieData.total) * 100).toFixed(2) radio: item.count == 0 ? '0' : ((item.count / this.pieData.total) * 100).toFixed(2)
}; };
}); });
this.chartDataData=this.chartData.data ;
this.$forceUpdate();
this.iniPieChart(this.chartData); this.iniPieChart(this.chartData);
}, },
setPieData2() { setPieData2() {
@ -432,7 +436,8 @@ export default {
radio: item.count == 0 ? '0' : ((item.count / this.pieData2.total) * 100).toFixed(2) radio: item.count == 0 ? '0' : ((item.count / this.pieData2.total) * 100).toFixed(2)
}; };
}); });
this.chartData2Data=this.chartData2.data ;
this.$forceUpdate();
this.iniPieChart2(this.chartData2); this.iniPieChart2(this.chartData2);
}, },
// 获取饼状图 // 获取饼状图
@ -954,5 +959,4 @@ export default {
} }
} }
} }
</style> </style>

1
src/views/modules/census/census-nineList.vue
View File

@ -218,6 +218,7 @@ export default {
else this.formData[n] = ''; else this.formData[n] = '';
} }
this.orgType = ''; this.orgType = '';
this.handleSearch();
}, },
show(row) { show(row) {
this.dialogVisible = true; this.dialogVisible = true;

5
src/views/modules/census/census-orgStatusList.vue
View File

@ -113,13 +113,13 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<el-dialog :title="title" :visible.sync="dialogVisible" v-if="dialogVisible" width="30%" :before-close="handleClose"> <el-dialog :title="title" :visible.sync="dialogVisible" v-if="dialogVisible" width="50%" :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 :data="tableDataView" border v-loading="tableLoading2" :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" class="table" style="width: 100%">
<el-table-column label="序号" type="index" align="center" width="50" /> <el-table-column label="序号" 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="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="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="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-column prop="createTime" align="center" width="200" label="开通时间" :show-overflow-tooltip="true"></el-table-column>
</el-table> </el-table>
<el-pagination <el-pagination
@ -260,6 +260,7 @@ export default {
if (typeof this.formData[n] == 'object') this.formData[n] = []; if (typeof this.formData[n] == 'object') this.formData[n] = [];
else this.formData[n] = ''; else this.formData[n] = '';
} }
this.handleSearch();
}, },
handleSearch(val) { handleSearch(val) {
this.getTableData(); this.getTableData();

55
src/views/modules/census/census-residentList.vue
View File

@ -40,7 +40,7 @@
<div class="flex1"> <div class="flex1">
<div class="box"> <div class="box">
<div class="legend"> <div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartDataData" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> <div class="kuai" :style="{ backgroundColor: color[index] }"></div>
<div class="content"> <div class="content">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
@ -69,7 +69,7 @@
<div class="flex1"> <div class="flex1">
<div class="box"> <div class="box">
<div class="legend"> <div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem2(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartData2Data" @click="handleClickItem2(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> <div class="kuai" :style="{ backgroundColor: color[index] }"></div>
<div class="content"> <div class="content">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
@ -201,7 +201,7 @@ export default {
pieInitState2: false, pieInitState2: false,
pieOption: [], pieOption: [],
pieOption2: [], pieOption2: [],
color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'], color: ['#3C94FE', '#F0D915', '#6FC364', '#FEB349', '#F44230', '#A17AFA', '#22C1C3', '#A19FFF', '#FE6252', '#5DC7F0'],
chartData: [], chartData: [],
chartData2: [], chartData2: [],
pieData: [], pieData: [],
@ -211,7 +211,9 @@ export default {
code: '', code: '',
pieDatatotal: 0, pieDatatotal: 0,
pieDatatotal2: 0, pieDatatotal2: 0,
codeType: 'education' codeType: 'education',
chartDataData: [],
chartData2Data: []
}; };
}, },
computed: { computed: {
@ -246,6 +248,7 @@ export default {
else this.formData[n] = ''; else this.formData[n] = '';
} }
this.orgType = ''; this.orgType = '';
this.handleSearch();
}, },
show(row) { show(row) {
this.dialogVisible = true; this.dialogVisible = true;
@ -361,34 +364,35 @@ export default {
} }
}, },
setPieData() { setPieData() {
let data = [...this.pieData]; let data = [...this.pieData.list];
this.pieDatatotal = data // this.pieDatatotal = data
.map(item => item.totalResi) // .map(item => item.totalResi)
.reduce(function(prev, cur, index, arr) { // .reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index); // console.log(prev, cur, index);
return prev + cur; // return prev + cur;
}); // });
this.chartData.name = data.map(item => item.codeName); this.chartData.name = data.map(item => item.codeName);
this.chartData.data = data.map(item => { this.chartData.data = data.map(item => {
return { return {
value: item.totalResi, value: item.totalResi,
name: item.codeName, name: item.codeName,
code: item.code, code: item.code,
radio: item.totalResi == 0 ? '0' : ((item.totalResi / this.pieDatatotal) * 100).toFixed(2) radio: item.totalResi == 0 ? '0' : ((item.totalResi / this.pieData.total) * 100).toFixed(2)
}; };
}); });
this.chartDataData = this.chartData.data;
console.log('chartData', this.chartData); console.log('chartData', this.chartData);
this.iniPieChart(this.chartData); this.iniPieChart(this.chartData);
}, },
setPieData2() { setPieData2() {
let data = [...this.pieData2]; let data = [...this.pieData2.list];
this.pieDatatotal2 = data // this.pieDatatotal2 = data
.map(item => item.totalResi) // .map(item => item.totalResi)
.reduce(function(prev, cur, index, arr) { // .reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index); // console.log(prev, cur, index);
return prev + cur; // return prev + cur;
}); // });
this.chartData2.name = data.map(item => item.codeName); this.chartData2.name = data.map(item => item.codeName);
this.chartData2.data = data.map(item => { this.chartData2.data = data.map(item => {
@ -396,10 +400,10 @@ export default {
value: item.totalResi, value: item.totalResi,
name: item.codeName, name: item.codeName,
code: item.code, code: item.code,
radio: item.totalResi == 0 ? '0' : ((item.totalResi / this.pieDatatotal2) * 100).toFixed(2) radio: item.totalResi == 0 ? '0' : ((item.totalResi / this.pieData2.total) * 100).toFixed(2)
}; };
}); });
this.chartData2Data = this.chartData2.data;
console.log('chartData', this.chartData2); console.log('chartData', this.chartData2);
this.iniPieChart2(this.chartData2); this.iniPieChart2(this.chartData2);
}, },
@ -419,7 +423,7 @@ export default {
}, },
color: this.color, color: this.color,
title: { title: {
text: this.pieDatatotal, text: this.pieData.total,
subtext: '总数', subtext: '总数',
x: 'center', x: 'center',
y: 'center', y: 'center',
@ -529,7 +533,7 @@ export default {
}, },
color: this.color, color: this.color,
title: { title: {
text: this.pieDatatotal2, text: this.pieData2.total,
subtext: '总数', subtext: '总数',
x: 'center', x: 'center',
y: 'center', y: 'center',
@ -840,7 +844,9 @@ export default {
} }
.div_table { .div_table {
padding: 30px !important; padding: 30px !important;
.table{margin-top: 16px!important;} .table {
margin-top: 16px !important;
}
} }
.div_table_title { .div_table_title {
margin-top: -10px; margin-top: -10px;
@ -881,5 +887,4 @@ export default {
} }
} }
} }
</style> </style>

116
src/views/modules/census/chart.vue
View File

@ -1,70 +1,70 @@
<template> <template>
<div class="screenEchartsFrame" <div class="screenEchartsFrame" ref="screenEchartsFrame"></div>
ref="screenEchartsFrame"></div>
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
name: 'screen-echarts-frame', name: 'screen-echarts-frame',
data () { data() {
return { return {
myChart: '' myChart: ''
} };
}, },
props: { props: {
chartMethod: { chartMethod: {
type: Function type: Function
} }
}, },
mounted () { mounted() {
this.initChart() this.initChart();
window.onresize = () => { window.onresize = () => {
this.myChart.resize() this.myChart.resize();
} };
}, },
beforeDestroy () { beforeDestroy() {
// 销毁echarts实例对象 // 销毁echarts实例对象
if (this.myChart) this.myChart.dispose() if (this.myChart) this.myChart.dispose();
}, },
watch: {}, watch: {},
methods: { methods: {
initChart () { initChart() {
this.$nextTick(() => { this.$nextTick(() => {
const dom = this.$refs.screenEchartsFrame const dom = this.$refs.screenEchartsFrame;
this.myChart = echarts.init(dom) this.myChart = echarts.init(dom);
// this.myChart.setOption(this.chartMethod()) // this.myChart.setOption(this.chartMethod())
this.$emit('myChartMethod', this.myChart) this.$emit('myChartMethod', this.myChart);
}) });
}, },
// 配置option // 配置option
setOption (option) { setOption(option) {
this.myChart.setOption(option) this.myChart.setOption(option);
let than = this let than = this;
this.myChart.on('click',function(param){ this.myChart.off('click');
than.$emit('handelClickMyPei',param) this.myChart.on('click', function(param) {
}) than.$emit('handelClickMyPei', param);
});
}, },
// 获取option // 获取option
getOption () { getOption() {
if (this.myChart) { if (this.myChart) {
return this.myChart.getOption() return this.myChart.getOption();
} else { } else {
return null return null;
} }
}, },
// //
resize () { resize() {
if (this.myChart) { if (this.myChart) {
this.myChart.resize() this.myChart.resize();
} }
}, },
clear () { clear() {
if (this.myChart) { if (this.myChart) {
this.myChart.clear() this.myChart.clear();
} }
}, },
showLoading () { showLoading() {
if (this.myChart) { if (this.myChart) {
this.$nextTick(() => { this.$nextTick(() => {
this.myChart.showLoading({ this.myChart.showLoading({
@ -73,86 +73,86 @@ export default {
textColor: '#29cdff', textColor: '#29cdff',
maskColor: 'rgba(255, 255, 255, 0)', maskColor: 'rgba(255, 255, 255, 0)',
zlevel: 0 zlevel: 0
}) });
}) });
} }
}, },
hideLoading () { hideLoading() {
if (this.myChart) { if (this.myChart) {
this.myChart.hideLoading() this.myChart.hideLoading();
} }
}, },
// 启动动画时使用 // 启动动画时使用
tooltipAnimate (chart, length) { tooltipAnimate(chart, length) {
// 清除上一次动画 // 清除上一次动画
this.timeTicket && clearInterval(this.timeTicket) this.timeTicket && clearInterval(this.timeTicket);
const count = 0 const count = 0;
// 启动动画 // 启动动画
this._action(chart, count, length) this._action(chart, count, length);
chart && // 移除动画 chart && // 移除动画
chart.on('mouseover', params => { chart.on('mouseover', params => {
this._cleanAction(chart, params) this._cleanAction(chart, params);
}) });
// 重写启动动画 // 重写启动动画
chart && chart &&
chart.on('mouseout', () => { chart.on('mouseout', () => {
this._action(chart, count, length) this._action(chart, count, length);
}) });
}, },
// tooltip动画action // tooltip动画action
_action (chart, count, length) { _action(chart, count, length) {
this.timeTicket && clearInterval(this.timeTicket) this.timeTicket && clearInterval(this.timeTicket);
this.timeTicket = setInterval(() => { this.timeTicket = setInterval(() => {
if (!chart) { if (!chart) {
clearInterval(this.timeTicket) clearInterval(this.timeTicket);
return return;
} }
chart && chart &&
chart.dispatchAction({ chart.dispatchAction({
type: 'downplay', type: 'downplay',
seriesIndex: 0 seriesIndex: 0
}) });
chart && chart &&
chart.dispatchAction({ chart.dispatchAction({
type: 'highlight', type: 'highlight',
seriesIndex: 0, seriesIndex: 0,
dataIndex: count % length dataIndex: count % length
}) });
chart && chart &&
chart.dispatchAction({ chart.dispatchAction({
type: 'showTip', type: 'showTip',
seriesIndex: 0, seriesIndex: 0,
dataIndex: count % length dataIndex: count % length
}) });
count++ count++;
}, 1000 * 3) }, 1000 * 3);
}, },
_cleanAction (chart, params) { _cleanAction(chart, params) {
this.timeTicket && clearInterval(this.timeTicket) this.timeTicket && clearInterval(this.timeTicket);
if (!chart) { if (!chart) {
clearInterval(this.timeTicket) clearInterval(this.timeTicket);
return return;
} }
chart && chart &&
chart.dispatchAction({ chart.dispatchAction({
type: 'downplay', type: 'downplay',
seriesIndex: 0 seriesIndex: 0
}) });
chart && chart &&
chart.dispatchAction({ chart.dispatchAction({
type: 'highlight', type: 'highlight',
seriesIndex: 0, seriesIndex: 0,
dataIndex: params.dataIndex dataIndex: params.dataIndex
}) });
chart && chart &&
chart.dispatchAction({ chart.dispatchAction({
type: 'showTip', type: 'showTip',
seriesIndex: 0, seriesIndex: 0,
dataIndex: params.dataIndex dataIndex: params.dataIndex
}) });
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

18
src/views/modules/communityParty/dyhx/party.vue
View File

@ -37,7 +37,7 @@
<div class="flex1"> <div class="flex1">
<div class="box"> <div class="box">
<div class="legend"> <div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartDataData" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> <div class="kuai" :style="{ backgroundColor: color[index] }"></div>
<div class="content"> <div class="content">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
@ -103,7 +103,7 @@
<div class="flex1"> <div class="flex1">
<div class="box"> <div class="box">
<div class="legend"> <div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartData2Data" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> <div class="kuai" :style="{ backgroundColor: color[index] }"></div>
<div class="content"> <div class="content">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
@ -218,7 +218,8 @@ export default {
pieInitState2: false, pieInitState2: false,
pieOption: [], pieOption: [],
pieOption2: [], pieOption2: [],
color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'], color: ['#3C94FE', '#F0D915', '#6FC364', '#FEB349', '#F44230', '#A17AFA', '#22C1C3', '#A19FFF', '#FE6252', '#5DC7F0'],
// color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'],
chartData: [], chartData: [],
chartData2: [], chartData2: [],
pieData: [], pieData: [],
@ -268,7 +269,9 @@ export default {
pieEduOptions: null, pieEduOptions: null,
formData: { formData: {
orgId: '' orgId: ''
} },
chartDataData: [],
chartData2Data: []
}; };
}, },
computed: { computed: {
@ -300,6 +303,7 @@ export default {
if (typeof this.formData[n] == 'object') this.formData[n] = []; if (typeof this.formData[n] == 'object') this.formData[n] = [];
else this.formData[n] = ''; else this.formData[n] = '';
} }
this.handleSearch();
}, },
handleChangeAgency(val) { handleChangeAgency(val) {
let obj = this.$refs['myCascader'].getCheckedNodes()[0].data; let obj = this.$refs['myCascader'].getCheckedNodes()[0].data;
@ -669,7 +673,7 @@ export default {
console.log(prev, cur, index); console.log(prev, cur, index);
return prev + cur; return prev + cur;
}); });
console.log('this.pieDatatotal',this.pieDatatotal); console.log('this.pieDatatotal', this.pieDatatotal);
this.chartData.name = data.map(item => item.value); this.chartData.name = data.map(item => item.value);
this.chartData.data = data.map(item => { this.chartData.data = data.map(item => {
return { return {
@ -679,6 +683,7 @@ export default {
radio: item.radio radio: item.radio
}; };
}); });
this.chartDataData = this.chartData.data;
console.log('chartData', this.chartData); console.log('chartData', this.chartData);
this.$forceUpdate(); this.$forceUpdate();
this.initAgeCharts(this.chartData); this.initAgeCharts(this.chartData);
@ -703,7 +708,7 @@ export default {
radio: item.radio radio: item.radio
}; };
}); });
this.chartData2Data = this.chartData2.data;
console.log('chartData', this.chartData2); console.log('chartData', this.chartData2);
this.$forceUpdate(); this.$forceUpdate();
this.initEduCharts(this.chartData2); this.initEduCharts(this.chartData2);
@ -1024,5 +1029,4 @@ export default {
} }
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save