在为水质担忧吗?——水质检测大屏展示系统启动(inscode直观运行)

news2024/9/24 13:21:18

前言

在这里插入图片描述
「作者主页」:雪碧有白泡泡
「个人网站」:雪碧的个人网站
「推荐专栏」

java一站式服务
React从入门到精通
前端炫酷代码分享
★ 从0到英雄,vue成神之路★
uniapp-从构建到提升
从0到英雄,vue成神之路
解决算法,一个专栏就够了
架构咱们从0说
★ 数据流通的精妙之道★
★后端进阶之路★

请添加图片描述

文章目录

  • 前言
  • 引言
  • 成品展示效果
  • 项目代码
    • 结构
    • 核心代码
  • 排放核废水的严重危害
  • 安全建议

引言

经过长时间的争论,日本核废水排海的事情还是开始启动了,日本无视周边国家和联合国卫生组织的阻拦,坚决决定将核废水排入海洋,就在8月24日,日本正式开始实施核废水排海计划。

实际上,不仅以中国为首的邻近国家强烈反对排放核废水,日本国内民众也不满意。因为海域之间是相通的,虽然日本没有将核废水排放地点设在本国海域,但国内也必然会受到巨大影响。
在这里插入图片描述

成品展示效果

在这里插入图片描述

在这里插入图片描述
这里可以直接 看查源码内容, 刷新,最后一个是 放大跳转网页
在这里插入图片描述

项目代码

结构

在这里插入图片描述

核心代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水质监测</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>

<div class="content-body">
    <div class="header">
        <div class="header-left">
            <span>水质情况实时监测预警系统</span>
        </div>
        <div class="header-time">
            <span id="time"></span>
        </div>
    </div>

    <div class="content">
        <div class="content-con">
            <div class="left-body">
                <div class="left-top public-bg">
                    <div class="public-title">重点水质量检测区</div>
                    <div class="top-body">
                        <div class="top-left">
                            <div class="top-left-title">
                                <h6>注水量</h6>
                                <span><b>1756</b>m3/h</span>
                                <img src="image/pictre.png" alt="">
                            </div>

                        </div>
                        <div class="top-right">
                            <div class="top-left-title">
                                <h6>泄水量</h6>
                                <span><b>3520</b>m3/h</span>
                                <img src="image/pictre.png" alt="">
                            </div>
                        </div>

                    </div>

                </div>
                <div class="left-con public-bg">
                    <div class="public-title">水质量分布情况</div>
                    <div class="title-nav" id="leida"></div>
                </div>
                <div class="left-bottom public-bg">
                    <div class="public-title">企业污染排放情况</div>
                    <div class="title-nav" id="wuran"></div>
                </div>
            </div>

            <div class="center-body">
                <div class="map" id="map"></div>
            </div>

            <div class="right-body">
                <div class="right-top public-bg">
                    <div class="public-title">水质污染TOP5</div>
                    <div class="title-nav">
                        <div class="top5-ul">
                            <ul>
                                <li>
                                    <span>1</span>
                                    <span>重度</span>
                                    <span>日本</span>
                                    <span>福岛</span>
                                    <span>核污染</span>
                                    <span>999公里</span>
                                </li>
                                <li>
                                    <span>2</span>
                                    <span>严重</span>
                                    <span>上海市</span>
                                    <span>闵行区</span>
                                    <span>重度污染</span>
                                    <span>10公里</span>
                                </li>
                                <li>
                                    <span>3</span>
                                    <span>严重</span>
                                    <span>北京市</span>
                                    <span>朝阳区</span>
                                    <span>重度污染</span>
                                    <span>9.3公里</span>
                                </li>
                                <li>
                                    <span>4</span>
                                    <span>中度</span>
                                    <span>广东省</span>
                                    <span>广州市</span>
                                    <span>中度污染</span>
                                    <span>8.6公里</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="right-con public-bg">
                    <div class="public-title">水质类别占比</div>
                    <div class="title-nav" id="huaxing"></div>
                </div>
                <div class="right-bottom public-bg">
                    <div class="public-title">主要地区水流量</div>
                    <div class="title-nav" id="zhexian"></div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/index.js"></script>

<script>
    //顶部时间
    function getTime(){
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var nowTime;

        nowTime = myYear+'年'+fillZero(myMonth)+'月'+fillZero(myToday)+'日'+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };
    function fillZero(str){
        var realNum;
        if(str<10){
            realNum	= '0'+str;
        }else{
            realNum	= str;
        }
        return realNum;
    }
    setInterval(getTime,1000);
</script>
  • head 标签内引入了一个css样式表和一个js文件。样式表用于控制页面的布局和样式,js文件用于处理页面中的一些交互和数据动态展示。
  • body标签内定义了页面的整体结构。包括一个顶部导航栏,一个内容区域,内容区域中分为左侧、中间和右侧三个部分。
  • 左侧部分包括重点水质量检测区的信息展示,包括注水量、泄水量和水质分布情况的雷达图,以及企业污染排放情况的柱状图。
  • 中间部分是一个地图展示,用于显示地区的水质情况。
  • 右侧部分包括水质污染TOP5的排名信息,水质类别占比的饼图和主要地区水流量的折线图。
  • body标签前的script标签内,引入了一些外部的js文件。包括echarts.js用于生成图表,china.js用于显示中国地图的地理信息。另外还有一个自定义的index.js文件,用于处理页面中一些特定的交互和数据展示。

