暂存

src/router/index.js

@@ -74,19 +74,6 @@ export const constantRoutes = [
       }
     ]
   },
-  // {
-  //   path: '/bigData',
-  //   component: Layout,
-  //   redirect: 'noredirect',
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/bigData/index1'),
-  //       name: 'Index',
-  //       meta: { title: '大数据', icon: 'dashboard'}
-  //     }
-  //   ]
-  // },
   {
     path: '/data',
     component: Layout,

src/views/equBigData/BottomCharts.vue

@@ -1,90 +0,0 @@
-<template>
-  <div id="box">
-    <div class="box-title">
-      <dv-decoration-5 :dur="dur" class="header-center-decoration" />
-      <div class="center-title">{{ this.title }}</div>
-    </div>
-    <slot name="default"></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "BorderItem",
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-  },
-
-  data() {
-    return {
-      dur:6
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-#box {
-  width: 100%;
-  height: 100%;
-  .box-title {
-    display: flex;
-    flex-direction: column;
-    .header-center-decoration {
-      width: 95%;
-      height: 55px;
-    }
-    .center-title {
-      position: absolute;
-      font-size: 12px;
-      font-weight: bold;
-      left: 50%;
-      top: 14px;
-      transform: translateX(-50%);
-    }
-  }
-}
-
-.bottom-charts {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: relative;
-
-  .bc-chart-item {
-    width: 25%;
-    height: 100%;
-    padding-top: 20px;
-    box-sizing: border-box;
-  }
-
-  .bcci-header {
-    height: 50px;
-    text-align: center;
-    line-height: 50px;
-    font-size: 20px;
-  }
-
-  .dv-active-ring-chart {
-    height: calc(~"100% - 80px");
-  }
-
-  .label-tag {
-    height: 30px;
-  }
-
-  .active-ring-name {
-    font-size: 18px !important;
-  }
-
-  .decoration-1,
-  .decoration-2,
-  .decoration-3 {
-    display: absolute;
-    left: 0%;
-  }
-}
-</style>

src/views/equBigData/CenterCmp.vue

@@ -1,182 +0,0 @@
-<template>
-  <div class="center-cmp">
-    <div class="cc-header">
-      <dv-decoration-1 style="width:200px;height:50px;" />
-      <div>机电设备总数</div>
-      <dv-decoration-1 style="width:200px;height:50px;" />
-    </div>
-
-    <div class="cc-details">
-      <div>设备总数</div>
-      <div class="card">2</div>
-      <div class="card">1</div>
-      <div class="card">3</div>
-      <div class="card">7</div>
-    </div>
-
-    <div class="cc-main-container">
-      <div class="ccmc-left">
-        <div class="station-info">
-          收费站<span>1315</span>
-        </div>
-        <div class="station-info">
-          监控中心<span>415</span>
-        </div>
-      </div>
-
-      <dv-active-ring-chart class="ccmc-middle" :config="config" />
-
-      <div class="ccmc-right">
-        <div class="station-info">
-          <span>90</span>道路外场
-        </div>
-        <div class="station-info">
-          <span>317</span>其他
-        </div>
-      </div>
-
-      <LabelTag :config="labelConfig" />
-    </div>
-  </div>
-</template>
-
-<script>
-import LabelTag from './LabelTag'
-
-export default {
-  name: 'CenterCmp',
-  components: {
-    LabelTag
-  },
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '收费站',
-            value: 1315
-          },
-          {
-            name: '监控中心',
-            value: 415
-          },
-          {
-            name: '道路外场',
-            value: 90
-          },
-          {
-            name: '其他',
-            value: 317
-          }
-        ],
-        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        lineWidth: 30,
-        radius: '55%',
-        activeRadius: '60%'
-      },
-
-      labelConfig: {
-        data: ['收费站', '监控中心', '道路外场', '其他']
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.center-cmp {
-  width: 100%;
-  height: 100%;
-  margin: 0px;
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-
-  .cc-header {
-    height: 70px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 30px;
-  }
-
-  .cc-details {
-    height: 120px;
-    display: flex;
-    justify-content: center;
-    font-size: 32px;
-    align-items: center;
-
-    .card {
-      background-color: rgba(4,49,128,.6);
-      color: #08e5ff;
-      height: 70px;
-      width: 70px;
-      font-size: 45px;
-      font-weight: bold;
-      line-height: 70px;
-      text-align: center;
-      margin: 10px;
-    }
-  }
-
-  .cc-main-container {
-    position: relative;
-    flex: 1;
-    display: flex;
-
-    .ccmc-middle {
-      width: 50%;
-      height: 90%;
-
-      .active-ring-name {
-        font-size: 20px !important;
-      }
-    }
-
-    .ccmc-left, .ccmc-right {
-      width: 25%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      font-size: 24px;
-
-      span {
-        font-size: 40px;
-        font-weight: bold;
-      }
-
-      .station-info {
-        height: 80px;
-        display: flex;
-        align-items: center;
-      }
-    }
-
-    .ccmc-left {
-      align-items: flex-end;
-
-      span {
-        margin-left: 20px;
-      }
-    }
-
-    .ccmc-right {
-      align-items: flex-start;
-
-      span {
-        margin-right: 20px;
-      }
-    }
-  }
-
-  .label-tag {
-    position: absolute;
-    width: 500px;
-    height: 30px;
-    bottom: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-</style>

src/views/equBigData/LabelTag.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="label-tag">
-    <template v-if="mergedConfig">
-      <div class="label-item" v-for="(label, i) in mergedConfig.data" :key="label">
-        {{ label }} <div :style="`background-color: ${mergedConfig.colors[i % mergedConfig.colors.length]};`" />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { deepMerge } from '@jiaminghi/charts/lib/util/index'
-
-import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
-
-export default {
-  name: 'LabelTag',
-  props: {
-    config: {
-      type: Object,
-      default: () => ([])
-    }
-  },
-  data () {
-    return {
-      defaultConfig: {
-        /**
-         * @description Label data
-         * @type {Array<String>}
-         * @default data = []
-         * @example data = ['label1', 'label2']
-         */
-        data: [],
-        /**
-         * @description Label color (Hex|Rgb|Rgba|color keywords)
-         * @type {Array<String>}
-         * @default colors = ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
-         * @example colors = ['#666', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
-         */
-        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
-      },
-
-      mergedConfig: null
-    }
-  },
-  watch: {
-    config () {
-      const { mergeConfig } = this
-
-      mergeConfig()
-    }
-  },
-  methods: {
-    mergeConfig () {
-      let { config, defaultConfig } = this
-
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
-    }
-  },
-  mounted () {
-    const { mergeConfig } = this
-
-    mergeConfig()
-  }
-}
-</script>
-
-<style lang="less">
-.label-tag {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .label-item {
-    margin: 5px;
-    font-size: 15px;
-    display: flex;
-    align-items: center;
-
-    div {
-      width: 12px;
-      height: 12px;
-      margin-left: 5px;
-    }
-  }
-}
-</style>

src/views/equBigData/LeftChart1.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="left-chart-1">
-    <div class="lc1-header">张三收费站</div>
-    <div class="lc1-details">设备运行总数<span>430</span></div>
-    <dv-capsule-chart class="lc1-chart" :config="config" />
-    <dv-decoration-2 style="height:10px;" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LeftChart1',
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '收费系统',
-            value: 167
-          },
-          {
-            name: '通信系统',
-            value: 67
-          },
-          {
-            name: '监控系统',
-            value: 123
-          },
-          {
-            name: '供配电系统',
-            value: 55
-          },
-          {
-            name: '其他',
-            value: 98
-          }
-        ],
-        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        unit: '件'
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.left-chart-1 {
-  width: 100%;
-  height: 37%;
-  display: flex;
-  flex-grow: 0;
-  flex-direction: column;
-
-  .lc1-header {
-    text-align: center;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 30px;
-    margin-bottom: 20px;
-  }
-
-  .lc1-details {
-    height: 50px;
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    text-indent: 20px;
-
-    span {
-      color: #096dd9;
-      font-weight: bold;
-      font-size: 35px;
-      margin-left: 20px;
-    }
-  }
-
-  .lc1-chart {
-    flex: 1;
-  }
-}
-</style>

src/views/equBigData/LeftChart2.vue

@@ -1,71 +0,0 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-11 14:03:09
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-11 18:03:23
- * @FilePath: \electronic-file\src\components\datav\LeftChart2.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
-<template>
-  <div class="left-chart-2">
-    <dv-charts class="lc2-chart" :option="option" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "LeftChart2",
-  data() {
-    return {
-      option: {
-        series: [
-          {
-            type: "pie",
-            data: [
-              { name: "收费系统", value: 93 },
-              { name: "通信系统", value: 32 },
-              { name: "监控系统", value: 65 },
-              { name: "供配电系统", value: 44 },
-              { name: "其他", value: 52 },
-            ],
-            radius: ["45%", "65%"],
-            insideLabel: {
-              show: false,
-            },
-            outsideLabel: {
-              labelLineEndLength: 10,
-              formatter: "{percent}%\n{name}",
-              style: {
-                fontSize: 14,
-                fill: "#fff",
-              },
-            },
-          },
-        ],
-        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.left-chart-2 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  .lc2-header {
-    height: 20px;
-    line-height: 20px;
-    font-size: 16px;
-    text-indent: 20px;
-    margin-top: 10px;
-  }
-
-  .lc2-chart {
-    height: calc(100% - 80px);
-    position: relative;
-  }
-}
-</style>

src/views/equBigData/LeftChart3.vue

@@ -1,84 +0,0 @@
-<template>
-  <div class="left-chart-3">
-    <!-- <div class="lc3-header">王五收费站</div>
-    <div class="lc3-details">设备运行总数<span>245</span></div> -->
-    <dv-capsule-chart class="lc3-chart" :config="config" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LeftChart3',
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '40',
-            value: 0.2
-          },
-          {
-            name: '50',
-            value: 0.8
-          },
-          {
-            name: '60',
-            value: 0.5
-          },
-          {
-            name: '70',
-            value: 0.2
-          },
-          {
-            name: '80',
-            value: 0.4
-          },
-          {
-            name: '90',
-            value: 0.1
-          },
-        ],
-        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        unit: '人'
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.left-chart-3 {
-  width: 100%;
-  height: 33%;
-  display: flex;
-  flex-direction: column;
-
-  .lc3-header {
-    height: 20px;
-    line-height: 20px;
-    font-size: 16px;
-    text-indent: 20px;
-    margin-top: 10px;
-  }
-
-  .lc3-details {
-    height: 40px;
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    text-indent: 20px;
-
-    span {
-      color: #096dd9;
-      font-weight: bold;
-      font-size: 35px;
-      margin-left: 20px;
-    }
-  }
-
-  .lc3-chart {
-    flex: 1;
-    padding: 0 10px;
-  }
-}
-</style>

src/views/equBigData/LeftChart4.vue

@@ -1,99 +0,0 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-11 14:03:09
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-11 21:23:37
- * @FilePath: \electronic-file\src\components\datav\LeftChart2.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
-<template>
-  <div class="left-chart-4">
-    <dv-charts class="lc2-chart" :option="option" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "LeftChart4",
-  data() {
-    return {
-      option: {
-        xAxis: {
-          // name: "第一周",
-          data: ["周一"],
-          axisLabel: {
-            style: {
-              fill: "#fff",
-              fontSize: 10,
-              rotate: 0,
-            },
-          },
-        },
-        grid: {
-          top: 30,
-          bottom: 20,
-        },
-        yAxis: {
-          // name: "销售额",
-          data: "value",
-          splitLine: {
-            show: false,
-          },
-        },
-        series: [
-          {
-            data: [10],
-            type: "bar",
-            barWidth: 10,
-          },
-        ],
-      },
-    };
-  },
-  mounted() {
-    // this.initData();
-  },
-  methods: {
-    // initData() {
-    //   const option1 = {
-    //     xAxis: {
-    //       name: "第一周",
-    //       data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
-    //     },
-    //     yAxis: {
-    //       name: "销售额",
-    //       data: "value",
-    //     },
-    //     series: [
-    //       {
-    //         data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
-    //         type: "bar",
-    //       },
-    //     ],
-    //   };
-    //   this.option = option1;
-    // },
-  },
-};
-</script>
-
-<style lang="less">
-.left-chart-4 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  .lc2-header {
-    height: 20px;
-    line-height: 20px;
-    font-size: 16px;
-    text-indent: 20px;
-    margin-top: 10px;
-  }
-
-  .lc2-chart {
-    height: calc(~"100% - 80px");
-    position: relative;
-  }
-}
-</style>

