!2 WebSocket 表格中的使用

Merge pull request !2 from lisgroup/develop

Author: lisgroup

admin/config/dev.env.js

@@ -5,4 +5,5 @@ const prodEnv = require('./prod.env')
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   BASE_API: '"http://localhost:8000"',
+  WEBSOCKET: '"ws://127.0.0.1:5200"',
 })

admin/config/prod.env.js

@@ -2,4 +2,5 @@
 module.exports = {
   NODE_ENV: '"production"',
   BASE_API: '"https://www.guke1.com"',
+  WEBSOCKET: '"wss://www.guke1.com/ws"',
 }

admin/src/views/api_excel/index.vue

@@ -4,6 +4,7 @@
       <el-button type="primary" size="medium">
         <router-link to="/api_excel/add">上传测试</router-link>
       </el-button>
+      <el-button :loading="reload" type="primary" class="reload" plain @click="fetchData">{{ reload_name }}</el-button>
     </el-row>
     <el-table
       v-loading="listLoading"
@@ -55,7 +56,7 @@
         </template>
       </el-table-column>
 
-      <el-table-column label="进度条" width="1" align="center" display="none">
+      <el-table-column label="进度条" width="100" align="center" display="none">
         <template slot-scope="scope">
           <div v-if="scope.row.state === 0">
             <el-progress :text-inside="true" :stroke-width="18" :percentage="0"/>
@@ -67,7 +68,7 @@
             <el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"/>
           </div>
           <div v-else>
-            <el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"/>
+            <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.rate" status="exception"/>
           </div>
         </template>
       </el-table-column>
@@ -126,6 +127,7 @@
 </template>
 
 <script>
+import { getToken } from '@/utils/auth'
 import { getList, deleteAct, search, startTask, download_log } from '@/api/api_excel'
 
 export default {
@@ -141,6 +143,8 @@ export default {
   },
   data() {
     return {
+      reload: false,
+      reload_name: '点击刷新',
       list: null,
       listLoading: true,
       perpage: 10,
@@ -156,7 +160,8 @@ export default {
     this.currentpage = parseInt(this.listQuery.page)
     const perPage = parseInt(this.$route.query.perPage)
     this.perpage = isNaN(perPage) ? this.perpage : perPage
-    this.fetchData()
+    // this.fetchData()
+    this.initWebSocket()
   },
   destroyed() {
     this.websock.close() // 离开路由之后断开 websocket 连接
@@ -209,20 +214,22 @@ export default {
                 type: msg,
                 message: res.reason
               })
+              this.initWebSocket()
             })
           }
         }
       })
     },
