diff --git a/src/assets/img/border3.png b/src/assets/img/border3.png
new file mode 100644
index 0000000..82bfcbf
Binary files /dev/null and b/src/assets/img/border3.png differ
diff --git a/src/assets/img/border4.png b/src/assets/img/border4.png
new file mode 100644
index 0000000..85fafa4
Binary files /dev/null and b/src/assets/img/border4.png differ
diff --git a/src/assets/img/icon.png b/src/assets/img/icon.png
new file mode 100644
index 0000000..edc19c0
Binary files /dev/null and b/src/assets/img/icon.png differ
diff --git a/src/assets/img/shiler.png b/src/assets/img/shiler.png
new file mode 100644
index 0000000..08e01b2
Binary files /dev/null and b/src/assets/img/shiler.png differ
diff --git a/src/assets/index_img/ball.png b/src/assets/index_img/ball.png
new file mode 100644
index 0000000..d09cd31
Binary files /dev/null and b/src/assets/index_img/ball.png differ
diff --git a/src/assets/index_img/ball1.png b/src/assets/index_img/ball1.png
new file mode 100644
index 0000000..2571bc0
Binary files /dev/null and b/src/assets/index_img/ball1.png differ
diff --git a/src/assets/index_img/ball2.png b/src/assets/index_img/ball2.png
new file mode 100644
index 0000000..b9db29e
Binary files /dev/null and b/src/assets/index_img/ball2.png differ
diff --git a/src/assets/index_img/title2.png b/src/assets/index_img/title2.png
new file mode 100644
index 0000000..da0480c
Binary files /dev/null and b/src/assets/index_img/title2.png differ
diff --git a/src/view/delivery/components/bottom.vue b/src/view/delivery/components/bottom.vue
index 91f2c97..e36e81c 100644
--- a/src/view/delivery/components/bottom.vue
+++ b/src/view/delivery/components/bottom.vue
@@ -1,507 +1,232 @@
 <script setup>
-import { onMounted, reactive, ref } from "vue"
-import border from "@/components/border.vue";
-import * as echarts from 'echarts';
-import mitt from "@/utils/mitt"
-
-const initData = (aaa) => {
-  for (let i = 0; i < 20; i++) {
-    if (i % 2 == 0) {
-      aaa.data.push(
-        [
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)' >排sd序</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
-        ]
-      )
-    } else {
-      aaa.data.push(
-        [
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)' >排sd序</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
-        ]
-      )
-    }
+import { ref, reactive, onMounted } from "vue"
 
+const initData = (data) => {
+  let arr = [];
+  for (let i = 0; i < 10; i++) {
+    arr.push(
+      [
+        `${i + 1}`,
+        `-`,
+        `-`,
+        `-`,
+        `-`,
+        `-`,
+        `查看详情>`,
+      ]
+    )
   }
+  list.data = arr;
+  scrollBoardRef.value.updateRows(list.data);
 }
 
