task word cloud

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "axios": "latest",
     "echarts": "^4.2.1",
+    "echarts-wordcloud": "^1.1.3",
     "element-ui": "^2.11.0",
     "font-awesome": "^4.7.0",
     "mockjs": "^1.0.1-beta3",

src/components/task/Task.vue

@@ -3,112 +3,114 @@
     <div class="title h1" v-if="!isModifyMode">任务</div>
     <div class="create-body">
       <div class="title h2" v-if="!isModifyMode">基本信息</div>
-      <el-form :model="task" :rules="rules" ref="task" label-width="120px" class="demo-task"
-               style="margin:0 100px;">
-        <el-form-item label="任务名称" prop="title" style="width: 700px;">
-          <el-input size="small" v-if="isModifyMode" v-model="task.title"></el-input>
-          <span v-if="!isModifyMode">{{task.title}}</span>
-          <el-tag v-if="!isModifyMode" :type="task.statusVO&&task.statusVO.style">{{task.statusVO ?
-            task.statusVO.text:''}}
-          </el-tag>
-        </el-form-item>
-        <el-form-item label="任务描述" prop="desc" style="width: 700px;">
-          <el-input autosize v-if="isModifyMode" type="textarea" v-model="task.description"></el-input>
-          <span v-if="!isModifyMode">{{task.description ? task.description : '暂无'}}</span>
-        </el-form-item>
-        <el-form-item label="任务报价" prop="quotePrice" style="width: 700px;">
-          <el-input size="small" type="number" v-if="isModifyMode" v-model="task.quotePrice">
-            <template slot="append">¥</template>
-          </el-input>
-          <span v-if="!isModifyMode">￥{{task.quotePrice}}</span>
-        </el-form-item>
-        <!--<el-form-item type="number" label="任务定价" prop="fixedPrice">-->
-        <!--<el-input v-if="isModifyMode" v-model="task.fixedPrice">-->
-        <!--<template slot="append">¥</template>-->
-        <!--</el-input>-->
-        <!--<span v-if="!isModifyMode">{{task.fixedPrice}}</span>-->
-        <!--</el-form-item>-->
-        <el-form-item label="测试类型" prop="serviceType">
-          <el-radio-group v-if="isModifyMode" v-model="task.serviceType" @change="handleTestTypeChange">
+      <el-row :gutter="20">
+        <el-col :span="15">
+          <el-form :model="task" :rules="rules" ref="task" label-width="120px" class="demo-task"
+                   style="margin:0 80px;">
+            <el-form-item label="任务名称" prop="title" style="width: 700px;">
+              <el-input size="small" v-if="isModifyMode" v-model="task.title"></el-input>
+              <span v-if="!isModifyMode">{{task.title}}</span>
+              <el-tag v-if="!isModifyMode" :type="task.statusVO&&task.statusVO.style">{{task.statusVO ?
+                task.statusVO.text:''}}
+              </el-tag>
+            </el-form-item>
+            <el-form-item label="任务描述" prop="desc" style="width: 700px;">
+              <el-input autosize v-if="isModifyMode" type="textarea" v-model="task.description"></el-input>
+              <span v-if="!isModifyMode">{{task.description ? task.description : '暂无'}}</span>
+            </el-form-item>
+            <el-form-item label="任务报价" prop="quotePrice" style="width: 700px;">
+              <el-input size="small" type="number" v-if="isModifyMode" v-model="task.quotePrice">
+                <template slot="append">¥</template>
+              </el-input>
+              <span v-if="!isModifyMode">￥{{task.quotePrice}}</span>
+            </el-form-item>
+            <!--<el-form-item type="number" label="任务定价" prop="fixedPrice">-->
+            <!--<el-input v-if="isModifyMode" v-model="task.fixedPrice">-->
+            <!--<template slot="append">¥</template>-->
+            <!--</el-input>-->
+            <!--<span v-if="!isModifyMode">{{task.fixedPrice}}</span>-->
+            <!--</el-form-item>-->
+            <el-form-item label="测试类型" prop="serviceType">
+              <el-radio-group v-if="isModifyMode" v-model="task.serviceType" @change="handleTestTypeChange">
             <span v-for="(item,index) in serviceType" :key="index">
               <el-radio :label="item.code" name="serviceType">{{item.name}}</el-radio>
             </span>