-    initWebSocket(id) { // 初始化 weosocket
+    initWebSocket() { // 初始化 weosocket
       if ('WebSocket' in window) {
-        const url = 'wss://www.guke1.com/ws?id=' + id
+        const url = process.env.WEBSOCKET + '?action=api_excel&token=' + getToken()
         this.websock = new WebSocket(url)
         this.websock.onmessage = this.onmessage
         this.websock.onopen = this.onopen
         this.websock.onerror = this.onerror
         this.websock.onclose = this.close
       } else {
+        this.fetchData()
         // 浏览器不支持 WebSocket，使用 ajax 轮询
         console.log('Your browser does not support WebSocket!')
       }
@@ -232,44 +239,60 @@ export default {
       // const rs = this.send(JSON.stringify(actions))
       // console.log(rs)
     },
-    onerror() { // 连接建立失败重连
+    onerror() {
+      // 连接建立失败, 发送 http 请求获取数据
       // this.initWebSocket()
+      this.fetchData()
     },
     onmessage(e) { // 数据接收
-      console.log(e.data)
+      // console.log(e.data)
       const data = JSON.parse(e.data)
       // this.list[2].rate = parseInt(data.data.rate)
       // console.log(this.list[2].rate)
-      console.log(data)
+      // console.log(data)
+      // websocket 返回的数据
+      this.list = data.data.data
+      this.listLoading = false
+      this.total = data.data.total
+      this.url = data.data.appUrl
+      // console.log('type', Object.prototype.toString.call(this.list))
+      setTimeout(() => {
+        this.reload = false
+        this.reload_name = '刷新'
+      }, 800)
     },
     send(Data) {
       this.websock.send(Data)
     },
     close() { // 关闭
-      console.log('断开连接')
+      // console.log('断开连接')
     },
     download(index, row) {
       window.location.href = this.url + row.finish_url
     },
     download_log(index, row) {
       download_log({ id: row.id }).then(res => {
-        console.log(res)
+        // console.log(res)
         if (res.code === 200) {
           window.location.href = this.url + res.data.failed_done_file
         }
       })
     },
     fetchData() {
-      this.listLoading = true
+      this.listLoading = this.reload = true
+      this.reload_name = '加载中'
       const params = Object.assign({ 'page': this.listQuery.page }, { 'perPage': this.perpage })
       getList(params).then(response => {
         this.list = response.data.data
         this.listLoading = false
         this.total = response.data.total
         this.url = response.data.appUrl
-        console.log('type', Object.prototype.toString.call(this.list))
-
-        this.initWebSocket(8)
+        // console.log('type', Object.prototype.toString.call(this.list))
+        setTimeout(() => {
+          this.reload = false
+          this.reload_name = '刷新'
+        }, 800)
+        // this.initWebSocket()
       })
     },
     handleEdit(index, row) {
@@ -354,4 +377,8 @@ export default {
   .pagination {
       margin: 20px auto;
   }
+  .reload {
+    margin-right: 300px;
+    float: right;
+  }
 </style>

laravel/app/Events/SaveApiExcelLogEvent.php

@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Events;
+
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Broadcasting\InteractsWithSockets;
+
+class SaveApiExcelLogEvent
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    /**
+     * @var array api_excel 表中数据
+     */
+    private $data;
+
+    /**
+     * 实例化事件时传递参数
+     *
+     * ApiExcelEvent constructor.
+     * @param array $data
+     */
+    public function __construct($data)
+    {
+        $this->data = $data;
+    }
+
+    /**
+     * 获取 $data
+     *
+     * @return array
+     */
+    public function getData()
+    {
+        return $this->data;
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return Channel|array
+     */
+    public function broadcastOn()
+    {
+        return new PrivateChannel('channel-default');
+    }
+}

laravel/app/Http/Controllers/Api/ApiExcelController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Api;
 
 use App\Events\ApiExcelEvent;
+use App\Http\Repository\ApiRepository;
 use App\Http\Repository\ExcelRepository;
 use App\Http\Requests\ApiExcel\Store;
 use App\Http\Requests\ApiExcel\Update;
@@ -57,6 +58,8 @@ public function index()
             $where = ['uid' => $user_id];
         }
         $list = ApiExcel::with('apiParam')->where($where)->orderBy('id', 'desc')->paginate($this->perPage);
+        // 获取完成进度情况
+        $list = ApiRepository::getInstent()->workProgress($list);
 
         $appUrl = env('APP_URL') ?? '';
         $collect = collect(['appUrl' => $appUrl]);
@@ -264,6 +267,11 @@ public function forceDelete($id)
         return $this->out(200);
     }
 
+    /**
+     * 下载已完成数据
+     * 
+     * @return \Illuminate\Http\Response
+     */
     public function downloadLog()
     {
         $api_excel_id = $this->request->input('id');
@@ -280,4 +288,5 @@ public function downloadLog()
         }
         return $this->out(200, ['failed_done_file' => $failed_done_file]);
     }
+
 }

laravel/app/Http/Controllers/Api/ApiParamController.php

@@ -68,6 +68,7 @@ public function store(Store $request)
         // 会出现 Unknown column 'guid' in 'field list' 不存在的字段入库报错问题
         // $rs = ApiParam::insert($request->all());
         $input = $request->all();
+        $input['website'] = $input['website'] ?? '';
         $model = new ApiParam($input);
         if ($model->save()) {
             return $this->out(200, ['data' => ['id' => $model->id]]);

laravel/app/Http/Repository/ApiRepository.php

@@ -10,6 +10,7 @@
 
 
 use App\Models\ApiExcel;
+use App\Models\ApiExcelLogs;
 
 class ApiRepository
 {
@@ -75,7 +76,6 @@ public function autoFailed()
             // 开启任务后 10 分钟未查询出结果=》失败
             if ($excel['auto_delete'] > 0 && strtotime($excel['updated_at']) + 600 < time()) {
                 ApiExcel::where('id', $excel['id'])->update(['state' => 5]);
-
             }
 
         }
@@ -107,4 +107,54 @@ public function randomTime()
     {
         return (float)sprintf('%.0f', microtime(true) * 1000);
     }
+
+
+    /**
+     * 获取下载进度条
+     *
+     * @param $lists
+     *
+     * @return mixed
+     */
+    public function workProgress($lists)
+    {
+        foreach ($lists as $key => $list) {
+            $rate = 100;
+            switch ($list['state']) {
+                case '0': // 未开启任务
+                    $rate = 0;
+                    break;
+                case '1': // 正在处理的任务
+                case '5': // 失败任务
+                    $rate = $this->progressRate($list['id'], $list['total_excel']);
+                    break;
+            }
+
+            $lists[$key]['rate'] = $rate;
+        }
+        return $lists;
+    }
+
+
+    /**
+     * 计算任务完成百分比
+     *
+     * @param int $excel_id api_excel 主键 id
+     * @param int $total_excel 总数
+     *
+     * @return int|bool
+     */
+    private function progressRate($excel_id, $total_excel)
+    {
+        if ($total_excel > 0) {
+            // 2. 查询 api_excel_logs 表更新的数据量
+            $total = ApiExcelLogs::where('api_excel_id', $excel_id)->count();
+            // 3. 返回完成率
+            $rate = floor($total / $total_excel * 100);
+            return $rate > 100 ? 100 : $rate;
+        }
+
+        return 100;
+    }
+
 }

laravel/app/Http/Repository/ExcelRepository.php

@@ -183,7 +183,7 @@ public function saveExcel($param, $result, $file = '')
 
                 $i = 'A';
                 foreach ($keys as $num => $key) {
-                    $setActive->setCellValue($i.$number, "\t".$value['param'][$key]);
+                    $setActive->setCellValue($i.$number, "\t".($value['param'][$key] ?? ''));
                     $i++;
                 }
 
@@ -240,7 +240,7 @@ public function saveExcel($param, $result, $file = '')
             $objActSheet = $objPHPExcel->getActiveSheet();
             // 位置bbb  *为下文代码位置提供锚
             // 给当前活动的表设置名称
-            $objActSheet->setTitle('Simple');
+            $objActSheet->setTitle('Sheet1');
             // 代码还没有结束，可以复制下面的代码来决定我们将要做什么
 
             // 1,直接生成一个文件