设备大屏样式调整

src/router/index.js

@@ -100,16 +100,29 @@ export const constantRoutes = [
       }
     ]
   },
+  // {
+  //   path: '/equData',
+  //   component: Layout,
+  //   redirect: 'noredirect',
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: () => import('@/views/equBigData/index'),
+  //       name: 'Index',
+  //       meta: { title: '设备数据展示大屏', icon: 'dashboard'}
+  //     }
+  //   ]
+  // },
   {
-    path: '/equData',
+    path: '/bigData',
     component: Layout,
     redirect: 'noredirect',
     children: [
       {
         path: 'index',
-        component: () => import('@/views/equBigData/index'),
+        component: () => import('@/views/test/index'),
         name: 'Index',
-        meta: { title: '设备数据展示大屏', icon: 'dashboard'}
+        meta: { title: '测试大屏', icon: 'dashboard'}
       }
     ]
   },

src/views/datav/LeftChart1.vue

@@ -2,10 +2,10 @@
   <div class="left-chart-1">
     <!-- <dv-border-box-1 class="lc1-details">定位监护长者<span>430</span></dv-border-box-1> -->
     <!-- <div class="lc1-details">定位监护长者<span>{{ number }}</span></div> -->
-    <div class="lc1-details">
+    <!-- <div class="lc1-details">
       定位监护长者
       <dv-digital-flop :config="config1" style="width: 200px; height: 50px" />
-    </div>
+    </div> -->
     <div class="left-list">
       <div class="left-container">
         <div class="container-topdown">
@@ -147,11 +147,11 @@ export default {
   },
   mounted() {
     this.initData();
-    // setInterval(() => {
-    //   this.power(360);
-    // }, 500);
+    setInterval(() => {
+      this.power(360);
+    }, 500);
     // this.flipToValue(this.number); // 初始化显示数字
-    this.startAnimation()
+    // this.startAnimation()
   },
   methods: {
     async initData() {
@@ -165,14 +165,15 @@ export default {
       });
       this.config1 = {
         number: [this.number],
-        content: `${String(this.number)}`,
+        content: String(this.number),
+        // animationFrame:10
       };
       console.log(typeof String(this.number),777);
     },
-    // power(n) {
-    //   this.config1.number[0] = Math.floor(Math.random() * n + 1);
-    //   this.config1 = { ...this.config1 }; //对象解构，更新props
-    // },
+    power(n) {
+      this.config1.number[0] = Math.floor(Math.random() * n + 1);
+      this.config1 = { ...this.config1 }; //对象解构，更新props
+    },
     // startAnimation() {
     //   this.animationInterval = setInterval(() => {
     //     const increment = this.number > this.currentValue ? 1 : -1;