排放核废水的严重危害

  1. 海洋污染:将大量含放射性物质的核废水排入海洋可能对海洋生态环境造成污染。放射性物质如氚、锶、铯等可能进入海洋食物链,对海洋生物产生负面影响,并可能传递给人类,对人体健康产生潜在风险。

  2. 影响渔业和水产业:放射性物质的排放可能对周边海域的渔业和水产业造成重大影响。漁業産品的销售可能受到限制,损害渔业和水产品出口,造成经济损失。

  3. 影响生态系统平衡:放射性物质排放可能破坏海洋生态系统的平衡,对海洋生物多样性产生不利影响。某些物种可能受到较大影响,导致生态系统的变化和失衡。
    在这里插入图片描述

安全建议

  1. 保持食品安全意识:选择购买来自可靠来源的食品,特别是海鲜和水产产品。遵循健康膳食指南,多吃均衡的饮食,多摄取富含蛋白质、维生素和矿物质的食物。

  2. 合理使用自来水:虽然核废水排放并未直接影响自来水质量,但若担心水质,可以选择使用滤水器、矿泉水或瓶装水等代替自来水饮用。

  3. 个人防护措施:根据实际情况,佩戴口罩、手套等个人防护装备,以减少与海产品接触时的风险。遵循正确的食品加工和烹饪方法,彻底清洗食材。
    在这里插入图片描述

这下好了 海洋人类只探索了5%,剩下的95%现在要上来探索人类了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/930756.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

哪款运动耳机好用、舒服的运动耳机推荐

如今&#xff0c;运动耳机已成为备受热捧的运动潮流单品&#xff0c;消费者对耳机的需求非常多元化。一款出色的运动耳机不仅要满足基本的运动需求&#xff0c;还需要具备丰富的功能&#xff0c;这直接决定了耳机的附加价值。接下来&#xff0c;我将向大家推荐5款佩戴舒适、牢固…

Arduino驱动四位0.36英寸共阴数码管模块

目录 一、简介二、参数性能三、电路原理图四、使用方法 一、简介 点击图片购买 四位0.36英寸共阴数码管模块由一个12引脚的0.36英寸红色共阴数码管和一个TM1650驱动芯片构成&#xff0c;大大减少了驱动引脚与连线&#xff0c;只需要四根引线IIC即可控制数码管的显示。TM11650是…

C语言之三子棋游戏实现篇

目录 主函数test.c 菜单函数 选择实现 游戏函数 &#xff08;函数调用&#xff09; 打印棋盘数据 打印展示棋盘 玩家下棋 电脑下棋 判断输赢 循环 test.c总代码 头文件&函数声明game.h 头文件的包含 游戏符号声明 游戏函数声明 game.h总代码 游戏函数ga…

贝叶斯公式中的动词 命名技巧

一项血液化验有95%的把我诊断某种疾病&#xff0c;但是&#xff0c;这项化验用于健康人也会有1%的“伪阳性”结果(即如果一个健康人接受这项化验&#xff0c;则化验结果乌镇此人患有该疾病的概率是0.01)。如果该疾病的患者事实上只占总人口的0.5%&#xff0c;若某人化验结果为阳…

xfs ext4 结合lvm 扩容、缩容 —— 筑梦之路

ext4 文件系统扩容、缩容操作 扩容系统根分区 根文件系统在 /dev/VolGroup/lv_root 逻辑卷上&#xff0c;文件系统类型为ext4&#xff0c;大小为10G&#xff0c;现在要将其扩容成20G。 给空闲空间分区# 调整分区类型为LVM&#xff0c;也就是8e类型 fdisk /dev/sdb# 选定分区后使…

JVM 之字节码(.class)文件

本文中的内容参考B站尚硅谷宋红康JVM全套教程 你将获得&#xff1a; 1、掌握字节码文件的结构 2、掌握Java源代码如何在JVM中执行 3、掌握一些虚拟机指令 4、回答一些面试题 课程介绍 通过几个面试题初始字节码文件为什么学习class字节码文件什么是class字节码文件分析c…

【Spring MVC】

目录 &#x1f36e;1 什么是 MVC &#xff1f; &#x1f381;2 Spring MVC 的连接 &#x1f358;2.1 RequestMapping 实现 POST 和 GET 请求 &#x1f963;2.2 GetMapping 只支持 GET 请求 &#x1fad6;2.3 PostMapping 只支持 POST 请求 &#x1f36c;3 Spring MVC 获取参数的…

开始MySQL之路——外键关联和多表联合查询详细概述

