master: Added 权限界面完善

src/components/ECharts/optionsConfig.js

@@ -1,6 +1,6 @@
 import * as echarts from 'echarts'
 import 'echarts-gl'
-import wlimg from '../../assets/images/wl.png'
+import e1 from '@/assets/images/e1.png'
 
 export const chartOptions = {
   setOption2() {
@@ -1015,202 +1015,74 @@ export const chartOptions = {
     }
     return option
   },
-  setBjzxOption(data, type = 0) {
-    const color = ['#379ED7', '#F0BC1E']
-    const legendData = ['已处理', '未处理']
-    const series = []
-    const xPoint = []
-    switch (type) {
-      case 0:
-        for (let i = 0; i < 10; i++) {
-          let currentTime = new Date().getTime() - 3600 * 1000 * i
-          let time = new Date(currentTime).toLocaleTimeString()
-          xPoint.push(time)
-        }
-        for (let i = 0; i < legendData.length; i++) {
-          const curData = []
-          for (let j = 0; j < 10; j++) {
-            curData.push(Math.floor(Math.random() * 100))
-          }
-
-          let obj = {
-            name: legendData[i],
-            type: 'line',
-            symbol: 'circle',
-            symbolSize: 6,
-            itemStyle: {
-              color: color[i % color.length],
-              borderWidth: 6,
-              borderColor: 'rgba(51, 181, 255, .2)'
-            },
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: color[i % color.length] // 线条颜色
-              }
-            },
-            label: {
-              show: false,
-              color: 'rgba(255,255,255, 0.6)'
-            },
-            data: curData
-          }
-          series.push(obj)
-        }
-        break
-      case 1:
-        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)
-        }
-        for (let i = 0; i < legendData.length; i++) {
-          const curData = []
-          for (let j = 0; j < 7; j++) {
-            curData.push(Math.floor(Math.random() * 100))
+  setAqscOption(data) {
+    var nameArray = data.map((item) => {
+      return item.name
+    })
+    const seriesData = []
+    const color = ['#FF2B66', '#FF8033', '#febe13']
+    for (var i = 0; i < data.length; i++) {
+      seriesData.push(
+        {
+          value: data[i].value,
+          name: data[i].name,
+          label: {
+            color: '#fac858'
+          },
+          itemStyle: {
+            normal: {
+              borderWidth: 10,
+              shadowBlur: 20,
+              borderColor: color[i],
+              shadowColor: color[i]
+            }
           }
-
-          let obj = {
-            name: legendData[i],
-            type: 'line',
-            symbol: 'circle',
-            symbolSize: 6,
-            itemStyle: {
-              color: color[i % color.length],
-              borderWidth: 6,
-              borderColor: 'rgba(51, 181, 255, .2)'
-            },
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: color[i % color.length] // 线条颜色
-              }
-            },
-            label: {
-              show: false,
-              color: 'rgba(255,255,255, 0.6)'
-            },
-            data: curData
+        },
+        {
+          value: 8,
+          name: '',
+          itemStyle: {
+            normal: {
+              label: {
+                show: false
+              },
+              labelLine: {
+                show: false
+              },
+              color: 'rgba(0, 0, 0, 0)',
+              borderColor: 'rgba(0, 0, 0, 0)',
+              borderWidth: 0
+            }
           }
-          series.push(obj)
         }
-        break
-      case 2:
-        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)
-        }
-        for (let i = 0; i < legendData.length; i++) {
-          const curData = []
-          for (let j = 0; j < 30; j++) {
-            curData.push(Math.floor(Math.random() * 100))
-          }
-
-          let obj = {
-            name: legendData[i],
-            type: 'line',
-            symbol: 'circle',
-            symbolSize: 6,
-            itemStyle: {
-              color: color[i % color.length],
-              borderWidth: 6,
-              borderColor: 'rgba(51, 181, 255, .2)'
-            },
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: color[i % color.length] // 线条颜色
-              }
-            },
+      )
+    }
+    var seriesOption = [
+      {
+        name: '',
+        type: 'pie',
+        clockWise: false,
+        radius: [70, 80],
+        width: 280,
+        height: 252,
+        hoverAnimation: false,
+        center: ['50%', '50%'],
+        left: 'center',
+        top: 'center',
+        itemStyle: {
+          normal: {
             label: {
-              show: false,
-              color: 'rgba(255,255,255, 0.6)'
-            },
-            data: curData
+              show: false
+            }
           }
-          series.push(obj)
-        }
-        break
-    }
+        },
+        data: seriesData
+      }
+    ]
 
     const option = {
-      grid: {
-        top: '15%',
-        bottom: '15%',
-        left: '10%',
-        right: '5%'
-      },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        axisLabel: {
-          // X轴刻度标签
-          color: 'rgba(255, 255, 255, 0.6)',
-          fontSize: 12
-        },
-        axisLine: {
-          // X轴线
-          show: true,
-          lineStyle: {
-            color: 'rgba(255, 255, 255, .4)'
-          }
-        },
-        splitLine: {
-          // 网格线
-          show: true,
-          lineStyle: {
-            type: 'dashed',
-            width: 1,
-            color: 'rgba(255, 255, 255, .2)'
-          }
-        },
-        axisTick: {
-          show: false
-        },
-        data: xPoint
-      },
-      yAxis: {
-        type: 'value',
-        axisLabel: {
-          color: 'rgba(255, 255, 255, .6)',
-          fontSize: 12
-        },
-        splitLine: {
-          // 网格线
-          show: true,
-          lineStyle: {
-            type: 'dashed',
-            width: 1,
-            color: 'rgba(255, 255, 255, .2)'
-          }
-        },
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        }
-      },
-      legend: {
-        show: false,
-        data: legendData,
-        left: 'center',
-        top: 0,
-        itemHeight: 8,
-        textStyle: {
-          fontSize: 14,
-          color: '#fff'
-        },
-        itemStyle: {
-          borderWidth: 6,
-          borderColor: 'rgba(51, 181, 255, .2)'
-        }
-      },
+      color: color,
       tooltip: {
-        trigger: 'axis',
         backgroundColor: 'rgba(33, 85, 154, .6)',
         borderWidth: 1,
         borderColor: {
@@ -1242,23 +1114,111 @@ export const chartOptions = {
           }
         },
         extraCssText: 'box-shadow: 2px 2px 16px 1px rgba(0, 39, 102, 0.16)',
-        formatter: function (params) {
-          let content = `<div style='font-size: 14px; color: #fff;'>${params[0].name}</div>`
-          if (Array.isArray(params)) {
-            for (let i = 0; i < params.length; i++) {
-              content += `
-                     <div style='display: flex; align-items: center; padding: 4px; background: #21559A; margin-top: 4px; color: #fff;'>
-                       <div style='width: 10px; height: 10px; background: ${params[i].color}; margin-right: 8px;'></div>
-                       <div style='font-size: 12px; margin-right: 32px;'>${params[i].seriesName}</div>
-                       <div style='font-size: 14px;'>${params[i].value}</div>
-                     </div>
-                   `
+        formatter: function (param) {
+          let html = `<div style='display: flex; align-items: center; padding: 4px; background: #21559A; margin-top: 4px; color: #fff;'>
+                       <div style='width: 10px; height: 10px; background: ${param.color}; margin-right: 8px;'></div>
+                       <div style='font-size: 12px; margin-right: 32px;'>${param.name}级</div>
+                       <div style='font-size: 14px;'>${param.value}个</div>
+                     </div>`
+
+          return html
+          // param.marker + ' ' + param.name + ' ：' + `<span style="color:'#fff'">${param.value}%</span>`
+        }
+      },
+      graphic: {
+        elements: [
+          {
+            type: 'image',
+            style: {
+              // image: rightPieCenter,
+              width: 46,
+              height: 60,
+              zIndex: 2,
+              top: 'center'
+            },
+            left: 'center',
+            top: 'center'
+          },
+          {
+            type: 'image',
+            style: {
+              image: e1,
+              width: 100,
+              height: 100,
+              zIndex: 1,
+              top: 'center'
+            },
+            left: 'center',
+            top: 'center',
+            originX: 50,
+            originY: 50,
+            keyframeAnimation: [
+              {
+                duration: 200000,
+                loop: true,
+                keyframes: [
+                  {
+                    percent: 0,
+                    rotation: 0
+                  },
+                  {
+                    percent: 1,
+                    rotation: -360
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      legend: [
+        {
+          // textStyle: { color: '#fff', fontSize: 20 },
+          bottom: '-2%',
+          textStyle: {
+            color: 'auto',
+            rich: {
+              name: {
+                color: 'auto',
+                fontSize: 12
+              },
+              percent: {
+                color: 'auto',
+                fontSize: 12
+              }
+            }
+          },
+
+          data: nameArray,
+          icon: 'diamond',
+          itemGap: 8,
+          itemHeight: 8,
+          itemWidth: 10,
+          formatter: function (name) {
+            let total = 0
+            let target
+            for (var i = 0, l = data.length; i < l; i++) {
+              if (data[i].name === name) {
+                target = data[i].value
+              }
             }
+            let html = `  {name|${name.split('').length < 10 ? name : name.split('').slice(0, 10).join('') + '...'}：}{percent|${target}个}`
+            // let html = `  {name|${name.split('').length < 10 ? name : name.split('').slice(0, 10).join('') + '...'}}`
+            var arr = [
+              // ' ' +
+              //     `<span style="color:'#A6B7C2'">${name}：</span>` +
+              //     (target / total).toFixed(2) * 100 +
+              //     '%',
+              html
+            ]
+            return arr.join('\n')
           }
-          return content
         }
+      ],
+      toolbox: {
+        show: false
       },
-      series
+      series: seriesOption
     }
     return option
   },
@@ -2020,7 +1980,6 @@ export const chartOptions = {
             return toolTiphtml
           }
         },
-        backgroundColor: '#fff',
         borderColor: '#333',
         padding: [5, 10],
         textStyle: {
@@ -2039,6 +1998,15 @@ export const chartOptions = {
           aspectScale: 1,
           animation: true,
           animationDurationUpdate: 0,
+          selectedMode: 'single',
+          select: {
+            label: {
+              color: '#fff'
+            },
+            itemStyle: {
+              areaColor: 'rgba(58,149,253,0.75)'
+            }
+          },
           label: {
             show: false,
             textStyle: {
@@ -2077,34 +2045,8 @@ export const chartOptions = {
               shadowOffsetY: 10,
               shadowBlur: 120
             },
-            // normal: {
-            //   areaColor: {
-            //     type: 'linear',
-            //     x: 0,
-            //     y: 0,
-            //     x2: 0,
-            //     y2: 1200,
-            //     colorStops: [
-            //       {
-            //         offset: 0,
-            //         color: 'rgba(3,27,78,0.75)' // 0% 处的颜色
-            //       },
-            //       {
-            //         offset: 1,
-            //         color: 'rgba(58,149,253,0.75)' // 50% 处的颜色
-            //       }
-            //     ],
-            //     global: true // 缺省为 false
-            //   },
-            //   borderColor: '#c0f3fb',
-            //   borderWidth: 1,
-            //   shadowBlur: 2,
-            //   shadowColor: '#0e2f50',
-            //   shadowOffsetX: 10,
-            //   shadowOffsetY: 15
-            // },
             emphasis: {
-              areaColor: 'rgba(0,254,233,0.6)'
+              areaColor: 'rgba(58,149,253,0.75)'
               // borderWidth: 0
             }
           }

src/views/home/leftbox/bottomBox.vue

@@ -11,11 +11,12 @@
       <ScrollBox :list="list">
         <div
           :class="[
-            'text-left  text-10px hover:bg-#389bff24 flex',
+            'text-left  text-12px hover:bg-#389bff24 flex cursor-pointer',
             (i + 1) % 2 == 0 ? 'bg-#ffffff24' : ''
           ]"
           v-for="(item, i, index) in list"
           :key="index"
+          @click="handleClick(item)"
         >
           <span class="p-2 w-60px">{{ item.name }}</span>
           <span class="p-2 w-80px">{{ item.type }}</span>
@@ -75,8 +76,10 @@
       cl: 1
     }
   ])
+  const handleClick = (item) => {
+    console.log(item)
+  }
   onMounted(() => {})
 </script>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>

src/views/home/leftboxtwo/index.vue

@@ -1,9 +1,13 @@
 <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">

src/views/home/leftboxtwo/middleBox.vue

@@ -12,7 +12,14 @@
         <Countto class="text-20px color-#389bff font-bold" :endVal="60" />
       </div>
     </div>
-    <swiper
+    <ECharts
+      id="sbxx-echarts3"
+      width="100%"
+      height="280px"
+      :loading="loading"
+      :fullOptions="{ options: chartOptions.setSbxxOption() }"
+    />
+    <!-- <swiper
       :spaceBetween="30"
       :centeredSlides="true"
       :autoplay="{
@@ -26,15 +33,7 @@
       :modules="modules"
       class="mySwiper"
     >
-      <swiper-slide>
-        <ECharts
-          id="sbxx-echarts3"
-          width="100%"
-          height="280px"
-          :loading="loading"
-          :fullOptions="{ options: chartOptions.setSbxxOption() }"
-        />
-      </swiper-slide>
+      <swiper-slide> </swiper-slide>
       <swiper-slide>
         <ECharts
           id="sbxx-echarts4"
@@ -45,7 +44,7 @@
           :fullOptions="{ options: chartOptions.setSbxxOption2() }"
         />
       </swiper-slide>
-    </swiper>
+    </swiper> -->
   </div>
 </template>
 

src/views/home/leftboxtwo/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-echarts2"
+      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/rightbox/topBox.vue

@@ -1,81 +1,97 @@
 <template>
   <div class="right-top-box">
-    <div class="flex justify-between relative">
-      <ul class="flex gap-15px justify-start">
-        <li
-          :class="[
-            'w-50px h-30px line-height-25px cursor-pointer text-center b-solid b-1px b-color-#389bff hover:b-color-#FAC858',
-            i === typeSelectedI ? 'color-#FAC858 b-color-#FAC858' : ''
-          ]"
-          v-for="(item, i) in typeOptions"
-          :key="item.code"
-          @click="typeClick(i)"
-        >
-          <span class="text-12px">{{ item.name }}</span>
-        </li>
-      </ul>
-      <ul class="flex gap-15px">
-        <li
-          :class="[
-            'w-50px cursor-pointer text-center b-solid b-1px b-color-#389bff hover:b-color-#FAC858',
-            i === selectedI ? 'color-#FAC858 b-color-#FAC858' : ''
-          ]"
-          v-for="(item, i) in options"
-          :key="item.code"
-          @click="dayClick(i)"
-        >
-          <span class="text-12px">{{ item.name }}</span>
-        </li>
-      </ul>
+    <div class="flex gap-2 justify-between relative">
+      <ScrollPanel
+        style="width: 40%; height: 230px"
+        :dt="{
+          bar: {
+            background: 'rgba( 44, 95,156, 0.2)'
+          }
+        }"
+      >
+        <ul class="flex flex-col gap-15px justify-start">
+          <li
+            :class="[
+              'rtb-item h-40px line-height-40px cursor-pointer text-center',
+              i === typeSelectedI ? 'active-style b-color-#FAC858' : ''
+            ]"
+            v-for="(item, i) in typeOptions"
+            :key="item.code"
+            @click="typeClick(i)"
+          >
+            <span class="text-12px">{{ item.name }}</span>
+          </li>
+        </ul>
+      </ScrollPanel>
+      <div class="flex-1">
+        <ECharts
+          id="bjzx-echarts"
+          width="100%"
+          height="230px"
+          :loading="loading"
+          :fullOptions="fullOptions"
+        />
+      </div>
     </div>
-    <ECharts
-      id="bjzx-echarts"
-      width="100%"
-      height="200px"
-      :loading="loading"
-      :fullOptions="fullOptions"
-    />
   </div>
 </template>
 
 <script setup>
   import { chartOptions } from '@/components/ECharts/optionsConfig'
   const loading = ref(true)
-  const data = reactive({
-    ycl: 105,
-    wcl: 2
-  })
-  const selectedI = ref(0)
   const fullOptions = ref({ options: {} })
 
-  const options = ref([
-    { name: '当日', code: 0 },
-    { name: '近一周', code: 1 },
-    { name: '近一月', code: 2 }
-  ])
-  const dayClick = (v) => {
-    selectedI.value = v
-    fullOptions.value.options = chartOptions.setBjzxOption([], selectedI.value)
-  }
   const typeSelectedI = ref(0)
   const typeOptions = ref([
-    { name: '趋势', code: 0 },
-    { name: '类型', code: 1 }
+    { name: '全院', code: 0 },
+    { name: 'A院', code: 0 },
+    { name: 'B院', code: 0 },
+    { name: 'C院', code: 0 },
+    { name: 'D院', code: 0 },
+    { name: 'E院', code: 0 },
+    { name: 'F院', code: 1 }
   ])
+
+  const data = [
+    {
+      name: 'I',
+      value: 30
+    },
+    {
+      name: 'II',
+      value: 30
+    },
+    {
+      name: 'III',
+      value: 30
+    }
+  ]
+
   const typeClick = (v) => {
     typeSelectedI.value = v
   }
   onMounted(() => {
     setTimeout(() => {
       loading.value = false
-      fullOptions.value.options = chartOptions.setBjzxOption([], selectedI.value)
+      const options = chartOptions.setAqscOption(data)
+      fullOptions.value.options = options
     }, 1000)
   })
 </script>
 
 <style scoped lang="scss">
-  .box-style {
-    background: url('@/assets/images/box-bg.png') no-repeat center;
+  .rtb-item {
+    background: url('@/assets/images/no-bg1.png') no-repeat;
+    background-size: 100% 100%;
+    color: #537493;
+  }
+  .active-style {
+    background: url('@/assets/images/yes-bg1.png') no-repeat;
     background-size: 100% 100%;
+    color: #fff;
+    text-shadow:
+      0 0 5px #4365e2,
+      0 0 10px #4365e2,
+      0 0 15px #4365e2;
   }
 </style>

src/views/home/rightboxtwo/bottomBox.vue

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

src/views/home/rightboxtwo/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/rightboxtwo/middleBox.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="middle-box">
+    <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="list">
+        <div
+          :class="[
+            'text-left  text-12px hover:bg-#389bff24 flex cursor-pointer',
+            (i + 1) % 2 == 0 ? 'bg-#ffffff24' : ''
+          ]"
+          v-for="(item, i, index) in list"
+          :key="index"
+          @click="handleClick(item)"
+        >
+          <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>
+
+<script setup>
+  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 handleClick = (item) => {
+    console.log(item)
+  }
+  onMounted(() => {})
+</script>
+
+<style scoped lang="scss"></style>

src/views/home/rightboxtwo/topBox.vue

@@ -1,78 +1,37 @@
 <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"
+    <div class="flex gap-2 justify-between relative">
+      <ScrollPanel
+        style="width: 40%; height: 230px"
+        :dt="{
+          bar: {
+            background: 'rgba( 44, 95,156, 0.2)'
+          }
+        }"
       >
-        <span>已处理</span>
-        <Countto class="text-20px color-#379ED7 font-bold" :endVal="data.ycl" />
+        <ul class="flex flex-col gap-15px justify-start">
+          <li
+            :class="[
+              'rtb-item h-40px line-height-40px cursor-pointer text-center',
+              i === typeSelectedI ? 'active-style b-color-#FAC858' : ''
+            ]"
+            v-for="(item, i) in typeOptions"
+            :key="item.code"
+            @click="typeClick(i)"
+          >
+            <span class="text-12px">{{ item.name }}</span>
+          </li>
+        </ul>
+      </ScrollPanel>
+      <div class="flex-1">
+        <ECharts
+          id="bjzx-echarts2"
+          width="100%"
+          height="230px"
+          :loading="loading"
+          :fullOptions="fullOptions"
+        />
       </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
