当前位置： 首页 > news >正文

基于VUE2-dataV和echarts实现的可视化大屏，百分比适配PC端

news 2026/3/31 22:10:36

可视化平台中，数据分别通过仪表盘、环状图、柱形图、曲线图、 滚动表格等多种形式展示数据变化。 可视化平台大致分为左、中、右三部分，左侧由能耗总览、耗能 占比、库存预警构成，中间由数据总览、销售计划完成率构成，右侧 由销售统计、销售排名（TOP8）、生产统计构成。平台右上角动态 显示当前系统日期、星期、时间，格式。 在管理端进行添加数据后，数据可视化图表进行相应变化。 1.能耗总览仪表盘，统计分析耗电量、耗水量、碳排放量的总数， 以不同颜色的仪表盘形式展示耗电量、耗水量、碳排放量的总数，在 环状图中间区域显示各数据的数据值。 2.能耗占比环状图，请分析各能耗的消耗数占能耗总数的比例， 扇形图中包括两部分内容：能耗占比图中需显示办公耗电量、办公用 水量、生产用水量、生产耗电量的数量及占能耗总数的比例。环状图 应用不同颜色区分显示各个能耗的占比，中间区域需显示能耗总数。

下面展示左边代码，部分代码，一键三连私聊博主获得完整文件+后端。此大屏数据与后端联动。！！！！！！！！！

<template>

  <div>

    <div class="top">

      <!-- 能耗总览  仪表盘-->

      <dv-border-box-8

        style="width: 100%; height: 18.5em; margin-top: 19px; background: none"

      >

        <dv-decoration-7 style="width: 120px; height: 30px; margin-left: 40%"

          >能耗总览</dv-decoration-7

        >

        <div id="topinit" style="width: 33.3%; height: 250px"></div>

        <div id="topinit2" style="width: 33.3%; height: 250px"></div>

        <div id="topinit3" style="width: 33.3%; height: 250px"></div>

      </dv-border-box-8>

    </div>

    <div class="center">

      <!-- 能耗占比  环状图-->

      <dv-border-box-8 style="width: 100%; height: 18.5em; margin-top: 19px">

        <dv-decoration-7 style="width: 120px; height: 30px; margin-left: 40%"

          >能耗占比</dv-decoration-7

        >

        <div id="centerinit" style="width: 100%; height: 260px"></div>

      </dv-border-box-8>

    </div>

    <div class="footer">

      <!-- 库存预警  排序表-->

      <dv-border-box-8 style="width: 100%; height: 18.5em; margin-top: 19px">

        <dv-decoration-7 style="width: 120px; height: 30px; margin-left: 40%"

          >库存预警</dv-decoration-7

        >

        <dv-scroll-board

          :config="config"

          style="width: 99%; height: 260px; margin-left: 4px"

        />

      </dv-border-box-8>

    </div>

  </div>

</template>

<script>

// 均是日数据化

// 能耗总览

import { productPowerReportByDay } from "@/api/dv/carbon.js";

// 能耗占比

import { getEmissionPercent } from "@/api/dv/carbon.js";

// 库存预警

import { listInventory } from "@/api/dv/carbon.js";

