master: Fixed 架构更改、添加角色切换、地图等

eslint.config.js

@@ -32,7 +32,11 @@ export default [
   },
   pluginJs.configs.recommended,
   ...pluginVue.configs['flat/essential'],
-  ...compat.extends('plugin:prettier/recommended', 'prettier', './.eslintrc-auto-import.json'),
+  ...compat.extends(
+    'plugin:prettier/recommended',
+    'prettier',
+    './.eslintrc-auto-import.json',
+  ),
   oxlint.configs['flat/recommended'],
   {
     rules: {

src/layout/HomeMap.vue

@@ -1,5 +1,18 @@
 <template>
   <div class="home-map w-full h-full">
+    <div
+      class="linebox absolute w-full h-full transform-scale-y-80 transform-scale-x-120 opacity-50 flex justify-center items-center"
+    >
+      <img
+        class="line1 w-1000px ml--3px mt--7px animate-[scales2_60s_linear_infinite]"
+        src="@/assets/images/lines1.png"
+      />
+      <img class="line2 animate-[scales1_15s_linear_infinite]" src="@/assets/images/lines2.png" />
+      <img
+        class="line3 animate-[scales2_20s_linear_infinite] opacity-100"
+        src="@/assets/images/lines3.png"
+      />
+    </div>
     <ECharts
       id="home-map-echarts"
       width="100%"
@@ -139,6 +152,21 @@
     console.log(geoJSON)
     loading.value = false
     fullOptions.value.options = chartOptions.setMapOption(data, geoJSON, toolTipData, geoCoordMap)
+    echartsRef.value.myChart.on('georoam', function (params) {
+      var option = echartsRef.value.myChart.getOption() //获得option对象
+      if (params.zoom != null && params.zoom != undefined) {
+        //捕捉到缩放时
+        option.geo[1].zoom = option.geo[0].zoom //下层geo的缩放等级跟着上层的geo一起改变
+        option.geo[1].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
+      } else {
+        //捕捉到拖曳时
+        option.geo[1].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
+      }
+      echartsRef.value.myChart.dispatchAction({
+        type: 'restore'
+      })
+      echartsRef.value.myChart.setOption(option) //设置option
+    })
   }
   const init = async () => {
     setData()
@@ -148,9 +176,10 @@
         if (level === 'district' || useHomeStore.codes[useHomeStore.codes.length - 1] === adcode) {
           return
         }
-        console.log(adcode, name, level)
-        useHomeStore.setCode(adcode)
-        setData(adcode)
+
+        console.log(params)
+        // useHomeStore.setCode(adcode)
+        // setData(adcode)
       }
     })
 
@@ -162,8 +191,27 @@
   onMounted(() => {
     init()
   })
-  onUnmounted(() => {
-    echartsRef.value.myChart.off('click')
-    echartsRef.value.myChart.dispose()
-  })
 </script>
