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

js版计算比亚迪行驶里程连续12个月计算不超3万公里改进版带echar

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8" />
    <title>连续12个月不超3万公里计算LIGUANGHUA</title>
    <style>
        .clocks {
            height: 500px;
            margin: 25px auto;
            position: relative;
            width: 500px;
        }
    </style>
</head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
    function myFunction(){
        var search1=document.getElementById("month");// 获取对象
        var search2=document.getElementById("amounts");// 获取对象
        // 文档刚刚载入时的默认样式
        search1.value="202211";
        search2.value="2831,1108,3625,2888,2165,3032,1913";
        search1.style.color="gray";
        search2.style.color="gray";
        search1.οnblur=function(){// 失去焦点时
            if(this.value){// 输入框有值,应为黑色字体。
                this.style.color="";
            }else{// 无值时,为文档载入时样式
                this.value="202211";
                this.style.color="gray";
            }
        };
        search2.οnblur=function(){// 失去焦点时
            if(this.value){// 输入框有值,应为黑色字体。
                this.style.color="";
            }else{// 无值时,为文档载入时样式
                this.value="2831,1108,3625,2888,2165,3032,1913";
                this.style.color="gray";
            }
        };
        search1.οnfοcus=function(){// 获得焦点时,清空输入框,恢复字体颜色
            this.value="";
            this.style.color="";
        };
        search2.οnfοcus=function(){// 获得焦点时,清空输入框,恢复字体颜色
            this.value="";
            this.style.color="";
        };
    };
    function counts() {
        var months, amounts,array,hev;
        var arr1 = new Array(0)

        var arr2 = new Array(0)
        months = document.getElementById('month').value;
        amounts = document.getElementById('amounts').value;
        array = amounts.split(",");
        var sum=0,length,max,min,maxYear,minYear,k;
        length=array.length;
        var s='';
        var jve=0;
        var counts=30000;
        for (var i = 0; i < length; i++) {
            arr1.push(handelYear(months,i));
            k=0;
            hev=parseInt(array[i]);
            max=hev;
            console.log(months);
            minYear=handelYear(months,i);
            maxYear=handelYear(months,i);
            console.log(minYear);
            console.log(maxYear);
            min=hev;
            sum += parseInt(array[i]);
            k++;
            for (var j = i+1; j < length; j++) {

                // months.add(array[j]);
                jve=parseInt(array[j]);
                if (jve>max){
                    max=jve;
                    maxYear=handelYear(months,j);
                }
                if (jve<min){
                    min=jve;
                    minYear=handelYear(months,j);
                }
                sum+= jve;
                k++;
                if (k==12){
                    console.log("从"+handelYear(months,i)+"至"+handelYear(handelYear(months,i),11)+"的连续12个月的总里程:"+sum+"公里,平均每月行驶:"+parseInt(sum/k)+"公里,其中"+maxYear+"是单月最大行驶:"+max+"公里,"+minYear+"是单月最小行驶公里数:"+min+"公里");
                    s=s+' <p> 从'+handelYear(months,i)+'至'+handelYear(handelYear(months,i),11)+'的连续12个月的总里程:<span style="color: red ;font-size:20px;font-weight: bold">'+sum+'</span>公里,平均每月行驶:<span style="color: red ;font-size:20px;font-weight: bold">'+parseInt(sum/k)+'</span>公里,其中'+maxYear+'是单月最大行驶:<span style="color: red ;font-size:20px;font-weight: bold">'+max+'</span>公里,'+minYear+'是单月最小行驶公里数:<span style="color: red ;font-size:20px;font-weight: bold">'+min+'</span>公里'+'</p> ';
                    sum=0;
                    k=0;
                    break;
                }else if  (i==0&&k<12&&j==length-1){
                    console.log("1从"+handelYear(months,i)+"至"+handelYear(months,length-1)+"的连续"+ k+"个月的总里程:"+sum+"公里,平均每月行驶:"+parseInt(sum/k)+"公里,其中"+maxYear+"是单月最大行驶:"+max+"公里,"+minYear+"是单月最小行驶公里数:"+min+"公里,剩余的"+(12-k)+"个月內请控制在"+(counts-sum)+"公里内,平均每月可以行驶:"+(counts-sum)/(12-k));
                    //System.out.println("从"+month+"至"+handelYear(month,11)+"里程详情"+months.stream().map(String::valueOf).collect(Collectors.joining(",")));
                    s=s+'<p> 从<span style="color: red ;font-size:20px;font-weight: bold">'+handelYear(months,i)+'</span>至<span style="color: red ;font-size:20px;font-weight: bold">'+handelYear(months,length-1)+'(含当月)</span>连续<span style="color: red ;font-size:20px;font-weight: bold">'+ k+'</span>个月的总里程:<span style="color: red ;font-size:20px;font-weight: bold">'+sum+'</span>公里,平均每月行驶:<span style="color: red ;font-size:20px;font-weight: bold">'+parseInt(sum/k)+'</span>公里,其中'+maxYear+'是单月最大行驶:<span style="color: red ;font-size:20px;font-weight: bold">'+max+'</span>公里,'+minYear+'是单月最小行驶公里数:<span style="color: red ;font-size:20px;font-weight: bold">'+min+'</span>公里'+
                        ',剩余的<span style="color: red ;font-size:20px;font-weight: bold">'+(12-k)+'</span>个月內请控制在<span style="color: red ;font-size:20px;font-weight: bold">'+(counts-sum)+'</span>公里内,平均每月还可以行驶:<span style="color: red ;font-size:20px;font-weight: bold">'+(counts-sum)/(12-k)+'</span>公里</p> ';
                    sum=0;
                    k=0;
                    break;
                }
            }
        }
        document.getElementById('jieguo').innerHTML=s;
        var myChart = echarts.init(document.getElementById('container'));
        var hour = arr1;
        var usercount = array;

        var option = {
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line','bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            tooltip: {
                show: true
            },
            legend: {
                data:['每月公里数']
            },
            xAxis : [
                {
                    type : 'category',
                    data : hour
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"百分比每度电占比",
                    "type":"line",
                    "data":usercount,
                    itemStyle: {
                        normal: {
                            label : {
                                show: true,
                                position:"top"
                            }
                        }
                    }
                }
            ]
        };


        // 为echarts对象加载数据
        myChart.setOption(option);
    }
    function handelYear(month,length){
        var year=parseInt(month.substring(0,4));
        var mo=month.substring(4,6);
        var mon=0;
        if (mo.startsWith("0")){
            mon=parseInt(month.substring(5,6));
        }else{
            mon=parseInt(month.substring(4,6));
        }
        mon=mon+length;
        var j=parseInt(mon/12);
        if (mon>12){
            year=year+j;
            mon=mon-12*j;
        }
        var yearmon=null;
        if (mon>9){
            yearmon=year.toString()+mon.toString();
        }else{
            if (mon==0){
                mon=mon+1;
            }
            yearmon=year.toString()+"0"+mon.toString();
        }
        return yearmon;
    }