-          :class="[
-            'w-50px h-30px line-height-25px cursor-pointer text-center b-solid b-1px b-color-#389bff hover:b-color-#FAC858',
-            i === typeSelectedI ? 'color-#FAC858 b-color-#FAC858' : ''
-          ]"
-          v-for="(item, i) in typeOptions"
-          :key="item.code"
-          @click="typeClick(i)"
-        >
-          <span class="text-12px">{{ item.name }}</span>
-        </li>
-      </ul>
-      <ul class="flex gap-15px">
-        <li
-          :class="[
-            'w-50px cursor-pointer text-center b-solid b-1px b-color-#389bff hover:b-color-#FAC858',
-            i === selectedI ? 'color-#FAC858 b-color-#FAC858' : ''
-          ]"
-          v-for="(item, i) in options"
-          :key="item.code"
-          @click="dayClick(i)"
-        >
-          <span class="text-12px">{{ item.name }}</span>
-        </li>
-      </ul>
-    </div>
-    <ECharts
-      id="bjzx-echarts2"
-      width="100%"
-      height="200px"
-      :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>
@@ -80,85 +39,59 @@
 <script setup>
   import { chartOptions } from '@/components/ECharts/optionsConfig'
   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
-      }
-    ]
-  })
-  const selectedI = ref(0)
   const fullOptions = ref({ options: {} })
 