export default {

  name: "LeftContain",

  components: {},

  data() {

    return {

      paramsFrom: {

        pageNum: 1,

        pageSize: 20,

      },

      // 库存预警

      config: {},

      // 能耗总览

      // 耗电量

      totalPowerConsume: 0,

      // 耗水量

      totalWaterConsume: 0,

      // 碳排放量

      totalCarbonEmission: 0,

      // 耗能占比

      totals: 0,

      // 办公用水量 +  办公耗电量

      totalOfficeWaterConsumes: 0,

      totalOfficePowerConsumes: 0,

      // 生产用水量 +  生产耗电量

      totalWaterConsumes: 0,

      totalPowerConsumes: 0,

    };

  },

  created() {

    this.getDataTop();

  },

  methods: {

    // 获取数据

    getDataTop() {

      productPowerReportByDay().then((res) => {

        this.$nextTick(() => {

          this.inittop();

          this.inittop2();

          this.inittop3();

        });

        this.totalCarbonEmission = res.rows[0].totalCarbonEmission;

        this.totalPowerConsume =

          res.rows[0].totalOfficePowerConsume + res.rows[0].totalPowerConsume;

        this.totalWaterConsume =

          res.rows[0].totalWaterConsume + res.rows[0].totalOfficeWaterConsume;

      });

      getEmissionPercent().then((res) => {

        this.$nextTick(() => {

          this.initcenter();

        });

        this.totalOfficePowerConsumes = res.data[0].totalOfficePowerConsume;

        this.totalOfficeWaterConsumes = res.data[0].totalOfficeWaterConsume;

        this.totalPowerConsumes = res.data[0].totalPowerConsume;

        this.totalWaterConsumes = res.data[0].totalWaterConsume;

        this.totals =

          res.data[0].totalOfficePowerConsume +

          res.data[0].totalOfficeWaterConsume +

          res.data[0].totalPowerConsume +

          res.data[0].totalOfficePowerConsume;

      });

      listInventory(this.paramsFrom).then((res) => {

        this.config = {

          header: ["编号", "物料", "仓库", "库存", "状态"],

          data: [],

          index: false,

          headerBGC: "#43f5ff",

          oddRowBGC: "rgba(190,20,128,0.5)",

          evenRowBGC: "#43ad7f7f",

          columnWidth: [50],

          align: ["center"],

        };

        this.config.data = res.rows.map((item) => {

          return [

            item.id,

            item.materialName,

            item.warehouseName,

            item.totalInventory,

            this.getStatus(item),

          ];

        });

      });

    },

    getStatus(item) {

      if (

        item.inventoryLimit > item.totalInventory &&

        item.totalInventory > item.inventoryLower

      ) {

        return "正常";

      } else if (item.totalInventory < item.inventoryLower) {

        return "不足";

      } else {

        return "溢出";

      }

    },

    // 能耗总览-定义仪表盘

    inittop() {

      let totalPowerConsume = this.totalPowerConsume;

      let totalCarbonEmission = this.totalCarbonEmission;

      let totalWaterConsume = this.totalWaterConsume;

      var chartDom = document.getElementById("topinit");

      var myChart = this.$echarts.init(chartDom);

      var option;

      option = {

        tooltip: {

          formatter: "{a} <br/>{b} : {c}%",

        },

        series: [

          {

            // 最大数

            max: totalPowerConsume + 1000,

            name: "Pressure",

            type: "gauge",

            // 进度

            progress: {

              show: true,

            },

            // 数据数字

            detail: {

              color: "orange",

              fontSize: 22,

              valueAnimation: true,

              formatter: "{value}",

            },

            // 标题

            title: {

              show: true,

              offsetCenter: [0, "80%"],

              color: "white",

            },

            // 刻度数字

            axisLabel: {

              show: false,

            },

            // 指针大小

            pointer: {

              width: 4,

            },

            // 数据

            data: [

              {

                value: totalPowerConsume,

                name: "耗电量",

              },

            ],

            // 指针颜色

            itemStyle: {

              color: "orange",

            },

          },

        ],

      };

      option && myChart.setOption(option);

    },

    inittop2() {

      let totalPowerConsume = this.totalPowerConsume;

      let totalCarbonEmission = this.totalCarbonEmission;

      let totalWaterConsume = this.totalWaterConsume;

      var chartDom = document.getElementById("topinit2");

      var myChart = this.$echarts.init(chartDom);

      var option;

      option = {

        tooltip: {

          formatter: "{a} <br/>{b} : {c}%",

        },

        series: [

          {

            max: totalWaterConsume + 5000,

            name: "Pressure",

            type: "gauge",

            title: {

              show: true,

              offsetCenter: [0, "80%"],

              color: "white",

            },

            axisLabel: {

              show: false,

            },

            progress: {

              show: true,

            },

            pointer: {

              width: 4,

            },

            detail: {

              color: "green",

              fontSize: 22,

              valueAnimation: true,

              formatter: "{value}",

            },

            data: [

              {

                value: totalWaterConsume,

                name: "耗水量",

              },

            ],

            itemStyle: {

              color: "green",

            },

          },

        ],

      };

      option && myChart.setOption(option);

    },

    inittop3() {

      let totalPowerConsume = this.totalPowerConsume;

      let totalCarbonEmission = this.totalCarbonEmission;

      let totalWaterConsume = this.totalWaterConsume;

      var chartDom = document.getElementById("topinit3");

      var myChart = this.$echarts.init(chartDom);

      var option;

      option = {

        tooltip: {

          formatter: "{a} <br/>{b} : {c}%",

        },

        series: [

          {

            max: totalCarbonEmission + 10000,

            name: "Pressure",

            type: "gauge",

            progress: {

              show: true,

            },

            pointer: {

              width: 4,

            },

            axisLabel: {

              show: false,

            },

            axisLine: {

              show: true,

              lineStyle: {},

            },

            detail: {

              color: "blue",

              fontSize: 22,

              valueAnimation: true,

              formatter: "{value}",

            },

            title: {

              show: true,

              offsetCenter: [0, "80%"],

              color: "white",

            },

            data: [

              {

                value: totalCarbonEmission,

                name: "碳排放量",

              },

            ],

            itemStyle: {

              color: "blue",

            },

          },

        ],

      };

      option && myChart.setOption(option);

    },

    // 能耗占比-环状图

    initcenter() {

      let totalOfficePowerConsumes = this.totalOfficePowerConsumes;

      let totalOfficeWaterConsumes = this.totalOfficeWaterConsumes;

      let totalPowerConsumes = this.totalPowerConsumes;

      let totalWaterConsumes = this.totalWaterConsumes;

      let totalS = this.totals;

      var chartDom = document.getElementById("centerinit");

      var myChart = this.$echarts.init(chartDom);

      var option;

      option = {

        tooltip: {

          trigger: "item",

        },

        // 是否显示隐藏图例的一些操作

        legend: {

          show: false,

          top: "5%",

          left: "center",

        },

        series: [

          // 外圈 暂时不加引导线

          {

            name: "能耗占比",

            type: "pie",

            radius: ["40%", "70%"],

            avoidLabelOverlap: false,

            label: {

              show: true,

              position: "outside",

              // formatter: "{b} : {c*100}%",

              formatter(params) {

                return params.name + (params.value / totalS) * 100 + "%";

              },

            },

            labelLine: {

              show: true,

              length: 6,

              length2: 7,

              lineStyle: {

                color: "red",

                width: 21,

              },

            },

            emphasis: {

              label: {

                show: true,

                fontSize: 40,

                fontWeight: "bold",

              },

            },

            labelLine: {

              show: false,

            },

            data: [

              { value: totalOfficePowerConsumes, name: "办公耗电量" },

              { value: totalOfficeWaterConsumes, name: "办公用水量" },

              { value: totalPowerConsumes, name: "生产耗电量" },

              { value: totalWaterConsumes, name: "生产耗水量" },

            ],

          },

          // 内圈，把半径设为0

          {

            name: "能耗总数",

            type: "pie",

            radius: ["0%", "0%"],

            avoidLabelOverlap: false,

            // 显示数据

            label: {

              show: true,

              color: "#fff",

              position: "inside",

              formatter: "{c}\n{b}",

            },

            // 鼠标放上去变大

            emphasis: {

              label: {

                show: true,

                fontSize: 40,

                fontWeight: "bold",

                color: "#fff",

              },

            },

            labelLine: {

              show: false,

            },

            data: [

              {

                value: totalS,

                name: "总数",

              },

            ],

          },

        ],

      };

      option && myChart.setOption(option);

    },

  },

};

