<template><div><el-row><h3 class="float-left"><i class="el-icon-check"></i> 分词统计</h3></el-row><el-row :gutter="20"><el-col :span="3"><SelectOption :selected.sync="versionSelected":options="versionOptions"placeholder="请选择版本"></SelectOption></el-col><el-col :span="3"><SelectOption :selected.sync="platformSelected":options="platformOptions"placeholder="请选择平台"></SelectOption></el-col><el-col :span="6"><DateTimePicker :dateValue.sync="dateValue"></DateTimePicker></el-col></el-row><!-- <div id="wordCloud"><wordcloud :rotate="{from: -5, to: 5, numOfOrientation: 5 }"fontScale="n"spiral="rectangular":data="cloudWords"nameKey="word"valueKey="cou":wordClick="showTimes"></wordcloud></div> --><ve-wordcloud v-if="showChart"width="100%"height="700px":data="chartData":extend="chartExtend":settings="chartSettings"></ve-wordcloud><div style="text-align:left;margin-left:10px"v-else>没数据</div></div>
</template>
<style>
</style>
<script>
import { SelectOption, DateTimePicker } from '@/components/common'
import { getFeedbackWordCloud } from '@/api/feedbacks'
import { EventBus } from '@/bus.js'
// import wordcloud from 'vue-wordcloud'
export default {name: 'wordCloud',components: {// wordcloud,
    SelectOption,DateTimePicker},data () {return {showChart: true,chartSettings: {color: ['#4876FF', '#87CEFA', '#98F5FF', '#BBFFFF']},chartExtend: {series: {rotationRange: [0, 0],sizeRange: [50, 150],width: '100%',height: '100%',drawOutOfBound: true,textStyle: {normal: {color: function () {return 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')'}},emphasis: {shadowBlur: 10,shadowColor: '#333'}}}},chartData: {columns: ['word', 'cou'],rows: []},version: [],versionSelected: 'all',versionOptions: [],platform: [],platformSelected: 'all',platformOptions: [],myProjectId: this.$route.query.feedbackProject,dateValue: [new Date(2018, 9, 1, 0, 0), new Date(2018, 9, 8, 0, 0)]}},methods: {/*** 阅读vue-wordcloud* WordCloud.vue源代码即可知此函数是必须的*/showTimes (val1, val2) {for (var i in val2.data) {if (val2.data[i]['text'] === val1) {var tip = '"' + val1 + '" 分词统计次数：' + val2.data[i]['cou']this.$alert(tip, '', {})}}},getFbWordCloud () {let _this = thislet projectId = _this.myProjectIdlet startTime = _this.startTimelet endTime = _this.endTimelet clientVersion = _this.versionSelectedlet origin = _this.platformSelectedif (origin === 'all') {origin = -1}getFeedbackWordCloud(projectId, startTime, endTime, clientVersion, origin).then(data => {_this.showChart = true_this.chartData.rows = dataif (data === undefined || data.length === 0) {_this.showChart = false}})},initVersion () {let _this = this// Version Select Options
      _this.versionOptions = []for (let index = 0; index < _this.version.length; index++) {_this.versionOptions.push({'id': (_this.version)[index].name,'label': (_this.version)[index].name,'value': (_this.version)[index].name})}_this.versionSelected = 'all'},initPlatform () {let _this = this// Platform Select Options
      _this.platformOptions = []for (let index = 0; index < _this.platform.length; index++) {_this.platformOptions.push({'id': (_this.platform)[index].id,'label': (_this.platform)[index].name,'value': (_this.platform)[index].id})}_this.platformSelected = 'all'},setDateValue () {let _this = thislet sDate = _this.dateValue[0]let eDate = _this.dateValue[1]_this.startTime = sDate.getFullYear() + '-' + (sDate.getMonth() + 1) + '-' + sDate.getDate() + ' 00:00:00'_this.endTime = eDate.getFullYear() + '-' + (eDate.getMonth() + 1) + '-' + eDate.getDate() + ' 00:00:00'// console.log(_this.startTime)// console.log(_this.endTime)
    }},created () {let _this = this_this.setDateValue()// Get projectId
    EventBus.$on('projectId', projectId => {// console.log('[WordCloud下车]projectId')
      _this.myProjectId = projectId})// Get version
    EventBus.$on('version', version => {// console.log('[WordCloud下车]version')
      _this.version = version_this.initVersion()})// Get origin
    EventBus.$on('origin', origin => {// console.log('[WordCloud下车]origin')
      _this.platform = origin_this.initPlatform()})},mounted () {this.getFbWordCloud()},watch: {versionSelected: {immediate: false,handler: function () {this.getFbWordCloud()}},platformSelected: {immediate: false,handler: function () {this.getFbWordCloud()}},dateValue: {immediate: false,handler: function () {this.setDateValue()this.getFbWordCloud()}},version: {immediate: false,handler: function () {this.getFbWordCloud()}},platform: {immediate: false,handler: function () {this.getFbWordCloud()}}}
}
</script>

// import wordcloud from 'vue-wordcloud'