Grafische Erklärung des Funktionsaufrufs der Protodatei in Vue

//Gehen Sie in den Proto-Ordner und führen Sie die folgende Kompilierung aus. Ersetzen Sie dabei helloworld.proto durch den aktuellen .proto-Dateinamen protoc -I=. helloworld.proto \
    --js_out=import_style=commonjs,binär:.\
    --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

Service-Begrüßer
{
  rpc AddEmployee(Employee) gibt (EmployeeID) zurück {} // Unäre Nachricht mit Mitarbeiterinformationen übermitteln}
//Senden Sie die Anforderung Datentypstruktur Nachricht Mitarbeiter
{
  Zeichenfolgenname = 1;
  int32 Alter = 2;
}
//Gibt die Typstruktur der Funktion zurück, die die Ergebnisnachricht EmployeeID verarbeitet
{
  int32-ID = 1;
}

<el-button Typ="primär" @click="get_helloworld">
    hallo Welt
</el-button>

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

    //Anfrageparameter erstellen und Werte zuweisen var request = new Employee();
    request.setName("Welt");
    Anfrage.SetAge(11);
    // Rufen Sie die entsprechende Grpc-Methode des Clients auf, senden Sie eine Grpc-Anfrage und empfangen Sie den vom Backend zurückgesendeten Rückgabewert this.client.addEmployee(request, {"my-service-header": "test_service"}, (err, response) => {
        wenn (Fehler) {
            konsole.log(
                `Unerwarteter Fehler für addEmployee: Code = ${err.code}` +
                `, Nachricht = "${err.message}"`
            );
        } anders {  
            console.log(response.getId()); // Die zurückgegebenen Informationen drucken}
    });
},

rpc SelectAllCameras(SelectAllCamerasRequest) gibt zurück(SelectAllCamerasResponse){}
// Alle Kamerageräte abfragen Nachricht SelectAllCamerasRequest{
  int32 Seitenindex = 1;
  int32 Seitengröße = 2;
  Zeichenfolgenbedingung = 3;
}
//Gibt das Abfrageergebnis zurück, gibt ein Array von CameraInfo zurück, das den Aufzählungstyp CameraBrand enthält
Nachricht SelectAllCamerasResponse{
  CodeErr enumErrorNo = 1;
  wiederholte CameraInfo CameraArray = 2;
}
// Kamerainformationsmeldung CameraInfo{
  Zeichenfolge szCameraUID = 1; // uid
  Zeichenfolge szName = 2; // Name Dongmenkou-Kamera CameraBrand enumCameraBrand = 3; // Marke}
// Kameramarke enum CameraBrand {
  STANDARDKAMERAMARKE = 0;
  HIKI_VISION = 1;
  DAHUA = 2;
  UNIVIEW = 3;
}

importiere { device_register_serviceClient } aus "../proto/device_manage_grpc_web_pb";
importiere { SelectAllCamerasRequest,} von "../proto/device_manage_pb";

 <el-table :data="caminfoTabelle" ref="caminfoTabelle" >
   <el-table-column type="index" :index="table_index" align="center" label="Seriennummer" width="50"></el-table-column>
   <el-table-column prop="UID" label="UID" width="220" align="center">
     <template slot-scope="Umfang">
       <span>{{scope.row.getSzcamerauid()}}</span>
     </Vorlage>
   </el-Tabellenspalte>
   <el-table-column prop="szName" label="Kameraname" width="150" align="center">
     <template slot-scope="Umfang">
       <span>{{scope.row.getSzname()}}</span>
     </Vorlage>
   </el-Tabellenspalte>
   <el-table-column prop="enumCameraBrand" label="Kameramarke" width="120" align="center">
     <template slot-scope="Umfang">
       <span>{{Kameramarke[scope.row.getEnumcamerabrand()].label}}</span>
     </Vorlage>
   </el-Tabellenspalte>
</el-Tabelle>

//Das zurückgegebene Ergebnis einer Array-Variable caminfoTable:[] zuweisen,
// Kameramarke, die CameraBrand wird hier verwendet, um die Dropdown-Feldoptionen beim Hinzufügen von Kamerainformationen auszufüllen, und wird hier auch verwendet, um spezifische Daten anzuzeigen CameraBrand: [
  {Wert:0, Bezeichnung:"Standard"},
  { Wert: 1, Bezeichnung: "sea*" },
  { Wert: 2, Bezeichnung: "Big*" },
  { Wert: 3, Bezeichnung: "Zeichen*" },
],

//Informationen zum Kameragerät abrufen get_camerainfo_data(){
   this.client = neuer device_register_serviceClient("http://192.168.10.102:8181", null, null);
   var request_selectallCam = neue SelectAllCamerasRequest();
   request_selectallCam.setPageIndex(diese.Pagination_queryInfo.page_index);
   request_selectallCam.setPageSize(diese.Pagination_queryInfo.per_page);
   this.client.selectAllCameras(Anfrage_selectallCam,{"mein-service-header": "dev_manage_service"},(Fehler,Antwort)=>{
     wenn(fehler){
        konsole.log(
           `Unerwarteter Fehler für selectAllCameras: Code = ${err.code}` +
             `, Nachricht = "${err.message}"`
         );
     }anders{
         var caminfoList = response.getCameraarrayList();
         this.Pagination_total_pages = caminfoList.length; //Gesamtzahl der Seiten abrufen this.caminfoTable = caminfoList; //Das zurückgegebene Ergebnis der Tabellendatentabellenvariable zuweisen}
   });
   //Passen Sie die Seitenzahl an, um die erste Seite anzuzeigen. this.Pagination_queryInfo.page_index=1;
 },