</script>

<style lang="scss" scoped>

* {

  background: none;

}

.top {

  background: none;

}

#topinit,

#topinit3,

#topinit2 {

  display: flex;

  float: left;

}

</style>

相关文章：

基于VUE2-dataV和echarts实现的可视化大屏，百分比适配PC端

可视化平台中&#xff0c;数据分别通过仪表盘、环状图、柱形图、曲线图、 滚动表格等多种形式展示数据变化。 可视化平台大致分为左、中、右三部分&#xff0c;左侧由能耗总览、耗能 占比、库存预警构成&#xff0c;中间由数据总览、销售计划完成率构成&#xff0c;右侧 由销售…...

编程日记 2024/9/8 22:16:59

FastAPI模块化：为复杂应用程序提供清晰的结构

开题描述&#xff1a; 在现代软件开发中&#xff0c;随着应用程序规模的扩大和功能的增加&#xff0c;传统的单体架构逐渐暴露出其局限性。FastAPI&#xff0c;作为一款高性能的现代Web框架&#xff0c;通过其模块化设计提供了一种解决方案。本文将探讨FastAPI模块化如何为构建…...

编程日记 2024/9/8 22:15:58

【Hot100】LeetCode—215. 数组中的第K个最大元素

目录 1- 思路快速选择 2- 实现⭐215. 数组中的第K个最大元素——题解思路 3- ACM实现 原题连接&#xff1a;215. 数组中的第K个最大元素 1- 思路 快速选择 第 k 大的元素的数组下标&#xff1a; int target nums.length - k 1- 根据 partition 分割的区间来判断当前处理方式…...