+const scrollBoardRef = ref(null);
 const list = reactive({
   header: [
-    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>ID</div>`,
-    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人</div>`,
-    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人电话</div>`,
-    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>商品名称</div>`,
-    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人地址</div>`,
+    `设备编号`,
+    `设备名称`,
+    `警告时间`,
+    `警告数据`,
+    `设备图片`,
+    `警告原因`,
+    `解决方案`,
   ],
   data: [],
   //   index: true,
-  // headerBGC: 'rgba(0, 168, 255, 0.76)',
-  // oddRowBGC: 'rgba(91, 219, 246, 0.20)',
-  // evenRowBGC: 'rgba(0, 168, 255, 0.16)',
-  oddRowBGC: '',
-  evenRowBGC: "",
-  //   columnWidth: [50],
-  align: ['center'],
-  rowNum: 7
+  headerBGC: 'rgba(0, 156, 255, 0.4)',
+  oddRowBGC: 'rgba(91, 219, 246, 0.10)',
+  evenRowBGC: '',
+  align: 'center',
+  rowNum: 9
 })
 
-initData(list);
-
-const orderList = reactive([
-  {
-    name: '今日订单',
-    value: '988'
-  },
-  {
-    name: '已取货订单',
-    value: '1523'
-  },
-  {
-    name: '未配送订单',
-    value: '55'
-  },
-  {
-    name: '已完成订单',
-    value: '3'
-  },
-])
-
-const cOrderValue = (e) => {
-  let str = e;
-  if (str > 9999) str = 9999 + '';
-  else str = str + '';
-  str = str.split('');
-  if (str.length < 4) {
-    let t = 4 - str.length;
-    for (let i = 0; i < t; i++) {
-      str.unshift('0');
-    }
-  }
-  str.splice(-3, 0, ',');
-  return str;
-}
-
-
-const echartsRef = ref(null)
-
-const initEcahrts = () => {
-
-  let xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
-    yData1 = [400, 410, 350, 320, 280, 340, 360, 400, 420, 410],
-    yData2 = [350, 320, 260, 240, 220, 280, 300, 360, 340, 340],
-    yData3 = [200, 260, 200, 190, 180, 220, 260, 300, 280, 300],
-    yData4 = [120, 300, 230, 240, 190, 290, 103, 456, 230, 270],
-    borderData = [],
-    legend = ["已取货订单", "未配送订单", "已完成订单", "小时订单数"],
-    colorArr = [{
-      start: "rgba(0, 168, 255,",
-      end: "rgba(0, 168, 255, 1)"
-    },
-    {
-      start: "rgba(91, 219, 246,",
-      end: "rgba(91, 219, 246, 1)"
-    },
-    {
-      start: "rgba(75, 95, 219,",
-      end: "rgba(75, 95, 219, 1)"
-    },
-    {
-      color: "rgba(91, 219, 246, 1)"
-    }
-    ];
-  let normalColor = "#DEEBFF";
-  //   let fontSize = 20;
-  let seriesData = [];
-  let borderHeight = 4;
-  xData.forEach(element => {
-    borderData.push(borderHeight);
-  });
-  [yData1, yData2, yData3, yData4].forEach((item, index) => {
-    let obj1 = {};
-    if (index < 3) {
-      obj1 = {
-        name: legend[index],
-        type: "bar",
-        stack: legend[index],
-        data: item,
-        barWidth: "15%",
-        itemStyle: {
-          normal: {
-            color: {
-              type: "linear",
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              colorStops: [{
-                offset: 0,
-                color: colorArr[index].start + "0.3)"
-              },
-              {
-                offset: 0.5,
-                color: colorArr[index].start + "0.4)"
-              },
-              {
-                offset: 1,
-                color: colorArr[index].end
-              }
-              ],
-              globalCoord: false
-            }
-          }
-        }
-      };
-      seriesData.push(obj1);
-    } else {
-      let obj3 = {
-        name: legend[index],
-        type: "line",
-        yAxisIndex: 1,
-        smooth: false,
-        showBackground: true,
-        backgroundStyle: {
-          color: 'rgba(255,255,255, 0.8)'
-        },
-        symbol: "circle",
-        symbolSize: 16,
-        lineStyle: {
-          normal: {
-            width: 2
-          }
-        },
-        itemStyle: {
-          normal: {
-            color: colorArr[index].color,
-            borderColor: "#fff",
-            borderWidth: 1
-          }
-        },
-        data: item,
-        label: {
-          normal: {
-            show: false
-          }
-        }
-      };
-      seriesData.push(obj3);
-    }
-  });
-  console.log(seriesData);
-  const option = {
-    backgroundColor: "rgba(0,0,0,0)",
-    grid: {
-      left: "3%",
-      top: "12%",
-      right: "12%",
-      bottom: '2%',
-      containLabel: true
-    },
-    legend: {
-      show: true,
-      // icon: "rect",
-      orient: 'vertical', // 将图例竖直布局
-
-      itemWidth: 16,
-      itemHeight: 10,
-      right: "right",
-      bottom: "center",
-      textStyle: {
-        color: "#fff"
-      },
-      data: legend
-    },
-    tooltip: {
-      trigger: "axis",
-      backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
-      textStyle: {
-        color: '#fff'
-      },
-      borderColor: "rgba(18, 57, 60, .8)",
-      axisPointer: {
-        type: 'shadow',
-        shadowStyle: {
-          color: 'rgba(0, 11, 34, .4)',
-        }
-      },
-      formatter: function (params) {
-        let str = "";
-        for (let i = 0; i < params.length; i++) {
-          if (params[i].seriesName !== "") {
-            str +=
-              params[i].name +
-              ':' +
-              params[i].seriesName +
-              '-' +
-              params[i].value +
-              "<br/>";
-          }
-        }
-        return str;
-      }
-    },
-    xAxis: [{
-      type: "category",
-      data: xData,
-      name: '小时(工作时间)',
-      nameTextStyle: {
-        color: '#fff',
-        fontSize: 12
-      },
-      axisPointer: {
-        type: "shadow"
-      },
-      axisLabel: {
-        interval: 0,
-        align: 'center',
-        textStyle: {
-          color: normalColor,
-          fontSize: 12
-        }
-      },
-      axisLine: {
-        lineStyle: {
-          color: '#1C82C5'
-        }
-      },
-      axisTick: {
-        show: false
-      },
-      splitLine: {
-        show: false
-      }
-    }],
-    yAxis: [{
-      type: "value",
-      // name: "亿千瓦时",
-      // nameTextStyle: {
-      //     color: normalColor,
-      //     fontSize: 12
-      // },
-      // "min": 0,
-      // "max": 50,
-      axisLabel: {
-        formatter: "{value}",
-        textStyle: {
-          color: normalColor,
-          fontSize: 14
-        }
-      },
-      axisLine: {
-        lineStyle: {
-          color: '#1C82C5'
-        }
-      },
-      axisTick: {
-        show: false
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: "solid",
-          color: 'rgba(28, 130, 197, .3)'
-        }
-      }
-    },
-    {
-      type: "value",
-      // name: "%",
-      // nameTextStyle: {
-      //     color: normalColor,
-      //     fontSize: 12
-      // },
-      // min: -100,
-      // max: 100,
-      axisLabel: {
-        show: false,
-        formatter: "{value}",
-        textStyle: {
-          color: normalColor,
-          fontSize: 12
-        }
-      },
-      axisLine: {
-        lineStyle: {
-          color: '#1C82C5'
-        }
-      },
-      axisTick: {
-        show: false
-      },
-      splitLine: {
-        show: false,
-        lineStyle: {
-          type: "dashed",
-          color: "rgba(255,255,255,0.2)"
-        }
-      }
-    }
-    ],
-    series: seriesData
-  };
-
-  // 基于DOM元素初始化echarts实例
-  const chart = echarts.init(echartsRef.value);
-
-  // 使用配置项显示图表
-  chart.setOption(option);
-}
-
-const openList = () => {
-  mitt.emit('showBusinesses')
-}
-
 onMounted(() => {
-  initEcahrts()
+  initData();
 })
 
 </script>
 
 <template>
-  <border>
-    <div class="box">
-      <div class="title">配送详情</div>
-      <div class="body-box">
-        <div class="left">
-          <div class="top">
-            <div class="view" v-for="(item, index) in orderList" :key="index">
-              <div class="num">
-                <div v-for="(t, i) in cOrderValue(item.value)" :key="i">
-                  {{ t }}
-                </div>
-              </div>
-              <div>{{ item.name }}</div>
-            </div>
+  <div class="box">
+    <div class="view box1">
+      <div class="box-title">
+        <div class="text">监测设备</div>
+        <div class="bg"></div>
+      </div>
+      <div class="c-box">
+        <div class="ball">
+          <img src="/src/assets/index_img/ball.png" />
+          <div class="count">
+            <div>设备总数</div>
+            <div>12</div>
           </div>
-          <div class="bottom echarts" ref="echartsRef"></div>
         </div>
-        <div class="right">
-          <div class="top">
-            <div class="t-right">
-              <img src="/src/assets/img/item.png" />
-              <div>今日订单</div>
-            </div>
-            <div class="flex" @click="openList">
-              <div>查看更多</div>
-              <div>{{ "〉" }}</div>
-            </div>
+        <div class="ball1 ball-item">
+          <div class="count">
+            <img src="/src/assets/index_img/ball1.png" />
+            <span>{{ 6 }}</span>
           </div>
-          <dv-scroll-board :config="list" style="width: 100%; height: 90%" />
+          离线设备
+        </div>
+        <div class="ball2 ball-item">
+          <div class="count">
+            <img src="/src/assets/index_img/ball2.png" />
+            <span>{{ 6 }}</span>
+          </div>
+          今日警告数
+        </div>
+        <div class="ball3 ball-item">
+          <div class="count">
+            <img src="/src/assets/index_img/ball1.png" />
+            <span>{{ 6 }}</span>
+          </div>
+          在线设备
+        </div>
+        <div class="ball4 ball-item">
+          <div class="count">
+            <img src="/src/assets/index_img/ball2.png" />
+            <span>{{ 6 }}</span>
+          </div>
+          警告总数
         </div>
       </div>
     </div>
-  </border>
+    <div class="view box2">
+      <div class="box-title">
+        <div class="text">养殖基地视频监控</div>
+        <div class="bg"></div>
+      </div>
+      <div class="c-box">
+        <dv-scroll-board
+          ref="scrollBoardRef"
+          :config="list"
+          style="width: 100%; height: 100%"
+        />
+      </div>
+    </div>
+    <div class="border"></div>
+  </div>
 </template>
 
 <style scoped lang="scss">
 .box {
-  height: 100%;
   width: 100%;
-  padding: 20px 20px;
-  font-size: 0.8rem;
+  height: 100%;
   display: flex;
-  flex-direction: column;
   justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-  .title {
-    width: 100%;
-    background-image: url(../../../assets/img/title3.png);
-    background-size: 100% 100%;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: "ifonts";
-    font-size: 1.2rem;
-  }
-  .body-box {
-    flex: 1;
+  align-items: flex-end;
+  position: relative;
+  .view {
+    height: 98%;
+    box-sizing: border-box !important;
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    .left {
-      width: 60%;
-      height: 100%;
-      .top {
+    flex-direction: column;
+    .box-title {
+      width: 100%;
+      position: relative;
+      .text {
+        text-align: left;
+        font-family: "ifonts";
+        padding: 0.2rem 0.8rem;
+        font-size: 1.1rem;
+      }
+      .bg {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: 50%;
+        background-image: url(../../../assets/index_img/title1.png);
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .box1 {
+    width: 34%;
+    .c-box {
+      height: 90%;
+      position: relative;
+      .ball {
+        height: 100%;
+        width: 100%;
+        position: relative;
+        img {
+          position: absolute;
+          bottom: 1rem;
+          left: 50%;
+          height: 70%;
+          width: auto;
+          transform: translate(-50%);
+        }
+        .count {
+          position: absolute;
+          bottom: 40%;
+          left: 50%;
+          transform: translate(-50%);
+        }
+      }
+      .ball-item {
+        position: absolute;
         display: flex;
-        justify-content: space-evenly;
-        height: 25%;
-        margin-top: 1rem;
-        .view {
-          width: 21%;
-          height: 100%;
-          background-image: url(../../../assets/delivery_img/box4.png);
-          background-size: 100% 100%;
-          font-size: 1.2rem;
-          font-family: "ifonts";
-          display: flex;
-          flex-direction: column;
-          justify-content: space-evenly;
-          .num {
+        flex-direction: column;
+        align-items: center;
+        .count {
+          position: relative;
+          img {
+            height: 20%;
+            width: auto;
+          }
+          span {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
             display: flex;
             justify-content: center;
-            div {
-              width: 1.5rem;
-              height: 1.8rem;
-              background-image: url(../../../assets/delivery_img/icon_num.png);
-              background-size: 100% 100%;
-              margin: 0.2rem;
-            }
+            align-items: center;
+            font-size: 1.2rem;
+            font-weight: bold;
           }
         }
       }
-      .bottom {
-        height: 70%;
-        width: 100%;
+      .ball1 {
+        top: 10%;
+        left: 20%;
+      }
+      .ball2 {
+        top: 10%;
+        right: 20%;
+      }
+      .ball3 {
+        top: 40%;
+        left: 10%;
+      }
+      .ball4 {
+        top: 40%;
+        right: 10%;
       }
     }
-    .right {
-      width: 38%;
-      height: 95%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      align-items: center;
-      .top {
-        height: 10%;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .t-right {
-          display: flex;
-          align-items: center;
-          img {
-            width: 1rem;
-            height: 1rem;
-            margin-right: 0.5rem;
-          }
-        }
-        .flex {
-          display: flex;
-          cursor: pointer;
-          div {
-            margin-left: 0.5rem;
-          }
-        }
-      }
-
-      :deep(.ceil) {
-        padding: 0 !important;
-        margin-bottom: 5px;
-      }
-
-      :deep(.header-item) {
-        padding: 0 !important;
-      }
+  }
+  .box2 {
+    width: 64%;
+    .box-title > .bg {
+      background-image: url(../../../assets/index_img/title2.png);
     }
+    .c-box {
+      height: 88%;
+    }
+  }
+  .border {
+    background-image: url(../../../assets/img/border3.png);
+    background-size: 100% 100%;
+    height: 0.4rem;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
   }
 }
 </style>
diff --git a/src/view/delivery/components/center.vue b/src/view/delivery/components/center.vue
index 9430926..3b16139 100644
--- a/src/view/delivery/components/center.vue
+++ b/src/view/delivery/components/center.vue
@@ -1,71 +1,242 @@
 <script setup>
-import { reactive, ref } from "vue"
-import border from "@/components/border.vue";
-import AMap from "./AMap.vue";
+import { onMounted, reactive, ref, inject, nextTick } from "vue";
+import * as echarts from 'echarts';
+import 'echarts-gl';
+import mitt from "@/utils/mitt";
+import luxian from "@/assets/json/luxian.json";
+import hejiang from "@/assets/json/hejiang.json";
+import xuyong from "@/assets/json/xuyong.json";
+import gulin from "@/assets/json/gulin.json";
+import jiangyang from "@/assets/json/jiangyang.json";
+import longma from "@/assets/json/longma.json";
+import naxi from "@/assets/json/naxi.json";
+import { useAppStore } from "@/store/app.js";
 
-const test = () => {
-  console.log('ss');
+
+const appStore = useAppStore();
+
+const mapType = reactive({
+  name: '',
+  json: ''
+})
+
+const changeType = (name = 'luxian') => {
+  mapType.name = name;
+  if (name == 'luxian') mapType.json = luxian;
+  if (name == 'hejiang') mapType.json = hejiang;
+  if (name == 'xuyong') mapType.json = xuyong;
+  if (name == 'gulin') mapType.json = gulin;
+  if (name == 'jiangyang') mapType.json = jiangyang;
+  if (name == 'longma') mapType.json = longma;
+  if (name == 'naxi') mapType.json = naxi;
 }
+
+let dataValue = [
+  {
+    name: '测试一', value: [105.38, 29.15, 0],
+    store: 2065, team: 33,
+  },
+  {
+    name: '测试二', value: [105.62, 29.05, 0],
+    store: 665, team: 895,
+  },
+  {
+    name: '测试三', value: [105.55, 29.10, 0],
+    store: 66, team: 5422,
+  },
+  {
+    name: '测试四', value: [105.70, 29.23, 0],
+    store: 9887, team: 1562,
+  },
+  {
+    name: '泸县', value: [105.372029, 29.141426, 0],
+    store: 9999, team: 1000,
+  },
+
+]
+
+const customFormatter = (params) => {
+  // console.log(params.data);
+  return `{img|${params.data.name}}\n{t|店铺${params.data.store}个, 团队${params.data.team}个}`
+}
+
+const initDateValue = () => {
+  dataValue.forEach(item => {
+    item.label = {
+      show: true, // 显示标签
+      formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
+      fontSize: 12, // 字体大小
+      fontWeight: 'bold', // 字体粗细
+      color: '#fff', // 字体颜色
+      offset: [-50, -40], // 标签偏移量，可根据需要调整
+      rich: {
+        img: {
+          backgroundColor: {
+            image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
+          },
+          height: 40,
+          width: 140,
+          color: '#fff',
+          fontSize: 14,
+          lineHeight: 14,
+          fontFamily: 'ifonts',
+          align: 'center',
+          padding: [0, 0, 20, 0]
+        },
+        t: {
+          fontSize: 10,
+          align: 'center'
+        }
+      }
+    };
+  })
+}
+
+const echartsRef = ref(null);
+let chart = null;
+
+const initMap = () => {
+  // 基于DOM元素初始化echarts实例
+  if (chart == null) {
+    chart = echarts.init(echartsRef.value);
+  }
+  echarts.registerMap(mapType.name, mapType.json);
+
+  let domImg = document.createElement("img");
+  domImg.style.height = '1000px';
+  domImg.style.width = "1000px";
+  domImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6b962202311291338462283.png';
+
+
+  let option = {
+    animation: false,
+    //geo方式地理坐标系组件。
+    geo3D: [
+      {
+        map: mapType.name,
+        zoom: 1.0,
+        axisLine: {
+          show: false // 设置为false隐藏坐标轴
+        },
+        label: {
+          show: false,
+          disabled: true,
+          color: '#fff',
+          fontSize: 25,
+
+        },
+        //   选中状态下的多边形和标签样式
+        // emphasis: {
+        //   itemStyle: {
+        //     // color: '#546686', //地图背景色
+        //     borderColor: '#fff', //省市边界线00fcff 516a89
+        //     borderWidth: 1,
+        //   },
+        //   label: {
+        //     color: '#fff'
+        //   }
+        // },
+        emphasis: {
+          disabled: true
+        },
+        select: {
+          disabled: true
+        },
+        // aspectScale:0.75, //长宽比
+        //   roam: true, //是否允许缩放
+        itemStyle: {
+          color: '#546686', //地图背景色    
+          borderColor: '#fff', //省市边界线00fcff 516a89
+          borderWidth: 1,
+        },
+        regionHright: 1,
+      },
+    ],
+    series: [
+      {
+        name: "",
+        type: "scatter",
+        coordinateSystem: "geo",
+        data: dataValue,
+        symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
+        symbolSize: [40, 30],
+        hoverSymbolSize: [60, 45],
+        label: {
+          formatter: "",
+          position: "center",
+          show: false
+        },
+        // tooltip: {
+        //   formatter (value) {
+        //     console.log(value);
+        //     return "";
+        //   },
+        //   show: true
+        // },
+        // encode: {
+        //   value: 2
+        // },
+        // itemStyle: {
+        //   color: "#0efacc"
+        // },
+        emphasis: {
+          label: {
+            show: false
+          }
+        }
+      },
+    ]
+  }
+  // 使用配置项显示图表
+  chart.setOption(option);
+
+  // 添加自定义图形，实现地图倾斜效果
+  chart.dispatchAction({
+    type: 'updateLayout',
+    rotation: Math.PI / 4,  // 设置旋转角度
+  });
+
+  // 设置3D效果，实现地图立体效果
+  chart.setOption({
+    grid3D: {},
+    xAxis3D: {},
+    yAxis3D: {},
+    zAxis3D: {}
+  });
+}
+
+onMounted(() => {
+  changeType(appStore.map_info);
+  initDateValue();
+  initMap();
+  nextTick(() => {
+    mitt.on('map_info', e => {
+      changeType(e.pinyin);
+      initDateValue();
+      initMap();
+    })
+  })
+})
+
 </script>
 
 <template>
-  <div class="box">
-    <div class="map">
-      <AMap></AMap>
-    </div>
-    <div class="border"></div>
-    <div class="btn">
-      <div class="c-b" @click.stop="test">
-        <div class="text">已取货(100)单</div>
-      </div>
-      <div class="c-b" @click.stop="test">
-        <div class="text">已配送(100)单</div>
-      </div>
-      <div class="c-b" @click.stop="test">
-        <div class="text">已完成(100)单</div>
-      </div>
-    </div>
+  <div class="map">
+    <div class="echarts" ref="echartsRef"></div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.box {
+.map {
   width: 100%;
   height: 100%;
-  position: relative;
-  .border {
-    position: absolute;
-    top: 0;
-    left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* background-color: rgba($color: #fff, $alpha: 0.3); */
+  .echarts {
     width: 100%;
     height: 100%;
-    border: 1px solid rgba(91, 219, 246, 1);
-    box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
-    pointer-events: none;
-  }
-  .map {
-    height: 100%;
-    width: 100%;
-  }
-  .btn {
-    position: absolute;
-    top: 30%;
-    left: 2rem;
-    .c-b {
-      cursor: pointer;
-      background-image: url(../../../assets/delivery_img/icon9.png);
-      background-size: 100% 100%;
-      height: 4rem;
-      width: 11.5rem;
-      margin-bottom: 1.4rem;
-      display: flex;
-      align-items: center;
-      .text {
-        margin-left: 4.5rem;
-        font-size: 0.8rem;
-        color: #fff;
-      }
-    }
   }
 }
 </style>
diff --git a/src/view/delivery/components/left.vue b/src/view/delivery/components/left.vue
index 712cc6a..4b102fb 100644
--- a/src/view/delivery/components/left.vue
+++ b/src/view/delivery/components/left.vue
@@ -1,438 +1,327 @@
 <script setup>
-import { onMounted, reactive, ref } from "vue"
-import border from "@/components/border.vue";
-import AMapLeft from "./AMapLeft.vue";
-import * as echarts from 'echarts';
+import { ref, reactive, onMounted } from "vue"
+import * as echarts from "echarts"
 
+const circleRef = ref(null);
+const initCircle = () => {
+  const echart = echarts.init(circleRef.value);
+  let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
 
-var fontColor = "#000";
-var seriesName = "";
-let noramlSize = 16;
-var datas = {
-  textValue: "100%",
-  colors: ["#31829d", "#009cff", "#4b5fdb"],
-  legendArr: ["待取货", "待配送", "已送达"],
-  dataArr: [
-    { value: 335, name: "待取货" },
-    { value: 210, name: "待配送" },
-    { value: 410, name: "已送达" },
-  ],
-  company: "个"
-};
-const option = {
-  backgroundColor: "rgba(0,0,0,0)",
-  color: datas.colors,
-  grid: {
-    left: "0%",
-    right: "0%",
-    bottom: "0%",
-    top: "0%"
-  },
-  graphic: {
-    elements: [
+  let data = [
+    { value: 400, name: '种类: 本地鸡' },
+    { value: 435, name: '种类: 鸭' },
+    { value: 580, name: '种类: 鹅' },
+    { value: 884, name: '种类: 猪' },
+  ]
+  let option = {
+    tooltip: {
+      trigger: 'item',
+    },
+    color: color,
+    legend: {
+      show: true,
+      // icon: "rect",
+      itemWidth: 8,
+      itemHeight: 8,
+      bottom: "5%",
+      textStyle: {
+        color: "#fff"
+      },
+    },
+    series: [
       {
-        type: 'text',
-        left: 'center', // 相对父元素居中
-        bottom: '50%',  // 相对父元素居中
-        style: {
-          fill: '#fff',
-          text: datas.textValue,
-          font: '18px Microsoft YaHei'
-        }
+        name: 'Access From',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['50%', '40%'], // 设置左半部分饼图的位置
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 10,
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: data
       }
     ]
-  },
-  tooltip: {
-    trigger: "item",
-    backgroundColor: "#f6f6f6",
-    textStyle: {
-      color: "#000"
-    },
-    formatter: "{b}: {c}" + datas.company + " ({d}%)"
-  },
-  legend: {
-    icon: "rect",
-    bottom: "5%",
-    left: "center",
-    itemWidth: 12,
-    itemHeight: 12,
-    // itemGap: 50, //图例间隙
-    textStyle: {
-      color: "#fff",
-      fontSize: noramlSize
-    },
-    data: datas.legendArr
-  },
-  series: [
-    {
-      name: "",
-      type: "pie",
-      radius: ["45%", "60%"],
-      center: ["50%", "45%"],
-      itemStyle: {
-        normal: {
-          borderWidth: 10,
-          borderColor: "#092846"
-        }
-      },
-      avoidLabelOverlap: false,
-      label: {
-        show: false,
-        position: 'bottom'
-      },
-      labelLine: {
-        normal: {
-          show: true,
-          lineStyle: {
-            color: "#138af4"
-          },
-          length: 20,
-          length2: 50,
-        }
-      },
-      data: datas.dataArr
-    },
-    {
-      type: "pie",
-      radius: "40%",
-      center: ["50%", "45%"],
-      z: -2,
-      label: {
-        show: false
-      },
-      labelLine: {
-        show: false
-      },
-      itemStyle: {
-        color: 'rgba(255,255,255,0.2)'
-      },
-      data: [100]
-    },
+  };
+
+  echart.setOption(option)
+}
+
+const chartRef = ref(null)
+const initMap = () => {
+  const echart = echarts.init(chartRef.value);
+  const basicColors = [
+    ['#00A8FF', '#2A7FEB'],
+    ['#00A8FF', '#2A7FEB'],
+    ['#00A8FF', '#2A7FEB'],
+    ['#00A8FF', '#2A7FEB'],
+    ['#00A8FF', '#2A7FEB'],
+    ['#00A8FF', '#2A7FEB'],
+    ['#00A8FF', '#2A7FEB'],
+    ['#00A8FF', '#2A7FEB']
   ]
-};
+  // 生成渐变色
+  function genLinearGradient (colors) {
+    const color = {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 1,
+      y2: 0,
+      colorStops: [
+        {
+          offset: 0,
+          color: colors[0] // 0%处的颜色
+        },
+        {
+          offset: 1,
+          color: colors[1] // 100%处的颜色
+        }
+      ],
+      global: false
+    }
+    return color
+  }
 
-const echartsRef = ref(null)
-
-const initEcahrts = () => {
-  // 基于DOM元素初始化echarts实例
-  const chart = echarts.init(echartsRef.value);
-
-  // 使用配置项显示图表
-  chart.setOption(option);
+  let option = {
+    grid: {
+      left: '12%',
+      top: '5%',
+      bottom: '12%',
+      right: '0%'
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: 'rgba(0, 156, 255, 0.6)', //设置背景颜色
+      textStyle: {
+        color: '#fff'
+      },
+      borderColor: "rgba(0, 156, 255, 1)",
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(255,255,255, .2)',
+        }
+      },
+      formatter: function (params) {
+        let str = "";
+        for (let i = 0; i < params.length; i++) {
+          if (params[i].seriesName !== "") {
+            str +=
+              params[i].name +
+              ': ' +
+              params[i].value +
+              "<br/>";
+          }
+        }
+        return str;
+      }
+    },
+    xAxis: {
+      data: ['鸡', '鸭', '鹅', '猪'],
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255,255,255,0.3)',
+          width: 1 // 这里是为了突出显示加上的
+        }
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#fff',
+          fontSize: 12
+        }
+      }
+    },
+    yAxis: [{
+      splitNumber: 2,
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255,255,255,0.3)',
+          width: 1 // 这里是为了突出显示加上的
+        }
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#fff'
+        }
+      },
+      splitArea: {
+        areaStyle: {
+          color: 'rgba(255,255,255,.5)'
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(255,255,255, 0.5)',
+          width: 0.5,
+          type: 'dashed'
+        }
+      }
+    }
+    ],
+    series: [
+      {
+        name: 'hill',
+        type: 'pictorialBar',
+        barCategoryGap: '0%',
+        symbol: 'path://M0,10 L10,10 C5.5,8 5.5,5 5,0 C4.5,5 4.5,8 0,10 z',
+        label: {
+          show: false,
+          position: 'top',
+          distance: 15,
+          color: '#FFF6B7',
+          fontSize: 16,
+        },
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              return genLinearGradient(basicColors[params.dataIndex])
+            }
+          },
+          emphasis: {
+            opacity: 1
+          }
+        },
+        data: [726, 622, 820, 454],
+        z: 10
+      }]
+  };
+  echart.setOption(option)
 }
 
 onMounted(() => {
-  initEcahrts()
+  initCircle();
+  initMap();
 })
-
 </script>
 
 <template>
-  <border>
-    <div class="box">
-      <div class="title">配送详情</div>
-      <div class="head-box b-box">商品信息</div>
-      <div class="order_h">
-        <div class="top">
-          <div>
-            订单编号
-            <span style="margin-left: 1rem"
-              >bzj20230923163643650ea39ba256c</span
-            >
-          </div>
-          <div>23-11-20</div>
-        </div>
-        <div class="line">
-          <div class="c"></div>
-          <div class="l"></div>
-          <div class="c"></div>
-        </div>
-        <div class="bottom">
-          <div>
-            <img class="img" src="/src/assets/delivery_img/icon1.png" />
-          </div>
-          <div class="name">
-            <div class="name1 b-box">
-              <div>商户名称</div>
-            </div>
-            <div class="name2">
-              <div>天天超市</div>
-            </div>
-          </div>
-          <div class="name">
-            <div class="name1 b-box">
-              <div>商品名称</div>
-            </div>
-            <div class="name2">
-              <div>山花纯牛奶100ml</div>
-            </div>
-          </div>
-          <div>
-            <img class="img" src="/src/assets/delivery_img/icon2.png" />
-          </div>
-        </div>
+  <div class="box">
+    <div class="view box1">
+      <div class="box-title">
+        <div class="text">泸县原生态养殖基地</div>
+        <div class="bg"></div>
       </div>
-      <div class="head-box b-box">收件人信息</div>
-      <div class="order">
-        <div class="bottom">
-          <div>
-            <img class="img" src="/src/assets/delivery_img/icon4.png" />
-          </div>
-          <div class="name">
-            <div class="name1 b-box">
-              <div>收件人</div>
-            </div>
-            <div class="name2">
-              <div>王**</div>
-            </div>
-          </div>
-          <div class="name">
-            <div class="name1 b-box">
-              <div>收件人电话</div>
-            </div>
-            <div class="name2">
-              <div>159****3366</div>
-            </div>
-          </div>
-          <div>
-            <img class="img" src="/src/assets/delivery_img/icon8.png" />
-          </div>
-        </div>
-      </div>
-      <div class="order">
-        <div class="bottom">
-          <div>
-            <img class="img" src="/src/assets/delivery_img/icon6.png" />
-          </div>
-          <div class="name">
-            <div class="name1 b-box">
-              <div>收件地址</div>
-            </div>
-            <div class="name2">
-              <div>泸县草芥幸福小区一号楼10-22</div>
-            </div>
-          </div>
-          <div class="name">
-            <div class="name1 b-box">
-              <div>当前状态</div>
-            </div>
-            <div class="name2">
-              <div>订单已完成</div>
-            </div>
-          </div>
-          <div>
-            <img class="img" src="/src/assets/delivery_img/icon5.png" />
-          </div>
-        </div>
-      </div>
-      <div class="map">
-        <AMapLeft></AMapLeft>
-        <div class="border"></div>
-      </div>
-      <div class="head-box b-box">物流信息</div>
-      <div class="delivery">
-        <div class="left">
-          <div class="left-item">
-            <img class="img" src="/src/assets/delivery_img/icon7.png" />
-            <div>配送人员<span>里斯</span></div>
-          </div>
-          <div class="left-item">
-            <img class="img" src="/src/assets/delivery_img/icon3.png" />
-            <div>配送车辆<span>川E G856Z</span></div>
-          </div>
-        </div>
-        <div class="right echarts" ref="echartsRef"></div>
+      <div class="c-box">
+        <img src="/src/assets/index_img/video.png" />
+        <div class="name">泸县原生态养殖基地</div>
       </div>
     </div>
-  </border>
+    <div class="view box2">
+      <div class="box-title">
+        <div class="text">基地养殖数据</div>
+        <div class="bg"></div>
+      </div>
+      <div class="c-box">
+        <div class="echarts1" ref="circleRef"></div>
+        <div class="echarts2" ref="chartRef"></div>
+      </div>
+    </div>
+    <div class="border"></div>
+  </div>
 </template>
 
 <style scoped lang="scss">
 .box {
-  height: 100%;
   width: 100%;
-  padding: 20px 20px;
-  font-size: 0.8rem;
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-  .title {
-    width: 100%;
-    background-image: url(../../../assets/img/title.png);
-    background-size: 100% 100%;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: "ifonts";
-    font-size: 1.2rem;
-  }
-  .head-box {
-    font-size: 1.2rem;
-    font-family: "ifonts";
-    width: calc(100% - 1rem);
-    text-align: left;
-    padding: 0.5rem 0;
-    padding-left: 1rem;
-  }
-  .order {
-    width: 100%;
-    background-image: url(../../../assets/delivery_img/box2.png);
-    background-size: 100% 100%;
-    height: 10%;
-    .bottom {
-      width: 90%;
-      height: 100%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin: 0 auto;
-      .img {
-        height: 4rem;
-        width: 3.5rem;
-      }
-      .name {
-        height: 60%;
-        flex: 1;
-        padding: 0.2rem 1.2rem;
-        text-align: left;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        .name2 {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-        }
-        div {
-          margin-left: 0.4rem;
-        }
-      }
-    }
-  }
-  .order_h {
-    width: 100%;
-    background-image: url(../../../assets/delivery_img/box3.png);
-    background-size: 100% 100%;
-    height: 15%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-    .top {
-      width: 90%;
-      box-sizing: border-box !important;
-      padding-top: 1rem;
-      display: flex;
-      justify-content: space-between;
-    }
-    .line {
-      display: flex;
-      width: 90%;
-      align-items: center;
-      .c {
-        width: 0.2rem;
-        height: 0.2rem;
-        background-color: #5bdbf6;
-        border-radius: 50%;
-      }
-      .l {
-        flex: 1;
-        height: 0.1rem;
-        background-color: #5bdbf6;
-      }
-    }
-    .bottom {
-      width: 90%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      box-sizing: border-box !important;
-      padding-bottom: 1rem;
-      .img {
-        height: 4rem;
-        width: 3.5rem;
-      }
-      .name {
-        height: 80%;
-        flex: 1;
-        padding: 0.2rem 1.2rem;
-        text-align: left;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        .name2 {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-        }
-        div {
-          margin-left: 0.4rem;
-        }
-      }
-    }
-  }
-  .map {
-    height: 16%;
+  align-items: flex-start;
+  position: relative;
+  .view {
+    /* border: 1px solid red; */
     width: 96%;
-    margin: 0.5rem 0;
-    border: 1px solid rgba(91, 219, 246, 1);
-    position: relative;
-    .border {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
-      pointer-events: none;
-    }
-  }
-  .delivery {
+    box-sizing: border-box !important;
     display: flex;
-    width: 100%;
-    height: 20%;
-    .left {
-      flex: 1;
-      height: 100%;
-      .left-item {
+    justify-content: space-around;
+    flex-direction: column;
+    .box-title {
+      width: 100%;
+      position: relative;
+      .text {
+        text-align: left;
+        font-family: "ifonts";
+        padding: 0.2rem 0.8rem;
+        font-size: 1.1rem;
+      }
+      .bg {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
         height: 50%;
-        display: flex;
-        align-items: center;
-        background-image: url(../../../assets/delivery_img/box1.png);
+        background-image: url(../../../assets/index_img/title1.png);
         background-size: 100% 100%;
-        box-sizing: border-box;
-        padding-left: 10%;
-        .img {
-          height: 4rem;
-          width: 3.5rem;
-          margin-right: 0.5rem;
-        }
-        span {
-          margin-left: 0.5rem;
-        }
-        font-size: 0.9rem;
       }
     }
-    .right {
+  }
+  .box1 {
+    height: 60%;
+    .c-box {
       flex: 1;
-      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      align-items: center;
+      img {
+        height: 76%;
+        width: 96%;
+      }
+      .name {
+        width: 80%;
+        height: 14%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-image: url(../../../assets/img/border4.png);
+        background-size: 100% 100%;
+      }
     }
   }
-}
-.b-box {
-  background: linear-gradient(
-    180deg,
-    rgba(59, 74, 104, 0) 0%,
-    rgba(59, 74, 104, 0.27) 50%,
-    rgba(0, 168, 255, 0.4) 94%,
-    rgba(0, 156, 255, 0.8) 100%
-  );
+  .box2 {
+    height: 38%;
+    .c-box {
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      .echarts1 {
+        height: 100%;
+        width: 38%;
+      }
+      .echarts2 {
+        height: 98%;
+        width: 60%;
+      }
+    }
+  }
+  .border {
+    background-image: url(../../../assets/img/border1.png);
+    background-size: 100% 100%;
+    height: 100%;
+    width: 0.4rem;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
 }
 </style>
diff --git a/src/view/delivery/components/right.vue b/src/view/delivery/components/right.vue
index 7852e03..ff814a8 100644
--- a/src/view/delivery/components/right.vue
+++ b/src/view/delivery/components/right.vue
@@ -1,172 +1,90 @@
 <script setup>
-import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
-import border from "../../../components/border.vue"
-const items = reactive([
-  { id: 1, text: '莲花池 1' },
-  { id: 2, text: '莲花池 2' },
-  { id: 3, text: '莲花池 3' },
-  { id: 3, text: '莲花池 4' },
-  { id: 3, text: '莲花池 5' },
-  { id: 3, text: '莲花池 6' },
-  { id: 3, text: '莲花池 7' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-])
-const scrollContainerRef = ref(null);
-let timer = null;
-const autoScroll = () => {
-  setTimeout(() => {
-    timer = setInterval(() => {
-      if (scrollContainerRef.value) {
-        scrollContainerRef.value.scrollTop += 1;
-        if (scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >= scrollContainerRef.value.scrollHeight - 1) {
-          scrollContainerRef.value.scrollTop = 0;
-          clearInterval(timer);
-          autoScroll();
-        }
-      }
-    }, 50)
-  }, 1000)
-}
+import { ref, reactive, onMounted } from "vue"
+
+import rightCard from "./rightCard.vue"
+
 onMounted(() => {
-  nextTick(() => {
-    autoScroll();
-  })
-})
-onUnmounted(() => {
-  clearInterval(timer);
+
 })
 </script>
 
 <template>
-  <border>
-    <div class="box">
-      <div class="title">配送商品排行榜</div>
-      <div
-        style="
-          height: calc(100% - 60px);
-          width: 100%;
-          overflow: hidden;
-          position: relative;
-        "
-      >
-        <div class="scroll-container" ref="scrollContainerRef">
-          <div
-            v-for="(item, index) in items"
-            :key="item.id"
-            class="b-list-item"
-          >
-            <div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
-              {{ index + 1 }}
-            </div>
-            <div class="name">{{ item.text }}</div>
-            <div class="line">
-              <div
-                class="line-body"
-                :style="{ width: '80%' }"
-                :class="{ 'line-body2': index >= 3 }"
-              ></div>
-            </div>
-            <div class="count">6000</div>
-          </div>
-        </div>
+  <div class="box">
+    <div class="view box1">
+      <div class="box-title">
+        <div class="text">智能监测数据</div>
+        <div class="bg"></div>
+      </div>
+      <div class="c-box">
+        <rightCard
+          class="box-card"
+          v-for="(item, index) in 6"
+          :key="index"
+        ></rightCard>
       </div>
     </div>
-  </border>
+    <div class="border"></div>
+  </div>
 </template>
 
 <style scoped lang="scss">
 .box {
-  padding: 20px;
-  font-size: 0.8rem;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-  .title {
-    width: 100%;
-    background-image: url(../../../assets/img/title.png);
-    background-size: 100% 100%;
-    height: 40px;
+  align-items: flex-end;
+  position: relative;
+  .view {
+    /* border: 1px solid red; */
+    width: 96%;
+    box-sizing: border-box !important;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: "ifonts";
-    font-size: 1.2rem;
+    justify-content: space-between;
+    flex-direction: column;
+    .box-title {
+      width: 100%;
+      position: relative;
+      .text {
+        text-align: left;
+        font-family: "ifonts";
+        padding: 0.2rem 0.8rem;
+        font-size: 1.1rem;
+      }
+      .bg {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: 50%;
+        background-image: url(../../../assets/index_img/title1.png);
+        background-size: 100% 100%;
+      }
+    }
   }
-  .scroll-container {
+  .box1 {
+    height: 100%;
+    .c-box {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      .box-card {
+        width: 100%;
+        height: 15%;
+      }
+    }
+  }
+  .border {
+    background-image: url(../../../assets/img/border2.png);
+    background-size: 100% 100%;
+    height: 100%;
+    width: 0.4rem;
     position: absolute;
     top: 0;
     left: 0;
-    right: 0;
-    bottom: 0;
-    overflow-y: auto;
-    /* 隐藏滚动条 */
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    .b-list-item {
-      height: 3rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0 10px;
-      .rank {
-        width: 50px;
-        height: 1.5em;
-      }
-      .rank1 {
-        background-image: url(../../../assets/img/ranking1.png);
-        background-size: 100% 100%;
-      }
-      .rank2 {
-        background-image: url(../../../assets/img/ranking2.png);
-        background-size: 100% 100%;
-      }
-      .name {
-        flex: 5;
-      }
-      .line {
-        width: 50%;
-        height: 0.8rem;
-        background-color: #0a385b;
-        border-radius: 0.8rem;
-        .line-body {
-          height: 100%;
-          border-radius: 0.8rem;
-          width: 0%;
-          background: linear-gradient(270deg, #00c0fe 0%, #0f87fa 100%);
-        }
-        .line-body2 {
-          background: linear-gradient(270deg, #5bdbf6 0%, #5bdbf6 100%);
-        }
-      }
-      .count {
-        flex: 2;
-        font-size: 1rem;
-        font-family: "ifonts";
-      }
-    }
   }
 }
 </style>
diff --git a/src/view/delivery/components/rightCard.vue b/src/view/delivery/components/rightCard.vue
new file mode 100644
index 0000000..e3ba79c
--- /dev/null
+++ b/src/view/delivery/components/rightCard.vue
@@ -0,0 +1,172 @@
+<script setup>
+import { ref, reactive, onMounted } from "vue"
+import * as echarts from "echarts"
+
+const chartsRef = ref(null)
+const initMap = () => {
+  const charts = echarts.init(chartsRef.value);
+  let option = {
+    title: {
+      show: true,
+      text: '甲烷',
+      top: "10%",
+      left: "12%",
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    color: [
+      'rgba(0, 168, 255, 1)',
+    ],
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: 'rgba(0, 156, 255, 0.6)', //设置背景颜色
+      textStyle: {
+        color: '#fff'
+      },
+      borderColor: "rgba(0, 156, 255, 1)",
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(255,255,255, .2)',
+        }
+      },
+      formatter: function (params) {
+        let str = "";
+        for (let i = 0; i < params.length; i++) {
+          if (params[i].seriesName !== "") {
+            str +=
+              params[i].name +
+              '甲烷: ' +
+              params[i].value +
+              "<br/>";
+          }
+        }
+        return str;
+      }
+    },
+    grid: {
+      top: '20%',
+      left: '4%',
+      right: '4%',
+      bottom: '10%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        axisLabel: {
+          formatter: '{value}',
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        data: ['12.01', '12.02', '12.03', '12.04', '12.05', '12.06', '12.07'],
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisLabel: {
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        nameTextStyle: {
+          color: '#666',
+          fontSize: 12,
+          lineHeight: 40,
+        },
+        splitLine: {
+          show: false
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+    ],
+    series: [
+      {
+        name: '工厂1',
+        type: 'line',
+        smooth: true,
+        // showSymbol: false,/
+        symbolSize: 8,
+        zlevel: 3,
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: 'rgba(0, 168, 255, 0.7)',
+                },
+                {
+                  offset: 0.5,
+                  color: 'rgba(0, 168, 255, 0.4)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(0, 168, 255, 0.2)',
+                },
+              ],
+              false,
+            ),
+            shadowColor: 'rgba(0, 168, 255, 1)',
+            shadowBlur: 10,
+          },
+        },
+        data: [100, 138, 350, 173, 180, 150, 180],
+      },
+    ],
+  }
+  charts.setOption(option)
+}
+
+onMounted(() => {
+  initMap()
+})
+</script>
+
+<template>
+  <div class="c-card">
+    <div class="left">
+      <div>监测正常</div>
+      <img src="/src/assets/img/icon.png" />
+      <div>甲烷监测设备</div>
+    </div>
+    <div class="right" ref="chartsRef"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.c-card {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  .left {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    img {
+      height: 4.6rem;
+      width: 4rem;
+    }
+  }
+  .right {
+    flex: 1;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/view/delivery/components/AMap.vue b/src/view/delivery/dev/AMap.vue
similarity index 100%
rename from src/view/delivery/components/AMap.vue
rename to src/view/delivery/dev/AMap.vue
diff --git a/src/view/delivery/components/AMapLeft.vue b/src/view/delivery/dev/AMapLeft.vue
similarity index 100%
rename from src/view/delivery/components/AMapLeft.vue
rename to src/view/delivery/dev/AMapLeft.vue
diff --git a/src/view/delivery/dev/bottom.vue b/src/view/delivery/dev/bottom.vue
new file mode 100644
index 0000000..91f2c97
--- /dev/null
+++ b/src/view/delivery/dev/bottom.vue
@@ -0,0 +1,507 @@
+<script setup>
+import { onMounted, reactive, ref } from "vue"
+import border from "@/components/border.vue";
+import * as echarts from 'echarts';
+import mitt from "@/utils/mitt"
+
+const initData = (aaa) => {
+  for (let i = 0; i < 20; i++) {
+    if (i % 2 == 0) {
+      aaa.data.push(
+        [
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)' >排sd序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+        ]
+      )
+    } else {
+      aaa.data.push(
+        [
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)' >排sd序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+        ]
+      )
+    }
+
+  }
+}
+
+const list = reactive({
+  header: [
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>ID</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人电话</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>商品名称</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人地址</div>`,
+  ],
+  data: [],
+  //   index: true,
+  // headerBGC: 'rgba(0, 168, 255, 0.76)',
+  // oddRowBGC: 'rgba(91, 219, 246, 0.20)',
+  // evenRowBGC: 'rgba(0, 168, 255, 0.16)',
+  oddRowBGC: '',
+  evenRowBGC: "",
+  //   columnWidth: [50],
+  align: ['center'],
+  rowNum: 7
+})
+
+initData(list);
+
+const orderList = reactive([
+  {
+    name: '今日订单',
+    value: '988'
+  },
+  {
+    name: '已取货订单',
+    value: '1523'
+  },
+  {
+    name: '未配送订单',
+    value: '55'
+  },
+  {
+    name: '已完成订单',
+    value: '3'
+  },
+])
+
+const cOrderValue = (e) => {
+  let str = e;
+  if (str > 9999) str = 9999 + '';
+  else str = str + '';
+  str = str.split('');
+  if (str.length < 4) {
+    let t = 4 - str.length;
+    for (let i = 0; i < t; i++) {
+      str.unshift('0');
+    }
+  }
+  str.splice(-3, 0, ',');
+  return str;
+}
+
+
+const echartsRef = ref(null)
+
+const initEcahrts = () => {
+
+  let xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
+    yData1 = [400, 410, 350, 320, 280, 340, 360, 400, 420, 410],
+    yData2 = [350, 320, 260, 240, 220, 280, 300, 360, 340, 340],
+    yData3 = [200, 260, 200, 190, 180, 220, 260, 300, 280, 300],
+    yData4 = [120, 300, 230, 240, 190, 290, 103, 456, 230, 270],
+    borderData = [],
+    legend = ["已取货订单", "未配送订单", "已完成订单", "小时订单数"],
+    colorArr = [{
+      start: "rgba(0, 168, 255,",
+      end: "rgba(0, 168, 255, 1)"
+    },
+    {
+      start: "rgba(91, 219, 246,",
+      end: "rgba(91, 219, 246, 1)"
+    },
+    {
+      start: "rgba(75, 95, 219,",
+      end: "rgba(75, 95, 219, 1)"
+    },
+    {
+      color: "rgba(91, 219, 246, 1)"
+    }
+    ];
+  let normalColor = "#DEEBFF";
+  //   let fontSize = 20;
+  let seriesData = [];
+  let borderHeight = 4;
+  xData.forEach(element => {
+    borderData.push(borderHeight);
+  });
+  [yData1, yData2, yData3, yData4].forEach((item, index) => {
+    let obj1 = {};
+    if (index < 3) {
+      obj1 = {
+        name: legend[index],
+        type: "bar",
+        stack: legend[index],
+        data: item,
+        barWidth: "15%",
+        itemStyle: {
+          normal: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0,
+                color: colorArr[index].start + "0.3)"
+              },
+              {
+                offset: 0.5,
+                color: colorArr[index].start + "0.4)"
+              },
+              {
+                offset: 1,
+                color: colorArr[index].end
+              }
+              ],
+              globalCoord: false
+            }
+          }
+        }
+      };
+      seriesData.push(obj1);
+    } else {
+      let obj3 = {
+        name: legend[index],
+        type: "line",
+        yAxisIndex: 1,
+        smooth: false,
+        showBackground: true,
+        backgroundStyle: {
+          color: 'rgba(255,255,255, 0.8)'
+        },
+        symbol: "circle",
+        symbolSize: 16,
+        lineStyle: {
+          normal: {
+            width: 2
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: colorArr[index].color,
+            borderColor: "#fff",
+            borderWidth: 1
+          }
+        },
+        data: item,
+        label: {
+          normal: {
+            show: false
+          }
+        }
+      };
+      seriesData.push(obj3);
+    }
+  });
+  console.log(seriesData);
+  const option = {
+    backgroundColor: "rgba(0,0,0,0)",
+    grid: {
+      left: "3%",
+      top: "12%",
+      right: "12%",
+      bottom: '2%',
+      containLabel: true
+    },
+    legend: {
+      show: true,
+      // icon: "rect",
+      orient: 'vertical', // 将图例竖直布局
+
+      itemWidth: 16,
+      itemHeight: 10,
+      right: "right",
+      bottom: "center",
+      textStyle: {
+        color: "#fff"
+      },
+      data: legend
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
+      textStyle: {
+        color: '#fff'
+      },
+      borderColor: "rgba(18, 57, 60, .8)",
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(0, 11, 34, .4)',
+        }
+      },
+      formatter: function (params) {
+        let str = "";
+        for (let i = 0; i < params.length; i++) {
+          if (params[i].seriesName !== "") {
+            str +=
+              params[i].name +
+              ':' +
+              params[i].seriesName +
+              '-' +
+              params[i].value +
+              "<br/>";
+          }
+        }
+        return str;
+      }
+    },
+    xAxis: [{
+      type: "category",
+      data: xData,
+      name: '小时(工作时间)',
+      nameTextStyle: {
+        color: '#fff',
+        fontSize: 12
+      },
+      axisPointer: {
+        type: "shadow"
+      },
+      axisLabel: {
+        interval: 0,
+        align: 'center',
+        textStyle: {
+          color: normalColor,
+          fontSize: 12
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#1C82C5'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      }
+    }],
+    yAxis: [{
+      type: "value",
+      // name: "亿千瓦时",
+      // nameTextStyle: {
+      //     color: normalColor,
+      //     fontSize: 12
+      // },
+      // "min": 0,
+      // "max": 50,
+      axisLabel: {
+        formatter: "{value}",
+        textStyle: {
+          color: normalColor,
+          fontSize: 14
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#1C82C5'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "solid",
+          color: 'rgba(28, 130, 197, .3)'
+        }
+      }
+    },
+    {
+      type: "value",
+      // name: "%",
+      // nameTextStyle: {
+      //     color: normalColor,
+      //     fontSize: 12
+      // },
+      // min: -100,
+      // max: 100,
+      axisLabel: {
+        show: false,
+        formatter: "{value}",
+        textStyle: {
+          color: normalColor,
+          fontSize: 12
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#1C82C5'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(255,255,255,0.2)"
+        }
+      }
+    }
+    ],
+    series: seriesData
+  };
+
+  // 基于DOM元素初始化echarts实例
+  const chart = echarts.init(echartsRef.value);
+
+  // 使用配置项显示图表
+  chart.setOption(option);
+}
+
+const openList = () => {
+  mitt.emit('showBusinesses')
+}
+
+onMounted(() => {
+  initEcahrts()
+})
+
+</script>
+
+<template>
+  <border>
+    <div class="box">
+      <div class="title">配送详情</div>
+      <div class="body-box">
+        <div class="left">
+          <div class="top">
+            <div class="view" v-for="(item, index) in orderList" :key="index">
+              <div class="num">
+                <div v-for="(t, i) in cOrderValue(item.value)" :key="i">
+                  {{ t }}
+                </div>
+              </div>
+              <div>{{ item.name }}</div>
+            </div>
+          </div>
+          <div class="bottom echarts" ref="echartsRef"></div>
+        </div>
+        <div class="right">
+          <div class="top">
+            <div class="t-right">
+              <img src="/src/assets/img/item.png" />
+              <div>今日订单</div>
+            </div>
+            <div class="flex" @click="openList">
+              <div>查看更多</div>
+              <div>{{ "〉" }}</div>
+            </div>
+          </div>
+          <dv-scroll-board :config="list" style="width: 100%; height: 90%" />
+        </div>
+      </div>
+    </div>
+  </border>
+</template>
+
+<style scoped lang="scss">
+.box {
+  height: 100%;
+  width: 100%;
+  padding: 20px 20px;
+  font-size: 0.8rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  .title {
+    width: 100%;
+    background-image: url(../../../assets/img/title3.png);
+    background-size: 100% 100%;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: "ifonts";
+    font-size: 1.2rem;
+  }
+  .body-box {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    .left {
+      width: 60%;
+      height: 100%;
+      .top {
+        display: flex;
+        justify-content: space-evenly;
+        height: 25%;
+        margin-top: 1rem;
+        .view {
+          width: 21%;
+          height: 100%;
+          background-image: url(../../../assets/delivery_img/box4.png);
+          background-size: 100% 100%;
+          font-size: 1.2rem;
+          font-family: "ifonts";
+          display: flex;
+          flex-direction: column;
+          justify-content: space-evenly;
+          .num {
+            display: flex;
+            justify-content: center;
+            div {
+              width: 1.5rem;
+              height: 1.8rem;
+              background-image: url(../../../assets/delivery_img/icon_num.png);
+              background-size: 100% 100%;
+              margin: 0.2rem;
+            }
+          }
+        }
+      }
+      .bottom {
+        height: 70%;
+        width: 100%;
+      }
+    }
+    .right {
+      width: 38%;
+      height: 95%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+      .top {
+        height: 10%;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .t-right {
+          display: flex;
+          align-items: center;
+          img {
+            width: 1rem;
+            height: 1rem;
+            margin-right: 0.5rem;
+          }
+        }
+        .flex {
+          display: flex;
+          cursor: pointer;
+          div {
+            margin-left: 0.5rem;
+          }
+        }
+      }
+
+      :deep(.ceil) {
+        padding: 0 !important;
+        margin-bottom: 5px;
+      }
+
+      :deep(.header-item) {
+        padding: 0 !important;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/view/delivery/dev/center.vue b/src/view/delivery/dev/center.vue
new file mode 100644
index 0000000..9430926
--- /dev/null
+++ b/src/view/delivery/dev/center.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { reactive, ref } from "vue"
+import border from "@/components/border.vue";
+import AMap from "./AMap.vue";
+
+const test = () => {
+  console.log('ss');
+}
+</script>
+
+<template>
+  <div class="box">
+    <div class="map">
+      <AMap></AMap>
+    </div>
+    <div class="border"></div>
+    <div class="btn">
+      <div class="c-b" @click.stop="test">
+        <div class="text">已取货(100)单</div>
+      </div>
+      <div class="c-b" @click.stop="test">
+        <div class="text">已配送(100)单</div>
+      </div>
+      <div class="c-b" @click.stop="test">
+        <div class="text">已完成(100)单</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .border {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(91, 219, 246, 1);
+    box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
+    pointer-events: none;
+  }
+  .map {
+    height: 100%;
+    width: 100%;
+  }
+  .btn {
+    position: absolute;
+    top: 30%;
+    left: 2rem;
+    .c-b {
+      cursor: pointer;
+      background-image: url(../../../assets/delivery_img/icon9.png);
+      background-size: 100% 100%;
+      height: 4rem;
+      width: 11.5rem;
+      margin-bottom: 1.4rem;
+      display: flex;
+      align-items: center;
+      .text {
+        margin-left: 4.5rem;
+        font-size: 0.8rem;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/view/delivery/dev/left.vue b/src/view/delivery/dev/left.vue
new file mode 100644
index 0000000..712cc6a
--- /dev/null
+++ b/src/view/delivery/dev/left.vue
@@ -0,0 +1,438 @@
+<script setup>
+import { onMounted, reactive, ref } from "vue"
+import border from "@/components/border.vue";
+import AMapLeft from "./AMapLeft.vue";
+import * as echarts from 'echarts';
+
+
+var fontColor = "#000";
+var seriesName = "";
+let noramlSize = 16;
+var datas = {
+  textValue: "100%",
+  colors: ["#31829d", "#009cff", "#4b5fdb"],
+  legendArr: ["待取货", "待配送", "已送达"],
+  dataArr: [
+    { value: 335, name: "待取货" },
+    { value: 210, name: "待配送" },
+    { value: 410, name: "已送达" },
+  ],
+  company: "个"
+};
+const option = {
+  backgroundColor: "rgba(0,0,0,0)",
+  color: datas.colors,
+  grid: {
+    left: "0%",
+    right: "0%",
+    bottom: "0%",
+    top: "0%"
+  },
+  graphic: {
+    elements: [
+      {
+        type: 'text',
+        left: 'center', // 相对父元素居中
+        bottom: '50%',  // 相对父元素居中
+        style: {
+          fill: '#fff',
+          text: datas.textValue,
+          font: '18px Microsoft YaHei'
+        }
+      }
+    ]
+  },
+  tooltip: {
+    trigger: "item",
+    backgroundColor: "#f6f6f6",
+    textStyle: {
+      color: "#000"
+    },
+    formatter: "{b}: {c}" + datas.company + " ({d}%)"
+  },
+  legend: {
+    icon: "rect",
+    bottom: "5%",
+    left: "center",
+    itemWidth: 12,
+    itemHeight: 12,
+    // itemGap: 50, //图例间隙
+    textStyle: {
+      color: "#fff",
+      fontSize: noramlSize
+    },
+    data: datas.legendArr
+  },
+  series: [
+    {
+      name: "",
+      type: "pie",
+      radius: ["45%", "60%"],
+      center: ["50%", "45%"],
+      itemStyle: {
+        normal: {
+          borderWidth: 10,
+          borderColor: "#092846"
+        }
+      },
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: 'bottom'
+      },
+      labelLine: {
+        normal: {
+          show: true,
+          lineStyle: {
+            color: "#138af4"
+          },
+          length: 20,
+          length2: 50,
+        }
+      },
+      data: datas.dataArr
+    },
+    {
+      type: "pie",
+      radius: "40%",
+      center: ["50%", "45%"],
+      z: -2,
+      label: {
+        show: false
+      },
+      labelLine: {
+        show: false
+      },
+      itemStyle: {
+        color: 'rgba(255,255,255,0.2)'
+      },
+      data: [100]
+    },
+  ]
+};
+
+const echartsRef = ref(null)
+
+const initEcahrts = () => {
+  // 基于DOM元素初始化echarts实例
+  const chart = echarts.init(echartsRef.value);
+
+  // 使用配置项显示图表
+  chart.setOption(option);
+}
+
+onMounted(() => {
+  initEcahrts()
+})
+
+</script>
+
+<template>
+  <border>
+    <div class="box">
+      <div class="title">配送详情</div>
+      <div class="head-box b-box">商品信息</div>
+      <div class="order_h">
+        <div class="top">
+          <div>
+            订单编号
+            <span style="margin-left: 1rem"
+              >bzj20230923163643650ea39ba256c</span
+            >
+          </div>
+          <div>23-11-20</div>
+        </div>
+        <div class="line">
+          <div class="c"></div>
+          <div class="l"></div>
+          <div class="c"></div>
+        </div>
+        <div class="bottom">
+          <div>
+            <img class="img" src="/src/assets/delivery_img/icon1.png" />
+          </div>
+          <div class="name">
+            <div class="name1 b-box">
+              <div>商户名称</div>
+            </div>
+            <div class="name2">
+              <div>天天超市</div>
+            </div>
+          </div>
+          <div class="name">
+            <div class="name1 b-box">
+              <div>商品名称</div>
+            </div>
+            <div class="name2">
+              <div>山花纯牛奶100ml</div>
+            </div>
+          </div>
+          <div>
+            <img class="img" src="/src/assets/delivery_img/icon2.png" />
+          </div>
+        </div>
+      </div>
+      <div class="head-box b-box">收件人信息</div>
+      <div class="order">
+        <div class="bottom">
+          <div>
+            <img class="img" src="/src/assets/delivery_img/icon4.png" />
+          </div>
+          <div class="name">
+            <div class="name1 b-box">
+              <div>收件人</div>
+            </div>
+            <div class="name2">
+              <div>王**</div>
+            </div>
+          </div>
+          <div class="name">
+            <div class="name1 b-box">
+              <div>收件人电话</div>
+            </div>
+            <div class="name2">
+              <div>159****3366</div>
+            </div>
+          </div>
+          <div>
+            <img class="img" src="/src/assets/delivery_img/icon8.png" />
+          </div>
+        </div>
+      </div>
+      <div class="order">
+        <div class="bottom">
+          <div>
+            <img class="img" src="/src/assets/delivery_img/icon6.png" />
+          </div>
+          <div class="name">
+            <div class="name1 b-box">
+              <div>收件地址</div>
+            </div>
+            <div class="name2">
+              <div>泸县草芥幸福小区一号楼10-22</div>
+            </div>
+          </div>
+          <div class="name">
+            <div class="name1 b-box">
+              <div>当前状态</div>
+            </div>
+            <div class="name2">
+              <div>订单已完成</div>
+            </div>
+          </div>
+          <div>
+            <img class="img" src="/src/assets/delivery_img/icon5.png" />
+          </div>
+        </div>
+      </div>
+      <div class="map">
+        <AMapLeft></AMapLeft>
+        <div class="border"></div>
+      </div>
+      <div class="head-box b-box">物流信息</div>
+      <div class="delivery">
+        <div class="left">
+          <div class="left-item">
+            <img class="img" src="/src/assets/delivery_img/icon7.png" />
+            <div>配送人员<span>里斯</span></div>
+          </div>
+          <div class="left-item">
+            <img class="img" src="/src/assets/delivery_img/icon3.png" />
+            <div>配送车辆<span>川E G856Z</span></div>
+          </div>
+        </div>
+        <div class="right echarts" ref="echartsRef"></div>
+      </div>
+    </div>
+  </border>
+</template>
+
+<style scoped lang="scss">
+.box {
+  height: 100%;
+  width: 100%;
+  padding: 20px 20px;
+  font-size: 0.8rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  .title {
+    width: 100%;
+    background-image: url(../../../assets/img/title.png);
+    background-size: 100% 100%;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: "ifonts";
+    font-size: 1.2rem;
+  }
+  .head-box {
+    font-size: 1.2rem;
+    font-family: "ifonts";
+    width: calc(100% - 1rem);
+    text-align: left;
+    padding: 0.5rem 0;
+    padding-left: 1rem;
+  }
+  .order {
+    width: 100%;
+    background-image: url(../../../assets/delivery_img/box2.png);
+    background-size: 100% 100%;
+    height: 10%;
+    .bottom {
+      width: 90%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0 auto;
+      .img {
+        height: 4rem;
+        width: 3.5rem;
+      }
+      .name {
+        height: 60%;
+        flex: 1;
+        padding: 0.2rem 1.2rem;
+        text-align: left;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .name2 {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+        }
+        div {
+          margin-left: 0.4rem;
+        }
+      }
+    }
+  }
+  .order_h {
+    width: 100%;
+    background-image: url(../../../assets/delivery_img/box3.png);
+    background-size: 100% 100%;
+    height: 15%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    .top {
+      width: 90%;
+      box-sizing: border-box !important;
+      padding-top: 1rem;
+      display: flex;
+      justify-content: space-between;
+    }
+    .line {
+      display: flex;
+      width: 90%;
+      align-items: center;
+      .c {
+        width: 0.2rem;
+        height: 0.2rem;
+        background-color: #5bdbf6;
+        border-radius: 50%;
+      }
+      .l {
+        flex: 1;
+        height: 0.1rem;
+        background-color: #5bdbf6;
+      }
+    }
+    .bottom {
+      width: 90%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-sizing: border-box !important;
+      padding-bottom: 1rem;
+      .img {
+        height: 4rem;
+        width: 3.5rem;
+      }
+      .name {
+        height: 80%;
+        flex: 1;
+        padding: 0.2rem 1.2rem;
+        text-align: left;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .name2 {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+        }
+        div {
+          margin-left: 0.4rem;
+        }
+      }
+    }
+  }
+  .map {
+    height: 16%;
+    width: 96%;
+    margin: 0.5rem 0;
+    border: 1px solid rgba(91, 219, 246, 1);
+    position: relative;
+    .border {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
+      pointer-events: none;
+    }
+  }
+  .delivery {
+    display: flex;
+    width: 100%;
+    height: 20%;
+    .left {
+      flex: 1;
+      height: 100%;
+      .left-item {
+        height: 50%;
+        display: flex;
+        align-items: center;
+        background-image: url(../../../assets/delivery_img/box1.png);
+        background-size: 100% 100%;
+        box-sizing: border-box;
+        padding-left: 10%;
+        .img {
+          height: 4rem;
+          width: 3.5rem;
+          margin-right: 0.5rem;
+        }
+        span {
+          margin-left: 0.5rem;
+        }
+        font-size: 0.9rem;
+      }
+    }
+    .right {
+      flex: 1;
+      height: 100%;
+    }
+  }
+}
+.b-box {
+  background: linear-gradient(
+    180deg,
+    rgba(59, 74, 104, 0) 0%,
+    rgba(59, 74, 104, 0.27) 50%,
+    rgba(0, 168, 255, 0.4) 94%,
+    rgba(0, 156, 255, 0.8) 100%
+  );
+}
+</style>
diff --git a/src/view/delivery/dev/right.vue b/src/view/delivery/dev/right.vue
new file mode 100644
index 0000000..7852e03
--- /dev/null
+++ b/src/view/delivery/dev/right.vue
@@ -0,0 +1,172 @@
+<script setup>
+import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
+import border from "../../../components/border.vue"
+const items = reactive([
+  { id: 1, text: '莲花池 1' },
+  { id: 2, text: '莲花池 2' },
+  { id: 3, text: '莲花池 3' },
+  { id: 3, text: '莲花池 4' },
+  { id: 3, text: '莲花池 5' },
+  { id: 3, text: '莲花池 6' },
+  { id: 3, text: '莲花池 7' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+  { id: 3, text: '莲花池 8' },
+])
+const scrollContainerRef = ref(null);
+let timer = null;
+const autoScroll = () => {
+  setTimeout(() => {
+    timer = setInterval(() => {
+      if (scrollContainerRef.value) {
+        scrollContainerRef.value.scrollTop += 1;
+        if (scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >= scrollContainerRef.value.scrollHeight - 1) {
+          scrollContainerRef.value.scrollTop = 0;
+          clearInterval(timer);
+          autoScroll();
+        }
+      }
+    }, 50)
+  }, 1000)
+}
+onMounted(() => {
+  nextTick(() => {
+    autoScroll();
+  })
+})
+onUnmounted(() => {
+  clearInterval(timer);
+})
+</script>
+
+<template>
+  <border>
+    <div class="box">
+      <div class="title">配送商品排行榜</div>
+      <div
+        style="
+          height: calc(100% - 60px);
+          width: 100%;
+          overflow: hidden;
+          position: relative;
+        "
+      >
+        <div class="scroll-container" ref="scrollContainerRef">
+          <div
+            v-for="(item, index) in items"
+            :key="item.id"
+            class="b-list-item"
+          >
+            <div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
+              {{ index + 1 }}
+            </div>
+            <div class="name">{{ item.text }}</div>
+            <div class="line">
+              <div
+                class="line-body"
+                :style="{ width: '80%' }"
+                :class="{ 'line-body2': index >= 3 }"
+              ></div>
+            </div>
+            <div class="count">6000</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </border>
+</template>
+
+<style scoped lang="scss">
+.box {
+  padding: 20px;
+  font-size: 0.8rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  .title {
+    width: 100%;
+    background-image: url(../../../assets/img/title.png);
+    background-size: 100% 100%;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: "ifonts";
+    font-size: 1.2rem;
+  }
+  .scroll-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: auto;
+    /* 隐藏滚动条 */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    .b-list-item {
+      height: 3rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 10px;
+      .rank {
+        width: 50px;
+        height: 1.5em;
+      }
+      .rank1 {
+        background-image: url(../../../assets/img/ranking1.png);
+        background-size: 100% 100%;
+      }
+      .rank2 {
+        background-image: url(../../../assets/img/ranking2.png);
+        background-size: 100% 100%;
+      }
+      .name {
+        flex: 5;
+      }
+      .line {
+        width: 50%;
+        height: 0.8rem;
+        background-color: #0a385b;
+        border-radius: 0.8rem;
+        .line-body {
+          height: 100%;
+          border-radius: 0.8rem;
+          width: 0%;
+          background: linear-gradient(270deg, #00c0fe 0%, #0f87fa 100%);
+        }
+        .line-body2 {
+          background: linear-gradient(270deg, #5bdbf6 0%, #5bdbf6 100%);
+        }
+      }
+      .count {
+        flex: 2;
+        font-size: 1rem;
+        font-family: "ifonts";
+      }
+    }
+  }
+}
+</style>
diff --git a/src/view/delivery/index.vue b/src/view/delivery/index.vue
index 5140fb1..af00e10 100644
--- a/src/view/delivery/index.vue
+++ b/src/view/delivery/index.vue
@@ -1,21 +1,23 @@
 <script setup>
-import leftItem from "./components/left.vue";
-import centerItem from "./components/center.vue";
-import bottomItem from "./components/bottom.vue";
-import rightItem from "./components/right.vue";
+import rightItme from "./components/right.vue";
+import leftItme from "./components/left.vue";
+import centerItme from "./components/center.vue";
+import bottomItme from "./components/bottom.vue";
 </script>
 
 <template>
   <div class="center">
-    <div class="item">
-      <leftItem style="height: 98%"></leftItem>
-    </div>
     <div class="item item_c">
       <div style="height: 61%; display: flex; justify-content: space-between">
-        <centerItem style="width: 64%"></centerItem>
-        <rightItem style="width: 35%"></rightItem>
+        <leftItme style="width: 35%"></leftItme>
+        <centerItme style="width: 64%"></centerItme>
       </div>
-      <bottomItem style="height: 36%"></bottomItem>
+      <div style="height: 36%">
+        <bottomItme style="width: 100%"></bottomItme>
+      </div>
+    </div>
+    <div class="item">
+      <rightItme style="height: 98%"></rightItme>
     </div>
   </div>
 </template>
diff --git a/src/view/index/components/bottom.vue b/src/view/index/components/bottom.vue
new file mode 100644
index 0000000..e36e81c
--- /dev/null
+++ b/src/view/index/components/bottom.vue
@@ -0,0 +1,232 @@
+<script setup>
+import { ref, reactive, onMounted } from "vue"
+
+const initData = (data) => {
+  let arr = [];
+  for (let i = 0; i < 10; i++) {
+    arr.push(
+      [
+        `${i + 1}`,
+        `-`,
+        `-`,
+        `-`,
+        `-`,
+        `-`,
+        `查看详情>`,
+      ]
+    )
+  }
+  list.data = arr;
+  scrollBoardRef.value.updateRows(list.data);
+}
+
+const scrollBoardRef = ref(null);
+const list = reactive({
+  header: [
+    `设备编号`,
+    `设备名称`,
+    `警告时间`,
+    `警告数据`,
+    `设备图片`,
+    `警告原因`,
+    `解决方案`,
+  ],
+  data: [],
+  //   index: true,
+  headerBGC: 'rgba(0, 156, 255, 0.4)',
+  oddRowBGC: 'rgba(91, 219, 246, 0.10)',
+  evenRowBGC: '',
+  align: 'center',
+  rowNum: 9
+})
+
+onMounted(() => {
+  initData();
+})
+
+</script>
+
+<template>
+  <div class="box">
+    <div class="view box1">
+      <div class="box-title">
+        <div class="text">监测设备</div>
+        <div class="bg"></div>
+      </div>
+      <div class="c-box">
+        <div class="ball">
+          <img src="/src/assets/index_img/ball.png" />
+          <div class="count">
+            <div>设备总数</div>
+            <div>12</div>
+          </div>
+        </div>
+        <div class="ball1 ball-item">
+          <div class="count">
+            <img src="/src/assets/index_img/ball1.png" />
+            <span>{{ 6 }}</span>
+          </div>
+          离线设备
+        </div>
+        <div class="ball2 ball-item">
+          <div class="count">
+            <img src="/src/assets/index_img/ball2.png" />
+            <span>{{ 6 }}</span>
+          </div>
+          今日警告数
+        </div>
+        <div class="ball3 ball-item">
+          <div class="count">
+            <img src="/src/assets/index_img/ball1.png" />
+            <span>{{ 6 }}</span>
+          </div>
+          在线设备
+        </div>
+        <div class="ball4 ball-item">
+          <div class="count">
+            <img src="/src/assets/index_img/ball2.png" />
+            <span>{{ 6 }}</span>
+          </div>
+          警告总数
+        </div>
+      </div>
+    </div>
+    <div class="view box2">
+      <div class="box-title">
+        <div class="text">养殖基地视频监控</div>
+        <div class="bg"></div>
+      </div>
+      <div class="c-box">
+        <dv-scroll-board
+          ref="scrollBoardRef"
+          :config="list"
+          style="width: 100%; height: 100%"
+        />
+      </div>
+    </div>
+    <div class="border"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  position: relative;
+  .view {
+    height: 98%;
+    box-sizing: border-box !important;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    .box-title {
+      width: 100%;
+      position: relative;
+      .text {
+        text-align: left;
+        font-family: "ifonts";
+        padding: 0.2rem 0.8rem;
+        font-size: 1.1rem;
+      }
+      .bg {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: 50%;
+        background-image: url(../../../assets/index_img/title1.png);
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .box1 {
+    width: 34%;
+    .c-box {
+      height: 90%;
+      position: relative;
+      .ball {
+        height: 100%;
+        width: 100%;
+        position: relative;
+        img {
+          position: absolute;
+          bottom: 1rem;
+          left: 50%;
+          height: 70%;
+          width: auto;
+          transform: translate(-50%);
+        }
+        .count {
+          position: absolute;
+          bottom: 40%;
+          left: 50%;
+          transform: translate(-50%);
+        }
+      }
+      .ball-item {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .count {
+          position: relative;
+          img {
+            height: 20%;
+            width: auto;
+          }
+          span {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 1.2rem;
+            font-weight: bold;
+          }
+        }
+      }
+      .ball1 {
+        top: 10%;
+        left: 20%;
+      }
+      .ball2 {
+        top: 10%;
+        right: 20%;
+      }
+      .ball3 {
+        top: 40%;
+        left: 10%;
+      }
+      .ball4 {
+        top: 40%;
+        right: 10%;
+      }
+    }
+  }
+  .box2 {
+    width: 64%;
+    .box-title > .bg {
+      background-image: url(../../../assets/index_img/title2.png);
+    }
+    .c-box {
+      height: 88%;
+    }
+  }
+  .border {
+    background-image: url(../../../assets/img/border3.png);
+    background-size: 100% 100%;
+    height: 0.4rem;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+</style>
diff --git a/src/view/index/components/left.vue b/src/view/index/components/left.vue
index 1dc9453..9156c47 100644
--- a/src/view/index/components/left.vue
+++ b/src/view/index/components/left.vue
@@ -43,10 +43,19 @@ const initMap = () => {
   const chart1 = echarts.init(echarts1Ref.value);
   const chart2 = echarts.init(echarts2Ref.value);
 
+  let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
+
+  let data1 = [
+    { value: 400, name: '养殖种类: 本地鸡' },
+    { value: 435, name: '养殖种类: 本地鸭' },
+    { value: 580, name: '养殖种类: 本地鹅' },
+    { value: 884, name: '养殖种类: 本地猪' },
+  ]
   let option1 = {
     tooltip: {
       trigger: 'item',
     },
+    color: color,
     legend: {
       show: true,
       // icon: "rect",
@@ -54,6 +63,7 @@ const initMap = () => {
       itemWidth: 8,
       itemHeight: 8,
       right: "5%",
+      top: "10%",
       // bottom: "center",
       textStyle: {
         color: "#fff"
@@ -79,20 +89,22 @@ const initMap = () => {
         labelLine: {
           show: false
         },
-        data: [
-          { value: 1048, name: 'Search Engine' },
-          { value: 735, name: 'Direct' },
-          { value: 580, name: 'Email' },
-          { value: 484, name: 'Union Ads' },
-        ]
+        data: data1
       }
     ]
   };
 
+  let data2 = [
+    { value: 500, name: '养殖种类: 本地鸡' },
+    { value: 735, name: '养殖种类: 本地鸭' },
+    { value: 580, name: '养殖种类: 本地鹅' },
+    { value: 484, name: '养殖种类: 本地猪' },
+  ]
   let option2 = {
     tooltip: {
       trigger: 'item',
     },
+    color: color,
     legend: {
       show: true,
       // icon: "rect",
@@ -100,6 +112,7 @@ const initMap = () => {
       itemWidth: 8,
       itemHeight: 8,
       right: "5%",
+      top: "10%",
       // bottom: "center",
       textStyle: {
         color: "#fff"
@@ -125,12 +138,7 @@ const initMap = () => {
         labelLine: {
           show: false
         },
-        data: [
-          { value: 1048, name: 'Search Engine' },
-          { value: 735, name: 'Direct' },
-          { value: 580, name: 'Email' },
-          { value: 484, name: 'Union Ads' },
-        ]
+        data: data2
       }
     ]
   };
diff --git a/src/view/index/index.vue b/src/view/index/index.vue
index cc2c7fc..45b3f2d 100644
--- a/src/view/index/index.vue
+++ b/src/view/index/index.vue
@@ -2,6 +2,7 @@
 import leftItme from "./components/left.vue";
 import rightItme from "./components/right.vue";
 import centerItme from "./components/center.vue";
+import bottomItme from "./components/bottom.vue";
 import test from "./components/test.vue";
 </script>
 
@@ -12,10 +13,12 @@ import test from "./components/test.vue";
     </div>
     <div class="item item_c">
       <div style="height: 61%; display: flex; justify-content: space-between">
-        <centerItme style="width: 64%; border: 1px solid red"></centerItme>
+        <centerItme style="width: 64%"></centerItme>
         <rightItme style="width: 35%"></rightItme>
       </div>
-      <div style="height: 36%; border: 1px solid red"></div>
+      <div style="height: 36%">
+        <bottomItme style="width: 100%"></bottomItme>
+      </div>
     </div>
   </div>
 </template>