-  const options = ref([
-    { name: '当日', code: 0 },
-    { name: '近一周', code: 1 },
-    { name: '近一月', code: 2 }
-  ])
-  const dayClick = (v) => {
-    selectedI.value = v
-    fullOptions.value.options = chartOptions.setBjzxOption([], selectedI.value)
-  }
   const typeSelectedI = ref(0)
   const typeOptions = ref([
-    { name: '趋势', code: 0 },
-    { name: '类型', code: 1 }
+    { name: '全院', code: 0 },
+    { name: 'A院', code: 0 },
+    { name: 'B院', code: 0 },
+    { name: 'C院', code: 0 },
+    { name: 'D院', code: 0 },
+    { name: 'E院', code: 0 },
+    { name: 'F院', code: 1 }
   ])
+
+  const data = [
+    {
+      name: 'I',
+      value: 30
+    },
+    {
+      name: 'II',
+      value: 30
+    },
+    {
+      name: 'III',
+      value: 30
+    }
+  ]
+
   const typeClick = (v) => {
     typeSelectedI.value = v
   }
   onMounted(() => {
     setTimeout(() => {
       loading.value = false
-      fullOptions.value.options = chartOptions.setBjzxOption([], selectedI.value)
+      const options = chartOptions.setAqscOption(data)
+      fullOptions.value.options = options
     }, 1000)
   })
 </script>
 
 <style scoped lang="scss">
-  .box-style {
-    background: url('@/assets/images/box-bg.png') no-repeat center;
+  .rtb-item {
+    background: url('@/assets/images/no-bg1.png') no-repeat;
+    background-size: 100% 100%;
+    color: #537493;
+  }
+  .active-style {
+    background: url('@/assets/images/yes-bg1.png') no-repeat;
     background-size: 100% 100%;
+    color: #fff;
+    text-shadow:
+      0 0 5px #4365e2,
+      0 0 10px #4365e2,
+      0 0 15px #4365e2;
   }
 </style>