-          </el-radio-group>
-          <span class="badge" v-if="!isModifyMode">{{serviceName}}</span>
-        </el-form-item>
-
-        <el-form-item label="服务序列号" prop="endPoint" style="width: 700px;"
-                      v-if="showBD&&task.endPoint&&currType.type===1"
-                      >
-          <el-input v-if="isModifyMode" v-model="task.endPoint.serverCode" label="examId"></el-input>
-          <span v-if="!isModifyMode&&showBD">{{task.endPoint.serverCode}}</span>
-        </el-form-item>
-
-        <el-form-item label="任务可见性" prop="resource" style="width: 700px;">
-          <div v-if="!isModifyMode">
-            <!--<div v-if="task.resource=='1'">{{updateLocation(task.location)}}</div>-->
-            <div v-if="task.resource==0">定向</div>
-            <div v-if="task.resource==2">{{resourceType[task.resource]}}</div>
-          </div>
-          <el-tabs
-            :tab-position="tabPosition"
-            v-model="task.resource"
-            style="max-height: 200px;"
-            v-if="isModifyMode"
-          >
-            <el-tab-pane :label="resourceType[0]" name="0">
-              <el-radio-group v-model="task.institution" @change="handleTestTypeChange">
-                <el-radio
-                  :label="item"
-                  name="type"
-                  v-for="item,index in institutionArray"
-                  :key="index"
-                >{{item.evaluationAgencyName}}
-                </el-radio>
               </el-radio-group>