</script>
<!--  <h1><a href="http://10.0.2.52:8081/test/index1" target="_parent">测试手动调用接口</a>></h1>-->

<body style="height: 100%; margin: 0" οnlοad="myFunction()">
<p>请输入周期开始年月份(如:202201):<input type="text" name="month" id="month" οnmοuseοver="this.style.borderColor='#FF6600'" οnmοuseοut="this.style.borderColor=''" onFocus="if (value =='202211'){value =''}" onBlur="if (value ==''){value='202211'}"></p>
<p>请输入上面周期开始的每月公里数(车机系统获取),逗号隔开(如:2831,1108,3625):<input type="text" name="amounts" id="amounts" style="width:550px;" οnmοuseοver="this.style.borderColor='#FF6600'" οnmοuseοut="this.style.borderColor=''" onFocus="if (value =='2831,1108,3625,2888,2165,3032,1913'){value =''}" onBlur="if (value ==''){value='2831,1108,3625,2888,2165,3032,1913'}" ></p>
<p><input type="button" value="开始计算" οnclick="counts()" οnmοuseοver="this.style.borderColor='#FF6600'" οnmοuseοut="this.style.borderColor=''" ></p>
<div id="jieguo">
</div>
<div id="container" style="height: 80%"></div>
</body>
</html>