编程日记 2024/9/8 22:11:53

pycharm如何安装selenium

在pycharm中打开一个项目后,点击Setting(ALTCtrlS快捷键) 然后点击install package完成后点击关闭这个窗口,就可以在代码中使用selenium了 成功后出现如下界面 编写一段正常可以运行操作chorme浏览器的 from selenium import webdriver # 指定ChromeDriver的路径driver we…...

编程日记 2024/9/8 22:09:51

css三点闪烁（可用于加载样式、标题等）

代码案例 HTML <div class"flexAlign loading"><div class"loading_item"></div><div class"loading_item"></div><div class"loading_item"></div> </div> <div class"ot…...

编程日记 2024/9/8 22:07:50

支持向量机 (Support Vector Machines, SVM)

支持向量机 (Support Vector Machines, SVM) 通俗易懂算法 支持向量机&#xff08;SVM&#xff09;是一种用于分类和回归任务的机器学习算法。在最简单的情况下&#xff0c;SVM是一种线性分类器&#xff0c;适用于二分类问题。它的基本思想是找到一个超平面&#xff08;在二维…...

编程日记 2024/9/8 22:06:48

上海市计算机学会竞赛平台2024年8月月赛丙组调和级数

题目描述 给定一个整数 nn&#xff0c;记 ⌊x⌋⌊x⌋ 表示不超过实数 xx 的最大整数&#xff0c;请求出 ⌊n1⌋⌊n2⌋⌊n3⌋⋯⌊nn−1⌋⌊nn⌋⌊1n​⌋⌊2n​⌋⌊3n​⌋⋯⌊n−1n​⌋⌊nn​⌋ 输入格式 单个整数&#xff1a;表示 nn 输出格式 单个整数&#xff1a;表示答…...

编程日记 2024/9/8 22:04:45

【重学 MySQL】二十、运算符的优先级

【重学 MySQL】二十、运算符的优先级 MySQL 运算符的优先级&#xff08;由高到低&#xff09;注意事项示例 在 MySQL 中&#xff0c;运算符的优先级决定了在表达式中各个运算符被计算的先后顺序。了解运算符的优先级对于编写正确且高效的 SQL 语句至关重要。以下是根据高权威性…...

编程日记 2024/9/8 22:03:44

十种优化MySQL数据库的最佳建议

优化MySQL数据库可以提高查询性能和系统响应能力&#xff0c;以下是一些MySQL数据库优化的建议&#xff1a; 优化查询语句&#xff1a;避免使用SELECT *&#xff0c;只选择需要的字段&#xff1b;使用索引来加快查询速度&#xff1b;避免使用慢查询。 优化表结构&#xff1a;使…...

编程日记 2024/9/8 22:02:43

springboot组件使用-mybatis组件使用

文章目录 springboot使用mybatis组件1. 添加依赖2. 配置数据源3. 创建实体类4. 创建Mapper接口5. 创建Mapper XML文件6. 使用Mapper7. 启动类配置 mybtis 动态SQL1. Mapper 注解2. Select 注解3. Insert 注解4. Update 注解5. Delete 注解6. Results 注解7. Param 注解8. Cache…...

编程日记 2024/9/8 22:01:42

Ribbon 源码分析【Ribbon 负载均衡】

前言 在 Spring Cloud 2020 版本以后&#xff0c;移除了对 Netflix 的依赖&#xff0c;也就移除了负载均衡器 Ribbon&#xff0c;Spring Cloud 官方推荐使用 Loadbalancer 替换 Ribbon&#xff0c;而在 LoadBalancer 之前 Spring Cloud 一直使用的是 Ribbon 来做负载[均衡器的…...

编程日记 2024/9/8 22:00:41

Python | Leetcode Python题解之第385题迷你语法分析器