多表查询和外键关联 实际开发中&#xff0c;一个项目通常需要很多张表才能完成。例如&#xff0c;一个商城项目就需要分类表&#xff0c;商品表&#xff0c;订单表等多张表。且这些表的数据之间存在一定的关系&#xff0c;接下来我们将在单表的基础上&#xff0c;一起学习多表…

第四方支付平台和聚合支付有什么区别?

第四方支付平台和聚合支付有什么区别&#xff1f; 聚合支付和第四方支付平台是移动支付领域的两种常见支付方式。它们在实际应用中有许多相似之处&#xff0c;给人们的生活带来了便利。然而&#xff0c;这两种支付方式也有本质的区别。我将从不同的角度对它们进行比较和分析。 …

找风景类视频素材就上这5个网站

免费高清的风景视频素材&#xff0c;我推荐你去这几个网站下载&#xff0c;赶紧收藏起来~ 菜鸟图库 https://www.sucai999.com/video.html?vNTYxMjky 菜鸟图库网素材非常丰富&#xff0c;网站主要还是以设计类素材为主&#xff0c;高清视频素材也很多&#xff0c;像风景、植…

回归预测 | MATLAB实现TSO-ELM金枪鱼群优化算法优化极限学习机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现TSO-ELM金枪鱼群优化算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现TSO-ELM金枪鱼群优化算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效…

java八股文面试[JVM]——垃圾回收器

jvm结构总结 常见的垃圾回收器有哪些&#xff1f; CMS&#xff08;Concurrent Mark Sweep&#xff09; 整堆收集器&#xff1a; G1 由于整个过程中耗时最长的并发标记和并发清除过程中&#xff0c;收集器线程都可以与用户线程一起工作&#xff0c;所以总体上来说&#xff0c;…

【Unity】拖拽放置模型时 为什么出现有时候有紧贴地面和有时候随机再空中的情况

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 &#x1f636;‍&#x1f32b;️收录于专栏&#xff1a;unity细节和bug &#x1f636;‍&#x1f32b;️优质专栏 ⭐【…

骨传导耳机对大脑有影响吗?骨传导耳机有什么副作用

先上结论&#xff0c;骨传导耳机对大脑没有影响。骨传导耳机使用的是骨传导技术&#xff0c;声音是通过头骨骨头和颌骨给内耳传递的&#xff0c;而不是通过传统的空气传播。 简单来说&#xff0c;骨传导技术使用人类骨骼结构和声学原理来传递声音&#xff0c;这种现象我们也很常…

深入剖析Kubernetes之Kubernetes的本质

文章目录 Kubernetes的本质 Kubernetes的本质 Kubernetes 项目在 Borg 体系的指导下&#xff0c;体现出了一种独有的“先进性”与“完备性”&#xff0c;而这些特质才是一个基础设施领域开源项目赖以生存的核心价值。 Kubernetes 项目的架构&#xff0c;跟它的原型项目 Borg 非…

Python中的API构建指南:在Flask中进行API开发

原文&#xff1a;Python中的API构建指南&#xff1a;在Flask中进行API开发 - 知乎 如何实现从一个软件与另一个软件的通信交互&#xff1f;就像我们的APP&#xff0c;如何实现微信支付、苹果支付&#xff1f; 其实&#xff0c;我们只需要一个API。 API&#xff08;应用程序编…

【二叉树入门指南】链式结构的实现

【二叉树入门指南】链式结构的实现 一、前置说明二、二叉树的遍历2.1前序遍历2.2中序遍历2.3 后序遍历 三、以前序遍历为例&#xff0c;递归图解四、层序遍历五、节点个数以及高度等5.1 二叉树节点个数5.2二叉树叶子节点个数5.3 二叉树第k层节点个数5.4 二叉树查找值为x的节点5…

黑客资料(基本概念,漏登平台,kali安装)

黑客资料 1.基本概念 1.1安全三要素 1.2 渗透测试 在拥有授权的前提下&#xff0c;模拟黑客的攻击手段进行测试&#xff0c;也被称为道德黑客 1.3 渗透测试的意义 1.4 渗透测试的流程 1.5 确定目标 这个确定目标&#xff0c;主要对范围进行测试&#xff0c;对那些设备&#…

【线程池】线程池拒绝策略还有这个大坑(二)

目录 踩坑代码 后果展示 原因 小结 概要 上文我们聊了聊阻塞队列&#xff0c;有需要的小伙伴可以去瞅瞅【线程池】换个姿势来看线程池中不一样的阻塞队列&#xff08;一&#xff09;_走了一些弯路的博客-CSDN博客 这波我们一起来研究下线程池的拒绝策略。 你肯定要说了&a…

odejs+vue+elementui个人图片电子相册网站_84ds3

系统阐述的是使用智能化电子相册系统的设计与实现&#xff0c;对于nodejs、B/S结构、MySQL进行了较为深入的学习与应用。主要针对系统的设计&#xff0c;描述&#xff0c;实现和分析与测试方面来表明开发的过程。开发中使用了vue.js框架和MySQL数据库技术搭建系统的整体架构。利…