@@ -232,8 +233,10 @@ export default {
     }
   }
   .left-list {
+    height: 100%;
     .left-container {
       // width: 100%;
+      height: 15.4%;
       text-align: center;
       border-radius: 5px;
       border: 1px solid #1ae1e6;
@@ -245,7 +248,7 @@ export default {
       // color:red;
       .container-topdown {
         width: 100%;
-        height: 57px;
+        // height: 57px;
         display: flex;
         flex-direction: column;
         align-items: center;

src/views/datav/LeftChart11.vue

@@ -123,14 +123,14 @@ export default {
 <style lang="scss">
 .left-chart-11 {
   width: 100%;
-  // height: 100%;
+  height: 100%;
   display: flex;
   flex-grow: 0;
   flex-direction: column;
   // border: 1px solid green;
   .under-title {
-    flex: 1;
-    height: 28px;
+    // flex: 1;
+    height: 3%;
     font-size: 14px;
     margin: 10px 0;
     background: url(../../assets/image/title_bg.png) no-repeat;
@@ -143,27 +143,37 @@ export default {
     }
   }
   .right-container {
+    height: 90%;
+    border: 1px solid #22659e;
+    border-radius: 5px;
+    background: rgba(1,58,131,.4);
     .right-box {
-      color: #101010;
+      height: 14%;
+      color: #fff;
       font-size: 14px;
       padding: 0 10px;
-      background-color: #fff;
+      // background-color: #fff;
       margin-bottom: 5px;
+      border-bottom: 1px solid #22659e;
       .top {
+        height: 33%;
         display: flex;
         justify-content: space-between;
-        border-bottom: 1px solid #f1f0f0;
-        line-height: 30px;
+        // border-bottom: 1px solid #f1f0f0;
+        // line-height: 30%;
         .top-left {
           color: #ff2626;
+          font-size: 20px;
         }
       }
       .middle {
-        line-height: 30px;
-        border-bottom: 1px solid #f1f0f0;
+        height: 33%;
+        // line-height: 30%;
+        // border-bottom: 1px solid #f1f0f0;
       }
       .under {
-        line-height: 30px;
+        height: 33%;
+        // line-height: 30%;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -172,6 +182,7 @@ export default {
     }
   }
   .page-box {
+    height:10%;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -193,23 +204,23 @@ export default {
       margin-left: 20px;
     }
   }
-  .left-list {
-    margin-top: 10px;
-    .left-container {
-      // width: 100%;
-      text-align: center;
-      // height: 50px;
-      // background-color: green;
-      margin-top: 10px;
-      display: flex;
-      // color:red;
-      .container-topdown {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        // border: 1px solid red;
-      }
-    }
-  }
+  // .left-list {
+  //   margin-top: 10px;
+  //   .left-container {
+  //     // width: 100%;
+  //     text-align: center;
+  //     // height: 50px;
+  //     // background-color: green;
+  //     margin-top: 10px;
+  //     display: flex;
+  //     // color:red;
+  //     .container-topdown {
+  //       width: 100%;
+  //       display: flex;
+  //       flex-direction: column;
+  //       // border: 1px solid red;
+  //     }
+  //   }
+  // }
 }
 </style>

src/views/datav/LeftChart99.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="left-chart-1">
+  <div class="left-chart-under">
     <dv-charts class="ring-charts" :option="options" />
     <div class="title">{{ this.title }}</div>
   </div>
@@ -40,7 +40,7 @@ export default {
               show: true,
               lineStyle: {
                 color: [
-                  [Number(this.value)/100, "#1A8FC5"], //占总数的30.25%，即value/100，颜色为'#1A8FC5'
+                  [Number(this.value) / 100, "#1A8FC5"], //占总数的30.25%，即value/100，颜色为'#1A8FC5'
                   [1, "#E1E8EE"], //基底大圈比例为1，颜色为'#E1E8EE'，
                 ],
                 width: 10, //环形的粗细
@@ -62,7 +62,7 @@ export default {
             details: {
               show: true,
               formatter: "{value}%",
-              valueToFixed:2,
+              valueToFixed: 2,
               style: {
                 fill: "#1ed3e5",
                 fontSize: 20,
@@ -153,14 +153,17 @@ export default {
 </script>
 
 <style lang="scss">
-.left-chart-1 {
-  // width: 25%;
+.left-chart-under {
+  width: 20%;
   height: 100%;
   // float: left;
   // display: flex;
   flex-grow: 0;
   // flex-direction: column;
   // border: 1px solid green;
+  .dv-charts-container {
+    height: 80%;
+  }
   .title {
     height: 20%;
     text-align: center;

src/views/datav/Maps.vue → src/views/datav/Map.vue

@@ -83,6 +83,6 @@ export default {
 <style lang="scss" scoped>
 #map {
   padding: 0px;
-  margin: 100px 10px 10px 10px;
+  margin: 10px 10px 0 10px;
 }
 </style>

src/views/datav/index.vue

@@ -16,7 +16,7 @@
               <equ-map
                 v-loading="mapLoading"
                 @callback="initMap"
-                height="400px"
+                height="100%"
               />
             </div>
           </div>
@@ -67,7 +67,7 @@ import RightChart1 from "./RightChart1";
 import RightChart2 from "./RightChart2";
 
 import BottomCharts from "./BottomCharts";
-import equMap from "./Maps.vue";
+import equMap from "./Map.vue";
 
 import { percent, alarmList } from "@/api/system/datav";
 
@@ -131,6 +131,7 @@ export default {
       });
     },
     initMap(AMap) {
+      console.log('进来了');
       this.AMap = AMap;
       this.map = new AMap.Map("map", {
         // 设置地图容器id
@@ -314,7 +315,8 @@ export default {
 #data-view {
   color: #fff;
   width: 100%;
-  height: 100%;
+  // height: 100%;
+  min-height: calc(100vh - 84px);
   background: url(../../assets/image/bg.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -331,11 +333,14 @@ export default {
   .main {
     display: flex;
     width: 100%;
+    height: 90%;
+    min-height: calc(100vh - 84px);
     padding-right: 10px;
     .left {
       width: 70%;
       .left-top {
         display: flex;
+        height: 70%;
         .top-left {
           width: 30%;
         }
@@ -344,11 +349,11 @@ export default {
         }
       }
       .left-under {
-        // width: 60%;
+        width: 100%;
         height: 30%;
         .under-title {
           flex: 1;
-          height: 28px;
+          height: 10%;
           font-size: 14px;
           margin: 10px 0;
 
@@ -363,7 +368,7 @@ export default {
           }
         }
         .under-box {
-          height: 200px;
+          height: 90%;
           display: flex;
         }
       }
@@ -375,7 +380,7 @@ export default {
   }
 
   .main-header {
-    height: 80px;
+    height: 8%;
     width: 100%;
     display: flex;
     // justify-content: center;

src/views/equBigData/BottomCharts.vue

@@ -26,7 +26,7 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="scss" scoped>
 #box {
   width: 100%;
   height: 100%;

src/views/equBigData/Maps.vue

@@ -20,7 +20,7 @@ export default {
     },
     height: {
       type: [Number, String],
-      default: "500px",
+      default: "50%",
     },
   },
   data() {

src/views/equBigData/RightBottom.vue

@@ -0,0 +1,51 @@
+
+<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/aaa.vue

@@ -185,7 +185,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .bottom-charts {
   width: 100%;
   height: 100%;

src/views/test/BottomCharts.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="box">
+    <div class="box-title">
+      <dv-decoration-5 class="header-center-decoration" />
+      <div class="center-title">{{ this.title }}</div>
+    </div>
+    <slot class="content" name="default"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BorderItem",
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+#box {
+  width: 100%;
+  height: 100%;
+  .box-title {
+    height: 20%;
+    display: flex;
+    flex-direction: column;
+    .header-center-decoration {
+      width: 95%;
+      height: 70px;
+    }
+    .center-title {
+      position: absolute;
+      font-size: 12px;
+      font-weight: bold;
+      left: 50%;
+      top: 14px;
+      transform: translateX(-50%);
+    }
+
+  }
+  .content{
+    height: 100%;
+  }
+  .aa {
+    display: flex;
+  }
+}
+</style>

src/views/test/CenterCmp.vue

@@ -0,0 +1,182 @@
+<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/test/LabelTag.vue

@@ -0,0 +1,87 @@
+<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/test/LeftChart1.vue

@@ -0,0 +1,49 @@
+<!--
+ * @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-middle">
+    <dv-charts class="lc1-chart" :option="option" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LeftChart1",
+  data() {
+    return {
+      option: {
+        series: [
+          {
+            type: "pie",
+            data: [{ name: "可口可乐", value: 93 }],
+            radius: ["50%", "75%"],
+            insideLabel: {
+              show: true,
+              formatter: "{value}",
+            },
+          },
+        ],
+      },
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.left-chart-middle {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+  .lc1-chart {
+    height: calc(100% - 80px);
+    position: relative;
+  }
+}
+</style>

src/views/test/LeftChart2.vue

@@ -0,0 +1,118 @@
+<!--
+ * @Author: gaojikai gaojikai@fehorizon.com
+ * @Date: 2023-09-11 14:03:09
+ * @LastEditors: gaojikai gaojikai@fehorizon.com
+ * @LastEditTime: 2023-09-12 18:49:43
+ * @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"],
+        title: {
+          show: false,
+        },
+        grid: {
+          top: 30,
+          bottom: 20,
+        },
+        xAxis: {
+          name: "第二周",
+          data: ["周一"],
+          axisLine: {
+            style: {
+              stroke: "#324686",
+              lineWidth: 1,
+            },
+          },
+          axisTick:{
+            show: false,
+          }
+        },
+        yAxis: {
+          name: "",
+          data: "value",
+          splitLine: {
+            // show:false,
+            style: {
+              stroke: "#09111e",
+              lineWidth: 1,
+            },
+          },
+          nameTextStyle:{
+            fill: '#09111e',
+            fontSize: 10
+          },
+          axisLine: {
+            style: {
+              stroke: "#324686",
+              lineWidth: 1,
+            },
+          },
+          axisTick:{
+            show: false,
+          }
+        },
+        series: [
+          {
+            data: [2],
+            type: "line",
+            lineArea: {
+              show: true,
+              gradient: ["rgba(55, 162, 218, 0.6)", "rgba(55, 162, 218, 0)"],
+            },
+          },
+        ],
+      },
+    };
+  },
+};
+</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/test/LeftChart3.vue

@@ -0,0 +1,79 @@
+<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: '收费系统',
+            value: 78
+          },
+          {
+            name: '通信系统',
+            value: 54
+          },
+          {
+            name: '监控系统',
+            value: 123
+          },
+          {
+            name: '供配电系统',
+            value: 167
+          },
+          {
+            name: '其他',
+            value: 77
+          }
+        ],
+        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;
+  }
+}
+</style>

src/views/test/LeftChart4.vue

@@ -0,0 +1,108 @@
+<!--
+ * @Author: gaojikai gaojikai@fehorizon.com
+ * @Date: 2023-09-11 14:03:09
+ * @LastEditors: gaojikai gaojikai@fehorizon.com
+ * @LastEditTime: 2023-09-13 15:40:20
+ * @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: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+
+      //     axisTick: {
+      //       show: false,
+      //     },
+      //     axisLine: {
+      //       show: true,
+      //     },
+      //     axisLabel: {
+      //       show: false,
+      //     },
+      //     nameTextStyle: {
+      //       fill: "red",
+      //       fontSize: 10,
+      //     },
+      //   },
+      //   yAxis: {
+      //     name: "销售额",
+      //     data: "value",
+      //     axisTick: {
+      //       show: false,
+      //     },
+      //     axisLine: {
+      //       show: true,
+      //     },
+      //     axisLabel: {
+      //       show: true,
+      //     },
+      //     splitLine: {
+      //       show: false,
+      //     },
+      //   },
+
+      //   grid: {
+      //     bottom: 10,
+      //     top: 30,
+      //   },
+      //   series: [
+      //     {
+      //       data: [0, 2, 3, 4, 5, 6, 7],
+      //       type: "bar",
+      //       barWidth: "30%",
+      //     },
+      //   ],
+      // },
+      option: {
+        xAxis: {
+          name: "第一周",
+          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+        },
+        yAxis: {
+          name: "销售额",
+          data: "value",
+          splitLine: {
+            show: false,
+          },
+        },
+        grid: {
+          bottom: 10,
+          top: 20,
+        },
+        series: [
+          {
+            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
+            type: "bar",
+            barWidth: "30%",
+          },
+        ],
+      },
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.left-chart-4 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .lc2-chart {
+    height: calc(100% - 80px);
+    position: relative;
+  }
+}
+</style>

src/views/test/LeftChartUnder.vue

@@ -0,0 +1,84 @@
+<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/test/Maps.vue

@@ -0,0 +1,88 @@
+<!--
+ * @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/test/MiddleChart.vue

@@ -0,0 +1,99 @@
+<!--
+ * @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/test/RightBottom.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Author: gaojikai gaojikai@fehorizon.com
+ * @Date: 2023-09-12 19:08:02
+ * @LastEditors: gaojikai gaojikai@fehorizon.com
+ * @LastEditTime: 2023-09-14 20:01:13
+ * @FilePath: \electronic-file\src\components\datav\RightBottom.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<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/test/RightChart1.vue

@@ -0,0 +1,93 @@
+<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/test/RightChart2.vue

@@ -0,0 +1,95 @@
+<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/test/aaa.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="left-charts">
+    <div class="left-chart-item">
+      <dv-charts class="item-chart" :option="option" />
+      <div class="item-chart-word zongshu">总数</div>
+    </div>
+
+    <div class="left-chart-item">
+      <dv-charts class="item-chart" :option="option1" />
+      <div class="item-chart-word zaixianshu">在线数</div>
+    </div>
+
+    <div class="left-chart-item">
+      <dv-charts class="item-chart" :option="option2" />
+      <div class="item-chart-word lixianshu">离线数</div>
+    </div>
+
+    <div class="left-chart-item">
+      <dv-charts class="item-chart" :option="option3" />
+      <div class="item-chart-word gaojingshu">告警数</div>
+
+    </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: 10,
+            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: 20,
+              },
+            },
+          },
+        ],
+      },
+      option1: {
+        series: [
+          {
+            type: "gauge",
+            startAngle: -Math.PI / 2,
+            endAngle: Math.PI * 1.5,
+            arcLineWidth: 10,
+            data: [
+              {
+                name: "itemA",
+                value: 89,
+                // 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: 20,
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            type: "gauge",
+            startAngle: -Math.PI / 2,
+            endAngle: Math.PI * 1.5,
+            arcLineWidth: 10,
+            data: [
+              {
+                name: "itemA",
+                value: 89,
+                // 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: 20,
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        series: [
+          {
+            type: "gauge",
+            startAngle: -Math.PI / 2,
+            endAngle: Math.PI * 1.5,
+            arcLineWidth: 10,
+            data: [
+              {
+                name: "itemA",
+                value: 89,
+                // 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: 20,
+              },
+            },
+            animationFrame: 10,
+          },
+        ],
+      },
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.left-charts {
+  width: 100%;
+  height: 80%;
+  display: flex;
+  position: relative;
+
+  .left-chart-item {
+    width: 25%;
+    height: 100%;
+    box-sizing: border-box;
+    text-align: center;
+    .item-chart {
+      height: calc(100% - 80px);
+      position: relative;
+    }
+    .item-chart-word{
+      font-size: 16px;
+    }
+    .zongshu{
+      color:rgb(0, 253, 250);
+    }
+    .zaixianshu{
+      color:rgb(7, 247, 168);
+    }
+    .lixianshu{
+      color:rgb(227, 179, 55);
+    }
+    .gaojingshu{
+      color:rgb(245, 2, 61);
+    }
+  }
+}
+</style>

src/views/test/bbb.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="left-charts">
+    <div class="left-chart-item">
+      <dv-charts class="item-chart" :option="option" />
+      <div class="item-chart-word zongshu">用户总数</div>
+    </div>
+
+    <div class="left-chart-item">
+      <dv-charts class="item-chart" :option="option1" />
+      <div class="item-chart-word zaixianshu">绑定设备</div>
+    </div>
+
+    <div class="left-chart-item">
+      <dv-charts class="item-chart" :option="option2" />
+      <div class="item-chart-word lixianshu">绑定用户数</div>
+    </div>
+
+    <div class="left-chart-item">
+      <dv-charts class="item-chart" :option="option3" />
+      <div class="item-chart-word gaojingshu">设备活跃度</div>
+
+    </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: 10,
+            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: 20,
+              },
+            },
+          },
+        ],
+      },
+      option1: {
+        series: [
+          {
+            type: "gauge",
+            startAngle: -Math.PI / 2,
+            endAngle: Math.PI * 1.5,
+            arcLineWidth: 10,
+            data: [
+              {
+                name: "itemA",
+                value: 89,
+                // 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: 20,
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        series: [
+          {
+            type: "gauge",
+            startAngle: -Math.PI / 2,
+            endAngle: Math.PI * 1.5,
+            arcLineWidth: 10,
+            data: [
+              {
+                name: "itemA",
+                value: 89,
+                // 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: 20,
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        series: [
+          {
+            type: "gauge",
+            startAngle: -Math.PI / 2,
+            endAngle: Math.PI * 1.5,
+            arcLineWidth: 10,
+            data: [
+              {
+                name: "itemA",
+                value: 89,
+                // 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: 20,
+              },
+            },
+            animationFrame: 10,
+          },
+        ],
+      },
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.left-charts {
+  width: 100%;
+  height: 80%;
+  display: flex;
+  position: relative;
+
+  .left-chart-item {
+    width: 25%;
+    height: 100%;
+    box-sizing: border-box;
+    text-align: center;
+    .item-chart {
+      height: calc(100% - 80px);
+      position: relative;
+    }
+    .item-chart-word{
+      font-size: 16px;
+    }
+    .zongshu{
+      color:rgb(0, 253, 250);
+    }
+    .zaixianshu{
+      color:rgb(7, 247, 168);
+    }
+    .lixianshu{
+      color:rgb(227, 179, 55);
+    }
+    .gaojingshu{
+      color:rgb(245, 2, 61);
+    }
+  }
+}
+</style>

src/views/test/box-item.vue

@@ -0,0 +1,188 @@
+<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/test/index.vue

@@ -0,0 +1,349 @@
+<template>
+  <div id="data-view-container">
+    <top-header />
+    <div class="main">
+      <div class="left">
+        <div class="left-top">
+          <dv-border-box-13>
+            <Border-Item title="设备总览">
+              <aaa />
+              <!-- <Left-Chart-1 /> -->
+              <!-- <Left-Chart-1 />
+              <Left-Chart-1 />
+              <Left-Chart-1/> -->
+            </Border-Item>
+          </dv-border-box-13>
+        </div>
+        <div class="left-content">
+          <dv-border-box-13>
+            <Border-Item title="设备型号总览"><Left-Chart-1 /></Border-Item>
+          </dv-border-box-13>
+        </div>
+        <div class="left-under">
+          <dv-border-box-13>
+            <Border-Item title="用户年龄总览"><Left-chart-under /></Border-Item>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <div class="content">
+        <!-- 22 -->
+        <equ-map v-loading="mapLoading" @callback="initMap" />
+        <div class="left-under">
+          <dv-border-box-13>
+            <Border-Item title="报警列表"><Right-Bottom /></Border-Item>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <div class="right">
+        <div class="left-top">
+          <dv-border-box-13>
+            <Border-Item title="设备总览"> <bbb /></Border-Item>
+          </dv-border-box-13>
+        </div>
+        <div class="left-content">
+          <dv-border-box-13>
+            <Border-Item title="月新增设备"><Left-Chart-2 /></Border-Item>
+          </dv-border-box-13>
+        </div>
+        <div class="left-under">
+          <dv-border-box-13>
+            <Border-Item title="月新增用户"> <Middle-Chart /></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 LeftChartUnder from "./LeftChartUnder";
+import LeftChart3 from "./LeftChart3";
+import LeftChart4 from "./LeftChart4";
+import equMap from "./Maps";
+import CenterCmp from "./CenterCmp";
+
+import RightChart1 from "./RightChart1";
+import RightChart2 from "./RightChart2";
+
+import BottomCharts from "./BottomCharts";
+import BorderItem from "./BottomCharts";
+import aaa from "./aaa";
+import bbb from "./bbb";
+
+import RightBottom from "./RightBottom";
+import MiddleChart from "./MiddleChart";
+
+export default {
+  name: "DataView",
+  components: {
+    topHeader,
+    LeftChart1,
+    LeftChart2,
+    LeftChart3,
+    LeftChart4,
+    CenterCmp,
+    RightChart1,
+    RightChart2,
+    BottomCharts,
+    BorderItem,
+    equMap,
+    aaa,
+    bbb,
+    RightBottom,
+    LeftChartUnder,
+    MiddleChart
+  },
+  data() {
+    return {
+      mapLoading: false,
+    };
+  },
+  methods: {
+    initMap(AMap) {
+      this.AMap = AMap;
+      this.map = new AMap.Map("map", {
+        // 设置地图容器id
+        // viewMode: "3D", // 是否为3D地图模式
+        zoom: 5, // 初始化地图级别
+        center: [105.602725, 37.076636], // 初始化地图中心点位置
+        mapStyle: "amap://styles/darkblue"
+      });
+      this.clickMarker = new this.AMap.Marker();
+      this.addMapMarkers(this.AMap, {
+        equList: [
+          { lng: 105.602725, lat: 37.076636 },
+          { lng: 105.622725, lat: 37.75219686835205 },
+          // { lng: 154.8098755478859, lat: 18.75219686835205 },
+          // { lng: 183.8098755478859, lat: 34.75219686835205 },
+          // { lng: 178.8098755478859, lat: 3.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="scss">
+#data-view-container {
+  width: 100%;
+  // height: 100%;
+  min-height:calc(100vh - 84px);
+  background-color: #030409;
+  color: #fff;
+  overflow: hidden;
+  background-image: url("./img/bg.png");
+  background-size: 100%;
+  background-repeat: no-repeat;
+
+
+  .main {
+    display: flex;
+    padding: 0 10px 10px 10px;
+    box-sizing: border-box;
+    min-height: 85vh;
+    .left {
+      width: 30%;
+      // box-sizing: border-box;
+      .left-top {
+        height: 30%;
+        margin-top: 10px;
+      }
+      .left-content {
+        height: 30%;
+        margin-top: 10px;
+        .left-border {
+        }
+      }
+      .left-under {
+        margin-top: 10px;
+        height: 30%;
+        .left-border {
+        }
+      }
+    }
+
+    // .content {
+    //   flex: 1;
+    // }
+    .content {
+      // width: 30%;
+      flex: 1;
+
+      // box-sizing: border-box;
+
+      .left-under {
+        height: 40%;
+        // margin-top: 10px;
+      }
+    }
+    .right {
+      width: 30%;
+      // box-sizing: border-box;
+      .left-top {
+        height: 30%;
+        margin-top: 10px;
+      }
+      .left-content {
+        height: 30%;
+        margin-top: 10px;
+        .left-border {
+        }
+      }
+      .left-under {
+        margin-top: 10px;
+        height: 30%;
+        .left-border {
+        }
+      }
+    }
+  }
+
+
+
+}
+</style>

src/views/test/topHeader.vue

@@ -0,0 +1,54 @@
+<!--
+ * @Author: gaojikai gaojikai@fehorizon.com
+ * @Date: 2023-09-11 14:12:32
+ * @LastEditors: gaojikai gaojikai@fehorizon.com
+ * @LastEditTime: 2023-09-14 19:04:10
+ * @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">qqq</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TopHeader",
+};
+</script>
+
+<style lang="scss">
+#top-header {
+  position: relative;
+  width: 100%;
+  height: 20%;
+  display: flex;
+  justify-content: space-between;
+  flex-shrink: 0;
+
+  .header-center-decoration {
+    width: 40%;
+    height: 60px;
+    margin-top: 14px;
+  }
+
+  .header-left-decoration,
+  .header-right-decoration {
+    width: 25%;
+    height: 60px;
+  }
+
+  .center-title {
+    position: absolute;
+    font-size: 30px;
+    font-weight: bold;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+  }
+}
+</style>