题目&#xff1a; 题解&#xff1a; class Solution:def deserialize(self, s: str) -> NestedInteger:if s[0] ! [:return NestedInteger(int(s))stack, num, negative [], 0, Falsefor i, c in enumerate(s):if c -:negative Trueelif c.isdigit():num num * 10 int…...

编程日记 2024/9/8 21:59:40

进程间通信-进程池

目录 理解​ 完整代码 完善代码 回收子进程&#xff1a;​ 不回收子进程&#xff1a; 子进程使用重定向优化 理解 #include <iostream> #include <unistd.h> #include <string> #include <vector> #include <sys/types.h>void work(int rfd) {…...

编程日记 2024/9/8 21:58:36

【PYTHON 基础系列-request 模块介绍】

一、requests库简介 使用requests库能快速构建 HTTP 请求&#xff0c;而无需深入了解底层网络协议细节。其API设计直观&#xff0c;使得发送请求就像调用函数一样简单&#xff0c;同时提供了丰富的选项以满足复杂网络交互的需求。这种设计使得无论是初学者还是经验丰富的开发者…...

编程日记 2024/9/8 21:56:34

springboot 实现策略模式通过id进入不同的服务类service

在Spring Boot中实现策略模式&#xff0c;通常是将不同的算法封装在单独的类中&#xff0c;并使它们可以相互替换。这些类通常都实现同一个接口。在Spring Boot应用中&#xff0c;你可以通过Spring的依赖注入&#xff08;DI&#xff09;来管理这些策略类的实例&#xff0c;并通…...

编程日记 2024/9/8 21:55:33

AUC真的什么情形下都适合吗

AUC（Area Under the ROC Curve）是一个广泛使用的性能评价指标，它衡量了分类模型在不同阈值下区分正类和负类的能力。然而，在某些情况下，AUC可能不是最准确的评价指标，以下是几种可能的情况： 数据极度不均衡：在数据极度不均衡的情况下，即使模型只预测多数类，AUC也可能…...

编程日记 2024/9/8 21:54:32

Flutter基本组件Text使用

Text是一个文本显示控件&#xff0c;用于在应用程序界面中显示单行或多行文本内容。 Text简单Demo import package:flutter/material.dart;class MyTextDemo extends StatelessWidget {const MyTextDemo({super.key});overrideWidget build(BuildContext context) {return Sca…...

编程日记 2024/9/8 21:51:30

DDS基本原理--FPGA学习笔记

DDS信号发生器原理&#xff1a; timescale 1ns / 1ps // // Company: // Engineer: // // Create Date: 2024/09/04 15:20:30 // Design Name: hilary // Module Name: DDS_Module //module DDS_Module(Clk,Reset_n,Fword,Pword,Data);input Clk;input Reset_n;input [31:0]…...

编程日记 2024/9/8 21:50:29

有temp表包含A，B两列，使用SQL，对B列进行处理，形成C列，按A列顺序，B列值不变，则C列累计技术，B列值变化，则C列重新开始计数

有temp表&#xff0c;使用SQL&#xff0c;对B列进行处理&#xff0c;形成C列&#xff0c;按A列顺序&#xff0c;B列值不变&#xff0c;则C列累计技术&#xff0c;B列值变化&#xff0c;则C列重新开始计数 建表语句如下 CREATE TABLE temp(A STRING ,B STRING );INSERT INTO …...

编程日记 2024/9/8 21:49:28

【H2O2|全栈】关于HTML（6）HTML基础（五 · 完结篇）

HTML基础知识 目录 HTML基础知识 前言 准备工作 标签的具体分类&#xff08;五&#xff09; 本文中的标签在什么位置中使用&#xff1f; 表单&#xff08;二&#xff09; 下拉选择菜单 文本域 案例 拓展标签 iframe框架 案例 预告和回顾 后话 前言 本系列博客介…...

编程日记 2024/9/8 21:48:27

5步高效使用小说下载工具：零基础也能掌握的开源项目全攻略

5步高效使用小说下载工具&#xff1a;零基础也能掌握的开源项目全攻略 【免费下载链接】novel-downloader 一个可扩展的通用型小说下载器。 项目地址: https://gitcode.com/gh_mirrors/no/novel-downloader 在数字阅读时代&#xff0c;拥有一款可靠的小说下载工具能让你…...

编程新知 2026/3/31 22:09:58

