From e84c1b5b3ac8d898529a0302810fe20a4667e30c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Fri, 20 Jun 2025 17:58:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/.env.development                     |    2 +-
 ruoyi-ui/.env.production                      |    2 +-
 ruoyi-ui/.env.staging                         |    2 +-
 ruoyi-ui/public/index.html                    |    2 +
 ruoyi-ui/src/components/BoardTopNav/index.vue |    4 +-
 ruoyi-ui/src/lang/zh_CN.js                    |    2 +-
 ruoyi-ui/src/permission.js                    |    2 +-
 ruoyi-ui/src/router/index.js                  |    2 +-
 ruoyi-ui/src/views/board/jqz.vue              | 1588 +++++++++++++++++
 ruoyi-ui/src/views/board/smartScene/index.vue |    2 +-
 ruoyi-ui/src/views/register.vue               |    2 +-
 ruoyi-ui/src/views/system/layoutEdit.vue      |    3 +-
 12 files changed, 1602 insertions(+), 11 deletions(-)
 create mode 100644 ruoyi-ui/src/views/board/jqz.vue

diff --git a/ruoyi-ui/.env.development b/ruoyi-ui/.env.development
index be88b4d..51b7e15 100644
--- a/ruoyi-ui/.env.development
+++ b/ruoyi-ui/.env.development
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 智慧物联监控平台
+VUE_APP_TITLE = 海威物联官网
 
 # 开发环境配置
 ENV = 'development'
diff --git a/ruoyi-ui/.env.production b/ruoyi-ui/.env.production
index 37d1c63..fe42e55 100644
--- a/ruoyi-ui/.env.production
+++ b/ruoyi-ui/.env.production
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 智慧物联监控平台
+VUE_APP_TITLE = 海威物联官网
 
 # 生产环境配置
 ENV = 'production'
diff --git a/ruoyi-ui/.env.staging b/ruoyi-ui/.env.staging
index d7f6699..c66d641 100644
--- a/ruoyi-ui/.env.staging
+++ b/ruoyi-ui/.env.staging
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 智慧物联监控平台
+VUE_APP_TITLE = 海威物联官网
 
 NODE_ENV = production
 
diff --git a/ruoyi-ui/public/index.html b/ruoyi-ui/public/index.html
index 681de41..98c5296 100644
--- a/ruoyi-ui/public/index.html
+++ b/ruoyi-ui/public/index.html
@@ -6,6 +6,8 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+      <script src="./highcharts.js"></script>
+      <script src="./highcharts-3d.js"></script>
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>
diff --git a/ruoyi-ui/src/components/BoardTopNav/index.vue b/ruoyi-ui/src/components/BoardTopNav/index.vue
index db6e49c..3028f23 100644
--- a/ruoyi-ui/src/components/BoardTopNav/index.vue
+++ b/ruoyi-ui/src/components/BoardTopNav/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="title">{{ tenantData.tenantBoardTopic || '智慧物联监控平台' }}</div>
+    <div class="title">{{ tenantData.tenantBoardTopic || '海威物联官网' }}</div>
     <div>
       <div v-if="isIndex" :class="`menu ${nowMenu==='1'? 'menuClick' :''}`" style="left: 2%"
            @click="toLink('index','1')">
@@ -231,7 +231,7 @@ export default {
 }
 
 .menuClick {
-  background-image: url("~@/assets/board/common/subheadClick.png");
+  //background-image: url("~@/assets/board/common/subheadClick.png");
   color: #f3f3f3;
 }
 
