ll

liukangdong

2024-10-24 6139494798e7f91d7864fff4ed09ce9a08395ece

 screen/src/views/FireFighting.vue

@@ -54,7 +54,14 @@
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            </div>
            <div class="police_wrap">
              <div class="echart1" id="echart1"></div>
              <div class="item" v-for="(ind, i) in 4">
                <div class="head">
                  <div class="name">真实报警数</div>
                  <div class="name">{{ i }}次</div>
                </div>
                <FirePercent :color="policeColors[i]" :rate="40" />
              </div>

            </div>
          </div>
          <div class="left_box_three">
@@ -286,7 +293,7 @@
<script setup>
import { ref, onMounted } from 'vue'
import VScaleScreen from 'v-scale-screen'
import Percent from '@/components/percent.vue'
import FirePercent from '@/components/FirePercent.vue'
import dayjs from 'dayjs'

import * as echarts from 'echarts'
@@ -303,99 +310,165 @@
}, 1000)

const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
const initEnergy = () => {
  var myChart = echarts.init(document.querySelector('.energyRef'))
  // 绘制图表
  const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
  myChart.setOption({
const initEchart2 = () => {
  var myChart = echarts.init(document.querySelector('.echart2'))
  // 生成数据和日期
  function getLastSevenDays() {
    const days = []
    const today = new Date()
    for (let i = 10; i >= 0; i--) {
      days.push(`${i + 1}月`) // 格式化日期为 "X月X日"
    }
    return days
  }

  // 示例数据
  const data1 = [13, 14, 14, 14, 14, 12, 11, 23, 12, 1] // 准时
  const data2 = [1, 1, 2, 1, 1, 2, 2, 3, 2, 1, 5] // 迟到
  const data3 = [1, 0, 0, 0, 0, 0, 2, 2, 3, 1, 2] // 请假
  const data4 = [8, 5, 4, 7, 4, 5, 7, 4, 2, 1, 3] // 加班
  const option = {
    legend: {
      x: "center",
      textStyle: {
        color: "#FFFFFF", // 图例文字设为白色
        fontSize: 12
      },
      icon: 'circle',
      top: '6%',
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 20,
      data: ['告警数', '进行中', '已处理', '误报数'] // 更新图例名称
    },
    grid: {
      top: '20%',
      left: '2%',
      right: '2%',
      bottom: '4%',
      containLabel: true
      right: '0%',
      top: '18%',
      bottom: '10%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      trigger: "axis",
      axisPointer: {
        type: 'line'
        type: "shadow"
      },
      textStyle: {
        color: "rgba(255, 255, 255, 1)"
      },
      backgroundColor: "rgba(0,0,0,0.8)",
      borderColor: "rgba(219, 230, 255, 0.8)",
    },
    xAxis: {
      type: 'category',
      data: [1, 2, 3, 4, 4, 5]
      data: getLastSevenDays(), // 使用近七天日期
      axisLabel: {
        color: "#FFFFFF", // X 轴文字设为白色
        fontSize: 14,
      },
      axisLine: {
        lineStyle: {
          color: '#1E294C'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: 'kw·h',
      nameTextStyle: {
        padding: [0, 0, 4, -30]    // 四个数字分别为上右下左与原位置距离
      show: true,
      axisLabel: {
        color: "#FFFFFF", // Y 轴文字设为白色
        fontSize: 12,
      },
      axisLine: {
        lineStyle: {
          color: '#A9AEB2'
        }
      },
      axisTick: {
        lineStyle: {
          color: '#A9AEB2'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          //这里输入线条的样式
          color: 'rgba(255,255,255,0.14)',
        }
      }
          color: ["#0f1d27"],
          width: 1
        },
      },
    },
    series: [
      {
        data: [1, 2, 3, 4, 5],
        type: 'bar',
        barWidth: 10,
        name: "告警数",
        type: "bar",
        stack: "attendance",
        data: data1,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: arr[1] },
                { offset: 1, color: '#080807' }
              ]
            ),
            barBorderRadius: [10, 10, 0, 0]
          }
        }
      }
    ]
  })
          color: '#FEAF01',
        },
        label: {
          show: false,
          color: "#FFFFFF",
        },
        emphasis: {
          focus: "series",
        },
        barWidth: 6,
      },
      {
        name: "进行中", // 迟到数据
        type: "bar",
        stack: "attendance",
        data: data2,
        itemStyle: {
          color: '#28F0C4', // 迟到的颜色
        },
        label: {
          show: false,
          color: "#FFFFFF",
        },
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "已处理", // 请假数据
        type: "bar",
        stack: "attendance",
        data: data3,
        itemStyle: {
          color: '#0193FE', // 请假的颜色
        },
        label: {
          show: false,
          color: "#FFFFFF",
        },
        emphasis: {
          focus: "series",
        },
      },
      {
        name: "误报数", // 单独的加班柱子
        type: "bar",
        data: data4,
        barWidth: 6,
        itemStyle: {
          color: '#FEED01', // 高亮的紫色
        },
        emphasis: {
          focus: "series",
        },
      },
    ],
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {//执行
    myChart.resize()
  })
}
const initEchart1 = () => {
  const myChart = echarts.init(document.getElementById('echart1'))
  const option = {
    series: [

      {
        type: 'pie',
        radius: ['86%', '100%'],
        label: {
          show: false,
          position: 'center'
        },
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        color: colors,
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // 执行
    myChart.resize()
  })
}
const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4']
const initWatergage = () => {
  const myChart = echarts.init(document.getElementById('watergage'))
  var data_value = 2
@@ -762,8 +835,7 @@
}

onMounted(() => {
  // initEnergy()
  // initEchart1()
  initEchart2()
  initWatergage()
  initLiquidlevel()
})
@@ -848,13 +920,21 @@
      margin-bottom: 20px;

      .police_wrap {
        padding: 15px 20px 0;
        height: 225px;

        border: 1px solid;

        .echart1 {
          width: 100%;
          height: 100%;
        .item {
          margin-bottom: 5px;

          .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            color: #FFFFFF;
            margin-bottom: 8px;
          }
        }
      }
    }
@@ -921,12 +1001,14 @@
                  #dd4c26 50%,
                  #e43724 100%);
            }

            .num3 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
                  #e9bf43 50%,
                  #eb8131 100%);
            }

            .num4 {
              background-image: -webkit-linear-gradient(top,
                  #fff 0%,
@@ -1056,6 +1138,7 @@
            text-align: center;
            position: relative;
            left: 30px;

            .watergage {
              width: 130px;
              height: 112px;