省钱方案：用NAT主机+Frpc实现高速内网穿透（避坑指南）

低成本内网穿透实战&#xff1a;NAT主机与Frpc的高效组合方案 引言&#xff1a;为什么选择NAT主机Frpc方案&#xff1f; 对于需要远程访问家庭NAS、搭建私有云盘或部署开发测试环境的用户来说&#xff0c;内网穿透是刚需。传统方案要么成本高昂&#xff08;独立IP服务器&#x…...

编程新知 2026/3/31 20:42:12

LC_numStream：嵌入式轻量级数字流解析库

1. LC_numStream 库概述&#xff1a;面向嵌入式通信的轻量级数字流解析工具LC_numStream 是一个专为资源受限嵌入式系统设计的纯 C 语言文本数字流解析库。其核心定位并非通用字符串处理&#xff0c;而是解决嵌入式设备在串口、UART、I2C、SPI 或自定义协议通信中高频出现的一类…...

编程新知 2026/3/31 20:09:39

继电器触点粘接？手把手教你用NTC热敏电阻搞定大功率负载保护

大功率负载下继电器触点粘接的工程解决方案&#xff1a;NTC热敏电阻实战指南 当你在深夜调试一块电源板时&#xff0c;突然闻到焦糊味——继电器又粘接了。这不是个例&#xff0c;据统计&#xff0c;工业控制系统中约23%的继电器故障源于触点粘接&#xff0c;而大电流场景下这一…...

编程新知 2026/3/31 20:05:35

MCP Server避坑指南：用Java写一个能连数据库、读文件的AI工具集

MCP Server避坑指南&#xff1a;用Java构建企业级AI工具链 在数字化转型浪潮中&#xff0c;企业积累的海量数据正成为AI应用的"金矿"。但如何让大语言模型安全访问这些分布在数据库、文件系统的"数据孤岛"&#xff1f;MCP协议为这个问题提供了优雅的解决方…...

编程新知 2026/3/31 19:39:17

React-Grid-Layout外部拖拽：从零构建可视化编辑体验

React-Grid-Layout外部拖拽&#xff1a;从零构建可视化编辑体验 【免费下载链接】react-grid-layout A draggable and resizable grid layout with responsive breakpoints, for React. 项目地址: https://gitcode.com/gh_mirrors/re/react-grid-layout 在构建现代Web应…...

编程新知 2026/3/31 18:46:17

Pencil原型工具全攻略：从环境搭建到高级配置

Pencil原型工具全攻略&#xff1a;从环境搭建到高级配置 【免费下载链接】pencil DEPRECATED: Multiplatform GUI Prototyping/Wireframing 项目地址: https://gitcode.com/gh_mirrors/pen/pencil Pencil原型工具&#xff1a;开源价值定位与核心特性解析 核心价值&…...

编程新知 2026/3/31 17:11:03

Hunyuan-MT 7B一键部署教程：基于Git实现快速环境搭建

Hunyuan-MT 7B一键部署教程&#xff1a;基于Git实现快速环境搭建 想试试那个在国际翻译比赛里拿了30个第一的Hunyuan-MT-7B模型吗&#xff1f;你可能在网上看到过它的介绍&#xff0c;支持几十种语言&#xff0c;翻译效果据说很惊艳。但一看到“本地部署”、“环境配置”这些词…...

编程新知 2026/3/31 16:24:14

别再为UI动画发愁了！用Spine+Unity 2021制作丝滑2D动画的保姆级流程

SpineUnity 2021&#xff1a;打造专业级2D UI动画的完整实战指南 在独立游戏开发领域&#xff0c;UI动画的质量往往决定着玩家的第一印象。那些流畅的按钮反馈、生动的界面过渡&#xff0c;不仅提升了产品质感&#xff0c;更直接影响着用户的留存率。然而对于资源有限的中小团队…...

编程新知 2026/3/31 16:03:44

一站式屏幕神器eSearch：如何5分钟打造你的智能工作流？

一站式屏幕神器eSearch&#xff1a;如何5分钟打造你的智能工作流&#xff1f; 【免费下载链接】eSearch 截屏 离线OCR 搜索翻译 以图搜图 贴图 录屏 万向滚动截屏 屏幕翻译 Screenshot Offline OCR Search Translate Search for picture Paste the picture on the screen Scree…...

编程新知 2026/3/31 15:49:30