diff --git a/ruoyi-ui/src/lang/zh_CN.js b/ruoyi-ui/src/lang/zh_CN.js
index 1a17abc..75fdd5f 100644
--- a/ruoyi-ui/src/lang/zh_CN.js
+++ b/ruoyi-ui/src/lang/zh_CN.js
@@ -1,7 +1,7 @@
 // zh.js
 export default {
   login: {
-    title: '智慧物联监控平台',
+    title: '海威物联官网',
     logIn: '登录',
     username: '账号',
     password: '密码'
diff --git a/ruoyi-ui/src/permission.js b/ruoyi-ui/src/permission.js
index 609d215..7219670 100644
--- a/ruoyi-ui/src/permission.js
+++ b/ruoyi-ui/src/permission.js
@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register']
+const whiteList = ['/login', '/jqz', '/register']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index eea9107..3828ca3 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -31,7 +31,7 @@ import BoardIndex from '@/layout/boardIndex1.vue'
  */
 
 // 公共路由
-export const constantRoutes = [
+export const constantRoutes = [{path: '/jqz', component: () => import('@/views/board/jqz.vue')},
   {path: '/sceneView', component: () => import('@/views/sceneView/index.vue')},
   {
     path: '/map',
diff --git a/ruoyi-ui/src/views/board/jqz.vue b/ruoyi-ui/src/views/board/jqz.vue
new file mode 100644
index 0000000..bf96285
--- /dev/null
+++ b/ruoyi-ui/src/views/board/jqz.vue
@@ -0,0 +1,1588 @@
+<template>
+  <div class="body">
+    <!--    <div class="img"></div>-->
+
+    <!--看板标题-->
+    <div class="title">
+      <span id="title">能 源 示 范 区 管 理 系 统</span>
+    </div>
+
+    <!--看板時間-天气情况-->
+    <div>
+      <div class="title-right timeInfo" id="timeInfo">{{ date }}</div>
+      <div class="title-right weatherInfo" id="weatherInfo"></div>
+    </div>
+
+    <!--设备报警-->
+    <div class="equipmentAlarm" id="equipmentAlarm"></div>
+
+    <!--监控数据-->
+    <div class="monitoringData" id="monitoringData" v-html="monitoringData">
+    </div>
+
+    <!--氢量-->
+    <div class="hydrogenNumber" id="hydrogenNumber" v-html="hydrogenNumber">
+    </div>
+
+    <!--故障率统计-->
+    <div>
+      <div class="failureRate" id="failureRate"></div>
+    </div>
+
+    <!--能耗统计-->
+    <div class="totalEnergyConsumption">站内总能耗：34,396kg</div>
+    <div class="energyConsumptionStatistics" id="energyConsumptionStatistics"></div>
+
+    <!--设备能耗统计-->
+    <div class="equipmentEnergyConsumptionStatistics" id="equipmentEnergyConsumptionStatistics"></div>
+
+    <!--加氢/加油/充电量统计-->
+    <div class="chargeStatistics" id="chargeStatistics"></div>
+    <div class="chargeStatisticsData" id="chargeStatisticsData" v-html="chargeStatisticsData"></div>
+
+    <!--加氢/加油/充电量统计数据-->
+    <div class="dataStatistics" id="dataStatistics">
+    </div>
+
+    <!--加氢/加油/充电车次与车型统计-->
+    <div class="vehicleNumberAndModelStatistics" id="vehicleNumberAndModelStatistics"></div>
+
+    <!--报警查询-->
+    <div class="alarmEnquiriesScrollTable">
+      <div class="alarmEnquiries" id="alarmEnquiries">
+        <div style="display: inline-block;width: 100%;height: 100% ">
+          <div style="background-color: #094170">
+            <div class="scrollTable" style="font-weight: bold;" :style="`width:25%`">
+              设备名称
+            </div>
+            <div class="scrollTable" style="font-weight: bold;" :style="`width:25%`">
+              参数名称
+            </div>
+            <div class="scrollTable" style="font-weight: bold;" :style="`width:25%`">
+              当前值
+            </div>
+            <div class="scrollTable" style="font-weight: bold;" :style="`width:25%`">
+              时间
+            </div>
+          </div>
+          <vue-seamless-scroll
+              :class-option="chartTableOption"
+              :data="tableData"
+              class="case-item"
+              style="height: 84%;overflow: hidden;"
+          >
+            <div
+                v-for="(item, index) in tableData"
+                :key="index"
+                :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '
+            >
+              <div
+                  class="scrollTable" :style="`width:25%`">
+                {{ item.a }}
+              </div>
+              <div
+                  class="scrollTable" :style="`width:25%`">
+                {{ item.b }}
+              </div>
+              <div
+                  class="scrollTable" :style="`width:25%`">
+                {{ item.c }}
+              </div>
+              <div
+                  class="scrollTable" :style="`width:25%`">
+                {{ item.d }}
+              </div>
+            </div>
+          </vue-seamless-scroll>
+        </div>
+      </div>
+    </div>
+
+    <!--当值人员及交接班信息-->
+    <div class="dutyInfo" id="dutyInfo">
+
+      <div v-for="i in 3"
+           style="font-weight: 300;width: calc(88% - 2px);height: calc(42% - 4px);min-height: 80px;margin-left: 3%;border: 1px solid #09C2DA;border-radius: 5px;padding: 0.25vw 0.75vw">
+        <img :src="head" alt="" style="height: 100%;max-width: 27%;">
+        <!--        <img src="../../../img/head.png" alt="" style="height: 100%;max-width: 27%;">-->
+        <div style="width: 69%;float: right;margin-right:4%;height:80%;padding: 2% 0;">
+          <p style="margin: 0;color: #F7F7FC;font-size: 80%;width: 100%;height: 33%;display: inline-block">
+            <span>姓名：</span><span>张三</span></p>
+          <p style="margin: 0;color: #F7F7FC;font-size: 80%;width: 100%;height: 33%;display: inline-block">
+            <span>职务：</span><span>**站长</span></p>
+          <p style="margin: 0;color: #F7F7FC;font-size: 80%;width: 100%;height: 33%;display: flex;justify-content: space-between;align-content: space-around;">
+            <span><span>手机号：</span><span>  12345678910 </span></span>
+          </p>
+        </div>
+        <div
+            style="white-space:nowrap;top: -105%;right: -75%;width: 4vw;text-align: center;position: relative;padding: 4px 1vw;background: #0FEEF3;border-radius: 6px;color: #08116A;min-width: 24px;">
+          <span>站长</span>
+        </div>
+      </div>
+    </div>
+
+    <!--能效比-->
+    <div class="EER" id="EER"></div>
+    <div class="EERData" id="EERData" v-html="EERData"></div>
+
+    <!--故障类型统计-->
+    <div class="annulus3D" id="annulus3D"></div>
+
+  </div>
+</template>
+<script>
+import vueSeamlessScroll from "vue-seamless-scroll";
+
+import * as echarts from 'echarts';
+import head from '@/assets/images/head.png'
+
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+
+const verticalBarDiagram = function (data, id) {
+  let charts = echarts.init(id);
+  if (!data) {
+    data = {
+      xData: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "01-07"],
+      yDataOne: [320, 435, 490, 340, 320, 270, 360],
+      yDataTwo: [490, 490, 490, 490, 490, 490, 490],
+      yDataName: '故障率',
+    }
+  }
+
+  let option = {
+    backgroundColor: "rgba(0, 0, 0, 0)",
+    tooltip: {},
+    grid: {top: "20%", left: "10%", right: "3%", bottom: "20%"},
+    // xAxis
+    xAxis: {
+      axisTick: {show: true},
+      axisLine: {lineStyle: {color: "rgba(255,255,255, .2)"}},
+      axisLabel: {
+        textStyle: {fontSize: 12, color: "#fff"},
+        margin: 14,
+      },
+      data: data.xData,
+    },
+
+    // yAxis
+    yAxis: [
+      {
+        splitLine: {lineStyle: {color: "rgba(255,255,255, .05)"}},
+        axisLine: {show: false},
+        axisLabel: {textStyle: {fontSize: 16, color: "#fff"}},
+      },
+    ],
+
+    // series
+    series: [
+      {
+        z: 3,
+        name: "",
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.yDataTwo,
+        symbol: "diamond",
+        symbolOffset: [0, "-50%"],
+        symbolSize: [1.5 * vw, vw],
+        itemStyle: {
+          borderColor: "#083181",
+          borderWidth: 2,
+          color: "#083181",
+        },
+      },
+      {
+        z: 1,
+        type: "bar",
+        name: "",
+        barGap: "-100%",
+        barWidth: 1.5 * vw,
+        data: data.yDataTwo,
+        itemStyle: {
+          borderColor: "#083181",
+          borderWidth: 1,
+          color: '#083181',
+        },
+      },
+      {
+        z: 2,
+        name: "",
+        type: "pictorialBar",
+        data: [1, 1, 1, 1, 1, 1, 1, 1],
+        symbol: "diamond",
+        symbolOffset: [0, "50%"],
+        symbolSize: [1.5 * vw, vw],
+        itemStyle: {
+          color: '#FC9402',
+        },
+      },
+      {
+        z: 3,
+        name: "",
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.yDataOne,
+        symbol: "diamond",
+        symbolOffset: [0, "-50%"],
+        symbolSize: [1.5 * vw, vw],
+        itemStyle: {
+          borderColor: "#FE8F09",
+          borderWidth: 2,
+          color: "#FE8F09",
+        },
+      },
+      {
+        z: 1,
+        stack: "总量",
+        type: "bar",
+        name: data.yDataName,
+        barWidth: 1.5 * vw,
+        // barGap: '-100%',
+        data: data.yDataOne,
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            x2: 0,
+            y: 0,
+            y2: 1,
+            colorStops: [
+              {offset: 0, color: "#FC2B10"},
+              {offset: 1, color: "#FD9603"},
+            ],
+          },
+        },
+      },
+    ],
+  };
+
+  charts.setOption(option);
+
+}
+
+const gridHorizontalBasisBarChart = function (data, id) {
+  let charts = echarts.init(id);
+
+  let category = [
+    {
+      name: "1",
+      value: 300,
+      color: '#65F210'
+    },
+    {
+      name: "2",
+      value: 770,
+      color: '#EFFC21'
+    },
+    {
+      name: "3",
+      value: 810,
+      color: '#23A6FC'
+    },
+    {
+      name: "4",
+      value: 480,
+      color: '#F3550E'
+    },
+  ]; // 类别
+  if (!data) {
+    data = [];
+    category.forEach((value) => {
+      data.push(value.value);
+    });
+  }
+  let option = {
+    backgroundColor: "rgba(0,0,0,0)",
+    xAxis: {
+      splitLine: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    grid: {
+      left: '20%',
+      top: '0%', // 设置条形图的边距
+      right: '15%',
+      bottom: '1%',
+    },
+    yAxis: [
+      {
+        type: "category",
+        inverse: false,
+        data: ["设备4#", "设备3#", "设备2#", '设备1#'],
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          verticalAlign: "bottom",
+          align: "left",
+          padding: [0, 0, 0, -60],
+          textStyle: {
+            fontSize: 14,
+            color: "white",
+          },
+          formatter(value, index) {
+            return value;
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        // 30 count bar
+        type: "pictorialBar",
+        itemStyle: {
+          normal: {
+            color: "#07314a",
+          },
+        },
+        symbolRepeat: "fixed",
+        symbolMargin: 2,
+        symbol: "roundRect",
+        symbolClip: true,
+        symbolSize: [5, 18],
+        symbolPosition: "start",
+        symbolOffset: [3, -4],
+        symbolBoundingData: 1000,
+        data: [1000, 1000, 1000, 1000],
+        z: 2,
+        animationEasing: "elasticOut",
+      },
+
+      {
+        // current count bar
+        type: "pictorialBar",
+        itemStyle: {
+          normal: {
+            color: function (val) {
+              return category[val.dataIndex].color
+            },
+          },
+        },
+        symbolRepeat: "fixed",
+        symbolMargin: 2,
+        symbol: "roundRect",
+        symbolClip: true,
+        symbolSize: [5, 18],
+        symbolPosition: "start",
+        symbolOffset: [3, -4],
+        symbolBoundingData: 1000,
+        data: data,
+        z: 2,
+        animationEasing: "elasticOut",
+      },
+
+      {
+        // label
+        type: "pictorialBar",
+        symbolBoundingData: 1000,
+        itemStyle: {
+          normal: {
+            color: "none",
+          },
+        },
+        label: {
+          normal: {
+            formatter: (params) => {
+              var text;
+              text = "{f| " + params.data + "kg}";
+              return text;
+            },
+            rich: {
+              f: {
+                color: "#ffffff",
+              },
+            },
+            position: "right",
+            distance: 10, // 向右偏移位置
+            show: true,
+          },
+        },
+        data: data,
+        z: 0,
+      },
+
+      {
+        name: "外框",
+        type: "bar",
+        barGap: "-130%", // 设置外框粗细
+        data: [1000, 1000, 1000, 1000],
+        barWidth: 45,
+        itemStyle: {
+          normal: {
+            barBorderRadius: [5, 5, 5],
+            color: "transparent", // 填充色
+            barBorderColor: "#1588D1", // 边框色
+            barBorderWidth: 0, // 边框宽度
+          },
+        },
+        z: 0,
+      },
+    ],
+  };
+  charts.setOption(option);
+
+}
+const multipleGradientLineChart = function (data, id) {
+  let charts = echarts.init(id);
+  if (!data) {
+    data = {
+      xName: ["13:00", "13:05", "13:10", "13:15", "13:20", "13:25", "13:30", "13:35", "13:40", "13:45", "13:50", "13:55"],
+      yDataOne: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
+      yDataOneName: "充电",
+      yDataTwo: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150],
+      yDataTwoName: "加氢",
+      yDataThree: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122],
+      yDataThreeName: "加油",
+    }
+  }
+  let option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        lineStyle: {
+          color: "#57617B",
+        },
+      },
+    },
+    legend: {
+      icon: "rect",
+      itemWidth: 0.75 * vw,
+      itemHeight: 0.25 * vw,
+      itemGap: 0.75 * vw,
+      data: ["加氢", "加油", "充电"],
+      top: "4%",
+      right: "4%",
+      textStyle: {
+        fontSize: 0.75 * vw,
+        color: "#F1F1F3",
+      },
+    },
+    grid: {
+      top: "20%",
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    dataZoom: [],
+    xAxis: [
+      {
+        type: "category",
+        boundaryGap: false,
+        axisLabel: {
+          show: true,
+          color: '#fff'
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#57617B",
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: '#777777',
+            opacity: 0.3,
+          },
+        },
+        data: data.xName
+      }
+    ],
+    yAxis: [
+      {
+        type: "value",
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#57617B",
+          },
+        },
+        axisLabel: {
+          show: true,
+          color: '#fff'
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: '#777777',
+            opacity: 0.3,
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: data.yDataOneName,
+        type: "line",
+        smooth: true,
+        symbol: "circle",
+        symbolSize: 5,
+        showSymbol: false,
+        lineStyle: {
+          normal: {
+            width: 1,
+          },
+        },
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(137, 189, 27, 1)",
+                  },
+                  {
+                    offset: 0.8,
+                    color: "rgba(137, 189, 27, 0.6)",
+                  },
+                ],
+                false
+            ),
+            shadowColor: "rgba(0, 0, 0, 0.1)",
+            shadowBlur: 10,
+          },
+        },
+        itemStyle: {
+          normal: {
+            color: "rgb(137,189,27)",
+            borderColor: "rgba(137,189,2,0.27)",
+            borderWidth: 12,
+          },
+        },
+        data: data.yDataOne,
+      },
+      {
+        name: data.yDataTwoName,
+        type: "line",
+        smooth: true,
+        symbol: "circle",
+        symbolSize: 5,
+        showSymbol: false,
+        lineStyle: {
+          normal: {
+            width: 1,
+          },
+        },
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(0, 136, 212, 0.5)",
+                  },
+                  {
+                    offset: 0.8,
+                    color: "rgba(0, 136, 212, 0.2)",
+                  },
+                ],
+                false
+            ),
+            shadowColor: "rgba(0, 0, 0, 0.1)",
+            shadowBlur: 10,
+          },
+        },
+        itemStyle: {
+          normal: {
+            color: "rgb(0,136,212)",
+            borderColor: "rgba(0,136,212,0.2)",
+            borderWidth: 12,
+          },
+        },
+        data: data.yDataTwo,
+      },
+      {
+        name: data.yDataThreeName,
+        type: "line",
+        smooth: true,
+        symbol: "circle",
+        symbolSize: 5,
+        showSymbol: false,
+        lineStyle: {
+          normal: {
+            width: 1,
+          },
+        },
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(219, 50, 51, 0.5)",
+                  },
+                  {
+                    offset: 0.8,
+                    color: "rgba(219, 50, 51, 0.2)",
+                  },
+                ],
+                false
+            ),
+            shadowColor: "rgba(0, 0, 0, 0.1)",
+            shadowBlur: 10,
+          },
+        },
+        itemStyle: {
+          normal: {
+            color: "rgb(219,50,51)",
+            borderColor: "rgba(219,50,51,0.2)",
+            borderWidth: 12,
+          },
+        },
+        data: data.yDataThree,
+      },
+    ],
+  };
+
+
+  charts.setOption(option);
+}
+const multipleBrokenLineAreaDiagram = (data, ids) => {
+  let charts = echarts.init(ids);
+
+  function Fun() {
+    this.randomNum = function () {
+      let arr = []
+      for (let i = 0; i < 12; i++) {
+        arr.push(parseInt(Math.random() * 100))
+      }
+      return arr
+    }
+  }
+
+  if (!data) {
+    data = {
+      xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+      yDataOne: new Fun().randomNum(),
+      yDataTwo: new Fun().randomNum(),
+      yDataThree: new Fun().randomNum(),
+      yDataOneName: '制氢量',
+      yDataTwoName: '发电量',
+      yDataThreeName: '充装量',
+    }
+  }
+
+  let option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        lineStyle: {
+          color: "#57617B",
+        },
+      },
+    },
+    legend: {
+      icon: "rect",
+      itemWidth: 0.75 * vw,
+      itemHeight: 0.25 * vw,
+      itemGap: 0.75 * vw,
+      data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
+      left: "4%",
+      textStyle: {
+        fontSize: 0.75 * vw,
+        color: "#F1F1F3",
+      },
+    },
+    grid: {
+      top: "20%",
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    dataZoom: [],
+    xAxis: [
+      {
+        type: "category",
+        boundaryGap: false,
+        axisLine: {
+          lineStyle: {
+            color: "#57617B",
+          },
+        },
+        axisLabel: {
+          show: true,
+          color: '#fff'
+        },
+        data: data.xData,
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#57617B",
+          },
+        },
+        axisLabel: {
+          show: true,
+          color: '#fff'
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "#57617B",
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: data.yDataOneName,
+        type: "line",
+        smooth: false,
+        lineStyle: {
+          normal: {
+            width: 1,
+          },
+        },
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(137, 189, 27, 0.6)",
+                  },
+                  {
+                    offset: 0.8,
+                    color: "rgba(137, 189, 27, 0.2)",
+                  },
+                ],
+                false
+            ),
+            shadowColor: "rgba(0, 0, 0, 0.1)",
+            shadowBlur: 10,
+          },
+        },
+        itemStyle: {
+          normal: {
+            color: "rgb(137,189,27)",
+          },
+        },
+        data: data.yDataOne,
+      },
+      {
+        name: data.yDataTwoName,
+        type: "line",
+        smooth: false,
+        lineStyle: {
+          normal: {
+            width: 1,
+          },
+        },
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(0, 136, 212, 0.6)",
+                  },
+                  {
+                    offset: 0.8,
+                    color: "rgba(0, 136, 212, 0.2)",
+                  },
+                ],
+                false
+            ),
+            shadowColor: "rgba(0, 0, 0, 0.1)",
+            shadowBlur: 10,
+          },
+        },
+        itemStyle: {
+          normal: {
+            color: "rgb(0,136,212)",
+          },
+        },
+        data: data.yDataTwo,
+      },
+      {
+        name: data.yDataThreeName,
+        type: "line",
+        smooth: false,
+        lineStyle: {
+          normal: {
+            width: 1,
+          },
+        },
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(219, 50, 51, 0.6)",
+                  },
+                  {
+                    offset: 0.8,
+                    color: "rgba(219, 50, 51, 0.2)",
+                  },
+                ],
+                false
+            ),
+            shadowColor: "rgba(0, 0, 0, 0.1)",
+            shadowBlur: 10,
+          },
+        },
+        itemStyle: {
+          normal: {
+            color: "rgb(219,50,51)",
+          },
+        },
+        data: data.yDataThree,
+      },
+    ],
+  };
+
+
+  charts.setOption(option);
+}
+const multipleRingDiagram = function (data, id) {
+  let charts = echarts.init(id);
+  if (!data) {
+    data = [
+      {value: 10, name: "1月"},
+      {value: 20, name: "2月"},
+      {value: 40, name: "3月"},
+      {value: 45, name: "4月"},
+      {value: 10, name: "5月"},
+      {value: 20, name: "6月"},
+      {value: 40, name: "7月"},
+      {value: 45, name: "8月"},
+      {value: 10, name: "9月"},
+      {value: 20, name: "10月"},
+      {value: 40, name: "11月"},
+      {value: 65, name: "12月"}
+    ];
+  }
+  let option = {
+    backgroundColor: "rgba(0,0,0,0)",
+    polar: {
+      radius: ["10%", "90%"],
+      center: ['30%', '50%'],
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line'
+      },
+    },
+    angleAxis: {
+      show: false,
+      clockwise: false,
+      // min: function(value) {
+      //     return 5
+      // },
+      max: function (value) {
+        return value.max + 2;
+      },
+    },
+    radiusAxis: {
+      type: "category",
+      axisLabel: {
+        interval: 0,
+        color: "#fff",
+        fontSize: 0.25 * vw,
+        align: "left",
+        margin: "-2",
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      z: 20,
+      data: [...data.map((d) => d.name)],
+    },
+    series: [
+      {
+        type: "bar",
+        coordinateSystem: "polar",
+        barWidth: 4,
+        barGap: 10,
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(255,255,255,0.3)",
+        },
+        itemStyle: {
+          color: function (params) {
+            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "#00BCFA",
+              },
+              {
+                offset: 1,
+                color: "#01FE84",
+              },
+            ]);
+          },
+        },
+        roundCap: true,
+        data: data,
+      },
+
+    ],
+  };
+  charts.setOption(option);
+}
+export default {
+  name: "jqz",
+  components: {
+    vueSeamlessScroll,
+  },
+  data() {
+    return {
+      head,
+      monitoringData: '',
+      hydrogenNumber: '',
+      chargeStatisticsData: '',
+      EERData: '',
+      siteMasterInfo1: '',
+      date: '',
+      tableData: [
+        {
+          a: '1',
+          b: '2',
+          c: '3',
+          d: '4',
+        },
+        {
+          a: '1',
+          b: '2',
+          c: '3',
+          d: '4',
+        },
+        {
+          a: '1',
+          b: '2',
+          c: '3',
+          d: '4',
+        }
+      ],
+      chartTableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true,
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 0,
+      },
+    }
+  },
+  methods: {
+    monitoringDataF(val1, val2, val3, val4, val5, val6) {
+      const htmlData = `<table>
+ <tr>
+    <td style="position: absolute;top:13%;left:4%;color:#F70E19;font-size:150%">${val1 || '0'}</td>
+  </tr>
+ <tr>
+    <td style="position: absolute;top:27%;left:4%;color:#F38911;font-size:150%">${val2 || '0'}</td>
+  </tr>
+ <tr>
+    <td style="position: absolute;top:40%;left:4%;color:#CEF014;font-size:150%">${val3 || '0'}</td>
+  </tr>
+ <tr>
+    <td style="position: absolute;top:54%;left:4%;color:#10EAEF;font-size:150%">${val4 || '0'}</td>
+  </tr>
+ <tr>
+    <td style="position: absolute;top:67%;left:4%;color:#0DECF5;font-size:150%">${val5 || '0'}</td>
+  </tr>
+ <tr>
+    <td style="position: absolute;top:85%;left:4%;color:#EF0F14;font-size:150%">${val6 || ''}</td>
+  </tr>
+</table>`
+      this.monitoringData = htmlData;
+    },
+    hydrogenNumberF(val1 = 0, val2 = 0) {
+      const htmlData = `
+    <div style="position: absolute;top:13%;left:15%;color:#11E7F8;font-size:150%;transform: translateX(-50%);">${val1 || 0}kg</div>
+    <div style="position: absolute;top:13%;left:84%;color:#11E7F8;font-size:150%;transform: translateX(-50%);">${val2 || 0}</div>
+ `
+      this.hydrogenNumber = htmlData;
+    },
+    getnow() {
+      const getTime = (el) => {
+        let now = new Date();
+        let year = now.getFullYear();
+        let month = now.getMonth() + 1;
+        if (month < 10) {
+          month = "0" + month;
+        }
+        let date = now.getDate();
+        if (date < 10) {
+          date = "0" + date;
+        }
+        let hour = now.getHours();
+        if (hour < 10) {
+          hour = "0" + hour;
+        }
+        let minute = now.getMinutes();
+        if (minute < 10) {
+          minute = "0" + minute;
+        }
+        let second = now.getSeconds();
+        if (second < 10) {
+          second = "0" + second;
+        }
+        let nowstr = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
+        this.date = nowstr.slice(0, 16)
+      }
+      getTime()
+    },
+    chargeStatisticsDataF() {
+      const htmlData = `
+<div style="position: absolute;top: 70%;left: 3%;width: 25%;height: 10%">
+    <span style='font-size:1vw;position:absolute;top:50%;left:15%;transform:translate(-50%,-50%);color:#E9EEED;'>
+        2700
+    </span>
+    <span style='font-size:1vw;position:absolute;top:50%;left:43%;transform:translate(-50%,-50%);color:#E9EEED;'>
+        2234
+    </span>
+    <span style='font-size:1vw;position:absolute;top:50%;left:72%;transform:translate(-50%,-50%);color:#E9EEED;'>
+        3685
+    </span>
+    <span style='font-size:0.75vw;position:absolute;top:80%;left:15%;transform:translate(-50%,-50%);color:#E9EEED;'>
+        当日加氢量
+    </span>
+    <span style='font-size:0.75vw;position:absolute;top:80%;left:43%;transform:translate(-50%,-50%);color:#E9EEED;'>
+        当日加油量
+    </span>
+    <span style='font-size:0.75vw;position:absolute;top:80%;left:72%;transform:translate(-50%,-50%);color:#E9EEED;'>
+        当日充电量
+    </span>
+</div>
+`
+      this.chargeStatisticsData = htmlData
+    },
+    EERDataF() {
+      const htmlData = `
+<div style="position: absolute;top: 0%;left: 10%;width: 100%">
+    <div style="width:0.5vw;height: 0.5vw;background-color:#78BCFC;border-radius: 50%;position: absolute;top: 50%;left: 5%;transform: translate(-50%,-50%)"></div>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 0.5vw);transform:translate(-50%,-50%);color:#24ABF8;'>
+        1月
+    </span>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 5% + 5% + 1.5vw + 0.5vw);transform:translate(-50%,-50%);color:#E9EEED;'>
+        56%
+    </span>
+</div>
+<div style="position: absolute;top: calc(100%/12);left: 10%;width: 100%">
+    <div style="width:0.5vw;height: 0.5vw;background-color:#78BCFC;border-radius: 50%;position: absolute;top: 50%;left: 5%;transform: translate(-50%,-50%)"></div>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 0.5vw);transform:translate(-50%,-50%);color:#24ABF8;'>
+        2月
+    </span>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 5% + 5% + 1.5vw + 0.5vw);transform:translate(-50%,-50%);color:#E9EEED;'>
+        56%
+    </span>
+</div>
+<div style="position: absolute;top: calc(100%/12 *2);left: 10%;width: 100%">
+    <div style="width:0.5vw;height: 0.5vw;background-color:#78BCFC;border-radius: 50%;position: absolute;top: 50%;left: 5%;transform: translate(-50%,-50%)"></div>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 0.5vw);transform:translate(-50%,-50%);color:#24ABF8;'>
+        3月
+    </span>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 5% + 5% + 1.5vw + 0.5vw);transform:translate(-50%,-50%);color:#E9EEED;'>
+        56%
+    </span>
+</div>
+<div style="position: absolute;top: calc(100%/12*3);left: 10%;width: 100%">
+    <div style="width:0.5vw;height: 0.5vw;background-color:#78BCFC;border-radius: 50%;position: absolute;top: 50%;left: 5%;transform: translate(-50%,-50%)"></div>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 0.5vw);transform:translate(-50%,-50%);color:#24ABF8;'>
+        4月
+    </span>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 5% + 5% + 1.5vw + 0.5vw);transform:translate(-50%,-50%);color:#E9EEED;'>
+        56%
+    </span>
+</div>
+<div style="position: absolute;top: calc(100%/12*4);left: 10%;width: 100%">
+    <div style="width:0.5vw;height: 0.5vw;background-color:#78BCFC;border-radius: 50%;position: absolute;top: 50%;left: 5%;transform: translate(-50%,-50%)"></div>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 0.5vw);transform:translate(-50%,-50%);color:#24ABF8;'>
+        5月
+    </span>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 5% + 5% + 1.5vw + 0.5vw);transform:translate(-50%,-50%);color:#E9EEED;'>
+        56%
+    </span>
+</div>
+<div style="position: absolute;top: calc(100%/12*5);left: 10%;width: 100%">
+    <div style="width:0.5vw;height: 0.5vw;background-color:#78BCFC;border-radius: 50%;position: absolute;top: 50%;left: 5%;transform: translate(-50%,-50%)"></div>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 0.5vw);transform:translate(-50%,-50%);color:#24ABF8;'>
+        6月
+    </span>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 5% + 5% + 1.5vw + 0.5vw);transform:translate(-50%,-50%);color:#E9EEED;'>
+        56%
+    </span>
+</div>
+<div style="position: absolute;top: calc(100%/12*6);left: 10%;width: 100%">
+    <div style="width:0.5vw;height: 0.5vw;background-color:#78BCFC;border-radius: 50%;position: absolute;top: 50%;left: 5%;transform: translate(-50%,-50%)"></div>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 0.5vw);transform:translate(-50%,-50%);color:#24ABF8;'>
+        7月
+    </span>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 5% + 5% + 1.5vw + 0.5vw);transform:translate(-50%,-50%);color:#E9EEED;'>
+        56%
+    </span>
+</div>
+<div style="position: absolute;top: calc(100%/12*7);left: 10%;width: 100%">
+    <div style="width:0.5vw;height: 0.5vw;background-color:#78BCFC;border-radius: 50%;position: absolute;top: 50%;left: 5%;transform: translate(-50%,-50%)"></div>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 0.5vw);transform:translate(-50%,-50%);color:#24ABF8;'>
+        8月
+    </span>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 5% + 5% + 1.5vw + 0.5vw);transform:translate(-50%,-50%);color:#E9EEED;'>
+        56%
+    </span>
+</div>
+<div style="position: absolute;top: calc(100%/12*8);left: 10%;width: 100%">
+    <div style="width:0.5vw;height: 0.5vw;background-color:#78BCFC;border-radius: 50%;position: absolute;top: 50%;left: 5%;transform: translate(-50%,-50%)"></div>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 0.5vw);transform:translate(-50%,-50%);color:#24ABF8;'>
+        9月
+    </span>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 5% + 5% + 1.5vw + 0.5vw);transform:translate(-50%,-50%);color:#E9EEED;'>
+        56%
+    </span>
+</div>
+<div style="position: absolute;top: calc(100%/12*9);left: 10%;width: 100%">
+    <div style="width:0.5vw;height: 0.5vw;background-color:#78BCFC;border-radius: 50%;position: absolute;top: 50%;left: 5%;transform: translate(-50%,-50%)"></div>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 0.5vw);transform:translate(-50%,-50%);color:#24ABF8;'>
+        10月
+    </span>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 5% + 5% + 1.5vw + 0.5vw);transform:translate(-50%,-50%);color:#E9EEED;'>
+        56%
+    </span>
+</div>
+<div style="position: absolute;top: calc(100%/12*10);left: 10%;width: 100%">
+    <div style="width:0.5vw;height: 0.5vw;background-color:#78BCFC;border-radius: 50%;position: absolute;top: 50%;left: 5%;transform: translate(-50%,-50%)"></div>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 0.5vw);transform:translate(-50%,-50%);color:#24ABF8;'>
+        11月
+    </span>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 5% + 5% + 1.5vw + 0.5vw);transform:translate(-50%,-50%);color:#E9EEED;'>
+        56%
+    </span>
+</div>
+<div style="position: absolute;top: calc(100%/12*11);left: 10%;width: 100%">
+    <div style="width:0.5vw;height: 0.5vw;background-color:#78BCFC;border-radius: 50%;position: absolute;top: 50%;left: 5%;transform: translate(-50%,-50%)"></div>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 0.5vw);transform:translate(-50%,-50%);color:#24ABF8;'>
+        12月
+    </span>
+    <span style='font-size: 0.5vw;position:absolute;top:50%;left:calc(5% + 5% + 5% + 5% + 5% + 1.5vw + 0.5vw);transform:translate(-50%,-50%);color:#E9EEED;'>
+        56%
+    </span>
+</div>
+`
+      this.EERData = htmlData
+    },
+    siteMasterInfo() {
+      let htmlData = ``
+
+      this.siteMasterInfo1 += htmlData
+    }
+
+  },
+  mounted() {
+    verticalBarDiagram({
+      xData: ["设备1", "设备2", "设备3", "设备4", "设备5", "设备6", "设备7"],
+      yDataOne: [32, 45, 40, 30, 20, 70, 60],
+      yDataTwo: [100, 100, 100, 100, 100, 100, 100],
+    }, document.getElementById("failureRate"))
+
+    gridHorizontalBasisBarChart(null, document.getElementById("energyConsumptionStatistics"));
+
+    multipleGradientLineChart(null, document.getElementById("chargeStatistics"));
+    multipleBrokenLineAreaDiagram(null, document.getElementById("equipmentEnergyConsumptionStatistics"));
+
+    multipleRingDiagram(null, document.getElementById("EER"));
+    this.monitoringDataF()
+    this.hydrogenNumberF()
+    this.EERDataF()
+    this.chargeStatisticsDataF()
+    this.siteMasterInfo()
+    this.siteMasterInfo()
+    setInterval(() => this.getnow(), 1000);
+
+
+    const pieVw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+    // 修改3d饼图绘制过程
+    let each = Highcharts.each,
+        round = Math.round,
+        cos = Math.cos,
+        sin = Math.sin,
+        deg2rad = Math.deg2rad;
+    console.log(Highcharts)
+    Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function (proceed) {
+      proceed.apply(this, [].slice.call(arguments, 1));
+      // Do not do this if the chart is not 3D
+      // if (!this.chart.is3d()) {
+      //   return;
+      // }
+      let series = this,
+          chart = series.chart,
+          options = chart.options,
+          seriesOptions = series.options,
+          depth = seriesOptions.depth || 0,
+          options3d = options.chart.options3d,
+          alpha = options3d.alpha,
+          beta = options3d.beta,
+          z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
+      z += depth / 2;
+      if (seriesOptions.grouping !== false) {
+        z = 0;
+      }
+      each(series.data, function (point) {
+        var shapeArgs = point.shapeArgs,
+            angle;
+        point.shapeType = 'arc3d';
+        var ran = point.options.h;
+        shapeArgs.z = z;
+        shapeArgs.depth = depth * 0.65 + ran;
+        shapeArgs.alpha = alpha;
+        shapeArgs.beta = beta;
+        shapeArgs.center = series.center;
+        shapeArgs.ran = ran;
+        angle = (shapeArgs.end + shapeArgs.start) / 2;
+        point.slicedTranslation = {
+          translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
+          translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
+        };
+      });
+    });
+    (function (H) {
+      H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function (proceed) {
+        // Run original proceed method
+        var ret = proceed.apply(this, [].slice.call(arguments, 1));
+        ret.zTop = (ret.zOut + 0.5) / 100;
+        return ret;
+      });
+    }(Highcharts));
+    // 生成不同高度的3d饼图
+    const set3dPie = () => {
+      Highcharts.chart('annulus3D', {
+        title: {
+          text: ''
+        },
+        credits: {
+          enabled: false
+        },
+        chart: {
+          type: 'pie',
+          backgroundColor: 'rgba(0,0,0,0)',
+          animation: false,
+          events: {
+            load: function () {
+              var each = Highcharts.each,
+                  points = this.series[0].points;
+              each(points, function (p, i) {
+                p.graphic.attr({
+                  translateY: -p.shapeArgs.ran
+                });
+                p.graphic.side1.attr({
+                  translateY: -p.shapeArgs.ran
+                });
+                p.graphic.side2.attr({
+                  translateY: -p.shapeArgs.ran
+                });
+              });
+            }
+          },
+          options3d: {
+            enabled: true,
+            alpha: 65,
+          }
+        },
+        plotOptions: {
+          pie: {
+            allowPointSelect: true,
+            cursor: 'pointer',
+            depth: 35,
+            innerSize: 6 * pieVw,
+            dataLabels: {
+              enabled: true
+            }
+          }
+        },
+        series: [{
+          type: 'pie',
+          name: '故障次数',
+          data: [{
+            'name': '故障1',
+            y: 3.0,
+            h: 3.0,
+          }, {
+            name: '故障2',
+            y: 26.8,
+            h: 26.8,
+          }, {
+            name: '故障3',
+            y: 12.8,
+            h: 12.8,
+          }, {
+            'name': '故障4',
+            y: 8.5,
+            h: 8.5,
+          }, {
+            'name': '故障5',
+            y: 6.2,
+            h: 6.2,
+          }, {
+            'name': '故障6',
+            y: 0.7,
+            h: 0.7,
+          }]
+        }]
+      });
+    }
+    set3dPie()
+  }
+}
+
+</script>
+<style scoped>
+.img {
+  width: 100%;
+  height: 100vh;
+  background-image: url('~@/assets/images/jqz.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.scrollTable {
+  color: rgb(185, 186, 192);
+  margin: auto 0px;
+  padding: 4px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  display: inline-block;
+
+}
+
+.body {
+  width: 100%;
+  height: 100%;
+  background: aquamarine url('~@/assets/images/backgroundImg.jpg') no-repeat fixed center center;
+  background-size: 100% 100%;
+}
+
+.title {
+  border: 0 solid #ff0000;
+  height: 5%;
+  width: 30%;
+  position: absolute;
+  top: 2%;
+  left: 36%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 2rem;
+}
+
+.title-right {
+  position: absolute;
+  height: 4.5%;
+  top: 2.5%;
+}
+
+.timeInfo {
+  border: 0 solid red;
+  width: 11%;
+  right: 10%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+}
+
+.weatherInfo {
+  width: 5%;
+  right: 3%;
+}
+
+.hydrogenNumber {
+  position: absolute;
+  top: 13%;
+  left: 54%;
+  width: 18%;
+  height: 5%;
+}
+
+.monitoringData {
+  position: absolute;
+  top: 14%;
+  left: 28%;
+  width: 15%;
+  height: 50%;
+}
+
+
+.failureRate {
+  position: absolute;
+  top: 12%;
+  right: 3%;
+  width: 21%;
+  height: 25%;
+}
+
+.totalEnergyConsumption {
+  display: flex;
+  position: absolute;
+  top: 41.4%;
+  left: 4%;
+  width: 20%;
+  height: 8%;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  color: rgba(255, 255, 255, 0.8);
+  text-align: center;
+  font-size: 1vw;
+}
+
+
+.energyConsumptionStatistics {
+  position: absolute;
+  top: 50%;
+  left: 3%;
+  width: 21%;
+  height: 17%;
+}
+
+.chargeStatistics {
+  position: absolute;
+  top: 78%;
+  left: 2%;
+  width: 21%;
+  height: 19%;
+}
+
+.equipmentEnergyConsumptionStatistics {
+  position: absolute;
+  top: 73%;
+  left: 27%;
+  width: 21%;
+  height: 23%;
+}
+
+.EER {
+  position: absolute;
+  top: 73%;
+  left: 51%;
+  width: 21%;
+  height: 23%;
+}
+
+.EERData {
+  position: absolute;
+  top: 73%;
+  left: 63%;
+  width: 10%;
+  height: 23%;
+}
+
+.dataStatistics {
+  position: absolute;
+  top: 73.5%;
+  left: 28%;
+  width: 20%;
+  height: 6%;
+}
+
+.alarmEnquiries {
+  position: absolute;
+  top: 74%;
+  left: 76%;
+  width: 21%;
+  height: 21%;
+}
+
+.vehicleNumberAndModelStatistics {
+  position: absolute;
+  top: 72%;
+  left: 51%;
+  width: 22%;
+  height: 24%;
+}
+
+.dutyInfo {
+  position: absolute;
+  top: 15%;
+  left: 2.8%;
+  width: 22%;
+  height: 22%;
+  overflow: auto;
+}
+
+.videoSurveillance {
+  position: absolute;
+  top: 44%;
+  left: 2.8%;
+  width: 22%;
+  height: 21%;
+}
+
+.equipmentAlarm {
+  position: absolute;
+  top: 11.7%;
+  left: 27%;
+  width: 46%;
+  height: 53.2%;
+  z-index: 2;
+}
+
+.annulus3D {
+  position: absolute;
+  top: 55%;
+  left: 75%;
+  width: 23%;
+  transform: translateY(-50%);
+}
+
+</style>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/board/smartScene/index.vue b/ruoyi-ui/src/views/board/smartScene/index.vue
index 9bde450..b749d2a 100644
--- a/ruoyi-ui/src/views/board/smartScene/index.vue
+++ b/ruoyi-ui/src/views/board/smartScene/index.vue
@@ -302,7 +302,7 @@ export default {
 }
 
 .menuClick {
-  background-image: url("~@/assets/board/common/subheadClick.png");
+  //background-image: url("~@/assets/board/common/subheadClick.png");
   color: #f3f3f3;
 }
 
diff --git a/ruoyi-ui/src/views/register.vue b/ruoyi-ui/src/views/register.vue
index 9502343..85fe833 100644
--- a/ruoyi-ui/src/views/register.vue
+++ b/ruoyi-ui/src/views/register.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="register">
     <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
-      <h3 class="title">智慧物联监控平台</h3>
+      <h3 class="title">海威物联官网</h3>
       <el-form-item prop="username">
         <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
diff --git a/ruoyi-ui/src/views/system/layoutEdit.vue b/ruoyi-ui/src/views/system/layoutEdit.vue
index 0cc8337..75418a0 100644
--- a/ruoyi-ui/src/views/system/layoutEdit.vue
+++ b/ruoyi-ui/src/views/system/layoutEdit.vue
@@ -197,7 +197,7 @@
           <el-upload
             v-if="pageCfg.isBgImg"
             class="avatar-uploader"
-            :action="process.env.VUE_APP_BASE_API + '/file/upload'"
+            :action="uploadUrl"
             :headers="{
             authorization:'Bearer ' + getToken()
               }"
@@ -281,6 +281,7 @@ export default {
   },
   data() {
     return {
+      uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload",
       process,
       inputVisible: false,
       inputValue: '',