将以上内容复制到文本框,改名为1.html,用浏览器打开即可

还有项目款,这个需要数据支撑了,感兴趣的可以私我

 

相关文章:

js版计算比亚迪行驶里程连续12个月计算不超3万公里改进版带echar

<!DOCTYPE html> <html lang"zh-CN" style"height: 100%"> <head> <meta charset"utf-8" /> <title>连续12个月不超3万公里计算LIGUANGHUA</title> <style> .clocks { …...

一文详解Spring Bean循环依赖

一、背景 有好几次线上发布老应用时&#xff0c;遭遇代码启动报错&#xff0c;具体错误如下&#xff1a; Caused by: org.springframework.beans.factory.BeanCurrentlyInCreationException: Error creating bean with name xxxManageFacadeImpl: Bean with name xxxManageFa…...

基于PHP+ vue2 + element +mysql自主研发的医院不良事件上报系统

医院不良事件上报管理系统源码 不良事件上报是为了响应卫生部下发的等级医院评审细则中第三章第9条规定&#xff1a;医院要有主动报告医疗安全&#xff08;不良&#xff09;事件的制度与工作流程。由医疗机构医院或医疗机构报告医疗安全不良事件信息&#xff0c;利用报告进行研…...

微服务远程调用openFeign简单回顾(内附源码示例)

目录 一. OpenFeign简介 二. OpenFeign原理 演示使用 provider模块 消费者模块 配置全局feign日志 示例源代码: 一. OpenFeign简介 OpenFeign是SpringCloud服务调用中间件&#xff0c;可以帮助代理服务API接口。并且可以解析SpringMVC的RequestMapping注解下的接口&#x…...

【云计算小知识】云环境是什么意思?有什么优点?

随着云计算的快速发展&#xff0c;了解云计算相关知识也是运维人员必备的。那你知道云环境是什么意思&#xff1f;有什么优点&#xff1f;云环境安全威胁有哪些&#xff1f;如何保证云环境的运维安全&#xff1f;这里我们就来简单聊聊。 云环境是什么意思&#xff1f; 云环境是…...

【搜索引擎Solr】Apache Solr 神经搜索

Sease[1] 与 Alessandro Benedetti&#xff08;Apache Lucene/Solr PMC 成员和提交者&#xff09;和 Elia Porciani&#xff08;Sease 研发软件工程师&#xff09;共同为开源社区贡献了 Apache Solr 中神经搜索的第一个里程碑。 它依赖于 Apache Lucene 实现 [2] 进行 K-最近邻…...

PostgreSQL 设置时区,时间/日期函数汇总

文章目录 前言查看时区修改时区时间/日期操作符和函数时间/日期操作符日期/时间函数&#xff1a;extract&#xff0c;date_part函数支持的field 数据类型格式化函数用于日期/时间格式化的模式&#xff1a; 扩展 前言 本文基于 PostgreSQL 12.6 版本&#xff0c;不同版本的函数…...

性能测试Ⅱ(压力测试与负载测试详解)

协议 性能理论&#xff1a;并发编程 &#xff0c;系统调度&#xff0c;调度算法 监控 压力测试与负载测试的区别是什么&#xff1f; 负载测试 在被测系统上持续不断的增加压力&#xff0c;直到性能指标(响应时间等)超过预定指标或者某种资源(CPU&内存)使用已达到饱和状…...

【Python入门系列】第十八篇:Python自然语言处理和文本挖掘

文章目录 前言一、Python常用的NLP和文本挖掘库二、Python自然语言处理和文本挖掘1、文本预处理和词频统计2、文本分类3、命名实体识别4、情感分析5、词性标注6、文本相似度计算 总结 前言 Python自然语言处理&#xff08;Natural Language Processing&#xff0c;简称NLP&…...

【GD32F103】自定义程序库08-DMA+ADC

DMA 自定义函数库说明: 将DMA先关的变量方式在一个机构体中封装起来,主要参数有 dma外设,时钟,通道,外设寄存器地址,数据传输宽度,数据方向,外设是能dma传输使能回调函数,扫描模式中断编号dma中断使能传输完成标志数据存储空间使用一个枚举类型指明每个DMA绑定到那个…...

集成了Eureka的应用启动失败,端口号变为8080

问题 报错&#xff1a;集成了Eureka的应用启动失败&#xff0c;端口号变为8080。 原来运行的项目&#xff0c;突然报错&#xff0c;端口号变为8080&#xff1a; Tomcat initialized with port(s): 8080 (http)并且&#xff0c;还有如下的错误提示&#xff1a; RedirectingE…...

CMU 15-445 -- Timestamp Ordering Concurrency Control - 15

CMU 15-445 -- Timestamp Ordering Concurrency Control - 15 引言Basic T/OBasic T/O ReadsBasic T/O WritesBasic T/O - Example #1Basic T/O - Example #2 Basic T/O SummaryRecoverable Schedules Optimistic Concurrency Control (OCC)OCC - ExampleSERIAL VALIDATIONOCC …...

MURF2080CT/MURF2080CTR-ASEMI快恢复对管

编辑&#xff1a;ll MURF2080CT/MURF2080CTR-ASEMI快恢复对管 型号&#xff1a;MURF2080CT/MURF2080CTR 品牌&#xff1a;ASEMI 芯片个数&#xff1a;2 芯片尺寸&#xff1a;102MIL*2 封装&#xff1a;TO-220F 恢复时间&#xff1a;50ns 工作温度&#xff1a;-50C~150C…...

去除 idea warn Raw use of parameterized class ‘Map‘

去除 idea warn Raw use of parameterized class ‘Map’ 文档&#xff1a;Raw use of parameterized class ‘Map’… 链接&#xff1a;http://note.youdao.com/noteshare?id99bf4003db8cc5ae9813ee11e58c4d13&sub5856371AEFA740AF8FA4D8935B4F6912 添加链接描述 public…...

使用BERT分类的可解释性探索

最近尝试了使用BERT将告警信息当成一个文本去做分类&#xff0c;从分类的准召率上来看&#xff0c;还是取得了不错的效果&#xff08;非结构化数据强标签训练&#xff0c;BERT确实是一把大杀器&#xff09;。但准召率并不是唯一追求的目标&#xff0c;在安全场景下&#xff0c;…...

web APIs-练习二

轮播图点击切换&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"…...

rpc通信原理浅析

rpc通信原理浅析 rpc(remote procedure call)&#xff0c;即远程过程调用&#xff0c;广泛用于分布式或是异构环境下的通信&#xff0c;数据格式一般采取protobuf。 protobuf&#xff08;protocol buffer&#xff09;是google 的一种数据交换的格式&#xff0c;它独立于平台语…...

【机器学习】分类算法 - KNN算法(K-近邻算法)KNeighborsClassifier

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;零基础快速入门人工智能《机器学习入门到精通》 K-近邻算法 1、什么是K-近邻算法&#xff1f;2、K-近邻算法API3、…...

Spring Security 6.x 系列【64】扩展篇之多线程支持

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.1.0 本系列Spring Security 版本 6.1.0 本系列Spring Authorization Server 版本 1.1.0 源码地址:https://gitee.com/pearl-organization/study-spring-security-demo 文章目录 1. 问题演示2. 解决方案:…...

Elasticsearch 简单搜索查询案例

1.MySql表结构/数据 SET FOREIGN_KEY_CHECKS0;-- ---------------------------- -- Table structure for user_lables -- ---------------------------- DROP TABLE IF EXISTS user_lables; CREATE TABLE user_lables (id varchar(255) DEFAULT NULL COMMENT 用户唯一标识,age…...

【RabbitMQ(day1)】RabbitMQ的概述和安装

入门RabbitMQ 一、RabbitMQ的概述二、RabbitMQ的安装三、RabbitMQ管理命令行四、RabbitMQ的GUI界面 一、RabbitMQ的概述 MQ&#xff08;Message Queue&#xff09;翻译为消息队列&#xff0c;通过典型的【生产者】和【消费者】模型&#xff0c;生产者不断向消息队列中生产消息&…...

Too many files with unapproved license: 2 See RAT report

解决方案 mvn -Prelease-nacos -Dmaven.test.skiptrue -Dpmd.skiptrue -Dcheckstyle.skiptrue -Drat.numUnapprovedLicenses100 clean install 或者 mvn -Prelease-nacos -Dmaven.test.skiptrue -Drat.numUnapprovedLicenses100 clean install...

Windows11的VTK安装:VS201x+Qt5/Qt6 +VTK7.1/VTK9.2.6

需要提前安装好VS2017和VS2019和Qt VS开发控件以及Qt VS-addin。 注意Qt6.2.4只能跟VTK9.2.6联合编译&#xff08;目前VTK9和Qt6的相互支持版本&#xff09;。 首先下载VTK&#xff0c;需要下载源码和data&#xff1a; Download | VTKhttps://vtk.org/download/ 然后这两个文…...

大数据时代个人信息安全保护小贴士

个人信息安全保护小贴士 1. 朋友圈“五不晒”2. 手机使用“四要”、“六不要”3. 电脑使用“七注意”4. 日常上网“七注意”5. 日常生活“五注意” 互联网就像公路&#xff0c;用户使用它&#xff0c;就会留下脚印。 每个人都在无时不刻的产生数据&#xff0c;在消费数据的同时…...

windows 修改 RDP 远程桌面端口号

打开 PowerShell &#xff0c; 执行regedit 依次展开 PortNumber HKEY_LOCAL_MACHINE \SYSTEM \CurrentControlSet \Control \Terminal Server \WinStations \RDP-Tcp 右边找到 PortNumber &#xff0c;对应修改自己的端口号 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Co…...

面试题-TS(四):如何在 TypeScript 中使用类和继承?

面试题-TS(4)&#xff1a;如何在 TypeScript 中使用类和继承&#xff1f; 在TypeScript中&#xff0c;类是一种重要的概念&#xff0c;它允许我们使用面向对象的编程风格来组织和管理代码。类提供了一种模板&#xff0c;用于创建具有相同属性和行为的对象。通过继承&#xff0…...

React之JSX的介绍与使用步骤,注意事项,条件渲染,列表渲染以及css样式处理

React之JSX的介绍与使用 一、JSX的介绍二、JSX使用步骤三、JSX注意事项四、JSX中使用JavaScript表达式五、条件渲染六、列表渲染七、CSS样式处理八、JSX 总结 一、JSX的介绍 简介 JSX是JavaScript XML的简写&#xff0c;表示了在Javascript代码中写XML(HTML)格式的代码 优势 声…...

sql进阶:求满足某列数值相加无限接近90%的行(90分位)

sql 一、案例分析二、思路三、代码实现一、案例分析 表中有某个id列和数值列,求数值列占比为90%的id,如有个用户表,存储id和消费金额order_cnt,求一条sql查出消费占比无限接近90%的所有客户,如表中总消费为10000,占比最高的是4000、3000、2800,对应A、B、C用户,查出A、B、C用户…...

设计模式大白话——观察者模式

文章目录 一、概述二、示例三、模式定义四、其他 一、概述 ​ 与其叫他观察者模式&#xff0c;我更愿意叫他叫 订阅-发布模式 &#xff0c;这种模式在我们生活中非常常见&#xff0c;比如&#xff1a;追番了某个电视剧&#xff0c;当电视剧有更新的时候会第一时间通知你。当你…...

机器学习小记-序

机器学习是人工智能的一个重要分支&#xff0c;根据学习任务的不同&#xff0c;可以将机器学习分为以下几类&#xff1a; 监督学习&#xff08;Supervised Learning&#xff09;&#xff1a; 应用场景&#xff1a;监督学习适用于已标记数据集的任务&#xff0c;其中每个样本都有…...