Práctica de código bajo de U-way: vista estadística

 

La columna de tecnología de código bajo de U-way es una nueva columna basada en tecnología escrita por miembros del comité técnico de U-way. presenta principalmente los principios técnicos y la arquitectura relacionados con la lógica de código bajo, el propósito es proporcionar una plataforma para el intercambio técnico y el aprendizaje para la mayoría del personal de operación y mantenimiento.

---

La décima serialización de la práctica de código bajo de U-way

"Vista de estadísticas"

▽

Visual Builder proporciona una gran cantidad de componentes de tipo icono, que son convenientes para que los usuarios realicen algunas estadísticas de datos. También se pueden usar ampliamente en proyectos de pantalla grande. A continuación, simplemente modificamos nuestro diseño y creamos un gráfico de estadísticas de datos sugerido. ~

1. Agregue un componente de gráfico

Ubique el componente de tarjeta general de la página de enrutamiento de detalles de la tarea, elimine todos sus subcomponentes y agregue nuestro nuevo componente de gráfico: chart-v2.bar-chart, el efecto es el siguiente:

 A continuación, recibimos una solicitud. En este ícono, queremos mostrar que el estado de la tarjeta de tarea aún se está procesando o sin procesar, y mostrarlo. Aquí, nuestras modificaciones son las siguientes:

2. Acoplamiento de datos de fondo

数据名称: taskList
类型: Provider
Provider: providers-of-cmdb.instance-api-post-search-v3
Args:
  - TASK_FOR_VB_LESSON
  - fields:
      - assignee
      - state
    page: 1
    pageSize: 3000

3. Modificación del diseño del diagrama

属性面板-属性:
  data: <% FN.computedTaskList(CTX.taskList) %>
  height: 450
  legends: false
  xField: assignee
  yField: unFinishTask

4. Función de microaplicación computedTaskList recién agregada

function computedTaskList({ list }: Params): ResultItem[] {
  const obj = {};
  list.forEach((item) => {
    if (item.state === "研发完成") return;
    if (obj[item.assignee]) {
      obj[item.assignee]++;
    } else {
      obj[item.assignee] = 1;
    }
  });


  const arr: ResultItem[] = [];


  Object.entries(obj).forEach(([key, value]) => {
    arr.push({
      assignee: key,
      unFinishTask: value as number,
    });
  });


  return arr;
}


interface Params {
  list: Array<any>;
}


interface ResultItem {
  assignee: string;
  unFinishTask: number;
}

Después de lidiar con esto, nuestro ícono puede funcionar como se esperaba ~ vea la imagen de vista previa:

 5. Optimice el estilo de la página y agregue imágenes

Simulamos un requisito, esta página es demasiado monótona, queremos agregar algunas imágenes para enriquecer el contenido, entonces, ¿cómo lo hacemos?

Primero, seleccione la pestaña de imagen en el menú de la barra lateral izquierda, ingrese a la página, haga clic en el botón de carga en la esquina superior derecha, cargue la imagen y finalmente haga clic en construir y enviar, y podemos usar las imágenes que cargamos ~ Para más detalles, por favor consulte el capítulo "Imagen"

 Luego regrese a nuestra página de detalles de la tarea y modifique el arreglo, como se muestra en la siguiente figura:

Entre ellos, el src de img, cada proyecto y cada imagen serán diferentes. Utilice la URL correspondiente en combinación con sus propios proyectos.