大屏代码初始化

src/router/index.js

@@ -96,7 +96,20 @@ export const constantRoutes = [
         path: 'index',
         component: () => import('@/views/datav/index'),
         name: 'Index',
-        meta: { title: '我是大数据', icon: 'dashboard'}
+        meta: { title: '定位报警监控', icon: 'dashboard'}
+      }
+    ]
+  },
+  {
+    path: '/equData',
+    component: Layout,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/equBigData/index'),
+        name: 'Index',
+        meta: { title: '设备数据展示大屏', icon: 'dashboard'}
       }
     ]
   },

src/views/datav/LeftChart1.vue

@@ -1,9 +1,30 @@
 <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;" />
+    <!-- <dv-border-box-1 class="lc1-details">定位监护长者<span>430</span></dv-border-box-1> -->
+    <div class="lc1-details">定位监护长者<span>430</span></div>
+    <div class="left-list" >
+      <div class="left-container" v-for="(item,index) in config.data">
+        
+        <div class="container-topdown">
+          <img  src="./img/sos.png" alt="">
+          <!-- <img v-show="" src="./img/weilan.png" alt="">
+          <img v-show="" src="./img/xinlv.png" alt="">
+          <img v-show="" src="./img/diedao.png" alt="">
+          <img v-show="" src="./img/didian.png" alt="">
+          <img v-show="" src="./img/shebei.png" alt=""> -->
+          <div class="word">姓名</div>
+        </div>
+        <div class="container-topdown">
+          <div class="number">{{item.label}}</div>
+          <div class="word">未处理</div>
+        </div>
+        <div class="container-topdown">
+         <div class="number color">{{ item.value }}</div>
+         <div class="word">已处理</div>
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -15,25 +36,35 @@ export default {
       config: {
         data: [
           {
+            label:222,
             name: '收费系统',
             value: 167
           },
           {
+            label:222,
             name: '通信系统',
             value: 67
           },
           {
+            label:222,
             name: '监控系统',
             value: 123
           },
           {
-            name: '供配电系统',
+            label:222,
+            name: '供配系统',
             value: 55
           },
           {
+            label:222,
             name: '其他',
             value: 98
-          }
+          },
+          {
+            label:222,
+            name: '其他',
+            value: 98
+          },
         ],
         colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
         unit: '件'
@@ -43,30 +74,26 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="scss">
 .left-chart-1 {
   width: 100%;
-  height: 37%;
+  height: 100%;
   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;
-  }
+  // border:1px solid green;
 
   .lc1-details {
-    height: 50px;
-    font-size: 16px;
+    // width: 250px;
+    height: 90px;
+    font-size: 14px;
+    padding: 0 10px;
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    text-indent: 20px;
+    border-radius: 5px;
+    // border: 1px solid red;
+    background-color: #062961;
 
     span {
       color: #096dd9;
@@ -75,9 +102,44 @@ export default {
       margin-left: 20px;
     }
   }
-
-  .lc1-chart {
-    flex: 1;
+  .left-list{
+    .left-container{
+      // width: 100%;
+      text-align: center;
+      border-radius: 5px;
+      border:1px solid #1ae1e6;
+      // height: 50px;
+      // background-color: green;
+      margin-top: 10px;
+      display:flex;
+      background-color: #5d6986;
+      // color:red;
+      .container-topdown{
+        width: 100%;
+        height: 57px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        img{
+          width: 20px;
+          height: 20px;
+        }
+        .word{
+          font-size: 12px;
+        }
+        .number{
+          color:#fcca00;
+          font-size: 20px;
+          font-weight: bold;
+        }
+        .color{
+          color:#fff;
+        }
+      }
+    }
   }
+
+  
 }
 </style>

src/views/datav/LeftChart11.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="left-chart-11">
+    <!-- <div class="lc1-header">张三收费站</div> -->
+    <div class="under-title"><b>在库设备数量</b></div>
+    <div class="right-container" v-for="(item,index) in config.data">
+      <div class="right-box">
+        <div class="top">
+          <div class="top-left">{{ item.type }}</div>
+          <div class="top-right">{{ item.time }}</div>
+        </div>
+        <div class="middle">{{ item.name }} ({{ item.tel }})</div>
+        <div class="under">告警地址：{{ item.adr }}</div>
+      </div>
+    </div>
+    <!-- <div class="left-list" >
+      <div class="left-container" v-for="(item,index) in config.data">
+        <div class="container-topdown">
+          <div>姓名：</div>
+          <div>{{item.label}}</div>
+        </div>
+        <div class="container-topdown">
+          <div>未处理：</div>
+          <div>{{ item.name }}</div>
+        </div>
+        <div class="container-topdown">
+         <div> 已处理：</div>
+         <div>{{ item.value }}</div>
+        </div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LeftChart1",
+  data() {
+    return {
+      config: {
+        data: [
+          {
+            label: 222,
+            tel:15202013072,
+            name:'王艺涵',
+            time:'2023-09-12 09:50:00',
+            type: "收费系统",
+            adr: 'ncjdhfcudjchnd',
+          },
+          {
+            label: 222,
+            tel:15202013072,
+            name:'王艺涵',
+            time:'2023-09-12 09:50:00',
+            type: "通信系统",
+            adr: 'cdkojhfcndoj',
+          },
+          {
+            label: 222,
+            tel:15202013072,
+            name:'王艺涵',
+            time:'2023-09-12 09:50:00',
+            type: "监控系统",
+            adr: 'ncsojhkla',
+          },
+          {
+            label: 222,
+            tel:15202013072,
+            name:'王艺涵',
+            time:'2023-09-12 09:50:00',
+            type: "供配系统",
+            adr: 'ncjdokchnjsak',
+          },
+          {
+            label: 222,
+            tel:15202013072,
+            name:'王艺涵',
+            time:'2023-09-12 09:50:00',
+            type: "其他",
+            adr: 'cniskjojcnosakl',
+          },
+          {
+            label: 222,
+            tel:15202013072,
+            name:'王艺涵',
+            time:'2023-09-12 09:50:00',
+            type: "其他",
+            adr: 'cniskjojcnosakl',
+          },
+        ],
+        colors: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
+        unit: "件",
+      },
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.left-chart-11 {
+  width: 100%;
+  // height: 100%;
+  display: flex;
+  flex-grow: 0;
+  flex-direction: column;
+  // border: 1px solid green;
+  .under-title {
+    flex: 1;
+    height: 28px;
+    font-size: 14px;
+    margin: 10px 0;
+    background: url(../../assets/image/title_bg.png) no-repeat;
+    b {
+      font-size: 14px;
+      color: #fff;
+      font-style: italic;
+      margin-left: 25px;
+      line-height: 30px;
+    }
+  }
+  .right-container{
+    .right-box{
+      color:#101010;
+      font-size: 14px;
+      padding:0 10px;
+      background-color: #fff;
+      margin-bottom: 5px;
+      .top{
+        display: flex;
+        justify-content: space-between;
+        border-bottom:1px solid #f1f0f0;
+        line-height: 30px;
+        .top-left{
+          color:#ff2626;
+        }
+      }
+      .middle{
+        line-height: 30px;
+        border-bottom:1px solid #f1f0f0;
+      }
+      .under{
+        line-height: 30px;
+      }
+    }
+  }
+
+  .lc1-details {
+    // width: 250px;
+    height: 70px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    border: 1px solid red;
+    background-color: #062961;
+
+    span {
+      color: #096dd9;
+      font-weight: bold;
+      font-size: 35px;
+      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;
+      }
+    }
+  }
+}
+</style>

src/views/datav/LeftChart99.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="left-chart-1">
+    <dv-charts class="ring-charts" :option="options" />
+    <div class="title">{{ this.title }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LeftChart99",
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      options: {
+        series: [
+          {
+            type: "gauge",
+            startAngle: -Math.PI / 2,
+            endAngle: Math.PI * 1.5,
+            arcLineWidth: 10,
+            data: [
+              {
+                name: "itemA",
+                value: 65,
+                gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
+              },
+            ],
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            dataItemStyle: {
+              lineCap: "round",
+            },
+            details: {
+              show: true,
+              formatter: "{value}%",
+              style: {
+                fill: "#1ed3e5",
+                fontSize: 10,
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  // methods: {
+  //   createData() {
+  //     const { randomExtend } = this;
+
+  //     this.card = new Array(5).fill(0).map((foo, i) => ({
+  //       title: "测试路段" + (i + i),
+  //       total: {
+  //         number: [randomExtend(9000, 10000)],
+  //         content: "{nt}",
+  //         textAlign: "right",
+  //         style: {
+  //           fill: "#ea6027",
+  //           fontWeight: "bold",
+  //         },
+  //       },
+  //       num: {
+  //         number: [randomExtend(30, 60)],
+  //         content: "{nt}",
+  //         textAlign: "right",
+  //         style: {
+  //           fill: "#26fcd8",
+  //           fontWeight: "bold",
+  //         },
+  //       },
+  //       ring: {
+  //         series: [
+  //           {
+  //             type: "gauge",
+  //             startAngle: -Math.PI / 2,
+  //             endAngle: Math.PI * 1.5,
+  //             arcLineWidth: 13,
+  //             radius: "80%",
+  //             data: [{ name: "资金占比", value: randomExtend(40, 60) }],
+  //             axisLabel: {
+  //               show: false,
+  //             },
+  //             axisTick: {
+  //               show: false,
+  //             },
+  //             pointer: {
+  //               show: false,
+  //             },
+  //             backgroundArc: {
+  //               style: {
+  //                 stroke: "#224590",
+  //               },
+  //             },
+  //             details: {
+  //               show: true,
+  //               formatter: "资金占比{value}%",
+  //               style: {
+  //                 fill: "#1ed3e5",
+  //                 fontSize: 20,
+  //               },
+  //             },
+  //           },
+  //         ],
+  //         color: ["#03d3ec"],
+  //       },
+  //     }));
+  //   },
+  //   randomExtend(minNum, maxNum) {
+  //     if (arguments.length === 1) {
+  //       return parseInt(Math.random() * minNum + 1, 10);
+  //     } else {
+  //       return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+  //     }
+  //   },
+  // },
+  // mounted() {
+  //   const { createData } = this;
+
+  //   createData();
+
+  //   setInterval(this.createData, 30000);
+  // },
+};
+</script>
+
+<style lang="scss">
+.left-chart-1 {
+  // width: 25%;
+  height: 100%;
+  // float: left;
+  // display: flex;
+  flex-grow: 0;
+  // flex-direction: column;
+  // border: 1px solid green;
+  .title{
+    height: 20%;
+    text-align: center;
+  }
+}
+.dv-border-box-8 .border-box-content{
+  display: flex;
+}
+</style>

src/views/datav/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: "500px",
+    },
+  },
+  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: 100px 10px 10px 10px;
+}
+</style>

src/views/datav/index.vue

@@ -1,176 +1,347 @@
 <template>
- <div class="app-container">
-  <div id="data-view">
-    <dv-full-screen-container>
+  <div class="app-container">
+    <div id="data-view">
       <div class="main-header">
-        <div class="mh-middle">机电设备电子档案</div>
-        <!-- <div class="mh-right">
-          <dv-border-box-2
-            style="width: 120px; height: 50px; line-height: 50px; text-align:center;margin-left:200px;"
-          >
-            综合管理台
-          </dv-border-box-2>
-        </div> -->
+        <div class="mh-middle">数字健康社区定位系统</div>
       </div>
-
-      <dv-border-box-1 class="main-container">
-        <dv-border-box-3 class="left-chart-container">
-
-          <Left-Chart-1 />
-          <Left-Chart-2 />
-          <Left-Chart-3 />
-
-        </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 class="main">
+        <div class="left">
+          <div class="left-top">
+            <div class="top-left"><Left-Chart-1 /></div>
+            <div class="top-right">
+              <equ-map
+                v-loading="mapLoading"
+                @callback="initMap"
+                height="400px"
+              />
             </div>
           </div>
-
-          <dv-border-box-4 class="rmc-bottom-container">
-
-            <Bottom-Charts />
-
-          </dv-border-box-4>
+          <div class="left-under">
+            <div class="under-title"><b>在库设备数量</b></div>
+            <dv-border-box-8 class="under-box">
+              <Left-Chart-99 title="我是我是"></Left-Chart-99>
+              <Left-Chart-99 title="我是我是"></Left-Chart-99>
+              <Left-Chart-99 title="我是我是"></Left-Chart-99>
+              <Left-Chart-99 title="我是我是"></Left-Chart-99>
+            </dv-border-box-8>
+          </div>
         </div>
-      </dv-border-box-1>
-
-    </dv-full-screen-container>
+        <div class="right">
+          <Left-Chart-11 />
+        </div>
+      </div>
+    </div>
   </div>
- </div>
 </template>
 
 <script>
-import LeftChart1 from './LeftChart1'
-import LeftChart2 from './LeftChart2'
-import LeftChart3 from './LeftChart3'
+import LeftChart1 from "./LeftChart1";
+import LeftChart11 from "./LeftChart11";
+import LeftChart99 from "./LeftChart99";
+import LeftChart2 from "./LeftChart2";
+import LeftChart3 from "./LeftChart3";
 
-import CenterCmp from './CenterCmp'
+import CenterCmp from "./CenterCmp";
 
-import RightChart1 from './RightChart1'
-import RightChart2 from './RightChart2'
+import RightChart1 from "./RightChart1";
+import RightChart2 from "./RightChart2";
 
-import BottomCharts from './BottomCharts'
+import BottomCharts from "./BottomCharts";
+import equMap from "./Maps.vue";
 
 export default {
-  name: 'DataView',
+  name: "DataView",
   components: {
     LeftChart1,
+    LeftChart11,
+    LeftChart99,
     LeftChart2,
     LeftChart3,
     CenterCmp,
     RightChart1,
     RightChart2,
-    BottomCharts
+    BottomCharts,
+    equMap,
   },
-  data () {
-    return {}
-  }
-}
+  data() {
+    return {
+      mapLoading:false,
+    };
+  },
+  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">
+<style lang="scss" scoped>
 #data-view {
+  color: #fff;
   width: 100%;
   height: 100%;
-  background-color: #030409;
-  color: #fff;
-
-  #dv-full-screen-container {
-    background-image: url('./img/bg.png');
-    background-size: 100% 100%;
-    box-shadow: 0 0 3px blue;
+  background: url(../../assets/image/bg.png);
+  background-size: 100% 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;
+  //   position: static;
+  // }
+  .main {
     display: flex;
-    flex-direction: column;
+    width: 100%;
+    padding-right: 10px;
+    .left {
+      width: 70%;
+      .left-top{
+        display: flex;
+        .top-left{
+          width: 30%;
+        }
+        .top-right{
+          width: 70%;
+        }
+      }
+      .left-under {
+        // width: 60%;
+        height: 30%;
+        .under-title {
+          flex: 1;
+          height: 28px;
+          font-size: 14px;
+          margin: 10px 0;
+
+          background: url(../../assets/image/title_bg.png) no-repeat;
+          // background: url(./img/title-bg.png) no-repeat;
+          b {
+            font-size: 14px;
+            color: #fff;
+            font-style: italic;
+            margin-left: 25px;
+            line-height: 30px;
+          }
+        }
+        .under-box {
+          height: 200px;
+          display: flex;
+        }
+      }
+    }
+    .right {
+      // border: 1px solid pink;
+      width: 30%;
+    }
   }
 
   .main-header {
     height: 80px;
     display: flex;
     justify-content: center;
-    align-items: flex-end;
+    align-items: flex-start;
 
     .mh-left {
       font-size: 20px;
-      color: rgb(1,134,187);
+      color: rgb(1, 134, 187);
 
       a:visited {
-        color: rgb(1,134,187);
+        color: rgb(1, 134, 187);
       }
     }
 
     .mh-middle {
-      font-size: 30px;
+      color: #1ae1e6;
+      font-size: 24px;
     }
 
-    .mh-left, .mh-right {
+    .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%;
-  }
+  // .main-container {
+  //   height: calc(~"100% - 80px");
+
+  //   .border-box-content {
+  //     padding: 20px;
+  //     box-sizing: border-box;
+  //     display: flex;
+  //   }
+  // }
+
+  // .left-chart-container {
+  //   width: 22%;
+  //   height: 65%;
+  //   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/BottomCharts.vue

@@ -0,0 +1,90 @@
+<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="less">
+#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

@@ -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/equBigData/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/equBigData/LeftChart1.vue

@@ -0,0 +1,83 @@
+<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

@@ -0,0 +1,71 @@
+<!--
+ * @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

@@ -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/equBigData/LeftChart4.vue

@@ -0,0 +1,194 @@
+<!--
+ * @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: {},
+      // option: {
+      //   data: [
+      //     {
+      //       name: "收费系统",
+      //       color: "#00baff",
+      //     },
+      //     {
+      //       name: "监控系统",
+      //       color: "#ff5ca9",
+      //     },
+      //     {
+      //       name: "通信系统",
+      //       color: "#3de7c9",
+      //     },
+      //     {
+      //       name: "供配电系统",
+      //       color: "#f5d94e",
+      //     },
+      //   ],
+      //   textStyle: {
+      //     fill: "#fff",
+      //   },
+
+      //   xAxis: {
+      //     data: ["10/01", "10/02", "10/03", "10/04", "10/05", "10/06", "10/07"],
+      //     axisLine: {
+      //       style: {
+      //         stroke: "#999",
+      //       },
+      //     },
+      //     axisLabel: {
+      //       style: {
+      //         fill: "#999",
+      //       },
+      //     },
+      //     axisTick: {
+      //       show: false,
+      //     },
+      //   },
+      //   yAxis: {
+      //     data: "value",
+      //     splitLine: {
+      //       show: false,
+      //     },
+      //     axisLine: {
+      //       style: {
+      //         stroke: "#999",
+      //       },
+      //     },
+      //     axisLabel: {
+      //       style: {
+      //         fill: "#999",
+      //       },
+      //     },
+      //     axisTick: {
+      //       show: false,
+      //     },
+      //     min: 0,
+      //     max: 8,
+      //   },
+      //   series: [
+      //     {
+      //       name: "收费系统",
+      //       data: [2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5],
+      //       type: "bar",
+      //       barStyle: {
+      //         fill: "rgba(0, 186, 255, 0.4)",
+      //       },
+      //     },
+      //     {
+      //       name: "监控系统",
+      //       data: [2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5],
+      //       type: "line",
+      //       lineStyle: {
+      //         stroke: "#ff5ca9",
+      //       },
+      //       linePoint: {
+      //         radius: 4,
+      //         style: {
+      //           fill: "#ff5ca9",
+      //           stroke: "transparent",
+      //         },
+      //       },
+      //     },
+      //     {
+      //       name: "通信系统",
+      //       data: [1.3, 2.3, 5.3, 5.3, 6.3, 5.3, 1.3],
+      //       type: "line",
+      //       smooth: true,
+      //       lineArea: {
+      //         show: true,
+      //         gradient: ["rgba(55, 162, 218, 0.6)", "rgba(55, 162, 218, 0)"],
+      //       },
+      //       lineStyle: {
+      //         lineDash: [5, 5],
+      //       },
+      //       linePoint: {
+      //         radius: 4,
+      //         style: {
+      //           fill: "#00db95",
+      //         },
+      //       },
+      //     },
+      //     {
+      //       data: [0.2, 1.2, 4.2, 4.2, 5.2, 4.2, 0.2],
+      //       type: "line",
+      //       name: "供配电系统",
+      //       lineArea: {
+      //         show: true,
+      //         gradient: ["rgba(245, 217, 79, 0.8)", "rgba(245, 217, 79, 0.2)"],
+      //       },
+      //       lineStyle: {
+      //         stroke: "#f5d94e",
+      //       },
+      //       linePoint: {
+      //         radius: 4,
+      //         style: {
+      //           fill: "#f5d94e",
+      //           stroke: "transparent",
+      //         },
+      //       },
+      //     },
+      //   ],
+      // },
+    };
+  },
+  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

@@ -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: "500px",
+    },
+  },
+  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/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/equBigData/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/equBigData/aaa.vue

@@ -0,0 +1,205 @@
+<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">
+.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

@@ -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/equBigData/index.vue

@@ -0,0 +1,457 @@
+<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

@@ -0,0 +1,50 @@
+<!--
+ * @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

@@ -0,0 +1,54 @@
+<!--
+ * @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>