Graphical explanation of the function call of proto file in Vue

//Enter the proto folder and execute the following compilation, replacing helloworld.proto with the current .proto file name protoc -I=. helloworld.proto \
    --js_out=import_style=commonjs,binary:. \
    --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

Service Greeter
{
  rpc AddEmployee(Employee) returns (EmployeeID) {} // Submit employee information unary message}
//Send request data type structure message Employee
{
  string name = 1;
  int32 age = 2;
}
//Return the type structure of the function processing result message EmployeeID
{
  int32 id = 1;
}

<el-button type="primary" @click="get_helloworld">
    hello_world
</el-button>

get_helloworld() {
    this.client = new GreeterClient("http://192.168.10.102:8181", null, null);

    // Create request parameters and assign values ​​var request = new Employee();
    request.setName("World");
    request.setAge(11);
    // Call the corresponding grpc method of the client, send a grpc request, and receive the return value sent back by the backend this.client.addEmployee(request, {"my-service-header": "test_service"}, (err, response) => {
        if (err) {
            console.log(
                `Unexpected error for addEmployee: code = ${err.code}` +
                `, message = "${err.message}"`
            );
        } else {  
            console.log(response.getId()); // Print the returned information}
    });
},

rpc SelectAllCameras(SelectAllCamerasRequest) returns(SelectAllCamerasResponse){}
// Query all camera devices message SelectAllCamerasRequest{
  int32 page_index = 1;
  int32 page_size = 2;
  string condition = 3;
}
//Return the query result, return an array of CameraInfo, which contains the enumeration type CameraBrand
message SelectAllCamerasResponse{
  CodeErr enumErrorNo = 1;
  repeated CameraInfo cameraArray = 2;
}
// Camera information message CameraInfo{
  string szCameraUID = 1; // uid
  string szName = 2; // Name Dongmenkou Camera CameraBrand enumCameraBrand = 3; // Brand}
// Camera brand enum CameraBrand {
  DEFAULT_CAMERA_BRAND = 0;
  HIKI_VISION = 1;
  DAHUA = 2;
  UNIVIEW = 3;
}

import { device_register_serviceClient } from "../proto/device_manage_grpc_web_pb";
import { SelectAllCamerasRequest,} from "../proto/device_manage_pb";

 <el-table :data="caminfoTable" ref="caminfoTable" >
   <el-table-column type="index" :index="table_index" align="center" label="Serial number" width="50"></el-table-column>
   <el-table-column prop="UID" label="UID" width="220" align="center">
     <template slot-scope="scope">
       <span>{{scope.row.getSzcamerauid()}}</span>
     </template>
   </el-table-column>
   <el-table-column prop="szName" label="Camera name" width="150" align="center">
     <template slot-scope="scope">
       <span>{{scope.row.getSzname()}}</span>
     </template>
   </el-table-column>
   <el-table-column prop="enumCameraBrand" label="Camera brand" width="120" align="center">
     <template slot-scope="scope">
       <span>{{CameraBrand[scope.row.getEnumcamerabrand()].label}}</span>
     </template>
   </el-table-column>
</el-table>

//Assign the returned result to an array variable caminfoTable:[],
// Camera brand, the CameraBrand here is used to fill in the drop-down box options when adding camera information, and is also used here to display specific data CameraBrand: [
  {value:0, label:"Default"},
  { value: 1, label: "sea*" },
  { value: 2, label: "Big*" },
  { value: 3, label: "宇*" },
],

//Get the information of the camera device get_camerainfo_data(){
   this.client = new device_register_serviceClient("http://192.168.10.102:8181", null, null);
   var request_selectallCam = new SelectAllCamerasRequest();
   request_selectallCam.setPageIndex(this.Pagination_queryInfo.page_index);
   request_selectallCam.setPageSize(this.Pagination_queryInfo.per_page);
   this.client.selectAllCameras(request_selectallCam,{"my-service-header": "dev_manage_service"},(err,response)=>{
     if(err){
        console.log(
           `Unexpected error for selectAllCameras: code = ${err.code}` +
             `, message = "${err.message}"`
         );
     }else{
         var caminfoList = response.getCameraarrayList();
         this.Pagination_total_pages = caminfoList.length; //Get the total number of pages this.caminfoTable = caminfoList; //Assign the returned result to the table data table variable}
   });
   //Adjust the page number to show the first page this.Pagination_queryInfo.page_index=1;
 },