-            </el-tab-pane>
-            <!--<el-tab-pane :label="resourceType[1]" name="1">-->
-            <!--<provincecity-->
-            <!--ref="addFormProvince"-->
-            <!--@selectChange="locationChange"-->
-            <!--:provinceCode="task.location == null ||task.location.provinceCode==null?'3200':task.location.provinceCode"-->
-            <!--:cityCode="task.location == null ||task.location.cityCode==null?'3201':task.location.cityCode"-->
-            <!--&gt;</provincecity>-->
-            <!--</el-tab-pane>-->
-            <el-tab-pane :label="resourceType[2]" name="2"></el-tab-pane>
-          </el-tabs>
-        </el-form-item>
-        <el-form-item label="领取人数" prop="contactPhone" v-if="isModifyMode&&task.resource !== '0' && currType.type===0">
-          <el-input-number v-model="task.participantCount" :min="1" :max="1000" label="领取人数"></el-input-number>
-        </el-form-item>
-        <el-form-item label="领取人数" prop="contactPhone" v-if="isModifyMode&&task.resource !== '0' && currType.type===1">
-          <el-input-number v-model="task.participantCount" :min="2" :max="1000" label="领取人数"></el-input-number>
-        </el-form-item>
-        <el-form-item label="领取人数" prop="quotePrice" v-if="!isModifyMode">
-          {{task.acceptedCount }}/{{ task.participantCount}}
-        </el-form-item>
-        <el-form-item label="需求文档" prop="doc">
-          <el-upload
-            style="width: 400px"
-            v-if="isModifyMode"
-            drag
-            class="upload-demo"
-            action=""
-            :on-remove="handleRemove"
-            :before-remove="beforeRemove"
-            :limit="1"
-            :on-exceed="handleExceed"
-
-            :http-request="uploadRequireDoc"
-            :file-list="task.doc"
-          >
-            <i class="el-icon-upload"></i>
-            <div class="el-upload__text">
-              将文件拖到此处，或
-              <em>点击上传</em>
-            </div>
-          </el-upload>
-          <span>
+              <span class="badge" v-if="!isModifyMode">{{serviceName}}</span>
+            </el-form-item>
+
+            <el-form-item label="服务序列号" prop="endPoint" style="width: 700px;"
+                          v-if="showBD&&task.endPoint&&currType.type===1"
+            >
+              <el-input v-if="isModifyMode" v-model="task.endPoint.serverCode" label="examId"></el-input>
+              <span v-if="!isModifyMode&&showBD">{{task.endPoint.serverCode}}</span>
+            </el-form-item>
+
+            <el-form-item label="任务可见性" prop="resource" style="width: 700px;">
+              <div v-if="!isModifyMode">
+                <!--<div v-if="task.resource=='1'">{{updateLocation(task.location)}}</div>-->
+                <div v-if="task.resource==0">定向</div>
+                <div v-if="task.resource==2">{{resourceType[task.resource]}}</div>
+              </div>
+              <el-tabs
+                :tab-position="tabPosition"
+                v-model="task.resource"
+                style="max-height: 200px;"
+                v-if="isModifyMode"
+              >
+                <el-tab-pane :label="resourceType[0]" name="0">
+                  <el-radio-group v-model="task.institution" @change="handleTestTypeChange">
+                    <el-radio
+                      :label="item"
+                      name="type"
+                      v-for="item,index in institutionArray"
+                      :key="index"
+                    >{{item.evaluationAgencyName}}
+                    </el-radio>
+                  </el-radio-group>
+                </el-tab-pane>
+                <!--<el-tab-pane :label="resourceType[1]" name="1">-->
+                <!--<provincecity-->
+                <!--ref="addFormProvince"-->
+                <!--@selectChange="locationChange"-->
+                <!--:provinceCode="task.location == null ||task.location.provinceCode==null?'3200':task.location.provinceCode"-->
+                <!--:cityCode="task.location == null ||task.location.cityCode==null?'3201':task.location.cityCode"-->
+                <!--&gt;</provincecity>-->
+                <!--</el-tab-pane>-->
+                <el-tab-pane :label="resourceType[2]" name="2"></el-tab-pane>
+              </el-tabs>
+            </el-form-item>
+            <el-form-item label="领取人数" prop="contactPhone" v-if="isModifyMode&&task.resource !== '0' && currType.type===0">
+              <el-input-number v-model="task.participantCount" :min="1" :max="1000" label="领取人数"></el-input-number>
+            </el-form-item>
+            <el-form-item label="领取人数" prop="contactPhone" v-if="isModifyMode&&task.resource !== '0' && currType.type===1">
+              <el-input-number v-model="task.participantCount" :min="2" :max="1000" label="领取人数"></el-input-number>
+            </el-form-item>
+            <el-form-item label="领取人数" prop="quotePrice" v-if="!isModifyMode">
+              {{task.acceptedCount }}/{{ task.participantCount}}
+            </el-form-item>
+            <el-form-item label="需求文档" prop="doc">
+              <el-upload
+                style="width: 400px"
+                v-if="isModifyMode"
+                drag
+                class="upload-demo"
+                action=""
+                :on-remove="handleRemove"
+                :before-remove="beforeRemove"
+                :limit="1"
+                :on-exceed="handleExceed"
+
+                :http-request="uploadRequireDoc"
+                :file-list="task.doc"
+              >
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">
+                  将文件拖到此处，或
+                  <em>点击上传</em>
+                </div>
+              </el-upload>
+              <span>
               <span v-if="task.requireDocUrl == null || task.requireDocUrl == ''">
                 <i class="el-icon-document"></i>暂无文件
               </span>
@@ -117,115 +119,121 @@
                   class="el-icon-document"></i>下载文档</el-link></a>
               </span>
             </span>