+
+<style lang="scss">
+  .linebox > img {
+    position: absolute;
+    max-width: unset;
+  }
+  @keyframes scales1 {
+    0% {
+      transform: rotate(0);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes scales2 {
+    0% {
+      transform: rotate(0);
+    }
+    100% {
+      transform: rotate(-360deg);
+    }
+  }
+</style>

src/layout/LayoutHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="layout-header w-full h-55px absolute top-0 left-0 flex justify-between items-center px-15px animate__animated animate__fadeInDown animate__1s"
+    class="layout-header w-full h-55px absolute top-0 left-0 flex justify-between items-center px-15px animate__animated animate__fadeInDown animate__1s z-999"
   >
     <div> </div>
     <div

src/views/home/home.vue

@@ -62,7 +62,7 @@
     if (i) {
       leftBoxCom.value = defineAsyncComponent(() => import('./leftboxtwo/index.vue'))
       rightBoxCom.value = defineAsyncComponent(() => import('./rightboxtwo/index.vue'))
-      rightBoxCom.value = defineAsyncComponent(() => import('@/layout/Map.vue'))
+      mapBoxCom.value = defineAsyncComponent(() => import('@/layout/Map.vue'))
     } else {
       leftBoxCom.value = LeftBox
       rightBoxCom.value = RightBox

src/views/home/leftbox/bottomBox.vue

@@ -1,64 +1,82 @@
 <template>
   <div class="bottom-box">
-    <div class="flex justify-between relative">
-      <div>
-        <span>用户总数 </span>
-        <Countto class="text-18px color-#389bff font-bold" :endVal="data.yhzs" />
+    <div class="table-box w-full">
+      <div class="text-left bg-#389bff94 flex">
+        <span class="p-2 w-60px">报警</span>
+        <span class="p-2 w-80px">报警类型</span>
+        <span class="p-2 flex-1">报警时间</span>
+        <span class="p-2 w-80px">报警级别</span>
+        <span class="p-2 w-60px">处理</span>
       </div>
-
-      <ul class="flex gap-15px">
-        <li
+      <ScrollBox :list="list">
+        <div
           :class="[
-            'w-50px cursor-pointer text-center b-solid b-1px b-color-#389bff hover:b-color-#FAC858',
-            i === selectedI ? 'b-color-#FAC858' : ''
+            'text-left  text-10px hover:bg-#389bff24 flex',
+            (i + 1) % 2 == 0 ? 'bg-#ffffff24' : ''
           ]"
-          v-for="(item, i) in options"
-          :key="item.code"
-          @click="dayClick(i)"
+          v-for="(item, i, index) in list"
+          :key="index"
         >
-          <span class="text-12px">{{ item.name }}</span>
-        </li>
-      </ul>
+          <span class="p-2 w-60px">{{ item.name }}</span>
+          <span class="p-2 w-80px">{{ item.type }}</span>
+          <span class="p-2 flex-1">{{ item.time }}</span>
+          <span class="p-2 w-80px">{{ item.level ? '告警' : '故障' }}</span>
+          <span :class="['p-2 w-60px', item.cl ? 'color-#389bff' : 'color-red']">{{
+            item.cl ? '已处理' : '未处理'
+          }}</span>
+        </div>
+      </ScrollBox>
     </div>
-    <ECharts
-      id="yhqk-echarts"
-      width="100%"
-      height="120px"
-      :loading="loading"
-      :fullOptions="fullOptions"
-    />
   </div>
 </template>
 
 <script setup>
-  import { chartOptions } from '@/components/ECharts/optionsConfig'
-  const loading = ref(true)
-  const data = reactive({
-    yhzs: 30
-  })
-
-  const fullOptions = ref({ options: {} })
-  const selectedI = ref(0)
-  const options = ref([
-    { name: '当日', code: 0 },
-    { name: '近一周', code: 1 },
-    { name: '近一月', code: 2 }
+  const list = ref([
+    {
+      name: 'XY7809',
+      type: '工服',
+      time: '2022-03-01 12:00:00',
+      level: 0,
+      cl: 0
+    },
+    {
+      name: 'XY7809',
+      type: '烟雾',
+      time: '2024-03-01 12:00:00',
+      level: 1,
+      cl: 1
+    },
+    {
+      name: 'XY7809',
+      type: '工服',
+      time: '2022-03-01 12:00:00',
+      level: 0,
+      cl: 0
+    },
+    {
+      name: 'XY7809',
+      type: '烟雾',
+      time: '2024-03-01 12:00:00',
+      level: 1,
+      cl: 1
+    },
+    {
+      name: 'XY7809',
+      type: '工服',
+      time: '2022-03-01 12:00:00',
+      level: 0,
+      cl: 0
+    },
+    {
+      name: 'XY7809',
+      type: '烟雾',
+      time: '2024-03-01 12:00:00',
+      level: 1,
+      cl: 1
+    }
   ])
-  const dayClick = (v) => {
-    selectedI.value = v
-    fullOptions.value.options = chartOptions.setYhqkOption([], selectedI.value)
-  }
-  onMounted(() => {
-    setTimeout(() => {
-      loading.value = false
-      fullOptions.value.options = chartOptions.setYhqkOption([], selectedI.value)
-    }, 1000)
-  })
+  onMounted(() => {})
 </script>
 
 <style scoped lang="scss">
-  .box-style {
-    background: url('@/assets/images/box-bg.png') no-repeat center;
-    background-size: 100%;
-  }
 </style>

src/views/home/leftbox/index.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="w-453px flex flex-col gap-15px lr-box-bg overflow-hidden absolute">
-    <Box title="概况" wHeader="60px" class="animate__animated animate__fadeInLeft animate__faster">
+    <Box
+      title="安全事件单位排序"
+      wHeader="60px"
+      class="animate__animated animate__fadeInLeft animate__faster"
+    >
       <TopBox />
     </Box>
-    <Box title="设备信息" class="animate__animated animate__fadeInLeft animate__fast">
+    <Box title="三违行为监测" class="animate__animated animate__fadeInLeft animate__fast">
       <MiddleBox />
     </Box>
-    <Box title="用户情况" class="animate__animated animate__fadeInLeft animate__1s">
+    <Box title="实时预警情况" class="animate__animated animate__fadeInLeft animate__1s">
       <BottomBox />
     </Box>
   </div>

src/views/home/leftbox/middleBox.vue

@@ -1,79 +1,181 @@
 <template>
   <div class="left-top-box">
-    <div class="flex gap-15px h-90px">
-      <div
-        class="box-style color- flex-1 flex flex-col flex-justify-center flex-items-center gap-2px"
+    <ul class="flex justify-end gap-15px mb-15px absolute right-15px z-10">
+      <li
+        :class="[
+          'w-50px cursor-pointer text-center b-solid b-1px b-color-#389bff hover:b-color-#FAC858',
+          i === selectedI ? 'b-color-#FAC858' : ''
+        ]"
+        v-for="(item, i) in options"
+        :key="item.code"
+        @click="dayClick(i)"
       >
-        <span>监控点位</span>
-        <Countto class="text-20px color-#389bff font-bold" :endVal="80" />
-      </div>
-      <div class="box-style flex-1 flex flex-col flex-justify-center flex-items-center gap-2px">
-        <span>智能分析</span>
-        <Countto class="text-20px color-#389bff font-bold" :endVal="60" />
-      </div>
-    </div>
+        <span class="text-12px">{{ item.name }}</span>
+      </li>
+    </ul>
     <ECharts
-      id="sbxx-echarts"
+      id="xwjc-echarts"
+      ref="echartsRef"
       width="100%"
-      height="280px"
+      height="276px"
       :loading="loading"
-      :fullOptions="{ options: chartOptions.setSbxxOption() }"
+      :fullOptions="fullOptions"
     />
-    <!-- <swiper
-      :spaceBetween="30"
-      :centeredSlides="true"
-      :autoplay="{
-        delay: 5000,
-        disableOnInteraction: false,
-        pauseOnMouseEnter: true
-      }"
-      :pagination="{
-        clickable: true
-      }"
-      :modules="modules"
-      class="mySwiper"
-    >
-      <swiper-slide>
-        <ECharts
-          id="sbxx-echarts"
-          width="100%"
-          height="280px"
-          :loading="loading"
-          :fullOptions="{ options: chartOptions.setSbxxOption() }"
-        />
-      </swiper-slide>
-      <swiper-slide>
-        <ECharts
-          id="sbxx-echarts2"
-          width="100%"
-          height="280px"
-          ref="echartsRef"
-          :loading="loading"
-          :fullOptions="{ options: chartOptions.setSbxxOption2() }"
-        />
-      </swiper-slide>
-    </swiper> -->
   </div>
 </template>
 
 <script setup>
   import { chartOptions } from '@/components/ECharts/optionsConfig'
-  import { Swiper, SwiperSlide } from 'swiper/vue'
-  import { Autoplay, Pagination, Navigation } from 'swiper/modules'
-  import 'swiper/css'
 
-  import 'swiper/css/pagination'
-  import 'swiper/css/navigation'
-
-  const modules = [Autoplay, Pagination, Navigation]
   const loading = ref(true)
   const echartsRef = ref(null)
+  let timer = null
+
+  let xData = [],
+    yData1 = [],
+    yData2 = [],
+    yData3 = [],
+    yData4 = []
+  const fullOptions = ref({ options: {} })
+
+  const selectedI = ref(0)
+  const options = ref([
+    { name: '当日', code: 0 },
+    { name: '近一周', code: 1 },
+    { name: '近一月', code: 2 }
+  ])
+  const dayClick = (v) => {
+    selectedI.value = v
+    switch (v) {
+      case 0: {
+        const xPoint = []
+        for (let i = 0; i < 10; i++) {
+          let currentTime = new Date().getTime() - 3600 * 1000 * i
+          let time = new Date(currentTime).toLocaleTimeString()
+          xPoint.push(time)
+        }
+        xData = xPoint
+        for (let i = 0; i < xData.length; i++) {
+          const curData1 = [],
+            curData2 = [],
+            curData3 = [],
+            curData4 = []
+          for (let j = 0; j < 10; j++) {
+            curData1.push(Math.floor(Math.random() * 100))
+            curData2.push(Math.floor(Math.random() * 100))
+            curData3.push(Math.floor(Math.random() * 100))
+            curData4.push(Math.floor(Math.random() * 100))
+          }
+          ;[yData1, yData2, yData3, yData4] = [curData1, curData2, curData3, curData4]
+        }
+        break
+      }
+      case 1: {
+        const xPoint = []
+        for (let i = 0; i < 7; i++) {
+          // 修改循环次数为7
+          let currentTime = new Date().getTime() - 24 * 3600 * 1000 * i // 修改为每天减少一天的时间
+          let time = new Date(currentTime).toLocaleDateString() // 使用 toLocaleDateString 获取日期部分
+          xPoint.push(time)
+        }
+        xData = xPoint
+
+        for (let i = 0; i < xData.length; i++) {
+          const curData1 = [],
+            curData2 = [],
+            curData3 = [],
+            curData4 = []
+          for (let j = 0; j < 7; j++) {
+            curData1.push(Math.floor(Math.random() * 100))
+            curData2.push(Math.floor(Math.random() * 100))
+            curData3.push(Math.floor(Math.random() * 100))
+            curData4.push(Math.floor(Math.random() * 100))
+          }
+          ;[yData1, yData2, yData3, yData4] = [curData1, curData2, curData3, curData4]
+        }
+        break
+      }
+
+      case 2: {
+        const xPoint = []
+        for (let i = 0; i < 30; i++) {
+          // 修改循环次数为30
+          let currentTime = new Date().getTime() - 24 * 3600 * 1000 * i // 修改为每天减少一天的时间
+          let time = new Date(currentTime).toLocaleDateString() // 使用 toLocaleDateString 获取日期部分
+          xPoint.push(time)
+        }
+        xData = xPoint
+        for (let i = 0; i < xData.length; i++) {
+          const curData1 = [],
+            curData2 = [],
+            curData3 = [],
+            curData4 = []
+          for (let j = 0; j < 30; j++) {
+            curData1.push(Math.floor(Math.random() * 100))
+            curData2.push(Math.floor(Math.random() * 100))
+            curData3.push(Math.floor(Math.random() * 100))
+            curData4.push(Math.floor(Math.random() * 100))
+          }
+          ;[yData1, yData2, yData3, yData4] = [curData1, curData2, curData3, curData4]
+        }
+        break
+      }
+    }
+    const options = chartOptions.setXwjcOption(xData, yData1, yData2, yData3, yData4)
+    if (v === 2) {
+      options.xAxis[0].axisLabel.rotate = 0
+      fullOptions.value.options = Object.assign(options, {
+        dataZoom: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 10,
+            showDataShadow: false,
+            height: 20,
+            width: '80%',
+            top: '14%'
+          }
+        ]
+      })
+    } else {
+      fullOptions.value.options = options
+    }
+  }
+
+  const moveShow = () => {
+    let count = 0
+    let dataLength = yData4.length
+    timer && clearInterval(timer)
+    timer = setInterval(() => {
+      echartsRef.value.myChart.dispatchAction({
+        type: 'downplay',
+        seriesIndex: 1
+      })
+      echartsRef.value.myChart.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 1,
+        dataIndex: count % dataLength
+      })
+      echartsRef.value.myChart.dispatchAction({
+        type: 'showTip',
+        seriesIndex: 1,
+        dataIndex: count % dataLength
+      })
+      count++
+    }, 2000)
+  }
 
   onMounted(() => {
     setTimeout(() => {
       loading.value = false
+      dayClick(selectedI.value)
+      moveShow()
     }, 1000)
   })