src/views/equBigData/Maps.vue

@@ -1,88 +0,0 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-12 08:55:47
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-12 09:48:43
- * @FilePath: \electronic-file\src\components\datav\Maps.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
-<template>
-  <div id="map" :style="{ width: mapWidth, height: mapHeight }"></div>
-</template>
-
-<script>
-import AMapLoader from "@amap/amap-jsapi-loader";
-export default {
-  props: {
-    width: {
-      type: [Number, String],
-      default: "",
-    },
-    height: {
-      type: [Number, String],
-      default: "50%",
-    },
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    mapWidth() {
-      let width = this.width;
-      if (typeof width === "number") {
-        width = width + "px";
-      }
-      return width;
-    },
-    mapHeight() {
-      let height = this.height;
-      if (typeof height === "number") {
-        height = height + "px";
-      }
-      return height;
-    },
-  },
-  mounted() {
-    this.initMap();
-  },
-  methods: {
-    initMap() {
-      AMapLoader.load({
-        key: "40f1ba8477c8eb7f56397febfcd2a656", // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        AMapUI: {
-          version: "1.1",
-        },
-        plugins: [
-          "AMap.AutoComplete",
-          "AMap.PlaceSearch",
-          "AMap.Scale",
-          "AMap.OverView",
-          "AMap.ToolBar",
-          "AMap.MapType",
-          "AMap.PolyEditor",
-          "AMap.CircleEditor",
-          "AMap.DistrictSearch",
-          "AMap.RangingTool",
-          "AMap.MarkerCluster",
-          "AMap.IndexCluster",
-          "AMap.Geocoder",
-        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-      })
-        .then((AMap) => {
-          this.$emit("callback", AMap);
-        })
-        .catch((e) => {
-          console.log(e);
-        });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-#map {
-  padding: 0px;
-  margin: 20px 10px 10px 10px;
-}
-</style>

src/views/equBigData/RightBottom.vue

@@ -1,51 +0,0 @@
-
-<template>
-    <div id="scroll-board">
-      <dv-scroll-board :config="config" />
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    name: "ScrollBoard",
-    data() {
-      return {
-        config: {
-          // header: ["时间", "病害信息", "数量", "标段"],
-          data: [
-            ["2019-07-01 19:25:00", "路面危害-松散", "5", "xxxxxxx"],
-            ["2019-07-02 17:25:00", "路面危害-路面油污清理", "13", "xxxxxxx"],
-            ["2019-07-03 16:25:00", "交安设施-交通标志牌结构", "6", "xxxxxxx"],
-            ["2019-07-04 15:25:00", "路基危害-防尘网", "2", "xxxxxxx"],
-            ["2019-07-05 14:25:00", "交安设施-交通标志牌结构", "1", "xxxxxxx"],
-            ["2019-07-06 13:25:00", "路面危害-松散", "3", "xxxxxxx"],
-            ["2019-07-07 12:25:00", "路基危害-防尘网", "4", "xxxxxxx"],
-            ["2019-07-08 11:25:00", "路面危害-路面油污清理", "2", "xxxxxxx"],
-            ["2019-07-09 10:25:00", "交安设施-交通标志牌结构", "5", "xxxxxxx"],
-            ["2019-07-10 09:25:00", "路基危害-防尘网", "3", "xxxxxxx"],
-          ],
-          index: true,
-          columnWidth: [50],
-          align: ["center"],
-          rowNum: 5,
-          // headerBGC: "#1981f6",
-          // headerHeight: 20,
-          oddRowBGC: "rgba(0, 44, 81, 0.8)",
-          evenRowBGC: "rgba(10, 29, 50, 0.8)",
-        },
-      };
-    },
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  #scroll-board {
-    width: 100%;
-    box-sizing: border-box;
-    height: 100%;
-    overflow: hidden;
-    transform: scale3d(0.9, 0.7, 0.86);
-    margin-top: -46px;
-    // margin: -46px 10px 0 10px;
-  }
-  </style>

src/views/equBigData/RightChart1.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="right-chart-1">
-    <div class="rc1-header">赵六收费站</div>
-
-    <div class="rc1-chart-container">
-      <div class="left">
-        <div class="number">262</div>
-        <div>设备运行总数</div>
-      </div>
-
-      <dv-capsule-chart class="right" :config="config" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RightChart1',
-  data () {
-    return {
-      config: {
-        data: [
-          {
-            name: '收费系统',
-            value: 25
-          },
-          {
-            name: '通信系统',
-            value: 66
-          },
-          {
-            name: '监控系统',
-            value: 123
-          },
-          {
-            name: '供配电系统',
-            value: 72
-          },
-          {
-            name: '其他',
-            value: 99
-          }
-        ],
-        unit: '件'
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.right-chart-1 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .rc1-header {
-    font-size: 24px;
-    font-weight: bold;
-    height: 30px;
-    line-height: 30px;
-  }
-
-  .rc1-chart-container {
-    flex: 1;
-    display: flex;
-  }
-
-  .left {
-    width: 30%;
-    font-size: 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .number {
-      font-size: 34px;
-      color: #096dd9;
-      font-weight: bold;
-      margin-bottom: 30px;
-    }
-  }
-
-  .right {
-    flex: 1;
-    padding-bottom: 20px;
-    padding-right: 20px;
-    box-sizing: border-box;
-  }
-}
-</style>

src/views/equBigData/RightChart2.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="right-chart-2">
-    <div class="rc1-header">孙七收费站</div>
-
-    <div class="rc1-chart-container">
-      <div class="left">
-        <div class="number">267</div>
-        <div>设备运行总数</div>
-      </div>
-
-      <dv-charts class="right" :option="option" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RightChart2',
-  data () {
-    return {
-      option: {
-        series: [
-          {
-            type: 'pie',
-            data: [
-              { name: '收费系统', value: 93 },
-              { name: '通信系统', value: 66 },
-              { name: '监控系统', value: 52 },
-              { name: '供配电系统', value: 34 },
-              { name: '其他', value: 22 }
-            ],
-            radius: ['45%', '65%'],
-            insideLabel: {
-              show: false
-            },
-            outsideLabel: {
-              labelLineEndLength: 10,
-              formatter: '{percent}%\n{name}',
-              style: {
-                fontSize: 14,
-                fill: '#fff'
-              }
-            }
-          }
-        ],
-        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.right-chart-2 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .rc1-header {
-    font-size: 24px;
-    font-weight: bold;
-    height: 30px;
-    line-height: 30px;
-  }
-
-  .rc1-chart-container {
-    flex: 1;
-    display: flex;
-  }
-
-  .left {
-    width: 30%;
-    font-size: 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .number {
-      font-size: 34px;
-      color: #096dd9;
-      font-weight: bold;
-      margin-bottom: 30px;
-    }
-  }
-
-  .right {
-    flex: 1;
-    padding-bottom: 20px;
-    padding-right: 20px;
-    box-sizing: border-box;
-  }
-}
-</style>

src/views/equBigData/aaa.vue

@@ -1,205 +0,0 @@
-<template>
-  <div class="bottom-charts">
-    <div class="bc-chart-item">
-      <dv-charts class="lc1-chart" :option="option" />
-    </div>
-
-    <div class="bc-chart-item">
-      <dv-charts class="lc1-chart" :option="option1" />
-    </div>
-
-    <div class="bc-chart-item">
-      <dv-charts class="lc1-chart" :option="option2" />
-    </div>
-
-    <div class="bc-chart-item">
-      <dv-charts class="lc1-chart" :option="option3" />
-    </div>
-  </div>
-</template>
-
-<script>
-import LabelTag from "./LabelTag";
-
-export default {
-  name: "BottomCharts",
-  components: {
-    LabelTag,
-  },
-  data() {
-    return {
-      option: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 7,
-            data: [
-              {
-                name: "itemA",
-                value: 89,
-                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
-                gradient: ["#01dcdf"],
-              },
-            ],
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            dataItemStyle: {
-              lineCap: "round",
-            },
-            details: {
-              show: true,
-              formatter: "{value}",
-              style: {
-                fill: "#1ed3e5",
-                fontSize: 15,
-              },
-            },
-          },
-        ],
-      },
-      option1: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 7,
-            data: [
-              {
-                name: "itemA",
-                value: 34,
-                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
-                gradient: ["#33faaa"],
-              },
-            ],
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            dataItemStyle: {
-              lineCap: "round",
-            },
-            details: {
-              show: true,
-              formatter: "{value}",
-              style: {
-                fill: "#1ed3e5",
-                fontSize: 15,
-              },
-            },
-          },
-        ],
-      },
-      option2: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 7,
-            data: [
-              {
-                name: "itemA",
-                value: 55,
-                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
-                gradient: ["#f7ac20"],
-              },
-            ],
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            dataItemStyle: {
-              lineCap: "round",
-            },
-            details: {
-              show: true,
-              formatter: "{value}",
-              style: {
-                fill: "#1ed3e5",
-                fontSize: 15,
-              },
-            },
-          },
-        ],
-      },
-      option3: {
-        series: [
-          {
-            type: "gauge",
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 7,
-            data: [
-              {
-                name: "itemA",
-                value: 67,
-                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
-                gradient: ["#f93496", "#f61967","#f2053e"],
-              },
-            ],
-            axisLabel: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            pointer: {
-              show: false,
-            },
-            dataItemStyle: {
-              lineCap: "round",
-            },
-            details: {
-              show: true,
-              formatter: "{value}",
-              style: {
-                fill: "#1ed3e5",
-                fontSize: 15,
-              },
-            },
-          },
-        ],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.bottom-charts {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: relative;
-
-  .bc-chart-item {
-    width: 25%;
-    height: 100%;
-    box-sizing: border-box;
-    .lc1-chart {
-      height: calc(100% - 80px);
-      position: relative;
-    }
-  }
-}
-</style>

src/views/equBigData/box-item.vue

@@ -1,188 +0,0 @@
-<template>
-  <div class="bottom-charts">
-    <div class="bc-chart-item">
-      <div class="bcci-header">赵钱收费站</div>
-      <dv-active-ring-chart :config="config1" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-    <dv-decoration-2 class="decoration-1" :reverse="true" style="width: 5px" />
-
-    <div class="bc-chart-item">
-      <div class="bcci-header">孙李收费站</div>
-      <dv-active-ring-chart :config="config2" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-
-    <dv-decoration-2 class="decoration-2" :reverse="true" style="width: 5px" />
-
-    <div class="bc-chart-item">
-      <div class="bcci-header">周吴收费站</div>
-      <dv-active-ring-chart :config="config3" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-
-    <dv-decoration-2 class="decoration-3" :reverse="true" style="width: 5px" />
-
-    <div class="bc-chart-item">
-      <div class="bcci-header">郑王收费站</div>
-      <dv-active-ring-chart :config="config4" />
-      <Label-Tag :config="labelConfig" />
-    </div>
-  </div>
-</template>
-
-<script>
-import LabelTag from "./LabelTag";
-
-export default {
-  name: "BottomCharts",
-  components: {
-    LabelTag,
-  },
-  data() {
-    return {
-      config1: {
-        data: [
-          {
-            name: "收费站",
-            value: 356,
-          },
-          {
-            name: "监控中心",
-            value: 215,
-          },
-          {
-            name: "道路外场",
-            value: 90,
-          },
-          {
-            name: "其他",
-            value: 317,
-          },
-        ],
-        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-        radius: "65%",
-        activeRadius: "70%",
-      },
-
-      config2: {
-        data: [
-          {
-            name: "收费站",
-            value: 615,
-          },
-          {
-            name: "监控中心",
-            value: 322,
-          },
-          {
-            name: "道路外场",
-            value: 198,
-          },
-          {
-            name: "其他",
-            value: 80,
-          },
-        ],
-        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-        radius: "65%",
-        activeRadius: "70%",
-      },
-
-      config3: {
-        data: [
-          {
-            name: "收费站",
-            value: 452,
-          },
-          {
-            name: "监控中心",
-            value: 512,
-          },
-          {
-            name: "道路外场",
-            value: 333,
-          },
-          {
-            name: "其他",
-            value: 255,
-          },
-        ],
-        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-        radius: "65%",
-        activeRadius: "70%",
-      },
-
-      config4: {
-        data: [
-          {
-            name: "收费站",
-            value: 156,
-          },
-          {
-            name: "监控中心",
-            value: 415,
-          },
-          {
-            name: "道路外场",
-            value: 90,
-          },
-          {
-            name: "其他",
-            value: 210,
-          },
-        ],
-        color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
-        radius: "65%",
-        activeRadius: "70%",
-      },
-
-      labelConfig: {
-        data: ["收费站", "监控中心", "道路外场", "其他"],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="less">
-.bottom-charts {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: relative;
-
-  .bc-chart-item {
-    width: 25%;
-    height: 100%;
-    padding-top: 20px;
-    box-sizing: border-box;
-  }
-
-  .bcci-header {
-    height: 50px;
-    text-align: center;
-    line-height: 50px;
-    font-size: 20px;
-  }
-
-  .dv-active-ring-chart {
-    height: calc(~"100% - 80px");
-  }
-
-  .label-tag {
-    height: 30px;
-  }
-
-  .active-ring-name {
-    font-size: 18px !important;
-  }
-
-  .decoration-1,
-  .decoration-2,
-  .decoration-3 {
-    display: absolute;
-    left: 0%;
-  }
-}
-</style>

src/views/equBigData/index.vue

@@ -1,457 +0,0 @@
-<template>
-  <div id="data-view">
-    <top-header />
-    <div class="main">
-      <div class="left">
-        <div class="left-top">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览1"> <aaa /></Border-Item>
-          </dv-border-box-13>
-        </div>
-        <div class="left-content">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览2"><middleLeftChart /></Border-Item>
-          </dv-border-box-13>
-        </div>
-        <div class="left-under">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览3"><Left-Chart-3 /></Border-Item>
-          </dv-border-box-13>
-        </div>
-      </div>
-      <div class="content">
-        <!-- 22 -->
-        <div>
-          <equ-map v-loading="mapLoading" @callback="initMap" height="400px" />
-        </div>
-        <div class="left-under">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览4"><Left-Chart-4 /></Border-Item>
-          </dv-border-box-13>
-        </div>
-      </div>
-      <div class="right">
-        <div class="left-top">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览5"> <aaa /></Border-Item>
-          </dv-border-box-13>
-        </div>
-        <div class="left-content">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览6"><Left-Chart-2 /></Border-Item>
-          </dv-border-box-13>
-        </div>
-        <div class="left-under">
-          <dv-border-box-13 class="left-border">
-            <Border-Item title="设备总览7"
-              ><dv-scroll-board :config="config" />></Border-Item
-            >
-          </dv-border-box-13>
-        </div>
-      </div>
-    </div>
-    <!-- <dv-border-box-3 class="left-chart-container">
-
-      </dv-border-box-3> -->
-
-    <!-- <div class="right-main-container">
-        <div class="rmc-top-container">
-          <dv-border-box-3 class="rmctc-left-container">
-            <Center-Cmp />
-          </dv-border-box-3>
-
-          <div class="rmctc-right-container">
-            <dv-border-box-3 class="rmctc-chart-1">
-              <Right-Chart-1 />
-            </dv-border-box-3>
-
-            <dv-border-box-4 class="rmctc-chart-2" :reverse="true">
-              <Right-Chart-2 />
-            </dv-border-box-4>
-          </div>
-        </div>
-
-        <dv-border-box-4 class="rmc-bottom-container">
-          <Bottom-Charts />
-        </dv-border-box-4>
-      </div> -->
-  </div>
-</template>
-
-<script>
-import topHeader from "./topHeader";
-import LeftChart1 from "./LeftChart1";
-import LeftChart2 from "./LeftChart2";
-import LeftChart3 from "./LeftChart3";
-import LeftChart4 from "./LeftChart4";
-import middleLeftChart from "./middleLeftChart.vue";
-import aaa from "./aaa";
-import equMap from "./Maps";
-import CenterCmp from "./CenterCmp";
-
-import RightChart1 from "./RightChart1";
-import RightChart2 from "./RightChart2";
-
-import BottomCharts from "./BottomCharts";
-import BorderItem from "./BottomCharts";
-
-export default {
-  name: "DataView",
-  components: {
-    topHeader,
-    LeftChart1,
-    LeftChart2,
-    LeftChart3,
-    LeftChart4,
-    CenterCmp,
-    RightChart1,
-    RightChart2,
-    BottomCharts,
-    BorderItem,
-    equMap,
-    aaa,
-    middleLeftChart,
-  },
-  data() {
-    return {
-      mapLoading: false,
-      config: {
-       
-        data: [
-          ["行1列1", "行1列2", "行1列3"],
-          ["行2列1", "行2列2", "行2列3"],
-          ["行3列1", "行3列2", "行3列3"],
-          ["行4列1", "行4列2", "行4列3"],
-          ["行5列1", "行5列2", "行5列3"],
-          ["行6列1", "行6列2", "行6列3"],
-          ["行7列1", "行7列2", "行7列3"],
-          ["行8列1", "行8列2", "行8列3"],
-          ["行9列1", "行9列2", "行9列3"],
-          ["行10列1", "行10列2", "行10列3"],
-        ],
-        index: true,
-        rowNum: 3, // 表行数
-        columnWidth: [50],
-        align: ["center"],
-      },
-    };
-  },
-  methods: {
-    initMap(AMap) {
-      this.AMap = AMap;
-      this.map = new AMap.Map("map", {
-        // 设置地图容器id
-        // viewMode: "3D", // 是否为3D地图模式
-        zoom: 3, // 初始化地图级别
-        center: [105.602725, 37.076636], // 初始化地图中心点位置
-      });
-      this.clickMarker = new this.AMap.Marker();
-      this.addMapMarkers(this.AMap, {
-        equList: [
-          { lng: 105.602725, lat: 37.076636 },
-          { lng: 113.8098755478859, lat: 34.75219686835205 },
-        ],
-      });
-      // this.getEquMap();
-      // 暂时放这里
-      this.map.on("click", (e) => {
-        console.log(e, "e");
-        this.regeoCode(e.lnglat);
-      });
-    },
-    // 地图覆盖物
-    addMapMarkers(AMap, data) {
-      // console.log(data,'data');
-      // // 项目中心点
-      // const centerMarker = new AMap.Marker({
-      //   position: new AMap.LngLat(data.projectLng, data.projectLat),
-      //   offset: new AMap.Pixel(-20, -20),
-      //   icon: require(`@/assets/map-icon/center.png`),
-      // });
-      // 设备分布点
-      this.markers = [];
-      data.equList.forEach((item) => {
-        const marker = new AMap.Marker({
-          position: new AMap.LngLat(item.lng, item.lat),
-          offset: new AMap.Pixel(-13, -30),
-          // icon: require(`@/assets/map-icon/${item.classifyCode}-${
-          //   item.online === 0 ? "GRAY" : item.flag ? "DEFAULT" : "DANGER"
-          //   }.png`),
-          icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
-          anchor: "bottom-center",
-          extData: {
-            id: item.id,
-            equNo: item.equNo,
-            netCode: data.netCode,
-            classifyCode: item.classifyCode,
-            flag: item.flag,
-            online: item.online,
-          },
-        });
-        this.markers.push(marker);
-        this.map.add(marker);
-      });
-      // console.log('this.markers',this.markers);
-      // const overlayGroups = new AMap.OverlayGroup(this.markers);
-      // // 比例尺
-      // // const scale = new AMap.Scale();
-
-      // this.map.add(overlayGroups);
-      // this.map.add(centerMarker);
-      // this.map.addControl(scale);
-
-      // // 鼠标点击marker弹出自定义的信息窗体
-      // overlayGroups.eachOverlay((overlay, index, collections) => {
-      //   const extData = overlay.getExtData();
-      //   overlay.on("click", () => {
-      //     const params = {
-      //       netCode: extData.netCode,
-      //       equNo: extData.equNo,
-      //     };
-      //     getEquInfo(params).then((res) => {
-      //       const info = res.data;
-      //       const id = extData.id;
-      //       const currentMarker = this.markers.find(
-      //         (item) => item._opts.extData.id === id
-      //       );
-      //       currentMarker.setIcon(
-      //         require(`@/assets/map-icon/${extData.classifyCode}-${
-      //           info.online === 0 ? "GRAY" : extData.flag ? "DEFAULT" : "DANGER"
-      //         }.png`)
-      //       );
-      //       const onlineEnum = {
-      //         0: "离线",
-      //         1: "在线",
-      //       };
-      //       info.projectName = data.projectName;
-      //       const infoWindow = new AMap.InfoWindow({
-      //         content: `<div class="equ-info-box">
-      //               <p class="equ-info-item"><span class="label">设备编号</span><span class="value" id="equNo">${
-      //                 info.equNo
-      //               }</span></p>
-      //               <p class="equ-info-item"><span class="label">当前设备状态</span><span class="value tag">${
-      //                 onlineEnum[info.online]
-      //               }</span></p>
-      //               <p class="equ-info-item"><span class="label">累计报警次数</span><span class="value link" onclick="goNextPage(this, 'alarmStat')" data-equNo="${
-      //                 info.equNo
-      //               }" data-name="${info.projectName}">${
-      //           info.alarmTotal
-      //         }</span></p>
-      //               <p class="equ-info-item"><span class="label">最近定位时间</span><span class="value">${
-      //                 info.positionTime
-      //               }</span></p>
-      //               <p class="equ-info-item"><span class="label">TBox品牌</span><span class="value">${
-      //                 info.brand
-      //               }</span></p>
-      //               <p class="equ-info-item"><span class="label">TBox编号</span><span class="value">${
-      //                 info.gpsId
-      //               }</span></p>
-      //               </div>`,
-      //         anchor: "top-center",
-      //       });
-      //       infoWindow.open(this.map, overlay.getPosition());
-      //     });
-      //   });
-      // });
-
-      // // 地图的3km圆
-      // const circle = new AMap.Circle({
-      //   center: new AMap.LngLat(data.projectLng, data.projectLat), // 圆心位置
-      //   radius: data.radius * 1000, // 半径
-      //   strokeColor: "#367EF5", // 线颜色
-      //   strokeOpacity: 0.8, // 线透明度
-      //   strokeWeight: 1, // 线粗细度
-      //   fillColor: "#18FFFC", // 填充颜色
-      //   fillOpacity: 0.1, // 填充透明度
-      // });
-      // this.map.add(circle);
-      // this.map.setFitView();
-      /* this.map.on("click", (e) => {
-        this.regeoCode(e.lnglat);
-      }); */
-    },
-  },
-};
-</script>
-
-<style lang="less">
-#data-view {
-  width: 100%;
-  height: 100%;
-  background-color: #030409;
-  color: #fff;
-  overflow: hidden;
-  background-image: url("./img/bg.png");
-  background-size: 100%;
-  background-repeat: no-repeat;
-
-  // #dv-full-screen-container {
-  //   background-image: url("./img/bg.png");
-  //   background-size: 100% 100%;
-  //   box-shadow: 0 0 3px blue;
-  //   display: flex;
-  //   flex-direction: column;
-  // }
-  .main {
-    display: flex;
-    padding: 0 10px 10px 10px;
-    box-sizing: border-box;
-    .left {
-      width: 30%;
-      // box-sizing: border-box;
-      .left-top {
-        margin-top: 10px;
-
-        .left-border {
-          height: 200px;
-        }
-      }
-      .left-content {
-        margin-top: 10px;
-        .left-border {
-          height: 200px;
-        }
-      }
-      .left-under {
-        margin-top: 10px;
-        .left-border {
-          height: 200px;
-        }
-      }
-    }
-
-    // .content {
-    //   flex: 1;
-    // }
-    .content {
-      // width: 30%;
-      flex: 1;
-
-      // box-sizing: border-box;
-      .left-top {
-        margin-top: 10px;
-
-        .left-border {
-          height: 200px;
-        }
-      }
-      .left-content {
-        margin-top: 10px;
-        .left-border {
-          height: 200px;
-        }
-      }
-      .left-under {
-        margin-top: 10px;
-        .left-border {
-          height: 200px;
-        }
-      }
-    }
-    .right {
-      width: 30%;
-      // box-sizing: border-box;
-      .left-top {
-        margin-top: 10px;
-
-        .left-border {
-          height: 200px;
-        }
-      }
-      .left-content {
-        margin-top: 10px;
-        .left-border {
-          height: 200px;
-        }
-      }
-      .left-under {
-        margin-top: 10px;
-        .left-border {
-          height: 200px;
-        }
-      }
-      .datav-cell {
-
-text-overflow: ellipsis;
-
-overflow: hidden;
-
-white-space: nowrap;
-
-}
-    }
-  }
-  .main-header {
-    height: 80px;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-
-    .mh-left {
-      font-size: 20px;
-      color: rgb(1, 134, 187);
-
-      a:visited {
-        color: rgb(1, 134, 187);
-      }
-    }
-
-    .mh-middle {
-      font-size: 30px;
-    }
-
-    .mh-left,
-    .mh-right {
-      width: 450px;
-    }
-  }
-
-  .main-container {
-    height: calc(~"100% - 80px");
-
-    .border-box-content {
-      padding: 20px;
-      box-sizing: border-box;
-      display: flex;
-    }
-  }
-
-  .left-chart-container {
-    width: 22%;
-    padding: 10px;
-    box-sizing: border-box;
-
-    .border-box-content {
-      flex-direction: column;
-    }
-  }
-
-  .right-main-container {
-    width: 78%;
-    padding-left: 5px;
-    box-sizing: border-box;
-  }
-
-  .rmc-top-container {
-    height: 65%;
-    display: flex;
-  }
-
-  .rmctc-left-container {
-    width: 65%;
-  }
-
-  .rmctc-right-container {
-    width: 35%;
-  }
-
-  .rmc-bottom-container {
-    height: 35%;
-  }
-
-  .rmctc-chart-1,
-  .rmctc-chart-2 {
-    height: 50%;
-  }
-}
-</style>

src/views/equBigData/middleLeftChart.vue

@@ -1,50 +0,0 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-11 14:03:09
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-12 16:55:24
- * @FilePath: \electronic-file\src\components\datav\LeftChart1.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
-<template>
-<div class="left-chart-2">
-    <dv-charts class="lc2-chart" :option="option" />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      option: {
-        series: [
-          {
-            type: "pie",
-            data: [{ name: "可口可乐", value: 23 }],
-            radius: ["50%", "75%"],
-            insideLabel: {
-              show: true,
-              formatter: "{value}",
-            },
-          },
-        ],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.left-chart-2 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
- 
-
-  .lc2-chart {
-    height: calc(100% - 80px);
-    position: relative;
-  }
-}
-</style>

src/views/equBigData/topHeader.vue

@@ -1,54 +0,0 @@
-<!--
- * @Author: gaojikai gaojikai@fehorizon.com
- * @Date: 2023-09-11 14:12:32
- * @LastEditors: gaojikai gaojikai@fehorizon.com
- * @LastEditTime: 2023-09-11 18:47:01
- * @FilePath: \electronic-file\src\components\datav\topHeader.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
-<template>
-  <div id="top-header">
-    <dv-decoration-8 class="header-left-decoration" />
-    <dv-decoration-5 class="header-center-decoration" />
-    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
-    <div class="center-title">易益康养</div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "TopHeader",
-};
-</script>
-
-<style lang="less">
-#top-header {
-  position: relative;
-  width: 100%;
-  height: 77px;
-  display: flex;
-  justify-content: space-between;
-  flex-shrink: 0;
-
-  .header-center-decoration {
-    width: 40%;
-    height: 60px;
-    margin-top: 30px;
-  }
-
-  .header-left-decoration,
-  .header-right-decoration {
-    width: 25%;
-    height: 60px;
-  }
-
-  .center-title {
-    position: absolute;
-    font-size: 30px;
-    font-weight: bold;
-    left: 50%;
-    top: 15px;
-    transform: translateX(-50%);
-  }
-}
-</style>