-        </el-form-item>
-
-        <el-form-item label="任务截止时间" prop="datetime">
-          <div class="block" v-if="isModifyMode">
-            <el-date-picker
-              size="small"
-              v-model="task.datetime"
-              type="datetime"
-              placeholder="选择截止时间"
-              align="right"
-              :picker-options="pickerOptions"
-            ></el-date-picker>
-          </div>
-          <span v-if="!isModifyMode">{{dateFormat(new Date(task.datetime),'yyyy-MM-dd HH:mm:ss')}}</span>
-        </el-form-item>
-        <el-form-item v-if="isModifyMode">
-          <div class="btn btn-small btn-info" @click="updateTask()">确认修改</div>
-          <!--<div class="btn btn-small" @click="resetForm()">重置</div>-->
-          <div class="btn btn-small" @click="cancelMode()">取消</div>
-        </el-form-item>
-
-        <el-form-item v-if="editShortLink && task.endPoint.serverCode && taskOperationControl.confirmFinish" label="任务面板链接" props="shortLink">
-          <el-input v-model="shortLink" placeholder="请输入短链接生成任务报告" style="width: 800px">
-            <template slot="append">
-              <el-button @click="getTaskDataBoard()">确定</el-button>
-            </template>
-          </el-input>
-        </el-form-item>
-
-        <el-form-item v-if="shortLink && !editShortLink" label="任务面板链接" props="shortLink">
-          {{shortLink}}
-          <i class="el-icon-edit" @click="editShortLink = true" v-if="taskOperationControl.confirmFinish"/>
-        </el-form-item>
-
-        <el-form-item v-if="!isModifyMode">
-          <el-button size="mini" @click="toProject()">项目详情</el-button>
-          <el-popover
-            placement="top-start"
-            title="确认结束？"
-            width="200"
-            trigger="hover"
-            content="测评机构已提交结束申请，请确认是否结束该任务">
-            <el-button v-if="taskOperationControl.confirmFinish" type="success" size="mini" slot="reference"
-                       @click="endTask()">确认结束
-            </el-button>
-          </el-popover>
-
-          <el-popover
-            placement="top-start"
-            title="确认提交？"
-            width="200"
-            trigger="hover"
-            content="提交任务后不可更改，等待区域管理员验收">
-            <el-button v-if="taskOperationControl.finish" type="primary" size="mini" slot="reference"
-                       @click="submitTaskRequest()">提交任务
-            </el-button>
-          </el-popover>
-
-          <el-popover
-            placement="top-start"
-            title="确认拒绝？"
-            width="200"
-            trigger="hover"
-            content="拒绝后不可再接收此任务，且该任务对您不可见">
-            <el-button v-if="taskOperationControl.reject" type="danger" size="mini" slot="reference"
-                       @click="rejectTask()">拒绝任务
-            </el-button>
-          </el-popover>
-
-          <el-popover
-            placement="top-start"
-            title="确认接收？"
-            width="200"
-            trigger="hover"
-            content="接收任务后请认真完成！">
-            <el-button v-if="taskOperationControl.receive" type="primary" size="mini" slot="reference"
-                       @click="receiveTask()">接收任务
-            </el-button>
-          </el-popover>
-
-          <el-button v-if="taskOperationControl.writeReport" type="primary" size="mini" @click="gotoWriteReport()">填写报告
-          </el-button>
-
-          <el-button v-if="taskOperationControl.update" type="primary" size="mini" @click="modifyForm()">修改任务
-          </el-button>
-
-          <el-button v-if="taskOperationControl.taskRecommend" type="primary" size="mini" @click="recommendTask()">任务推荐
-          </el-button>
-
-          <el-button v-if="taskOperationControl.uploadReport" type="primary" size="mini" @click="toCreateReport()">
-            上传报告
-          </el-button>
-          <el-button v-if="taskOperationControl.taskDemonstrate" type="success" size="mini" @click="gotoDataboard()">
-            任务面板
-          </el-button>
-          <!--<div class="btn btn-small btn-info"-->
-          <!--v-if="taskOperationControl.confirmFinish"-->
-          <!--@click="endTask()">确认结束-->
-          <!--</div>-->
-          <!--<div class="btn btn-small btn-info" v-if="!taskOperationControl.finish" @click="submitTaskRequest()">提交任务-->
-          <!--</div>-->
-          <!--<div class="btn btn-small btn-info" v-if="!taskOperationControl.receive" @click="receiveTask()">接收任务</div>-->
-          <!--<div class="btn btn-small btn-danger" v-if="!taskOperationControl.reject" @click="rejectTask()">拒绝任务</div>-->
-          <!--<div class="btn btn-small btn-info" v-if="taskOperationControl.update" @click="modifyForm()">修改任务</div>-->
-          <!--<div class="btn btn-small btn-info" v-if="!taskOperationControl.uploadReport" @click="toCreateReport()">上传报告-->
-          <!--</div>-->
-
-        </el-form-item>
-      </el-form>
+            </el-form-item>
+
+            <el-form-item label="任务截止时间" prop="datetime">
+              <div class="block" v-if="isModifyMode">
+                <el-date-picker
+                  size="small"
+                  v-model="task.datetime"
+                  type="datetime"
+                  placeholder="选择截止时间"
+                  align="right"
+                  :picker-options="pickerOptions"
+                ></el-date-picker>
+              </div>
+              <span v-if="!isModifyMode">{{dateFormat(new Date(task.datetime),'yyyy-MM-dd HH:mm:ss')}}</span>
+            </el-form-item>
+            <el-form-item v-if="isModifyMode">
+              <div class="btn btn-small btn-info" @click="updateTask()">确认修改</div>
+              <!--<div class="btn btn-small" @click="resetForm()">重置</div>-->
+              <div class="btn btn-small" @click="cancelMode()">取消</div>
+            </el-form-item>
+
+            <el-form-item v-if="editShortLink && task.endPoint.serverCode && taskOperationControl.confirmFinish" label="任务面板链接" props="shortLink">
+              <el-input v-model="shortLink" placeholder="请输入短链接生成任务报告" style="width: 800px">
+                <template slot="append">
+                  <el-button @click="getTaskDataBoard()">确定</el-button>
+                </template>
+              </el-input>
+            </el-form-item>
+
+            <el-form-item v-if="shortLink && !editShortLink" label="任务面板链接" props="shortLink">
+              {{shortLink}}
+              <i class="el-icon-edit" @click="editShortLink = true" v-if="taskOperationControl.confirmFinish"/>
+            </el-form-item>
+
+            <el-form-item v-if="!isModifyMode">
+              <el-button size="mini" @click="toProject()">项目详情</el-button>
+              <el-popover
+                placement="top-start"
+                title="确认结束？"
+                width="200"
+                trigger="hover"
+                content="测评机构已提交结束申请，请确认是否结束该任务">
+                <el-button v-if="taskOperationControl.confirmFinish" type="success" size="mini" slot="reference"
+                           @click="endTask()">确认结束
+                </el-button>
+              </el-popover>
+
+              <el-popover
+                placement="top-start"
+                title="确认提交？"
+                width="200"
+                trigger="hover"
+                content="提交任务后不可更改，等待区域管理员验收">
+                <el-button v-if="taskOperationControl.finish" type="primary" size="mini" slot="reference"
+                           @click="submitTaskRequest()">提交任务
+                </el-button>
+              </el-popover>
+
+              <el-popover
+                placement="top-start"
+                title="确认拒绝？"
+                width="200"
+                trigger="hover"
+                content="拒绝后不可再接收此任务，且该任务对您不可见">
+                <el-button v-if="taskOperationControl.reject" type="danger" size="mini" slot="reference"
+                           @click="rejectTask()">拒绝任务
+                </el-button>
+              </el-popover>
+
+              <el-popover
+                placement="top-start"
+                title="确认接收？"
+                width="200"
+                trigger="hover"
+                content="接收任务后请认真完成！">
+                <el-button v-if="taskOperationControl.receive" type="primary" size="mini" slot="reference"
+                           @click="receiveTask()">接收任务
+                </el-button>
+              </el-popover>
+
+              <el-button v-if="taskOperationControl.writeReport" type="primary" size="mini" @click="gotoWriteReport()">填写报告
+              </el-button>
+
+              <el-button v-if="taskOperationControl.update" type="primary" size="mini" @click="modifyForm()">修改任务
+              </el-button>
+
+              <el-button v-if="taskOperationControl.taskRecommend" type="primary" size="mini" @click="recommendTask()">任务推荐
+              </el-button>
+
+              <el-button v-if="taskOperationControl.uploadReport" type="primary" size="mini" @click="toCreateReport()">
+                上传报告
+              </el-button>
+              <el-button v-if="taskOperationControl.taskDemonstrate" type="success" size="mini" @click="gotoDataboard()">
+                任务面板
+              </el-button>
+              <!--<div class="btn btn-small btn-info"-->
+              <!--v-if="taskOperationControl.confirmFinish"-->
+              <!--@click="endTask()">确认结束-->
+              <!--</div>-->
+              <!--<div class="btn btn-small btn-info" v-if="!taskOperationControl.finish" @click="submitTaskRequest()">提交任务-->
+              <!--</div>-->
+              <!--<div class="btn btn-small btn-info" v-if="!taskOperationControl.receive" @click="receiveTask()">接收任务</div>-->
+              <!--<div class="btn btn-small btn-danger" v-if="!taskOperationControl.reject" @click="rejectTask()">拒绝任务</div>-->
+              <!--<div class="btn btn-small btn-info" v-if="taskOperationControl.update" @click="modifyForm()">修改任务</div>-->
+              <!--<div class="btn btn-small btn-info" v-if="!taskOperationControl.uploadReport" @click="toCreateReport()">上传报告-->
+              <!--</div>-->
+
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="9">
+          <TaskCloud :info="wordCloud" v-if="wordCloud.length"></TaskCloud>
+        </el-col>
+      </el-row>
+
     </div>
     <div class="create-body" v-if="!isModifyMode">
       <div class="title h2">用户报告列表</div>