+
+  onBeforeUnmount(() => {
+    clearInterval(timer)
+  })
 </script>
 
 <style scoped lang="scss">

src/views/home/leftbox/topBox.vue

@@ -1,113 +1,79 @@
 <template>
-  <div class="coverflow-example">
-    <swiper
-      class="swiper hover:cursor-grab active:cursor-grabbing"
-      :modules="modules"
-      :effect="'coverflow'"
-      :centered-slides="true"
-      :initialSlide="1"
-      :slides-per-view="3"
-      :coverflow-effect="{
-        rotate: 0,
-        stretch: -5,
-        depth: 120,
-        modifier: 2,
-        slideShadows: true
-      }"
-      @slideChange="swiperChange"
-    >
-      <swiper-slide class="slide" v-for="index in 3" :key="index">
-        <img src="@/assets/images/swiper.png" />
-      </swiper-slide>
-    </swiper>
-    <ScrollPanel
-      style="width: 100%; height: 150px"
-      :pt="{
-        barY: '!bg-#6286b6c2'
-      }"
-    >
-      <div v-for="(item, i) in dataList" :key="i" class="text-18px color-#f0f0f0">
-        <template v-if="active === i">
-          <p>{{ item.name }}</p>
-          <p>{{ item.content }}</p>
-        </template>
-      </div>
-    </ScrollPanel>
+  <div class="left-bottom-box">
+    <ECharts
+      id="aqsj-echarts"
+      ref="echartsRef"
+      width="100%"
+      height="275px"
+      :loading="loading"
+      :fullOptions="fullOptions"
+    />
   </div>
 </template>
 
 <script setup>
