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

多次点击问题bug

jly/task002
tianq 2 years ago
parent
489a5efa66
commit
6243538d4b
2 changed files with 165 additions and 166 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      src/views/modules/census/census-accountList.vue
  2. 302
      src/views/modules/census/chart.vue

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

@ -97,7 +97,7 @@
style="width: 100%"
: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="streetName" label="所属街道" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="districtName" label="所属区县" align="center" :show-overflow-tooltip="true"></el-table-column>
@ -123,27 +123,27 @@
<el-dialog :title="title" :visible.sync="dialogVisible" v-if="dialogVisible" width="50%" :before-close="handleClose">
<div
style=" text-align: right;
margin-top: -30px;
margin-top: -10px;
margin-bottom: 10px;"
>
<el-button size="small" v-if="orgType == 'community'" class="diy-button--output" @click="handleExport()">导出</el-button>
</div>
<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="序号" 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="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" label="登录次数" :show-overflow-tooltip="true"></el-table-column>
</template>
<template v-if="orgType == 'street'">
<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" 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" label="登录次数" :show-overflow-tooltip="true"></el-table-column>
</template>
<template v-if="orgType == 'district'">
<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" label="区县名称" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="count" align="center" label="登录次数" :show-overflow-tooltip="true"></el-table-column>
</template>
@ -540,7 +540,7 @@ export default {
// 获取饼状图
async iniPieChart(chartData) {
this.$refs.pieChart.clear();
// 获取pieChart配置
this.pieOption = {
grid: {
@ -591,8 +591,8 @@ export default {
color: '#F3F7FD'
}
},
min:0,
max:1000,
min: 0,
max: 1000
},
series: [
{
@ -601,14 +601,14 @@ export default {
type: 'bar',
itemStyle: {
color: 'rgb(33, 149, 254)',
borderRadius: [4, 4, 0, 0],
borderRadius: [4, 4, 0, 0]
}
}
]
};
if (chartData.data.length>0) {
this.pieOption.yAxis.max=null
}
if (chartData.data.length > 0) {
this.pieOption.yAxis.max = null;
}
this.$refs.pieChart.setOption(this.pieOption);
},
handelClickMyPei(param) {
@ -687,8 +687,8 @@ export default {
}
}
}
.div_table{
padding: 30px!important;
.div_table {
padding: 30px !important;
}
.div_table_title {
margin-top: -10px;
@ -719,5 +719,4 @@ export default {
flex: 1;
}
}
</style>

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

@ -1,163 +1,163 @@
<template>
<div class="screenEchartsFrame"
ref="screenEchartsFrame"></div>
<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
})
}
}
}
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.off('click');
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%;
width: 100%;
height: 100%;
}
</style>

Write Preview
Loading…
Cancel
Save