diff --git a/src/http/guojian/index.ts b/src/http/guojian/index.ts
new file mode 100644
index 0000000..f3e611c
--- /dev/null
+++ b/src/http/guojian/index.ts
@@ -0,0 +1,6 @@
+import {get,post} from "@/utils/http"
+
+//国检24小时趋势
+export function getGuoJian24Trend(){
+    return get('/guoJian/getGuoJian24Trend')
+}
\ No newline at end of file
diff --git a/src/views/Hazardous/components/Border.vue b/src/views/Hazardous/components/Border.vue
index 7fb8f51..e1e0cbb 100644
--- a/src/views/Hazardous/components/Border.vue
+++ b/src/views/Hazardous/components/Border.vue
@@ -5,7 +5,7 @@
     <div class="top">
       {{ prop.title }}
     </div>
-    <div class="content">
+    <div class="border-content">
       <slot></slot>
     </div>
   </div>
@@ -25,6 +25,10 @@ const prop = defineProps({
   width: 100%;
   height: 100%;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .border-w {
@@ -46,13 +50,11 @@ const prop = defineProps({
 
 
 .top {
-  width: 55%;
+  width: 100%;
   height: 10%;
   font-size: 20px;
   font-weight: 700;
-  position: absolute;
-  top: 0;
-  left: 22.5%;
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -62,9 +64,9 @@ const prop = defineProps({
   content: '';
   border-width: 0px;
   position: absolute;
-  left: 22.5%;
+  left: 37.5%;
   bottom: -3px;
-  width: 55%;
+  width: 25%;
   height: 6px;
   background: -webkit-linear-gradient(0deg, rgba(25, 126, 207, 1) 0%, rgba(25, 126, 207, 1) 0%, rgba(50, 214, 249, 1) 100%, rgba(50, 214, 249, 1) 100%);
   background: -moz-linear-gradient(90deg, rgba(25, 126, 207, 1) 0%, rgba(25, 126, 207, 1) 0%, rgba(50, 214, 249, 1) 100%, rgba(50, 214, 249, 1) 100%);
@@ -75,4 +77,11 @@ const prop = defineProps({
   -webkit-box-shadow: 0px -2px 20px rgba(45, 196, 240, 1);
   box-shadow: 0px -2px 20px rgba(45, 196, 240, 1);
 }
+
+.border-content {
+  width: 100%;
+  height: 90%;
+  box-sizing: border-box;
+  padding: 5px;
+}
 </style>
diff --git a/src/views/Hazardous/components/Card.vue b/src/views/Hazardous/components/Card.vue
index 7d22857..d040a78 100644
--- a/src/views/Hazardous/components/Card.vue
+++ b/src/views/Hazardous/components/Card.vue
@@ -9,7 +9,7 @@
                     <img :src="prop.config.image">
                 </div>
                 <div class="text">
-                    20%RH
+                    {{ prop.config.value }}{{ prop.config.unit }}
                 </div>
             </div>
             <div v-if="prop.config.type == 2" class="type2">
@@ -17,13 +17,14 @@
                     <img :src="prop.config.image">
                 </div>
                 <div class="text2">
-                    <div class="text2-l"></div>
-                    <div class="text2-r">开启</div>
+                    <div class="text2-l " :class="[prop.config.value == 0?'grey':'green']"></div>
+                    <div class="text2-r">{{ prop.config.value == 0?'关闭':'开启' }}</div>
                 </div>
             </div>
             <div v-if="prop.config.type == 3" class="type3">
                 <div class="img3">
-                    <img :src="prop.config.image">
+                    <img :src="prop.config.image" v-if="prop.config.value<1">
+                    <img :src="prop.config.image1" v-else>
                 </div>
             </div>
         </div>
@@ -142,6 +143,13 @@ const porptitle = computed(() => {
     width: 24px;
     height: 24px;
     border-radius: 50%;
+}
+
+.text2-l.grey {    
+    background-color: #A7A6BD;
+}
+
+.text2-l.green {    
     background-color: #53FFC3;
 }
 .text2-r {
diff --git a/src/views/Hazardous/components/LineChart.vue b/src/views/Hazardous/components/LineChart.vue
new file mode 100644
index 0000000..68648d4
--- /dev/null
+++ b/src/views/Hazardous/components/LineChart.vue
@@ -0,0 +1,133 @@
+<template>
+    <div class="line-chart-container">
+        <div class="chart" ref="chart"></div>
+        <div class="math-box">
+            <div class="math-content">
+                <div style="height: 25%;"> </div>
+                <div class="key">最大值</div>
+                <div class="key">最小值</div>
+                <div class="key">平均值</div>
+            </div>
+            <div class="math-content" v-for="(item, index) in calc.math">
+                <div :style="{ color: color[index] }">{{ item.key }}</div>
+                <div>{{ item.value.max }}</div>
+                <div>{{ item.value.min }}</div>
+                <div>{{ item.value.avg }}</div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted, onUpdated, getCurrentInstance, watch } from "vue"
+const prop = defineProps<{
+    calc: {
+        name: string,
+        math: {
+            key: string,
+            value: {
+                max: number,
+                min: number,
+                avg: number,
+                data: any[]
+            }
+        }[],
+        data: any,
+        xAxis: string[],
+    }
+}>()
+const { proxy } = getCurrentInstance() as any
+const chart = ref()
+let myChart = null
+let data = prop.calc.data
+let color = ['#4281E5', '#78F7AE', '#FF6E40']
+function init() {
+    myChart = proxy.$echarts.init(chart.value, 'dark');
+    const option = {
+        title: {
+            text: prop.calc.name,
+            top: "5%",
+            left: "5%"
+        },
+        color: color,
+        tooltip: {
+            trigger: 'axis',
+        },
+        grid: {
+            top: "15%",
+            left: "5%",
+            right: "5%",
+            bottom: "5%",
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: prop.calc.xAxis
+        },
+        yAxis: {
+            type: 'value',
+        },
+        series: data
+    };
+    myChart.setOption(option);
+}
+
+watch(() => prop.calc.data, (newVal) => {
+    data = newVal
+    myChart.setOption({
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: prop.calc.xAxis
+        },
+        series: data
+    })
+})
+
+onMounted(() => {
+    init()
+})
+
+</script>
+
+<style scoped>
+.line-chart-container {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    font-size: 16px;
+    color: #fff;
+    /* box-shadow: rgb(2, 106, 181) 0px 8px 8px; */
+}
+
+/* .line-chart-container:hover {
+    box-shadow: rgb(2, 106, 181) 0px 8px 16px;
+} */
+
+.chart {
+    height: calc(100% - 90px);
+    width: 100%;
+}
+
+.math-box {
+    height: 90px;
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+
+.math-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.key {
+    color: #ff6e40;
+}</style>
diff --git a/src/views/Hazardous/components/scrollBoard.vue b/src/views/Hazardous/components/scrollBoard.vue
new file mode 100644
index 0000000..8cb1d68
--- /dev/null
+++ b/src/views/Hazardous/components/scrollBoard.vue
@@ -0,0 +1,118 @@
+<!--
+ * @FilePath: \code\gitscreenFront\src\views\Mechanics\components\scrollBoard.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-06-13 08:33:37
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+        <div class="box-body">
+            <ZdScrollBoard ref="devList" :config="prop.config" @mouseover="dvMouseover"
+                @mouseend="dvmouseleave" :style="{
+                    width: '100%',
+                    height: '100%',
+                }" />
+            <el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click"
+                popper-class="tooltip-class" virtual-triggering :virtual-ref="triggerRef" />
+        </div>
+</template>
+
+<script setup lang='ts'>
+import { getCurrentInstance, onMounted, reactive, ref } from "vue";
+import ZdScrollBoard from "@/components/data-view/index.vue";
+import { useRouter } from "vue-router"
+import { useI18n } from 'vue-i18n'
+let { t } = useI18n();
+const prop = defineProps({
+    config: Object,
+})
+const router = useRouter()
+//弹窗文本
+let tipcontent = ref(null)
+//弹窗显示与隐藏
+let visible = ref(false)
+//存储弹窗dom
+let triggerRef = ref(null)
+/**
+ * @函数功能: 鼠标移入组件方法
+ * @param {*} value 
+ * @出口参数: 
+ * @函数备注: 
+ */
+const dvMouseover = (value) => {
+    if (value.toElement && value.toElement.innerHTML && value.toElement.className == 'ceil') {
+        triggerRef.value = value.toElement
+        tipcontent.value = value.toElement.innerText
+        visible.value = true
+    }
+
+};
+/**
+ * 点击表格事件
+ */
+const dvClick = (value) => {
+    if (value.row) {
+        let id = {
+            '精加车间': 1,
+            '机加车间': 2,
+            '大件车间': 3,
+            '精饰车间': 4,
+            '焊接车间': 5,
+        }
+
+        prop.config.rawData.forEach((res, index) => {
+
+            if (index == value.row[0] - 1) {
+                router.push({
+                    name: "Mechanicsson",
+                    params: {
+                        id: id[value.row[2]],
+                        dev: res.id
+                    },
+                });
+            }
+        });
+    }
+
+}
+/**
+ * @函数功能:  鼠标移出组件方法
+ * @出口参数: 
+ * @函数备注: 
+ */
+const dvmouseleave = () => {
+    triggerRef.value = null
+    tipcontent.value = null
+    visible.value = false
+};
+
+</script>
+
+<style scoped>
+
+.box-body {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+:deep(.dv-scroll-board .rows .ceil) {
+    overflow: auto;
+    white-space: pre-wrap;
+    text-overflow: none
+}
+
+:deep(.dv-scroll-board .rows .row-item) {
+    font-size: 16px;
+}
+</style>
+<style>
+.el-popper.tooltip-class {
+    color: #fff !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/kongtiao1.svg b/src/views/Hazardous/image/kongtiao1.svg
new file mode 100644
index 0000000..8d5ecc1
--- /dev/null
+++ b/src/views/Hazardous/image/kongtiao1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695353681154" class="icon" viewBox="0 0 1332 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6587" xmlns:xlink="http://www.w3.org/1999/xlink" width="166.5" height="128"><path d="M407.556511 774.956201a35.225282 35.225282 0 0 1 14.090113-22.191928 35.225282 35.225282 0 0 0-35.225282-60.939738 105.675846 105.675846 0 0 0-46.497372 66.22353 161.331791 161.331791 0 0 0 33.464018 126.458762 35.225282 35.225282 0 0 1 8.101814 30.998248 84.188424 84.188424 0 0 1-35.225281 42.270338 35.225282 35.225282 0 0 0 15.146871 63.757761 39.452316 39.452316 0 0 0 17.260388-4.579287 153.934482 153.934482 0 0 0 70.450564-87.710952 108.141615 108.141615 0 0 0-18.6694-87.006446 101.096559 101.096559 0 0 1-22.896433-67.280288zM959.88893 774.956201a35.225282 35.225282 0 0 1 14.090113-22.191928 35.225282 35.225282 0 0 0-35.225282-60.939738 105.675846 105.675846 0 0 0-46.497372 66.22353 161.331791 161.331791 0 0 0 35.225282 126.458762 35.225282 35.225282 0 0 1 8.101815 30.998248 84.188424 84.188424 0 0 1-35.225282 42.270338 35.225282 35.225282 0 0 0-13.73786 48.258637 35.225282 35.225282 0 0 0 30.998248 17.964893 39.452316 39.452316 0 0 0 17.260388-4.579286 155.343493 155.343493 0 0 0 70.450564-87.710952 108.141615 108.141615 0 0 0-18.6694-87.006446 101.096559 101.096559 0 0 1-26.771214-69.746058zM683.722721 774.956201a35.225282 35.225282 0 0 1 14.090112-22.191928 35.225282 35.225282 0 0 0-35.225281-60.939738 105.675846 105.675846 0 0 0-46.497373 66.22353 161.331791 161.331791 0 0 0 35.225282 126.458762 35.225282 35.225282 0 0 1 8.101815 30.998248 84.188424 84.188424 0 0 1-35.225282 42.270338A35.225282 35.225282 0 0 0 637.577601 1021.533174a39.452316 39.452316 0 0 0 17.260389-4.579287 155.343493 155.343493 0 0 0 70.450563-87.710952 108.141615 108.141615 0 0 0-18.669399-87.006446 101.096559 101.096559 0 0 1-22.896433-67.280288z" fill="#E43961" p-id="6588"></path><path d="M1141.299132 239.179664m-52.837923 0a52.837923 52.837923 0 1 0 105.675846 0 52.837923 52.837923 0 1 0-105.675846 0Z" fill="#E43961" p-id="6589"></path><path d="M1224.78305 0H105.675846a105.675846 105.675846 0 0 0-105.675846 105.675846v428.69168a105.675846 105.675846 0 0 0 105.675846 105.675845h1119.107204a105.675846 105.675846 0 0 0 105.675845-105.675845V105.675846a105.675846 105.675846 0 0 0-105.675845-105.675846zM105.675846 70.450564h1119.107204a35.225282 35.225282 0 0 1 35.225282 35.225282v281.802254H70.450564V105.675846a35.225282 35.225282 0 0 1 35.225282-35.225282z m1119.107204 499.142243H105.675846a35.225282 35.225282 0 0 1-35.225282-35.225281V457.928664h1189.557768v77.847873a35.225282 35.225282 0 0 1-35.225282 33.81627z" fill="#E43961" p-id="6590"></path></svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/paifeng1.svg b/src/views/Hazardous/image/paifeng1.svg
new file mode 100644
index 0000000..b25dd20
--- /dev/null
+++ b/src/views/Hazardous/image/paifeng1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695625025523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16590" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M515.2768 53.7088a457.8816 457.8816 0 1 0 0 915.7632 457.8816 457.8816 0 0 0 0-915.7632z m0 877.4144c-231.2192 0-419.4304-188.3136-419.4304-419.4816 0-231.2704 188.2112-419.4816 419.4304-419.4816s419.4304 188.2112 419.4304 419.4816c0 231.168-188.2112 419.4816-419.4304 419.4816z" fill="#E43961" p-id="16591"></path><path d="M511.3856 563.968a13.4144 13.4144 0 0 1 0.8704-1.6896 193.3824 193.3824 0 0 1-54.1696-76.4928l-2.048-0.3072 0.256 0.7168c-8.6528 2.3552-17.92 4.6592-27.5968 6.5536-33.0752 6.4-66.048-0.6656-97.792-7.4752-39.3216-8.3968-76.544-16.384-106.3936 4.7104a111.7184 111.7184 0 0 0-29.3888 149.0432c16.1792 26.7776 43.2128 45.2608 76.032 52.0704 9.1648 1.8944 18.3296 2.816 27.7504 2.816 34.304 0 70.4-12.4416 103.936-36.1984 36.1984-25.6 75.2128-61.9008 107.6736-94.3104a5.12 5.12 0 0 0 0.8704 0.5632z" fill="#E43961" p-id="16592"></path><path d="M570.6752 516.5056l-1.6896-0.9216a194.56 194.56 0 0 1-76.544 54.2208l-0.2048 1.9968 0.7168-0.2048c2.3552 8.704 4.7104 17.8688 6.5024 27.5456 6.4 33.0752-0.7168 65.8944-7.424 97.8432-8.5504 39.3216-16.4864 76.4416 4.608 106.3936a111.7184 111.7184 0 0 0 148.992 29.3376c26.7776-16.2816 45.4144-43.3152 52.224-76.1344 1.792-9.0112 2.8672-18.2272 2.8672-27.6992 0-34.3552-12.4928-70.3488-36.4032-103.936-25.5488-36.0448-61.7984-75.2128-94.208-107.6224l0.5632-0.8192z" fill="#E43961" p-id="16593"></path><path d="M519.168 449.6384l-0.8192 1.6896c23.7568 20.48 42.496 46.6432 54.1184 76.4928a14.848 14.848 0 0 1 2.0992 0.3072l-0.2048-0.768c8.704-2.4064 17.92-4.608 27.5456-6.5024 33.0752-6.3488 65.8944 0.6144 97.7408 7.4752 39.424 8.448 76.4928 16.4352 106.4448-4.7616a111.5136 111.5136 0 0 0 29.3376-148.9408c-16.1792-26.8288-43.3152-45.312-76.032-52.1728a135.1168 135.1168 0 0 0-27.648-2.816c-34.4064 0-70.5536 12.4416-104.0896 36.2496-36.1472 25.6-75.1616 61.9008-107.52 94.3104l-0.9728-0.5632z" fill="#E43961" p-id="16594"></path><path d="M475.4944 506.6752c0.512 0.3072 1.1264 0.512 1.6896 0.8192 20.5312-23.7056 46.6432-42.496 76.544-54.1696 0-0.6656 0.1536-1.3312 0.2048-2.048l-0.7168 0.2048a359.6288 359.6288 0 0 1-6.5024-27.5968c-6.4-33.024 0.7168-65.9456 7.424-97.792 8.4992-39.3728 16.4864-76.4928-4.608-106.3936a111.6672 111.6672 0 0 0-148.9408-29.3888c-26.8288 16.2816-45.3632 43.3152-52.1728 76.1856a138.6496 138.6496 0 0 0-2.816 27.7504c0 34.304 12.3904 70.4 36.2496 103.936 25.7024 36.096 61.9008 75.2128 94.3104 107.6224-0.3072 0.256-0.4608 0.5632-0.6656 0.8704z" fill="#E43961" p-id="16595"></path><path d="M449.536 439.7056h122.1632v122.112H449.536z" fill="#E43961" p-id="16596"></path></svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/ranqi1.svg b/src/views/Hazardous/image/ranqi1.svg
new file mode 100644
index 0000000..d10536f
--- /dev/null
+++ b/src/views/Hazardous/image/ranqi1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#E43961" d="M786.304491 191.066121a49.764069 49.764069 0 0 0-83.196103 46.692212 174.430228 174.430228 0 0 1 3.686228 23.704489C620.373065 62.560141 513.216485 13.615234 467.036248 1.634995a49.866464 49.866464 0 0 0-62.461073 45.617063c-10.23952 186.256874-103.009574 318.0395-159.070948 381.319735-2.457485-10.23952-4.607784-21.605388-6.450898-33.892812a49.815266 49.815266 0 0 0-96.097897-9.778742c-30.718561 84.220054-85.858378 227.010165-92.155683 242.932619-0.665569 1.740718-1.228742 3.481437-1.791916 5.426946-63.280235 240.167948 124.154183 346.300576 183.082623 373.076921a49.968859 49.968859 0 0 0 70.089516-53.501493c-11.724251-72.342211 20.479041-145.759571 25.854789-156.920649a796.122702 796.122702 0 0 0 82.684126-173.150288c1.689521 4.505389 3.327844 9.164371 4.812574 13.976946a49.815266 49.815266 0 0 0 93.230833 5.11976c19.915867-46.077841 31.79371-101.780832 38.654189-146.42514 198.595496 164.651486 151.493703 395.09189 131.168254 464.87422a49.815266 49.815266 0 0 0 47.920955 63.689817 50.276045 50.276045 0 0 0 21.656586-5.119761c205.660765-99.016161 234.024236-254.759265 236.584116-272.217646v-0.614371-2.406288c25.905986-299.454771-130.144303-486.172423-198.441903-552.575711z m121.491908 545.254454c-1.740718 10.23952-20.479041 105.518256-140.332626 183.133821 21.400597-124.154183 21.656585-355.106563-213.340405-516.12302a49.968859 49.968859 0 0 0-49.149697-4.095808 49.508081 49.508081 0 0 0-28.721854 40.087722 847.013117 847.013117 0 0 1-17.919161 106.746999 167.262564 167.262564 0 0 0-23.90928-28.670657 49.866464 49.866464 0 0 0-83.144904 26.725148c-5.887724 30.052992-26.366765 110.791609-89.902988 211.804477a53.911074 53.911074 0 0 0-2.662276 4.761377 402.259554 402.259554 0 0 0-36.657482 151.74969c-60.61796-39.626943-134.393704-118.573645-98.248197-257.933516 5.938922-15.35928 34.455986-89.391012 61.437121-160.70927 1.587126 3.532634 3.174251 6.911676 5.11976 10.23952a49.200895 49.200895 0 0 0 35.838321 25.598801 50.122452 50.122452 0 0 0 42.442812-13.106586c44.234728-42.135626 184.311365-192.656574 210.575735-426.783206 47.255386 25.957184 126.970051 97.275443 189.431125 290.699981a49.815266 49.815266 0 0 0 93.077239 4.761377 279.385311 279.385311 0 0 0 21.707783-80.89221c64.048199 82.632929 141.51017 227.419745 124.358974 432.00536z" /></svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/shidu1.svg b/src/views/Hazardous/image/shidu1.svg
new file mode 100644
index 0000000..6234653
--- /dev/null
+++ b/src/views/Hazardous/image/shidu1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695623192300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12699" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M619.52 267.52C536.4224 141.7728 454.7584 40.3968 451.2768 36.1472L422.0928 0l-29.2352 36.1472c-3.4304 4.2496-85.1456 105.6256-168.2432 231.3216a1781.76 1781.76 0 0 0-116.6336 200.1408C70.5536 544.9728 52.3264 606.0032 52.3264 654.2336a369.7664 369.7664 0 0 0 631.1936 261.4784 367.3088 367.3088 0 0 0 108.288-261.4784c0-48.2304-18.2272-109.312-55.6544-186.6752a1781.76 1781.76 0 0 0-116.6336-200.0384zM422.0928 948.8896a294.9632 294.9632 0 0 1-294.6048-294.6048c0-66.56 56.6784-189.0304 159.5392-344.832 51.6096-78.2336 103.7824-148.0704 135.0656-188.7744 31.2832 40.704 83.4048 110.4896 135.0656 188.7232 102.912 155.8016 159.5392 278.272 159.5392 344.832a294.9632 294.9632 0 0 1-294.6048 294.656zM915.8656 99.4816c-26.4704-38.4-52.48-69.3248-53.5552-70.656l-14.336-17.0496-14.336 17.0496c-1.0752 1.28-27.136 32.256-53.5552 70.656-37.5296 54.4768-55.808 94.208-55.808 121.4976 0 65.8432 55.5008 119.3984 123.6992 119.3984S971.6736 286.72 971.6736 221.0304c0-27.2896-18.2272-67.072-55.808-121.5488z m-67.9424 203.3664c-47.5136 0-86.1696-36.7104-86.1696-81.92 0-31.3344 48.128-102.4 86.1696-150.3232 38.0416 47.9232 86.1696 119.04 86.1696 150.3232 0 45.312-38.656 81.92-86.1696 81.92z" fill="#E43961" p-id="12700"></path><path d="M422.0928 818.0224a165.4272 165.4272 0 0 1-165.2736-165.2736 37.5808 37.5808 0 0 0-75.1104 0 240.64 240.64 0 0 0 240.64 240.64 37.5808 37.5808 0 1 0 0-75.1104z" fill="#E43961" p-id="12701"></path></svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/u21.svg b/src/views/Hazardous/image/wendu.svg
similarity index 100%
rename from src/views/Hazardous/image/u21.svg
rename to src/views/Hazardous/image/wendu.svg
diff --git a/src/views/Hazardous/image/wendu1.svg b/src/views/Hazardous/image/wendu1.svg
new file mode 100644
index 0000000..a7f767b
--- /dev/null
+++ b/src/views/Hazardous/image/wendu1.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="88px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -270 -286 )">
+    <path d="M 47.80912797656249 64.43590847222222  C 47.80912797656249 57.56321585972223  44.561428679687495 51.421889597222226  39 47.28240985416667  L 39 16.03532027777778  C 39.4712582578125 7.755016347222222  32.321369976562494 0.9777777777777779  23.5985062734375 0.9777777777777779  C 14.875642570312507 0.9777777777777779  7.7257542890625 7.755016347222222  8 16.03532027777778  L 8 47.98016559722222  C 3.1044514765625024 52.099479009722224  0.19087202343749965 57.92889903472222  0.19087202343749965 64.43590847222222  C 0.19087202343749965 76.90812472291665  10.851080476562501 87.02222222222223  24 87.02222222222223  C 37.148919523437506 87.02222222222223  47.80912797656249 76.90946908333332  47.80912797656249 64.43590847222222  Z M 42.965078687500004 64.42515308472223  C 42.965078687500004 74.34699805347222  34.459461546875005 82.41488312291668  24 82.41488312291668  C 13.540538453124995 82.41488312291668  5.0349213125 74.34834249791666  5.0349213125 64.42515308472223  C 5.0349213125 59.426586702083334  7.16751296875 54.76815955416666  11.040827468750003 51.326435554166665  L 13 49.971256729166676  L 13 16.024564890277777  C 12.569803578124997 10.252955052083335  17.519726234375 5.56226165763889  23.5985062734375 5.562261741666668  C 29.677286312499994 5.562261825694446  34.62720896875 10.254299580555557  34 16.024564890277777  L 34 49.389121359722225  L 36.3225575 50.76581095972222  C 40.54236658593751 54.195435127777785  42.965078687500004 59.17249073541666  42.965078687500004 64.42515308472223  Z M 38.12102939843749 64.42918633402778  C 38.12102939843749 60.516914088888896  36.311557671875 56.811683095138896  33.164231828125 54.259967452777786  L 29 51.506588252777796  L 29 16.024564890277777  C 29.781784679687505 12.84769232847222  26.9465789375 10.157501009027778  23.594381359375 10.157501009027778  C 20.242183781250006 10.157501009027778  17.4069780390625 12.846347884027777  17.4069780390625 16.024564890277777  L 17.4069780390625 17.813992464583333  L 21.437040046874998 17.813992464583333  L 21.437040046874998 20.619804241666667  L 17.4138528671875 20.619804241666667  L 17.4138528671875 25.151855628472223  L 21.443914960937498 25.151855628472223  L 21.443914960937498 27.95766732152778  L 17.4138528671875 27.95766732152778  L 17.4138528671875 32.48971870833334  L 21.443914960937498 32.48971870833334  L 21.443914960937498 35.29553048541667  L 17.4138528671875 35.29553048541667  L 17.4138528671875 39.831615121527776  L 21.443914960937498 39.831615121527776  L 21.443914960937498 42.637426814583335  L 17.4138528671875 42.637426814583335  L 17.4138528671875 51.95562572291665  L 14.355900648437505 54.67673876041667  C 11.468445765625003 57.24996526180555  9.8789706015625 60.7118555923611  9.8789706015625 64.42918633402778  C 9.8789706015625 71.82351524027779  16.203871773437506 77.82367702083333  24 77.82367702083333  C 31.796128226562494 77.82367702083333  38.12102939843749 71.80872651944443  38.12102939843749 64.42918633402778  Z M 34.88982984375 64.42649752916667  C 34.8939547578125 70.12147521041666  30.005906156250006 74.75973611180555  24 74.75973602777779  C 17.99409384375 74.75973602777779  13.106045242187498 70.1214751263889  13.106045242187498 64.42515308472223  C 13.106045242187498 61.56556445416667  14.333901078124995 58.88747296666667  16.565491187499994 56.90713722222222  L 20.639552507812496 53.27719394097222  L 20.639552507812496 47.67363705347222  L 26.551960124999994 47.67363705347222  L 26.551960124999994 52.91688845972222  L 31.061889656250003 56.580442347916666  C 33.495601671875 58.56077809236111  34.88982984375 61.42036672291667  34.88982984375 64.42649752916667  Z " fill-rule="nonzero" fill="#E43961" stroke="none" transform="matrix(1 0 0 1 270 286 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/xielou1.svg b/src/views/Hazardous/image/xielou1.svg
new file mode 100644
index 0000000..9de9e15
--- /dev/null
+++ b/src/views/Hazardous/image/xielou1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695625265174" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17857" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M831.937316 825.418217H191.059745a40.117532 40.117532 0 0 1-40.117531-40.117531V533.563173a361.057786 361.057786 0 1 1 721.112634 0v251.737513a40.117532 40.117532 0 0 1-40.117532 40.117531z m-600.760039-80.235063h560.642508V533.563173c0-154.452498-125.367287-280.822723-280.822723-280.822722S231.177277 378.107738 231.177277 533.563173zM872.054848 1024H151.945152a94.2762 94.2762 0 0 1 0-188.5524h720.109696a94.2762 94.2762 0 0 1 0 188.5524zM151.945152 915.682664a14.041136 14.041136 0 0 0 0 28.082272h720.109696a14.041136 14.041136 0 0 0 0-28.082272z" fill="#E43961" p-id="17858"></path><path d="M512 158.464251a40.117532 40.117532 0 0 1-40.117532-40.117532V40.117532a40.117532 40.117532 0 0 1 80.235064 0v78.229187a40.117532 40.117532 0 0 1-40.117532 40.117532zM701.555338 195.572968a40.117532 40.117532 0 0 1-35.10284-59.17336l37.108716-69.202742a40.38331 40.38331 0 1 1 71.208619 38.111655l-37.108716 69.202742a40.117532 40.117532 0 0 1-36.105779 21.061705zM841.966699 313.919687a40.117532 40.117532 0 0 1-29.08521-67.196866l53.155729-57.167483a40.117532 40.117532 0 0 1 59.17336 54.158668l-53.15573 57.167483a40.117532 40.117532 0 0 1-30.088149 13.038198zM323.4476 195.572968a40.117532 40.117532 0 0 1-35.10284-21.061705l-37.108717-69.202742a40.38331 40.38331 0 0 1 71.208619-38.111655l37.108717 69.202742a40.117532 40.117532 0 0 1-35.10284 59.17336zM182.033301 313.919687a40.117532 40.117532 0 0 1-29.085211-13.038198l-53.15573-57.167483a40.117532 40.117532 0 0 1 59.17336-54.158668l53.15573 57.167483a40.117532 40.117532 0 0 1-29.085211 67.196866zM438.785504 726.127326a40.117532 40.117532 0 0 1-28.082272-68.199804l134.393732-135.39667H381.618022a40.117532 40.117532 0 0 1-28.082273-68.199804l153.44956-153.449559a40.423428 40.423428 0 0 1 57.167482 57.167483l-85.249755 85.249755h162.476004a40.117532 40.117532 0 0 1 28.082272 68.199804L466.867777 714.092067a40.117532 40.117532 0 0 1-28.082273 12.035259z" fill="#E43961" p-id="17859"></path></svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/image/yanwu1.svg b/src/views/Hazardous/image/yanwu1.svg
new file mode 100644
index 0000000..7ef526a
--- /dev/null
+++ b/src/views/Hazardous/image/yanwu1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#E43961" d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64z m0 832C300.256 896 128 723.744 128 512S300.256 128 512 128s384 172.256 384 384-172.256 384-384 384zM404.96 770.432a278.208 278.208 0 0 1-90.688-60.672 278.432 278.432 0 0 1-60.704-90.72 32 32 0 0 0-59.136 24.512 341.6 341.6 0 0 0 74.592 111.456 342.176 342.176 0 0 0 111.456 74.56 31.936 31.936 0 0 0 41.792-17.312 31.968 31.968 0 0 0-17.312-41.824zM211.744 422.272a31.872 31.872 0 0 0 41.824-17.28 278.08 278.08 0 0 1 60.704-90.72 278.304 278.304 0 0 1 90.688-60.704 32 32 0 0 0-24.512-59.136 342.016 342.016 0 0 0-111.456 74.56 342.144 342.144 0 0 0-74.56 111.488 32 32 0 0 0 17.312 41.792zM619.04 253.568a278.784 278.784 0 0 1 90.72 60.704 278.56 278.56 0 0 1 60.672 90.688 32 32 0 1 0 59.136-24.512 342.176 342.176 0 0 0-74.56-111.456 342.432 342.432 0 0 0-111.456-74.592 32.032 32.032 0 0 0-24.512 59.168zM812.256 601.728a32.096 32.096 0 0 0-41.824 17.312 278.336 278.336 0 0 1-60.672 90.72 278.336 278.336 0 0 1-90.72 60.672 32 32 0 0 0 24.512 59.136 342.176 342.176 0 0 0 111.456-74.56 342.848 342.848 0 0 0 74.56-111.456 32 32 0 0 0-17.312-41.824zM348.576 348.576a230.208 230.208 0 0 0-50.112 74.944 32 32 0 0 0 59.136 24.544 166.784 166.784 0 0 1 36.256-54.208 166.4 166.4 0 0 1 54.208-36.288 32.032 32.032 0 0 0-24.512-59.136 230.592 230.592 0 0 0-74.976 50.144zM575.968 357.568c20.288 8.416 38.528 20.64 54.176 36.256s27.84 33.888 36.288 54.208a32 32 0 1 0 59.136-24.544 230.816 230.816 0 0 0-50.144-74.944 230.4 230.4 0 0 0-74.944-50.112 32 32 0 1 0-24.512 59.136zM448.032 666.432a166.56 166.56 0 0 1-54.208-36.288 166.912 166.912 0 0 1-36.288-54.176 32 32 0 0 0-59.136 24.512 230.464 230.464 0 0 0 50.144 74.944 229.952 229.952 0 0 0 74.944 50.144 32 32 0 0 0 24.544-59.136zM675.392 675.392a230.144 230.144 0 0 0 50.144-74.944 32 32 0 1 0-59.136-24.512c-8.416 20.288-20.64 38.528-36.288 54.176s-33.92 27.872-54.176 36.288a32 32 0 1 0 24.512 59.136 228.96 228.96 0 0 0 74.944-50.144zM640 512c0-70.592-57.408-128-128-128s-128 57.408-128 128 57.408 128 128 128 128-57.408 128-128z m-128 64c-35.296 0-64-28.704-64-64s28.704-64 64-64 64 28.704 64 64-28.704 64-64 64z" /></svg>
\ No newline at end of file
diff --git a/src/views/Hazardous/index.vue b/src/views/Hazardous/index.vue
index c880b9c..c8f9288 100644
--- a/src/views/Hazardous/index.vue
+++ b/src/views/Hazardous/index.vue
@@ -2,7 +2,7 @@
     <div class="container">
         <div class="header">
             <div class="title">
-                <header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'危废品箱物联检测系统'" :titleTip="[]"
+                <header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'危废品箱物联检测系统'" :titleTip="titleTip"
                     :typeFun="['time']" :alarmType="[]"></header2>
             </div>
         </div>
@@ -33,62 +33,169 @@
             </div>
             <div class="bottom">
                 <div class="box1">
-                    <Border>
+                    <Border :title="'温湿度趋势'">
+                        <LineChart :calc="calc"></LineChart>
                     </Border>
                 </div>
                 <div class="box2">
-                    <Border></Border>
+                    <Border :title="'报警记录'"></Border>
                 </div>
             </div>
 
-
         </div>
     </div>
 </template>
 
 <script setup lang='ts'>
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+
+
 import header2 from '@/components/headerBox/header2.vue'
 import Border from './components/Border.vue';
 import Card from './components/Card.vue';
+import LineChart from './components/LineChart.vue';
 
-const config = {
+import { getGuoJian24Trend } from '@/http/guojian/index'
+
+let timer = null
+let titleTip = [
+    {
+        color: "#20AEC5",
+        name: '正常',
+    },
+    {
+        color: "#E43961",
+        name: '异常',
+    },
+    {
+        color: "#A7A6BD",
+        name: '断联',
+    },
+];
+const config = reactive({
     shidu: {
         image: require('./image/shidu.svg'),
+        image1: require('./image/shidu1.svg'),
         type: 1,
-        classArr:[]
+        classArr: [],
+        value: 0,
+        unit: '%RH'
     },
     wendu: {
-        image: require('./image/u21.svg'),
+        image: require('./image/wendu.svg'),
+        image1: require('./image/wendu1.svg'),
         type: 1,
-        classArr:[]
+        classArr: [],
+        value: 0,
+        unit: '℃'
     },
     kongtiao: {
         image: require('./image/kongtiao.svg'),
+        image1: require('./image/kongtiao1.svg'),
         type: 2,
-        classArr:['kongtiao']
+        classArr: ['kongtiao'],
+        value: 0,
+        unit: ''
     },
     paifeng: {
         image: require('./image/paifeng.svg'),
+        image1: require('./image/paifeng1.svg'),
         type: 2,
-        classArr:['paifeng']
+        classArr: ['paifeng'],
+        value: 0,
+        unit: ''
     },
     xielou: {
         image: require('./image/xielou.svg'),
+        image1: require('./image/xielou1.svg'),
         type: 3,
-        classArr:[]
+        classArr: [],
+        value: 0,
+        unit: ''
     },
     yanwu: {
         image: require('./image/yanwu.svg'),
+        image1: require('./image/yanwu1.svg'),
         type: 3,
-        classArr:[]
+        classArr: [],
+        value: 0,
+        unit: ''
     },
     ranqi: {
         image: require('./image/ranqi.svg'),
+        image1: require('./image/ranqi1.svg'),
         type: 3,
-        classArr:[]
+        classArr: [],
+        value: 0,
+        unit: ''
     },
+})
+const calc = reactive({
+    name: '',
+    math: [],
+    data: [],
+    xAxis: [],
+})
+const getGuoJian24TrendData = async () => {
+    const res: any = await getGuoJian24Trend()
+    if (res.code == 200) {
+        const data = res.data
+        config.shidu.value = data.top.shidu
+        config.wendu.value = data.top.wendu
+        config.kongtiao.value = data.top.kongtiao
+        config.kongtiao.classArr = data.top.kongtiao == 0 ? [] : ['kongtiao']
+        config.paifeng.value = data.top.paifeng
+        config.paifeng.classArr = data.top.paifeng == 0 ? [] : ['paifeng']
+        config.xielou.value = data.top.xielou
+        config.yanwu.value = data.top.yanwu
+        config.ranqi.value = data.top.ranqi
+
+        calc.math = [
+            {
+                key: '湿度%RH',
+                value: {
+                    max: data.maxHumi,
+                    min: data.minHumi,
+                    avg: data.avgHumi,
+                }
+            },
+            {
+                key: '温度℃',
+                value: {
+                    max: data.maxTemp,
+                    min: data.minTemp,
+                    avg: data.avgTemp,
+                }
+            }
+        ]
+        calc.xAxis = data.time
+        calc.data = [
+            {
+                name: '湿度',
+                type: 'line',
+                data: data.humi
+            },
+            {
+                name: '温度',
+                type: 'line',
+                data: data.temp
+            }
+        ]
+
+    }
 }
 
+onMounted((() => {
+    getGuoJian24TrendData()
+    timer = setInterval(() => {
+        getGuoJian24TrendData()
+    }, 1000 * 60)
+}))
+
+onUnmounted(() => {
+    clearInterval(timer)
+})
+
 </script>
 
 <style scoped>
@@ -124,6 +231,7 @@ const config = {
     justify-content: space-between;
     align-items: center;
 }
+
 .card {
     height: 100%;
     box-sizing: border-box;