@@ -258,6 +266,7 @@
   import ResourceType from '@/constants/enum/resource-type.js'
   import provincecity from '@/components/commons/ProvinceCity'
   import ReportList from '@/components/report/ReportList'
+  import TaskCloud from '@/components/task/TaskCloud'
   import Http from '@/js/http.js'
   import Apis from '@/js/api.js'
   import {notify} from '@/constants/index'
@@ -273,14 +282,16 @@
     rejectTask,
     storageGet,
     submitTaskRequest,
-    updateTask
+    updateTask,
+    getTaskWordCloud
   } from '@/js/index'
 
   export default {
     name: 'Task',
     components: {
       provincecity,
-      ReportList
+      ReportList,
+      TaskCloud
     },
     data() {
       return {
@@ -308,6 +319,7 @@
           taskRecommend: false
         },
         crowdReportUrl: '',
+        wordCloud:[],
         task: {
           agencyId: '',
           status: '',
@@ -482,6 +494,7 @@
         this.setServiceType()
         //this.loadData(this.projectId, this.taskId)
         this.getTaskDetail()
+        this.getWordCloud()
         this.setInstitutions()
       },
 
@@ -561,6 +574,18 @@
         this.showLoading()
         getTask(this.projectId, this.taskId, this.getTaskDetailSuccess, this.getTaskDetailFail)
       },
+
+      //获取词云
+      getWordCloud(){
+        getTaskWordCloud(this.projectId, this.taskId, this.getTaskCloudSuccess, this.getTaskCloudFail)
+      },
+      getTaskCloudSuccess(words){
+        this.wordCloud = words.data;
+      },
+      getTaskCloudFail(err){
+        notify('error',err)
+      },
+
       //获取任务详情成功时回调函数
       getTaskDetailSuccess(res) {
         this.hideLoading()

src/components/task/TaskCloud.vue

@@ -0,0 +1,106 @@
+<template>
+  <div id='taskWordCloud' style="height: 457px;width: 100%" ></div>
+</template>
+
+<script>
+import echarts from "echarts";
+// import resize from "./mixins/resize";
+import "echarts-wordcloud/dist/echarts-wordcloud";
+import "echarts-wordcloud/dist/echarts-wordcloud.min";
+
+export default {
+  name: "TaskCloud",
+  // mixins: [resize],
+  props: ['info'],
+  data() {
+    return {
+      chart: null
+    };
+  },
+  mounted() {
+    this.initChart();
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById('taskWordCloud'),{width:'auto',height:'500px'});
+      const option = {
+        backgroundColor: "#fff",
+        // tooltip: {
+        //   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
+        // },
+        series: [
+          {
+            type: "wordCloud",
+            //用来调整词之间的距离
+            gridSize: 10,
+            //用来调整字的大小范围
+            // Text size range which the value in data will be mapped to.
+            // Default to have minimum 12px and maximum 60px size.
+            sizeRange: [14, 60],
+            // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
+            //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
+            // rotationRange: [-45, 0, 45, 90],
+            // rotationRange: [ 0,90],
+            rotationRange: [0, 0],
+            //随机生成字体颜色
+            // maskImage: maskImage,
+            textStyle: {
+              normal: {
+                color: function() {
+                  return (
+                    "rgb(" +
+                    Math.round(Math.random() * 255) +
+                    ", " +
+                    Math.round(Math.random() * 255) +
+                    ", " +
+                    Math.round(Math.random() * 255) +
+                    ")"
+                  );
+                }
+              }
+            },
+            grid:{
+              x:10,
+              y:10,
+              x2:10,
+              y2:10,
+              height:"500px",
+              width:"100%"
+            },
+            //位置相关设置
+            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
+            // Default to be put in the center and has 75% x 80% size.
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: "100%",
+            height: "100%",
+            //数据
+            data: this.info
+          }
+        ]
+      };
+      this.chart.setOption(option);
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.chartsClass {
+  padding-left: 1.2rem;
+}
+
+#userWordCloud {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>
+

src/components/task/mixins/resize.js

@@ -0,0 +1,55 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
+  }
+}

src/js/api.js

@@ -24,6 +24,7 @@ export default {
     SUBMIT_TASK: '/api/project/{projectId}/task/{taskId}/status/commit',
     END_TASK: '/api/project/{projectId}/task/{taskId}/status/finished',
     MORE_HOT_TASK: '/api/square/hotTasks/list',
+    GET_TASK_CLOUD:'/api/project/{projectId}/task/{taskId}/word'
   },
   REPORT: {
     GET_TASK_REPORT: '/api/project/{projectId}/task/{taskId}/report/{reportId}/',

src/js/index.js

@@ -39,7 +39,8 @@ import {
   receiveTaskRequest,
   rejectTask,
   submitTaskRequest,
-  updateTask
+  updateTask,
+  getTaskWordCloud
 } from './taskService'
 import {
   createProjectReport,
@@ -169,6 +170,7 @@ export {
   getProjectReport,
   //TODO 尚未使用 代码未实现 获取任务报告详情
   getTaskReport,
+  getTaskWordCloud,
   //TODO 尚未使用 代码未实现 修改项目报告
   updateProjectReport,
   //TODO 尚未使用 代码未实现 修改任务报告

src/js/taskService.js

@@ -23,6 +23,16 @@ export const getTask = (projectId, taskId, getTaskSuccess, getTaskFail) => {
   })
 }
 
+//查看词云
+export const getTaskWordCloud = (projectId, taskId,getSuccess) => {
+  Http.get(Apis.TASK.GET_TASK_CLOUD.replace('{projectId}', projectId).replace('{taskId}', taskId), {}).then((res)=>{
+    getSuccess(res)
+  }).catch(err=>{
+    console.log(err)
+  })
+}
+
+
 //删除任务
 export const deleteTask = (projectId, taskId, deleteTaskSuccess, deleteTaskFail) => {
   Http.put(Apis.TASK.DELETE_TASK.replace('{projectId}', projectId).replace('taskId', taskId), {}).then((res) => {

src/main.js

@@ -69,11 +69,14 @@ import {
   Steps,
   Divider
 } from 'element-ui'
+
 Vue.prototype.$moment = moment
 Vue.prototype.$echarts = echarts;
-function getCurrentUserSuccess(res){
+
+function getCurrentUserSuccess(res) {
 
 }
+
 // var _hmt = _hmt || [];
 // (function() {
 //   var hm = document.createElement("script");
@@ -210,8 +213,8 @@ Vue.config.productionTip = false
 new Vue({
   el: '#app',
   router,
-  data:{
-    Bus:new Vue()
+  data: {
+    Bus: new Vue()
   },
   components: {App},
   template: '<App/>',