-  import { Pagination, EffectCoverflow } from 'swiper/modules'
-  import { Swiper, SwiperSlide } from 'swiper/vue'
-  import 'swiper/css'
-  import 'swiper/css/pagination'
-  import 'swiper/css/effect-coverflow'
+  import { chartOptions } from '@/components/ECharts/optionsConfig'
+  const loading = ref(true)
+  const echartsRef = ref(null)
 
-  const modules = [EffectCoverflow]
-  const active = ref(1)
-
-  const dataList = ref([
-    {
-      name: '厂区介绍1',
-      content: `稳高压消防给水系统是现今化工生产厂区最为常见的给水系统,
-          一般由消防水泵、给水管道以及消防水池等设施组成。当我们对消防系统进行设置时,
-          如果其中具有消防通道,
-          则需要做好消防装置外管网以及内消防管网的连接。而对于部分体积小的生产装置,
-          我们则可以通过整合方式的应用对消防管网进行整合,
-          并根据厂区实际情况在必要位置通过支管的应用对消防设施进行设置。在环状管网方面,
-          则需要将阀门分为几个不同的管段, 并在独立管段位置上做好消防设施的设置。在企业灌区,
-          通常情况下都具有着较多数量的石油原料, 如果这部分材料发生了火情,
-          仅仅使用水很难起到良好的灭火作用, 对此,
-          则可以使用固定泡沫灭火系统作为该区域的消防措施。在灭火装置中,
-          装置的是具有抗熔特征的泡沫液, 在化工企业灌区, 需要保证该装置中的泡沫两为160L/s,
-          以此保证灌区出现火灾问题时能够做出持续的灭火控制作用。而在火灾情况出现时,
-          该区域控制室则能够通过信号的接收, 在掌握厂区内出现火情之后对消防水泵进行及时的启动,
-          保证灭火工作能够在第一时间开展。`
-    },
-    {
-      name: '厂区介绍2',
-      content: `在化工生产区中, 所设置消防设施的目的就是要保证厂区在火灾情况出现时能够及时对火情进行控制, 对此, 就需要在设置完毕后做好相关设施的维护工作。而在消火栓以及消防水炮设置时, 则需要其位置能够控制在目标范围之内, 并保证目标对象通消防设施间需要良好贯通, 避免存在障碍物对消防效果产生影响。而在消火栓设置时, 避免对阀门进行随意的切断, 尽可能将水炮设置为蝶阀类型, 并对管道做好保温措施。而对于防火堤区域之外的水炮, 则需要做好其高度的控制, 需要在能够高于防火堤顶部的同时使其在实际喷射过程中产生的水流能够良好的覆盖到根部位置。`
-    },
-    {
-      name: '厂区介绍3',
-      content: `稳高压消防给水系统是现今化工生产厂区最为常见的给水系统,
-          一般由消防水泵、给水管道以及消防水池等设施组成。当我们对消防系统进行设置时,
-          如果其中具有消防通道,
-          则需要做好消防装置外管网以及内消防管网的连接。而对于部分体积小的生产装置,
-          我们则可以通过整合方式的应用对消防管网进行整合,
-          并根据厂区实际情况在必要位置通过支管的应用对消防设施进行设置。在环状管网方面,
-          则需要将阀门分为几个不同的管段, 并在独立管段位置上做好消防设施的设置。在企业灌区,
-          通常情况下都具有着较多数量的石油原料, 如果这部分材料发生了火情,
-          仅仅使用水很难起到良好的灭火作用`
-    }
-  ])
-
-  const swiperChange = (v) => {
-    console.log(v)
-    active.value = v.activeIndex
+  const fullOptions = ref({ options: {} })
+  const data = {
+    label: ['A院', 'B院', 'C院', 'D院', 'E院', 'F院', 'G院', 'H院', 'I院', 'J院', 'K院', 'L院'],
+    value: [11, 22, 33, 44, 55, 66, 77, 88, 99, 21, 32, 43],
+    value1: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
   }
-</script>
-
-<style lang="scss" scoped>
-  .coverflow-example {
-    position: relative;
-    height: 100%;
+  let dataZoomMove = {
+    start: 0,
+    end: 3
   }
-
-  .swiper {
-    height: 100%;
-    width: 100%;
-    padding-bottom: 15px;
-
-    .slide {
-      width: 300px;
-
-      img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
+  let dataZoomMoveTimer = null
+  const startMoveDataZoom = () => {
+    dataZoomMoveTimer = setInterval(() => {
+      dataZoomMove.start += 1
+      dataZoomMove.end += 1
+      if (dataZoomMove.end > data.value.length - 1) {
+        dataZoomMove.start = 0
+        dataZoomMove.end = 3
       }
-    }
+      echartsRef.value.myChart.setOption({
+        dataZoom: [
+          {
+            type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
+            startValue: dataZoomMove.start,
+            endValue: dataZoomMove.end
+          }
+        ]
+      })
+    }, 2500)
+  }
+  const mouseOver = () => {
+    clearInterval(dataZoomMoveTimer)
+    dataZoomMoveTimer = null
+  }
+  const mouseOut = () => {
+    if (dataZoomMoveTimer) return
+    let dataZoomMove_get = echartsRef.value.myChart.getOption().dataZoom[0]
+    dataZoomMove.start = dataZoomMove_get.startValue
+    dataZoomMove.end = dataZoomMove_get.endValue
+    startMoveDataZoom()
   }
-</style>
+  const init = () => {
+    startMoveDataZoom()
+    let chartDom = echartsRef.value.myChart.getDom()
+    chartDom.addEventListener('mouseout', mouseOut)
+    chartDom.addEventListener('mouseover', mouseOver)
+  }
+  onMounted(() => {
+    init()
+    setTimeout(() => {
+      loading.value = false
+      fullOptions.value.options = chartOptions.setAqsjOption(data, dataZoomMove)
+    }, 1000)
+  })
+
+  onBeforeUnmount(() => {
+    echartsRef.value.myChart.getDom().removeEventListener('mouseout', mouseOut)
+    echartsRef.value.myChart.getDom().removeEventListener('mouseover', mouseOver)
+    clearInterval(dataZoomMoveTimer)
+  })
+</script>

src/views/home/leftboxtwo/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="w-453px flex flex-col gap-15px lr-box-bg overflow-hidden absolute">
-    <Box title="概况2" wHeader="60px" class="animate__animated animate__fadeInLeft animate__faster">
+    <Box title="概况" wHeader="60px" class="animate__animated animate__fadeInLeft animate__faster">
       <TopBox />
     </Box>
-    <Box title="设备信息2" class="animate__animated animate__fadeInLeft animate__fast">
+    <Box title="设备信息" class="animate__animated animate__fadeInLeft animate__fast">
       <MiddleBox />
     </Box>
-    <Box title="用户情况2" class="animate__animated animate__fadeInLeft animate__1s">
+    <Box title="用户情况" class="animate__animated animate__fadeInLeft animate__1s">
       <BottomBox />
     </Box>
   </div>

src/views/home/rightbox/bottomBox.vue

@@ -3,7 +3,7 @@
     <ECharts
       id="bjlx-echarts"
       width="100%"
-      height="290px"
+      height="192px"
       :loading="loading"
       :fullOptions="fullOptions"
     />

src/views/home/rightbox/index.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="w-453px flex flex-col gap-15px lr-box-bg overflow-hidden absolute right-0">
-    <Box title="报警中心" class="animate__animated animate__fadeInRight animate__faster">
+    <Box title="安全生产危险分布点" class="animate__animated animate__fadeInRight animate__faster">
       <RightTopBox />
     </Box>
+    <Box title="监控设备接入分布" class="animate__animated animate__fadeInRight animate__fast">
+      <MiddleBox />
+    </Box>
     <Box
       title="报警类型TOP5"
       wHeader="124px"
-      class="animate__animated animate__fadeInRight animate__fast"
+      class="animate__animated animate__fadeInRight animate__1s"
     >
       <RightBottomBox />
     </Box>
@@ -15,5 +18,6 @@
 
 <script setup>
   import RightTopBox from './topBox.vue'
+  import MiddleBox from './middleBox.vue'
   import RightBottomBox from './bottomBox.vue'
 </script>

src/views/home/rightbox/middleBox.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="right-top-box">
+    <div class="flex gap-15px h-90px">
+      <div
+        class="box-style color- flex-1 flex flex-col flex-justify-center flex-items-center gap-2px"
+      >
+        <span>监控点位</span>
+        <Countto class="text-20px color-#389bff font-bold" :endVal="80" />
+      </div>
+      <div class="box-style flex-1 flex flex-col flex-justify-center flex-items-center gap-2px">
+        <span>智能分析</span>
+        <Countto class="text-20px color-#389bff font-bold" :endVal="60" />
+      </div>
+    </div>
+    <ECharts
+      id="jksb-echarts"
+      width="100%"
+      height="280px"
+      ref="echartsRef"
+      :loading="loading"
+      :fullOptions="{ options: chartOptions.setSbxxOption() }"
+    />
+  </div>
+</template>
+
+<script setup>
+  import { chartOptions } from '@/components/ECharts/optionsConfig'
+
+  const loading = ref(true)
+  const echartsRef = ref(null)
+
+  onMounted(() => {
+    setTimeout(() => {
+      loading.value = false
+    }, 1000)
+  })
+</script>
+
+<style scoped lang="scss">
+  .box-style {
+    background: url('@/assets/images/box-bg.png') no-repeat center;
+    background-size: 100% 100%;
+  }
+</style>

src/views/home/rightbox/topBox.vue

@@ -1,17 +1,5 @@
 <template>
   <div class="right-top-box">
-    <div class="flex gap-15px h-90px mb-15px">
-      <div
-        class="box-style color- flex-1 flex flex-col flex-justify-center flex-items-center gap-2px"
-      >
-        <span>已处理</span>
-        <Countto class="text-20px color-#379ED7 font-bold" :endVal="data.ycl" />
-      </div>
-      <div class="box-style flex-1 flex flex-col flex-justify-center flex-items-center gap-2px">
-        <span>未处理</span>
-        <Countto class="text-20px color-#F0BC1E font-bold" :endVal="data.wcl" />
-      </div>
-    </div>
     <div class="flex justify-between relative">
       <ul class="flex gap-15px justify-start">
         <li
@@ -47,33 +35,6 @@
       :loading="loading"
       :fullOptions="fullOptions"
     />
-    <div class="table-box w-full">
-      <div class="text-left bg-#389bff94 flex">
-        <span class="p-2 w-60px">报警</span>
-        <span class="p-2 w-80px">报警类型</span>
-        <span class="p-2 flex-1">报警时间</span>
-        <span class="p-2 w-80px">报警级别</span>
-        <span class="p-2 w-60px">处理</span>
-      </div>
-      <ScrollBox :list="data.list">
-        <div
-          :class="[
-            'text-left  text-10px hover:bg-#389bff24 flex',
-            (i + 1) % 2 == 0 ? 'bg-#ffffff24' : ''
-          ]"
-          v-for="(item, i, index) in data.list"
-          :key="index"
-        >
-          <span class="p-2 w-60px">{{ item.name }}</span>
-          <span class="p-2 w-80px">{{ item.type }}</span>
-          <span class="p-2 flex-1">{{ item.time }}</span>
-          <span class="p-2 w-80px">{{ item.level ? '告警' : '故障' }}</span>
-          <span :class="['p-2 w-60px', item.cl ? 'color-#389bff' : 'color-red']">{{
-            item.cl ? '已处理' : '未处理'
-          }}</span>
-        </div>
-      </ScrollBox>
-    </div>
   </div>
 </template>
 
@@ -82,51 +43,7 @@
   const loading = ref(true)
   const data = reactive({
     ycl: 105,
-    wcl: 2,
-    list: [
-      {
-        name: 'XY7809',
-        type: '工服',
-        time: '2022-03-01 12:00:00',
-        level: 0,
-        cl: 0
-      },
-      {
-        name: 'XY7809',
-        type: '烟雾',
-        time: '2024-03-01 12:00:00',
-        level: 1,
-        cl: 1
-      },
-      {
-        name: 'XY7809',
-        type: '工服',
-        time: '2022-03-01 12:00:00',
-        level: 0,
-        cl: 0
-      },
-      {
-        name: 'XY7809',
-        type: '烟雾',
-        time: '2024-03-01 12:00:00',
-        level: 1,
-        cl: 1
-      },
-      {
-        name: 'XY7809',
-        type: '工服',
-        time: '2022-03-01 12:00:00',
-        level: 0,
-        cl: 0
-      },
-      {
-        name: 'XY7809',
-        type: '烟雾',
-        time: '2024-03-01 12:00:00',
-        level: 1,
-        cl: 1
-      }
-    ]
+    wcl: 2
   })
   const selectedI = ref(0)
   const fullOptions = ref({ options: {} })

src/views/home/rightboxtwo/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="w-453px flex flex-col gap-15px lr-box-bg overflow-hidden absolute right-0">
-    <Box title="报警中心2" class="animate__animated animate__fadeInRight animate__faster">
+    <Box title="报警中心" class="animate__animated animate__fadeInRight animate__faster">
       <RightTopBox />
     </Box>
     <Box
-      title="报警类型TOP52"
+      title="报警类型TOP5"
       wHeader="124px"
       class="animate__animated animate__fadeInRight animate__fast"
     >