diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/deviceList.vue b/src/views/dashboard/components/deviceList.vue
new file mode 100644
index 0000000..d8e2e1e
--- /dev/null
+++ b/src/views/dashboard/components/deviceList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="(item, index) of device"
+      class="device"
+      :key="item.title"
+      :style="{ width: index === 0 ? '51%' : '50%' }"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "deviceList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    device: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/deviceList.vue b/src/views/dashboard/components/deviceList.vue
new file mode 100644
index 0000000..d8e2e1e
--- /dev/null
+++ b/src/views/dashboard/components/deviceList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="(item, index) of device"
+      class="device"
+      :key="item.title"
+      :style="{ width: index === 0 ? '51%' : '50%' }"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "deviceList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    device: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutAreaChart.vue b/src/views/dashboard/components/layoutAreaChart.vue
new file mode 100644
index 0000000..740f277
--- /dev/null
+++ b/src/views/dashboard/components/layoutAreaChart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <areaChart :xAxisData="xAxisData" :seriesData="seriesData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaChart from "../../../components/echart/lineChart/areaChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    areaChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend['供应商数量']
+    },1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/deviceList.vue b/src/views/dashboard/components/deviceList.vue
new file mode 100644
index 0000000..d8e2e1e
--- /dev/null
+++ b/src/views/dashboard/components/deviceList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="(item, index) of device"
+      class="device"
+      :key="item.title"
+      :style="{ width: index === 0 ? '51%' : '50%' }"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "deviceList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    device: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutAreaChart.vue b/src/views/dashboard/components/layoutAreaChart.vue
new file mode 100644
index 0000000..740f277
--- /dev/null
+++ b/src/views/dashboard/components/layoutAreaChart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <areaChart :xAxisData="xAxisData" :seriesData="seriesData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaChart from "../../../components/echart/lineChart/areaChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    areaChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend['供应商数量']
+    },1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartDoughnu.vue b/src/views/dashboard/components/layoutChartDoughnu.vue
new file mode 100644
index 0000000..d06ab18
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartDoughnu.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <doughnutChart :seriesData="seriesData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import doughnutChart from '../../../components/echart/pieChart/doughnutChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    doughnutChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        { value: 1048, name: 'banana' },
+        { value: 735, name: 'orange' },
+        { value: 222, name: 'apple'}
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/deviceList.vue b/src/views/dashboard/components/deviceList.vue
new file mode 100644
index 0000000..d8e2e1e
--- /dev/null
+++ b/src/views/dashboard/components/deviceList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="(item, index) of device"
+      class="device"
+      :key="item.title"
+      :style="{ width: index === 0 ? '51%' : '50%' }"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "deviceList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    device: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutAreaChart.vue b/src/views/dashboard/components/layoutAreaChart.vue
new file mode 100644
index 0000000..740f277
--- /dev/null
+++ b/src/views/dashboard/components/layoutAreaChart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <areaChart :xAxisData="xAxisData" :seriesData="seriesData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaChart from "../../../components/echart/lineChart/areaChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    areaChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend['供应商数量']
+    },1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartDoughnu.vue b/src/views/dashboard/components/layoutChartDoughnu.vue
new file mode 100644
index 0000000..d06ab18
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartDoughnu.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <doughnutChart :seriesData="seriesData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import doughnutChart from '../../../components/echart/pieChart/doughnutChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    doughnutChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        { value: 1048, name: 'banana' },
+        { value: 735, name: 'orange' },
+        { value: 222, name: 'apple'}
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
new file mode 100644
index 0000000..e7f6e1a
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">用户分布统计</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/deviceList.vue b/src/views/dashboard/components/deviceList.vue
new file mode 100644
index 0000000..d8e2e1e
--- /dev/null
+++ b/src/views/dashboard/components/deviceList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="(item, index) of device"
+      class="device"
+      :key="item.title"
+      :style="{ width: index === 0 ? '51%' : '50%' }"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "deviceList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    device: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutAreaChart.vue b/src/views/dashboard/components/layoutAreaChart.vue
new file mode 100644
index 0000000..740f277
--- /dev/null
+++ b/src/views/dashboard/components/layoutAreaChart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <areaChart :xAxisData="xAxisData" :seriesData="seriesData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaChart from "../../../components/echart/lineChart/areaChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    areaChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend['供应商数量']
+    },1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartDoughnu.vue b/src/views/dashboard/components/layoutChartDoughnu.vue
new file mode 100644
index 0000000..d06ab18
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartDoughnu.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <doughnutChart :seriesData="seriesData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import doughnutChart from '../../../components/echart/pieChart/doughnutChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    doughnutChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        { value: 1048, name: 'banana' },
+        { value: 735, name: 'orange' },
+        { value: 222, name: 'apple'}
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
new file mode 100644
index 0000000..e7f6e1a
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">用户分布统计</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartSelect.vue b/src/views/dashboard/components/layoutChartSelect.vue
new file mode 100644
index 0000000..6039dcf
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartSelect.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">{{ name }}</span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/deviceList.vue b/src/views/dashboard/components/deviceList.vue
new file mode 100644
index 0000000..d8e2e1e
--- /dev/null
+++ b/src/views/dashboard/components/deviceList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="(item, index) of device"
+      class="device"
+      :key="item.title"
+      :style="{ width: index === 0 ? '51%' : '50%' }"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "deviceList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    device: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutAreaChart.vue b/src/views/dashboard/components/layoutAreaChart.vue
new file mode 100644
index 0000000..740f277
--- /dev/null
+++ b/src/views/dashboard/components/layoutAreaChart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <areaChart :xAxisData="xAxisData" :seriesData="seriesData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaChart from "../../../components/echart/lineChart/areaChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    areaChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend['供应商数量']
+    },1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartDoughnu.vue b/src/views/dashboard/components/layoutChartDoughnu.vue
new file mode 100644
index 0000000..d06ab18
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartDoughnu.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <doughnutChart :seriesData="seriesData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import doughnutChart from '../../../components/echart/pieChart/doughnutChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    doughnutChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        { value: 1048, name: 'banana' },
+        { value: 735, name: 'orange' },
+        { value: 222, name: 'apple'}
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
new file mode 100644
index 0000000..e7f6e1a
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">用户分布统计</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartSelect.vue b/src/views/dashboard/components/layoutChartSelect.vue
new file mode 100644
index 0000000..6039dcf
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartSelect.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">{{ name }}</span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
new file mode 100644
index 0000000..89b57f7
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">区域设备排行榜</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import verticalBarChart from '../../../components/echart/barChart/verticalBarChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    verticalBarChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      yAxisData:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [120, 200, 150, 80, 70, 110, 130],
+        },
+      ];
+      this.yAxisData = [
+        '北京','上海','天津','河北','山东','四川','深圳'
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/deviceList.vue b/src/views/dashboard/components/deviceList.vue
new file mode 100644
index 0000000..d8e2e1e
--- /dev/null
+++ b/src/views/dashboard/components/deviceList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="(item, index) of device"
+      class="device"
+      :key="item.title"
+      :style="{ width: index === 0 ? '51%' : '50%' }"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "deviceList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    device: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutAreaChart.vue b/src/views/dashboard/components/layoutAreaChart.vue
new file mode 100644
index 0000000..740f277
--- /dev/null
+++ b/src/views/dashboard/components/layoutAreaChart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <areaChart :xAxisData="xAxisData" :seriesData="seriesData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaChart from "../../../components/echart/lineChart/areaChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    areaChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend['供应商数量']
+    },1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartDoughnu.vue b/src/views/dashboard/components/layoutChartDoughnu.vue
new file mode 100644
index 0000000..d06ab18
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartDoughnu.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <doughnutChart :seriesData="seriesData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import doughnutChart from '../../../components/echart/pieChart/doughnutChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    doughnutChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        { value: 1048, name: 'banana' },
+        { value: 735, name: 'orange' },
+        { value: 222, name: 'apple'}
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
new file mode 100644
index 0000000..e7f6e1a
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">用户分布统计</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartSelect.vue b/src/views/dashboard/components/layoutChartSelect.vue
new file mode 100644
index 0000000..6039dcf
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartSelect.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">{{ name }}</span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
new file mode 100644
index 0000000..89b57f7
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">区域设备排行榜</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import verticalBarChart from '../../../components/echart/barChart/verticalBarChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    verticalBarChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      yAxisData:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [120, 200, 150, 80, 70, 110, 130],
+        },
+      ];
+      this.yAxisData = [
+        '北京','上海','天津','河北','山东','四川','深圳'
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutMixChart.vue b/src/views/dashboard/components/layoutMixChart.vue
new file mode 100644
index 0000000..b2bad49
--- /dev/null
+++ b/src/views/dashboard/components/layoutMixChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <MixChart
+        :xAxisData="xAxisData"
+        :seriesData="seriesData"
+        :yAxisData="yAxisData"
+        :legend="legend"
+        width="600px"
+        height="400px"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MixChart from "../../../components/echart/barChart/MixChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    MixChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        { value: "12", label: "近一年" },
+        { value: "1", label: "近一月" },
+      ],
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          name: "Evaporation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
+          ],
+        },
+        {
+          name: "Precipitation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
+          ],
+        },
+        {
+          name: "Temperature",
+          type: "line",
+          yAxisIndex: 1,
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " °C";
+            },
+          },
+          data: [
+            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+          ],
+        },
+      ];
+      this.xAxisData = ["北京", "上海", "天津", "河北", "山东", "四川", "深圳"];
+      this.yAxisData = [
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} ml",
+            fontSize: 12,
+            color:'#000'
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: { //多条横线
+            show: true
+          },
+          interval: 20,
+        },
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} °C",
+            fontSize: 12,
+            color:'#000'
+          },
+          splitLine: {
+            //多条横线
+            show: true,
+          },
+          axisLine: {
+            show: false,
+          },
+          interval: 20,
+        },
+      ];
+      this.legend = ["Evaporation", "Precipitation", "Temperature"];
+    });
+  },
+  watch: {
+    value(newVal) {
+      // 根据选择的选项获取不同的数据
+      if (newVal === "12") {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+            ],
+          },
+        ];
+      } else {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              22.0, 43.9, 17.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              12.6, 15.9, 29.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              42.0, 2.2, 3.3, 94.5, 36.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0,
+              16.2,
+            ],
+          },
+        ];
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/deviceList.vue b/src/views/dashboard/components/deviceList.vue
new file mode 100644
index 0000000..d8e2e1e
--- /dev/null
+++ b/src/views/dashboard/components/deviceList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="(item, index) of device"
+      class="device"
+      :key="item.title"
+      :style="{ width: index === 0 ? '51%' : '50%' }"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "deviceList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    device: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutAreaChart.vue b/src/views/dashboard/components/layoutAreaChart.vue
new file mode 100644
index 0000000..740f277
--- /dev/null
+++ b/src/views/dashboard/components/layoutAreaChart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <areaChart :xAxisData="xAxisData" :seriesData="seriesData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaChart from "../../../components/echart/lineChart/areaChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    areaChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend['供应商数量']
+    },1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartDoughnu.vue b/src/views/dashboard/components/layoutChartDoughnu.vue
new file mode 100644
index 0000000..d06ab18
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartDoughnu.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <doughnutChart :seriesData="seriesData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import doughnutChart from '../../../components/echart/pieChart/doughnutChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    doughnutChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        { value: 1048, name: 'banana' },
+        { value: 735, name: 'orange' },
+        { value: 222, name: 'apple'}
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
new file mode 100644
index 0000000..e7f6e1a
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">用户分布统计</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartSelect.vue b/src/views/dashboard/components/layoutChartSelect.vue
new file mode 100644
index 0000000..6039dcf
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartSelect.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">{{ name }}</span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
new file mode 100644
index 0000000..89b57f7
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">区域设备排行榜</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import verticalBarChart from '../../../components/echart/barChart/verticalBarChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    verticalBarChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      yAxisData:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [120, 200, 150, 80, 70, 110, 130],
+        },
+      ];
+      this.yAxisData = [
+        '北京','上海','天津','河北','山东','四川','深圳'
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutMixChart.vue b/src/views/dashboard/components/layoutMixChart.vue
new file mode 100644
index 0000000..b2bad49
--- /dev/null
+++ b/src/views/dashboard/components/layoutMixChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <MixChart
+        :xAxisData="xAxisData"
+        :seriesData="seriesData"
+        :yAxisData="yAxisData"
+        :legend="legend"
+        width="600px"
+        height="400px"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MixChart from "../../../components/echart/barChart/MixChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    MixChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        { value: "12", label: "近一年" },
+        { value: "1", label: "近一月" },
+      ],
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          name: "Evaporation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
+          ],
+        },
+        {
+          name: "Precipitation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
+          ],
+        },
+        {
+          name: "Temperature",
+          type: "line",
+          yAxisIndex: 1,
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " °C";
+            },
+          },
+          data: [
+            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+          ],
+        },
+      ];
+      this.xAxisData = ["北京", "上海", "天津", "河北", "山东", "四川", "深圳"];
+      this.yAxisData = [
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} ml",
+            fontSize: 12,
+            color:'#000'
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: { //多条横线
+            show: true
+          },
+          interval: 20,
+        },
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} °C",
+            fontSize: 12,
+            color:'#000'
+          },
+          splitLine: {
+            //多条横线
+            show: true,
+          },
+          axisLine: {
+            show: false,
+          },
+          interval: 20,
+        },
+      ];
+      this.legend = ["Evaporation", "Precipitation", "Temperature"];
+    });
+  },
+  watch: {
+    value(newVal) {
+      // 根据选择的选项获取不同的数据
+      if (newVal === "12") {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+            ],
+          },
+        ];
+      } else {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              22.0, 43.9, 17.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              12.6, 15.9, 29.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              42.0, 2.2, 3.3, 94.5, 36.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0,
+              16.2,
+            ],
+          },
+        ];
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutStackAreaChart.vue b/src/views/dashboard/components/layoutStackAreaChart.vue
new file mode 100644
index 0000000..b100ad3
--- /dev/null
+++ b/src/views/dashboard/components/layoutStackAreaChart.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <gradientLineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import gradientLineChart from "../../../components/echart/lineChart/gradientLineChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    gradientLineChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          name:'1',
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+        {
+          name:'2',
+          data: [620, 432, 901, 934, 1290, 5330, 820],
+        },
+        {
+          name:'3',
+          data: [420, 632, 301, 934, 790, 330, 870],
+        },
+        {
+          name:'4',
+          data: [820, 492, 201, 934, 290, 830, 620],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend=['1','2','3','4']
+    }, 1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/deviceList.vue b/src/views/dashboard/components/deviceList.vue
new file mode 100644
index 0000000..d8e2e1e
--- /dev/null
+++ b/src/views/dashboard/components/deviceList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="(item, index) of device"
+      class="device"
+      :key="item.title"
+      :style="{ width: index === 0 ? '51%' : '50%' }"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "deviceList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    device: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutAreaChart.vue b/src/views/dashboard/components/layoutAreaChart.vue
new file mode 100644
index 0000000..740f277
--- /dev/null
+++ b/src/views/dashboard/components/layoutAreaChart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <areaChart :xAxisData="xAxisData" :seriesData="seriesData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaChart from "../../../components/echart/lineChart/areaChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    areaChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend['供应商数量']
+    },1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartDoughnu.vue b/src/views/dashboard/components/layoutChartDoughnu.vue
new file mode 100644
index 0000000..d06ab18
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartDoughnu.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <doughnutChart :seriesData="seriesData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import doughnutChart from '../../../components/echart/pieChart/doughnutChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    doughnutChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        { value: 1048, name: 'banana' },
+        { value: 735, name: 'orange' },
+        { value: 222, name: 'apple'}
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
new file mode 100644
index 0000000..e7f6e1a
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">用户分布统计</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartSelect.vue b/src/views/dashboard/components/layoutChartSelect.vue
new file mode 100644
index 0000000..6039dcf
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartSelect.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">{{ name }}</span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
new file mode 100644
index 0000000..89b57f7
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">区域设备排行榜</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import verticalBarChart from '../../../components/echart/barChart/verticalBarChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    verticalBarChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      yAxisData:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [120, 200, 150, 80, 70, 110, 130],
+        },
+      ];
+      this.yAxisData = [
+        '北京','上海','天津','河北','山东','四川','深圳'
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutMixChart.vue b/src/views/dashboard/components/layoutMixChart.vue
new file mode 100644
index 0000000..b2bad49
--- /dev/null
+++ b/src/views/dashboard/components/layoutMixChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <MixChart
+        :xAxisData="xAxisData"
+        :seriesData="seriesData"
+        :yAxisData="yAxisData"
+        :legend="legend"
+        width="600px"
+        height="400px"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MixChart from "../../../components/echart/barChart/MixChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    MixChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        { value: "12", label: "近一年" },
+        { value: "1", label: "近一月" },
+      ],
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          name: "Evaporation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
+          ],
+        },
+        {
+          name: "Precipitation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
+          ],
+        },
+        {
+          name: "Temperature",
+          type: "line",
+          yAxisIndex: 1,
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " °C";
+            },
+          },
+          data: [
+            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+          ],
+        },
+      ];
+      this.xAxisData = ["北京", "上海", "天津", "河北", "山东", "四川", "深圳"];
+      this.yAxisData = [
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} ml",
+            fontSize: 12,
+            color:'#000'
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: { //多条横线
+            show: true
+          },
+          interval: 20,
+        },
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} °C",
+            fontSize: 12,
+            color:'#000'
+          },
+          splitLine: {
+            //多条横线
+            show: true,
+          },
+          axisLine: {
+            show: false,
+          },
+          interval: 20,
+        },
+      ];
+      this.legend = ["Evaporation", "Precipitation", "Temperature"];
+    });
+  },
+  watch: {
+    value(newVal) {
+      // 根据选择的选项获取不同的数据
+      if (newVal === "12") {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+            ],
+          },
+        ];
+      } else {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              22.0, 43.9, 17.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              12.6, 15.9, 29.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              42.0, 2.2, 3.3, 94.5, 36.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0,
+              16.2,
+            ],
+          },
+        ];
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutStackAreaChart.vue b/src/views/dashboard/components/layoutStackAreaChart.vue
new file mode 100644
index 0000000..b100ad3
--- /dev/null
+++ b/src/views/dashboard/components/layoutStackAreaChart.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <gradientLineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import gradientLineChart from "../../../components/echart/lineChart/gradientLineChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    gradientLineChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          name:'1',
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+        {
+          name:'2',
+          data: [620, 432, 901, 934, 1290, 5330, 820],
+        },
+        {
+          name:'3',
+          data: [420, 632, 301, 934, 790, 330, 870],
+        },
+        {
+          name:'4',
+          data: [820, 492, 201, 934, 290, 830, 620],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend=['1','2','3','4']
+    }, 1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
new file mode 100644
index 0000000..e6000f1
--- /dev/null
+++ b/src/views/dashboard/components/managementList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="item of management"
+      class="device"
+      :key="item.title"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "managementList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    management: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  // justify-content: ;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+      text-align: center;
+    }
+  }
+}
+</style>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/deviceList.vue b/src/views/dashboard/components/deviceList.vue
new file mode 100644
index 0000000..d8e2e1e
--- /dev/null
+++ b/src/views/dashboard/components/deviceList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="(item, index) of device"
+      class="device"
+      :key="item.title"
+      :style="{ width: index === 0 ? '51%' : '50%' }"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "deviceList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    device: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutAreaChart.vue b/src/views/dashboard/components/layoutAreaChart.vue
new file mode 100644
index 0000000..740f277
--- /dev/null
+++ b/src/views/dashboard/components/layoutAreaChart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <areaChart :xAxisData="xAxisData" :seriesData="seriesData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaChart from "../../../components/echart/lineChart/areaChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    areaChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend['供应商数量']
+    },1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartDoughnu.vue b/src/views/dashboard/components/layoutChartDoughnu.vue
new file mode 100644
index 0000000..d06ab18
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartDoughnu.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <doughnutChart :seriesData="seriesData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import doughnutChart from '../../../components/echart/pieChart/doughnutChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    doughnutChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        { value: 1048, name: 'banana' },
+        { value: 735, name: 'orange' },
+        { value: 222, name: 'apple'}
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
new file mode 100644
index 0000000..e7f6e1a
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">用户分布统计</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartSelect.vue b/src/views/dashboard/components/layoutChartSelect.vue
new file mode 100644
index 0000000..6039dcf
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartSelect.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">{{ name }}</span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
new file mode 100644
index 0000000..89b57f7
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">区域设备排行榜</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import verticalBarChart from '../../../components/echart/barChart/verticalBarChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    verticalBarChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      yAxisData:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [120, 200, 150, 80, 70, 110, 130],
+        },
+      ];
+      this.yAxisData = [
+        '北京','上海','天津','河北','山东','四川','深圳'
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutMixChart.vue b/src/views/dashboard/components/layoutMixChart.vue
new file mode 100644
index 0000000..b2bad49
--- /dev/null
+++ b/src/views/dashboard/components/layoutMixChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <MixChart
+        :xAxisData="xAxisData"
+        :seriesData="seriesData"
+        :yAxisData="yAxisData"
+        :legend="legend"
+        width="600px"
+        height="400px"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MixChart from "../../../components/echart/barChart/MixChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    MixChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        { value: "12", label: "近一年" },
+        { value: "1", label: "近一月" },
+      ],
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          name: "Evaporation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
+          ],
+        },
+        {
+          name: "Precipitation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
+          ],
+        },
+        {
+          name: "Temperature",
+          type: "line",
+          yAxisIndex: 1,
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " °C";
+            },
+          },
+          data: [
+            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+          ],
+        },
+      ];
+      this.xAxisData = ["北京", "上海", "天津", "河北", "山东", "四川", "深圳"];
+      this.yAxisData = [
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} ml",
+            fontSize: 12,
+            color:'#000'
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: { //多条横线
+            show: true
+          },
+          interval: 20,
+        },
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} °C",
+            fontSize: 12,
+            color:'#000'
+          },
+          splitLine: {
+            //多条横线
+            show: true,
+          },
+          axisLine: {
+            show: false,
+          },
+          interval: 20,
+        },
+      ];
+      this.legend = ["Evaporation", "Precipitation", "Temperature"];
+    });
+  },
+  watch: {
+    value(newVal) {
+      // 根据选择的选项获取不同的数据
+      if (newVal === "12") {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+            ],
+          },
+        ];
+      } else {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              22.0, 43.9, 17.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              12.6, 15.9, 29.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              42.0, 2.2, 3.3, 94.5, 36.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0,
+              16.2,
+            ],
+          },
+        ];
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutStackAreaChart.vue b/src/views/dashboard/components/layoutStackAreaChart.vue
new file mode 100644
index 0000000..b100ad3
--- /dev/null
+++ b/src/views/dashboard/components/layoutStackAreaChart.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <gradientLineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import gradientLineChart from "../../../components/echart/lineChart/gradientLineChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    gradientLineChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          name:'1',
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+        {
+          name:'2',
+          data: [620, 432, 901, 934, 1290, 5330, 820],
+        },
+        {
+          name:'3',
+          data: [420, 632, 301, 934, 790, 330, 870],
+        },
+        {
+          name:'4',
+          data: [820, 492, 201, 934, 290, 830, 620],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend=['1','2','3','4']
+    }, 1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
new file mode 100644
index 0000000..e6000f1
--- /dev/null
+++ b/src/views/dashboard/components/managementList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="item of management"
+      class="device"
+      :key="item.title"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "managementList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    management: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  // justify-content: ;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+      text-align: center;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue
index 58a493d..f373cab 100644
--- a/src/views/dashboard/components/switch.vue
+++ b/src/views/dashboard/components/switch.vue
@@ -2,7 +2,7 @@
   <div class="container">
       <ul>
         <li v-for="(btn, index) of btns" :key="index" @click="changeBtn(btn, index)">
-        <svg-icon :icon-class="btn.icon" :style="{'color':active === index ? '#409EFF' : ''}"></svg-icon>
+        <svg-icon :icon-class="btn.icon"></svg-icon>
         <span class="title" :style="{'color':active === index ? '#409EFF' : ''}">{{btn.name}}</span>
         </li>
       </ul>

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/deviceList.vue b/src/views/dashboard/components/deviceList.vue
new file mode 100644
index 0000000..d8e2e1e
--- /dev/null
+++ b/src/views/dashboard/components/deviceList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="(item, index) of device"
+      class="device"
+      :key="item.title"
+      :style="{ width: index === 0 ? '51%' : '50%' }"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "deviceList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    device: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutAreaChart.vue b/src/views/dashboard/components/layoutAreaChart.vue
new file mode 100644
index 0000000..740f277
--- /dev/null
+++ b/src/views/dashboard/components/layoutAreaChart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <areaChart :xAxisData="xAxisData" :seriesData="seriesData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaChart from "../../../components/echart/lineChart/areaChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    areaChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend['供应商数量']
+    },1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartDoughnu.vue b/src/views/dashboard/components/layoutChartDoughnu.vue
new file mode 100644
index 0000000..d06ab18
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartDoughnu.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <doughnutChart :seriesData="seriesData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import doughnutChart from '../../../components/echart/pieChart/doughnutChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    doughnutChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        { value: 1048, name: 'banana' },
+        { value: 735, name: 'orange' },
+        { value: 222, name: 'apple'}
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
new file mode 100644
index 0000000..e7f6e1a
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">用户分布统计</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartSelect.vue b/src/views/dashboard/components/layoutChartSelect.vue
new file mode 100644
index 0000000..6039dcf
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartSelect.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">{{ name }}</span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
new file mode 100644
index 0000000..89b57f7
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">区域设备排行榜</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import verticalBarChart from '../../../components/echart/barChart/verticalBarChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    verticalBarChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      yAxisData:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [120, 200, 150, 80, 70, 110, 130],
+        },
+      ];
+      this.yAxisData = [
+        '北京','上海','天津','河北','山东','四川','深圳'
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutMixChart.vue b/src/views/dashboard/components/layoutMixChart.vue
new file mode 100644
index 0000000..b2bad49
--- /dev/null
+++ b/src/views/dashboard/components/layoutMixChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <MixChart
+        :xAxisData="xAxisData"
+        :seriesData="seriesData"
+        :yAxisData="yAxisData"
+        :legend="legend"
+        width="600px"
+        height="400px"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MixChart from "../../../components/echart/barChart/MixChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    MixChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        { value: "12", label: "近一年" },
+        { value: "1", label: "近一月" },
+      ],
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          name: "Evaporation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
+          ],
+        },
+        {
+          name: "Precipitation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
+          ],
+        },
+        {
+          name: "Temperature",
+          type: "line",
+          yAxisIndex: 1,
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " °C";
+            },
+          },
+          data: [
+            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+          ],
+        },
+      ];
+      this.xAxisData = ["北京", "上海", "天津", "河北", "山东", "四川", "深圳"];
+      this.yAxisData = [
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} ml",
+            fontSize: 12,
+            color:'#000'
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: { //多条横线
+            show: true
+          },
+          interval: 20,
+        },
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} °C",
+            fontSize: 12,
+            color:'#000'
+          },
+          splitLine: {
+            //多条横线
+            show: true,
+          },
+          axisLine: {
+            show: false,
+          },
+          interval: 20,
+        },
+      ];
+      this.legend = ["Evaporation", "Precipitation", "Temperature"];
+    });
+  },
+  watch: {
+    value(newVal) {
+      // 根据选择的选项获取不同的数据
+      if (newVal === "12") {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+            ],
+          },
+        ];
+      } else {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              22.0, 43.9, 17.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              12.6, 15.9, 29.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              42.0, 2.2, 3.3, 94.5, 36.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0,
+              16.2,
+            ],
+          },
+        ];
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutStackAreaChart.vue b/src/views/dashboard/components/layoutStackAreaChart.vue
new file mode 100644
index 0000000..b100ad3
--- /dev/null
+++ b/src/views/dashboard/components/layoutStackAreaChart.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <gradientLineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import gradientLineChart from "../../../components/echart/lineChart/gradientLineChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    gradientLineChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          name:'1',
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+        {
+          name:'2',
+          data: [620, 432, 901, 934, 1290, 5330, 820],
+        },
+        {
+          name:'3',
+          data: [420, 632, 301, 934, 790, 330, 870],
+        },
+        {
+          name:'4',
+          data: [820, 492, 201, 934, 290, 830, 620],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend=['1','2','3','4']
+    }, 1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
new file mode 100644
index 0000000..e6000f1
--- /dev/null
+++ b/src/views/dashboard/components/managementList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="item of management"
+      class="device"
+      :key="item.title"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "managementList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    management: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  // justify-content: ;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+      text-align: center;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue
index 58a493d..f373cab 100644
--- a/src/views/dashboard/components/switch.vue
+++ b/src/views/dashboard/components/switch.vue
@@ -2,7 +2,7 @@
   <div class="container">
       <ul>
         <li v-for="(btn, index) of btns" :key="index" @click="changeBtn(btn, index)">
-        <svg-icon :icon-class="btn.icon" :style="{'color':active === index ? '#409EFF' : ''}"></svg-icon>
+        <svg-icon :icon-class="btn.icon"></svg-icon>
         <span class="title" :style="{'color':active === index ? '#409EFF' : ''}">{{btn.name}}</span>
         </li>
       </ul>
diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue
index c543e97..65a6733 100644
--- a/src/views/dashboard/devicePanel.vue
+++ b/src/views/dashboard/devicePanel.vue
@@ -1,13 +1,76 @@
 <template>
-  <div>devicePanel</div>
+  <div class="container">
+    <!-- <layoutChartRadar/>
+    <layoutChartDoughnu />
+    <layoutChartVerticalBar />
+    <layoutMixChart />
+    <layoutAreaChart />
+    <layoutStackAreaChart /> -->
+    <div class="show-data">
+      <deviceList :device="device"/>
+      <layoutStackAreaChart /> 
+      <layoutChartDoughnu/>
+      <layoutChartVerticalBar />
+    </div>
+  </div>
 </template>
 
 <script>
+import layoutChartRadar from './components/layoutChartRadar.vue';
+import layoutChartDoughnu from './components/layoutChartDoughnu.vue';
+import layoutChartVerticalBar from './components/layoutChartVerticalBar.vue';
+import layoutMixChart from './components/layoutMixChart.vue';
+import layoutAreaChart from './components/layoutAreaChart.vue';
+import layoutStackAreaChart from './components/layoutStackAreaChart.vue';
+import deviceList from './components/deviceList.vue';
 export default {
-    name:'devicePanel'
+    name:'devicePanel',
+    components:{
+      layoutChartRadar,
+      layoutChartDoughnu,
+      layoutChartVerticalBar,
+      layoutMixChart,
+      layoutAreaChart,
+      layoutStackAreaChart,
+      deviceList,
+    },
+    data() {
+      return{
+        device:[
+          {
+            title:'设备总数',
+            count:'123',
+            icon:'device-count'
+          },
+          {
+            title:'IOT设备数量',
+            count:'1263',
+            icon:'device-count'
+          },
+          {
+            title:'IOT设备在线率',
+            count:'80%',
+            icon:'device-fund'
+          },
+        ]
+      }
+    },
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.container{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .show-data{
+    position: absolute;
+    right: 3%;
+    top:0;
+    background: transparent;
+    width: 450px;
+    // float: right;
 
+  }
+}
 </style>
\ No newline at end of file

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/deviceList.vue b/src/views/dashboard/components/deviceList.vue
new file mode 100644
index 0000000..d8e2e1e
--- /dev/null
+++ b/src/views/dashboard/components/deviceList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="(item, index) of device"
+      class="device"
+      :key="item.title"
+      :style="{ width: index === 0 ? '51%' : '50%' }"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "deviceList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    device: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutAreaChart.vue b/src/views/dashboard/components/layoutAreaChart.vue
new file mode 100644
index 0000000..740f277
--- /dev/null
+++ b/src/views/dashboard/components/layoutAreaChart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <areaChart :xAxisData="xAxisData" :seriesData="seriesData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaChart from "../../../components/echart/lineChart/areaChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    areaChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend['供应商数量']
+    },1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartDoughnu.vue b/src/views/dashboard/components/layoutChartDoughnu.vue
new file mode 100644
index 0000000..d06ab18
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartDoughnu.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <doughnutChart :seriesData="seriesData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import doughnutChart from '../../../components/echart/pieChart/doughnutChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    doughnutChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        { value: 1048, name: 'banana' },
+        { value: 735, name: 'orange' },
+        { value: 222, name: 'apple'}
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
new file mode 100644
index 0000000..e7f6e1a
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">用户分布统计</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartSelect.vue b/src/views/dashboard/components/layoutChartSelect.vue
new file mode 100644
index 0000000..6039dcf
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartSelect.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">{{ name }}</span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
new file mode 100644
index 0000000..89b57f7
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">区域设备排行榜</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import verticalBarChart from '../../../components/echart/barChart/verticalBarChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    verticalBarChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      yAxisData:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [120, 200, 150, 80, 70, 110, 130],
+        },
+      ];
+      this.yAxisData = [
+        '北京','上海','天津','河北','山东','四川','深圳'
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutMixChart.vue b/src/views/dashboard/components/layoutMixChart.vue
new file mode 100644
index 0000000..b2bad49
--- /dev/null
+++ b/src/views/dashboard/components/layoutMixChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <MixChart
+        :xAxisData="xAxisData"
+        :seriesData="seriesData"
+        :yAxisData="yAxisData"
+        :legend="legend"
+        width="600px"
+        height="400px"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MixChart from "../../../components/echart/barChart/MixChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    MixChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        { value: "12", label: "近一年" },
+        { value: "1", label: "近一月" },
+      ],
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          name: "Evaporation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
+          ],
+        },
+        {
+          name: "Precipitation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
+          ],
+        },
+        {
+          name: "Temperature",
+          type: "line",
+          yAxisIndex: 1,
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " °C";
+            },
+          },
+          data: [
+            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+          ],
+        },
+      ];
+      this.xAxisData = ["北京", "上海", "天津", "河北", "山东", "四川", "深圳"];
+      this.yAxisData = [
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} ml",
+            fontSize: 12,
+            color:'#000'
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: { //多条横线
+            show: true
+          },
+          interval: 20,
+        },
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} °C",
+            fontSize: 12,
+            color:'#000'
+          },
+          splitLine: {
+            //多条横线
+            show: true,
+          },
+          axisLine: {
+            show: false,
+          },
+          interval: 20,
+        },
+      ];
+      this.legend = ["Evaporation", "Precipitation", "Temperature"];
+    });
+  },
+  watch: {
+    value(newVal) {
+      // 根据选择的选项获取不同的数据
+      if (newVal === "12") {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+            ],
+          },
+        ];
+      } else {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              22.0, 43.9, 17.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              12.6, 15.9, 29.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              42.0, 2.2, 3.3, 94.5, 36.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0,
+              16.2,
+            ],
+          },
+        ];
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutStackAreaChart.vue b/src/views/dashboard/components/layoutStackAreaChart.vue
new file mode 100644
index 0000000..b100ad3
--- /dev/null
+++ b/src/views/dashboard/components/layoutStackAreaChart.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <gradientLineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import gradientLineChart from "../../../components/echart/lineChart/gradientLineChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    gradientLineChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          name:'1',
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+        {
+          name:'2',
+          data: [620, 432, 901, 934, 1290, 5330, 820],
+        },
+        {
+          name:'3',
+          data: [420, 632, 301, 934, 790, 330, 870],
+        },
+        {
+          name:'4',
+          data: [820, 492, 201, 934, 290, 830, 620],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend=['1','2','3','4']
+    }, 1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
new file mode 100644
index 0000000..e6000f1
--- /dev/null
+++ b/src/views/dashboard/components/managementList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="item of management"
+      class="device"
+      :key="item.title"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "managementList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    management: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  // justify-content: ;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+      text-align: center;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue
index 58a493d..f373cab 100644
--- a/src/views/dashboard/components/switch.vue
+++ b/src/views/dashboard/components/switch.vue
@@ -2,7 +2,7 @@
   <div class="container">
       <ul>
         <li v-for="(btn, index) of btns" :key="index" @click="changeBtn(btn, index)">
-        <svg-icon :icon-class="btn.icon" :style="{'color':active === index ? '#409EFF' : ''}"></svg-icon>
+        <svg-icon :icon-class="btn.icon"></svg-icon>
         <span class="title" :style="{'color':active === index ? '#409EFF' : ''}">{{btn.name}}</span>
         </li>
       </ul>
diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue
index c543e97..65a6733 100644
--- a/src/views/dashboard/devicePanel.vue
+++ b/src/views/dashboard/devicePanel.vue
@@ -1,13 +1,76 @@
 <template>
-  <div>devicePanel</div>
+  <div class="container">
+    <!-- <layoutChartRadar/>
+    <layoutChartDoughnu />
+    <layoutChartVerticalBar />
+    <layoutMixChart />
+    <layoutAreaChart />
+    <layoutStackAreaChart /> -->
+    <div class="show-data">
+      <deviceList :device="device"/>
+      <layoutStackAreaChart /> 
+      <layoutChartDoughnu/>
+      <layoutChartVerticalBar />
+    </div>
+  </div>
 </template>
 
 <script>
+import layoutChartRadar from './components/layoutChartRadar.vue';
+import layoutChartDoughnu from './components/layoutChartDoughnu.vue';
+import layoutChartVerticalBar from './components/layoutChartVerticalBar.vue';
+import layoutMixChart from './components/layoutMixChart.vue';
+import layoutAreaChart from './components/layoutAreaChart.vue';
+import layoutStackAreaChart from './components/layoutStackAreaChart.vue';
+import deviceList from './components/deviceList.vue';
 export default {
-    name:'devicePanel'
+    name:'devicePanel',
+    components:{
+      layoutChartRadar,
+      layoutChartDoughnu,
+      layoutChartVerticalBar,
+      layoutMixChart,
+      layoutAreaChart,
+      layoutStackAreaChart,
+      deviceList,
+    },
+    data() {
+      return{
+        device:[
+          {
+            title:'设备总数',
+            count:'123',
+            icon:'device-count'
+          },
+          {
+            title:'IOT设备数量',
+            count:'1263',
+            icon:'device-count'
+          },
+          {
+            title:'IOT设备在线率',
+            count:'80%',
+            icon:'device-fund'
+          },
+        ]
+      }
+    },
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.container{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .show-data{
+    position: absolute;
+    right: 3%;
+    top:0;
+    background: transparent;
+    width: 450px;
+    // float: right;
 
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 41cb204..f017854 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -47,6 +47,9 @@
 .dashboard {
   &-container {
     margin: 10px 20px;
+    width: 100%;
+    box-sizing: content-box;
+    // overflow: hidden;
   }
   &-text {
     font-size: 30px;

diff --git a/public/config/project.config.json b/public/config/project.config.json
index cd629df..0f1aacd 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -4,6 +4,8 @@
   "theme": "blue",
   "baseUrl": "http://111.198.10.15:21403/",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
+  "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
   "singleSys": true,
   "provinceCode": "360000",
   "cityCode": "361000",
diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js
new file mode 100644
index 0000000..625e638
--- /dev/null
+++ b/src/api/cockpit/cockpit.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+// 获取设备列表（不分页）-带经纬度
+export function getDevicePosition() {
+  return request({
+    url: 'statistic/deviceList',
+    method: 'get',
+  })
+}
+//  设备总数、IOT设备数量、IOT设备在线率
+export function getDeviceInfo() {
+    return request({
+        url: 'statistic/deviceCount',
+        method: 'get',
+      })
+}
+
+// 近一月设备数量统计
+export function getDeviceStatistics() {
+    return request({
+        url: 'statistic/deviceCount/montht',
+        method: 'get',
+      })
+}
+
+// 设备品类统计
+export function getDeviceCategory() {
+    return request({
+        url: 'statistic/deviceCategory',
+        method: 'get',
+      })
+}
+
+// 区域设备排行
+// export function getRegionalRank() {
+//     return request({
+//         url: 'statistic/deviceCategory',
+//         method: 'get',
+//       })
+// }
\ No newline at end of file
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
new file mode 100644
index 0000000..14b069e
--- /dev/null
+++ b/src/components/echart/barChart/MixChart.vue
@@ -0,0 +1,207 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+<!-- 折柱混合图表 -->
+<script>
+import tdTheme from "./../theme.json"; // 引入默认主题
+import resizeMixins from "@/utils/resizeMixins";
+export default {
+  name: "mixChart",
+  mixins: [resizeMixins],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    id: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "2.5rem",
+    },
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    }, // 平滑
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    xAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // y轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    legend: {
+      //图例数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+          data: [],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel:{
+              show:true,
+              alignWithLabel:true
+            }
+          },
+        ],
+        yAxis: [],
+        series: [],
+        grid:{
+          containLabel:true
+        }
+      },
+    };
+  },
+  watch: {
+    xAxisData(newVal) {
+      this.option.xAxis[0].data = newVal;
+      // this.refreshEchart()
+    },
+    yAxisData(newVal) {
+      this.option.yAxis = newVal;
+    },
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      // this.refreshEchart()
+    },
+    unit(newVal) {
+      // this.option.yAxis[0].name = newVal
+      // this.refreshEchart()
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: item.type,
+            lineStyle: {
+              width: 1,
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    option: {
+      handler(newVal) {
+        // 设置true清空echart缓存
+        this.chart.setOption(newVal, true);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // debugger
+    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, "tdTheme");
+      if (this.option.xAxis.data) {
+        this.chart.setOption(this.option, true);
+      } else {
+        this.chart.setOption({}, true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue
new file mode 100644
index 0000000..a508ed5
--- /dev/null
+++ b/src/components/echart/barChart/verticalBarChart.vue
@@ -0,0 +1,230 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 横向柱状图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+          {name:'近一周日均车位停车次数',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
+        ]
+      }
+     *
+     */
+import Echart from "./../index";
+export default {
+  name: "verticalBarChart",
+  components: { Echart },
+  props: {
+    unit: {
+      // 单位
+      type: String,
+      default: "",
+    },
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    yAxisData: {
+      // X轴数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "", //悬浮提示框不显示
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            boundaryGap: false,
+            data: [],
+            boundaryGap: [0, 0],
+            position: "top",
+            axisLine: {
+              lineStyle: {
+                color: this.axisLineColor, // 轴线的颜色
+              },
+            },
+            axisLabel: {
+              color: this.fontColor, // X轴名称颜色
+              fontSize: 14,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: this.unit,
+            type: "category",
+            // offset:-100,// 调整y轴文字位置
+            // nameLocation:'start',
+            // offset:-20,  
+            data:[],  //y轴显示内容
+            show: true,
+            color: "#000",
+            nameTextStyle: {
+              color: "#000",
+              fontSize: 14,
+              verticalAlign: "middle",
+            },
+            max: function (value) {
+              return value.max;
+            },
+            minIntermal: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: this.fontColor,
+            //   inside:true,
+              fontSize: 12,
+              formatter: function (value, index) {  //时候后用于修改y轴显示内容
+                return value + (index + 1);
+              },
+            },
+          },
+        ],
+        series: [],
+      },
+    };
+  },
+  watch: {
+    yAxisData(newVal) {
+      this.option.yAxis[0].data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "bar",
+            barWidth: 15,
+            showBackground: true,
+            backgroundStyle:{
+                color: 'rgba(180, 180, 180, 0.1)',
+                // borderWidth:2,
+                // borderColor:'#000'
+
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //显示文本
+                  position: ["90%", "-100%"], //数据值位置
+                  textStyle: {
+                    color: "#000",
+                    fontSize: "14",
+                  },
+                },
+              },
+            },
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       this.unit && (this.option.yAxis[0].name = this.unit);
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "bar",
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/echart/index.vue b/src/components/echart/index.vue
index 483b9da..7e32880 100644
--- a/src/components/echart/index.vue
+++ b/src/components/echart/index.vue
@@ -5,7 +5,6 @@
 <script>
 import tdTheme from './theme.json' // 引入默认主题
 import resizeMixins from '@/utils/resizeMixins'
-
 export default {
   name: 'Echart',
   mixins: [resizeMixins],
@@ -46,7 +45,7 @@
     }
   },
   mounted() {
-    debugger
+    // debugger
     this.$echarts.registerTheme('tdTheme', tdTheme) // 覆盖默认主题
     this.initChart()
   },
diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue
new file mode 100644
index 0000000..685a30d
--- /dev/null
+++ b/src/components/echart/lineChart/areaChart.vue
@@ -0,0 +1,246 @@
+<template>
+    <Echart
+      ref="chart"
+      :options="option"
+      height="100%"
+      width="100%"
+    />
+  </template>
+  <script>
+  /**
+     * @author 王晓颖
+     * @date 2020/08/19
+     * @Description 折线面积图
+     * @props 数据格式：{
+     *    id: 'traffic_govern_line_id',
+        legend:['近一周日均车位占用率','近一周日均车位停车次数'], // 可不传
+        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
+        axisData: [
+          {name:'近一周日均车位占用率',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
+        ]
+      }
+     *
+     */
+  import Echart from './../index'
+  import { countSize } from '@/utils/index'
+  export default {
+    name: 'GradientLineChart',
+    components: { Echart },
+    props: {
+      unit: { // 单位
+        type: String,
+        default: ''
+      },
+      colors: { // 颜色
+        type: Array,
+        default: () => { return ['#01b4ff', '#0337ff'] }
+      },
+      axisLineColor: { // 轴线颜色
+        type: String,
+        default: '#101d5d'
+      },
+      fontColor: { // 轴线上文字颜色
+        type: String,
+        default: '#000fff'
+      },
+      labelColor: { // 图形上文本标签颜色
+        type: String,
+        default: '#47c8b2'
+      },
+      smooth: {
+        type: Boolean,
+        default: true
+      }, // 平滑
+      seriesData: { // 数据
+        type: Array,
+        default: () => { return [] }
+      },
+      xAxisData: { // X轴数据
+        type: Array,
+        default: () => { return [] }
+      },
+      legend: { // 
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    data() {
+      return {
+        curWidth: this.width,
+        curHeight: this.height,
+        option: {
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 5,
+            top: 30,
+            containLabel: true
+          },
+          legend: {
+            orient: 'horizontal',
+            data: [],
+            align: 'left',
+            right: '5%',
+            itemWidth: 12,
+            itemHeight: 12,
+            icon: 'rect',
+            textStyle: {
+              width: '300',
+              color: '#000',
+              fontSize: 12
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            textStyle: {
+              fontSize: '16'
+            },
+            axisPointer: {
+              type: 'line',
+              label: {
+                fontSize: '16'
+              }
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: true,
+              data: [],
+              axisLine: {
+                lineStyle: {
+                  color: this.axisLineColor // 轴线的颜色
+                }
+              },
+              axisLabel: {
+                color: this.fontColor, // X轴名称颜色
+                fontSize: 14
+              },
+              axisTick: {
+                show:true,
+                alignWithLabel:true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              name: this.unit,
+              type: 'value',
+              color: '#000',
+              nameTextStyle: {
+                color: '#000',
+                fontSize: 14,
+                verticalAlign: 'middle'
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: ['#101641'],
+                  type: 'dashed'
+                }
+              },
+              axisLine: {
+                show:false,
+                lineStyle: {
+                  color: this.axisLineColor
+                }
+              },
+              axisLabel: {
+                color: this.fontColor,
+                fontSize: 12
+              }
+            }
+          ],
+          series: []
+        }
+      }
+    },
+    watch: {
+      xAxisData(newVal) {
+        this.option.xAxis[0].data = newVal
+        // this.refreshEchart()
+      },
+      legend(newVal) {
+        this.option.legend[0].data = newVal
+        // this.refreshEchart()
+      },
+      unit(newVal) {
+        this.option.yAxis[0].name = newVal
+        // this.refreshEchart()
+      },
+      seriesData: {
+        handler(newVal) {
+          const newSeries = []
+          for (const item of newVal) {
+            const series = {
+              name: item.name,
+              type: 'line',
+              symbol: 'none', // 去掉折线节点
+              smooth: this.smooth, // 曲线变平滑
+              lineStyle: {
+                width: 1
+              },
+              areaStyle: {
+                opacity:0.5
+              },
+              data: item.data
+            }
+            newSeries.push(series)
+          }
+          this.$set(this.option, 'series', newSeries)
+        //   this.refreshChart()
+        },
+        deep: true
+      }
+    },
+    // mounted() {
+    //   this.refreshChart()
+    // },
+    // methods: {
+    //   refreshChart() {
+    //     this.unit && (this.option.yAxis[0].name = this.unit)
+    //     if (this.xAxisData.length) {
+    //       this.option.legend.data = this.legend
+    //       this.option.xAxis[0].data = this.xAxisData
+    //       const newSeries = []
+    //       for (const item of this.seriesData) {
+    //         const series = {
+    //           name: item.name,
+    //           type: 'line',
+    //           symbol: 'none', // 去掉折线节点
+    //           smooth: this.smooth, // 曲线变平滑
+    //           itemStyle: {
+    //             color: `rgb(${item.color})`
+    //           },
+    //           lineStyle: {
+    //             width: 1
+    //           },
+    //           areaStyle: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+    //               [
+    //                 {
+    //                   offset: 0.1,
+    //                   color: `rgba(${item.color},.6)`
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: 'rgba(0,0,0,.0)'
+    //                 }
+    //               ]
+    //             )
+    //           },
+    //           data: item.data
+    //         }
+    //         newSeries.push(series)
+    //       }
+    //       this.$set(this.option, 'series', newSeries)
+    //     }
+    //   }
+    // }
+  }
+  </script>
+  
+  <style scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 1658675..5b758a1 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -102,9 +102,10 @@
         xAxis: [
           {
             type: 'category',
-            boundaryGap: false,
+            boundaryGap: true,
             data: [],
             axisLine: {
+              show:false,
               lineStyle: {
                 color: this.axisLineColor // 轴线的颜色
               }
@@ -112,12 +113,16 @@
             axisLabel: {
               color: this.fontColor, // X轴名称颜色
               fontSize: 14
+            },
+            axisTick:{
+              show:true
             }
           }
         ],
         yAxis: [
           {
             name: this.unit,
+            show:false,
             type: 'value',
             color: '#000',
             nameTextStyle: {
@@ -154,15 +159,15 @@
   watch: {
     xAxisData(newVal) {
       this.option.xAxis[0].data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     legend(newVal) {
       this.option.legend.data = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     unit(newVal) {
       this.option.yAxis[0].name = newVal
-      this.refreshEchart()
+      // this.refreshEchart()
     },
     seriesData: {
       handler(newVal) {
@@ -173,82 +178,85 @@
             type: 'line',
             symbol: 'none', // 去掉折线节点
             smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
+            // itemStyle: {
+            //   color: `rgb(${item.color})`
+            // },
             lineStyle: {
               width: 1
             },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
+            areaStyle:{
+              opacity:0.3
             },
+            // areaStyle: {
+            //   color: new this.$echarts.graphic.LinearGradient(
+            //     0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+            //     [
+            //       {
+            //         offset: 0.1,
+            //         // color: `rgba(${item.color},.6)`
+            //       },
+            //       {
+            //         offset: 1,
+            //         // color: 'rgba(0,0,0,.0)'
+            //       }
+            //     ]
+            //   )
+            // },
             data: item.data
           }
           newSeries.push(series)
         }
         this.$set(this.option, 'series', newSeries)
-        this.refreshChart()
+        // this.refreshChart()
       },
       deep: true
     }
   },
-  mounted() {
-    this.refreshChart()
-  },
-  methods: {
-    refreshChart() {
-      this.unit && (this.option.yAxis[0].name = this.unit)
-      if (this.xAxisData.length) {
-        this.option.legend.data = this.legend
-        this.option.xAxis[0].data = this.xAxisData
-        const newSeries = []
-        for (const item of this.seriesData) {
-          const series = {
-            name: item.name,
-            type: 'line',
-            symbol: 'none', // 去掉折线节点
-            smooth: this.smooth, // 曲线变平滑
-            itemStyle: {
-              color: `rgb(${item.color})`
-            },
-            lineStyle: {
-              width: 1
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(
-                0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
-                [
-                  {
-                    offset: 0.1,
-                    color: `rgba(${item.color},.6)`
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0,0,0,.0)'
-                  }
-                ]
-              )
-            },
-            data: item.data
-          }
-          newSeries.push(series)
-        }
-        this.$set(this.option, 'series', newSeries)
-      }
-    }
-  }
+  // mounted() {
+  //   this.refreshChart()
+  // },
+  // methods: {
+  //   refreshChart() {
+  //     this.unit && (this.option.yAxis[0].name = this.unit)
+  //     if (this.xAxisData.length) {
+  //       this.option.legend.data = this.legend
+  //       this.option.xAxis[0].data = this.xAxisData
+  //       const newSeries = []
+  //       for (const item of this.seriesData) {
+  //         const series = {
+  //           name: item.name,
+  //           type: 'line',
+  //           symbol: 'none', // 去掉折线节点
+  //           smooth: this.smooth, // 曲线变平滑
+  //           itemStyle: {
+  //             color: `rgb(${item.color})`
+  //           },
+  //           lineStyle: {
+  //             width: 1
+  //           },
+  //           areaStyle: {
+  //             color: new this.$echarts.graphic.LinearGradient(
+  //               0, 0, 0, 1, // 变化度 //三种由深及浅的颜色
+  //               [
+  //                 {
+  //                   offset: 0.1,
+  //                   color: `rgba(${item.color},.6)`
+  //                 },
+  //                 {
+  //                   offset: 1,
+  //                   color: 'rgba(0,0,0,.0)'
+  //                 }
+  //               ]
+  //             )
+  //           },
+  //           data: item.data
+  //         }
+  //         newSeries.push(series)
+  //       }
+  //       this.$set(this.option, 'series', newSeries)
+  //     }
+  //   }
+  // }
 }
 </script>
 
diff --git a/src/components/echart/pieChart/doughnutChart.vue b/src/components/echart/pieChart/doughnutChart.vue
new file mode 100644
index 0000000..7f3cac2
--- /dev/null
+++ b/src/components/echart/pieChart/doughnutChart.vue
@@ -0,0 +1,155 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+    <script>
+/** 环形图 */
+// 接收数据直接是一个数组
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+          const series = {
+            type: "pie",
+            data: newVal,
+            radius: ["40%", "60%"],
+            labelLine: {
+              show: true,
+            },
+          };
+        this.$set(this.option, "series", series);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+    
+    <style scoped>
+</style>
+    
\ No newline at end of file
diff --git a/src/components/echart/radarChart/baseRadarChart.vue b/src/components/echart/radarChart/baseRadarChart.vue
new file mode 100644
index 0000000..15b7124
--- /dev/null
+++ b/src/components/echart/radarChart/baseRadarChart.vue
@@ -0,0 +1,174 @@
+<template>
+  <Echart ref="chart" :options="option" height="100%" width="100%" />
+</template>
+  <script>
+/**雷达图 */
+import Echart from "./../index";
+export default {
+  name: "baseRardarChart",
+  components: { Echart },
+  props: {
+    colors: {
+      // 颜色
+      type: Array,
+      default: () => {
+        return ["#01b4ff", "#0337ff"];
+      },
+    },
+    axisLineColor: {
+      // 轴线颜色
+      type: String,
+      default: "#101d5d",
+    },
+    fontColor: {
+      // 轴线上文字颜色
+      type: String,
+      default: "#000fff",
+    },
+    labelColor: {
+      // 图形上文本标签颜色
+      type: String,
+      default: "#47c8b2",
+    },
+    seriesData: {
+      // 数据
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    indicator: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        legend: {
+          type: "plain",
+          orient: "horizontal",
+          bottom: "auto",
+          top: "bottom",
+          itemWidth: 12,
+          itemHeight: 12,
+          icon: "rect",
+          textStyle: {
+            width: "300",
+            color: "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 30,
+          bottom: 5,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: "16",
+          },
+          axisPointer: {
+            type: "line",
+            label: {
+              fontSize: "16",
+            },
+          },
+        },
+        radar: {
+          shape: "circle",
+          indicator: [],
+        },
+        series: [],
+      },
+    };
+  },
+  watch: {
+    legend(newVal) {
+      this.option.legend.data = newVal;
+      //   this.refreshEchart();
+    },
+    seriesData: {
+      handler(newVal) {
+        const newSeries = [];
+        for (const item of newVal) {
+          const series = {
+            name: item.name,
+            type: "radar",
+            data: item.data,
+          };
+          newSeries.push(series);
+        }
+        this.$set(this.option, "series", newSeries);
+        // this.refreshChart();
+      },
+      deep: true,
+    },
+    indicator: {
+      deep: true,
+      handler(newVal) {
+        this.option.radar.indicator = newVal;
+        // this.refreshChart();
+      },
+    },
+  },
+  //   mounted() {
+  //     this.refreshChart();
+  //   },
+  //   methods: {
+  //     refreshChart() {
+  //       if (this.xAxisData.length) {
+  //         this.option.legend.data = this.legend;
+  //         this.option.xAxis[0].data = this.xAxisData;
+  //         const newSeries = [];
+  //         for (const item of this.seriesData) {
+  //           const series = {
+  //             name: item.name,
+  //             type: "line",
+  //             symbol: "none", // 去掉折线节点
+  //             smooth: this.smooth, // 曲线变平滑
+  //             itemStyle: {
+  //               color: `rgb(${item.color})`,
+  //             },
+  //             lineStyle: {
+  //               width: 1,
+  //             },
+  //             areaStyle: {
+  //               color: new this.$echarts.graphic.LinearGradient(
+  //                 0,
+  //                 0,
+  //                 0,
+  //                 1, // 变化度 //三种由深及浅的颜色
+  //                 [
+  //                   {
+  //                     offset: 0.1,
+  //                     color: `rgba(${item.color},.6)`,
+  //                   },
+  //                   {
+  //                     offset: 1,
+  //                     color: "rgba(0,0,0,.0)",
+  //                   },
+  //                 ]
+  //               ),
+  //             },
+  //             data: item.data,
+  //           };
+  //           newSeries.push(series);
+  //         }
+  //         this.$set(this.option, "series", newSeries);
+  //       }
+  //     },
+  //   },
+};
+</script>
+  
+  <style scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/components/mycomponent/dialog/productListAddDialog.vue b/src/components/mycomponent/dialog/productListAddDialog.vue
index 72b3f08..d438b89 100644
--- a/src/components/mycomponent/dialog/productListAddDialog.vue
+++ b/src/components/mycomponent/dialog/productListAddDialog.vue
@@ -167,6 +167,7 @@
       imageUrl: this.baseConfig.baseUrl + '/static/',
       categoryList: [],
       brandList: [],
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       rules: {
         productCode: [{ required: true, message: '产品型号不能为空', trigger: ['blur', 'change'] }],
         productName: [{ required: true, message: '产品名称不能为空', trigger: ['blur', 'change'] }],
diff --git a/src/icons/svg/device-count.svg b/src/icons/svg/device-count.svg
new file mode 100644
index 0000000..97ea218
--- /dev/null
+++ b/src/icons/svg/device-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667557302448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M375.466667 153.053867v273.066666H102.4v-273.066666h273.066667z m-273.066667-68.266667a68.266667 68.266667 0 0 0-68.266667 68.266667v273.066666a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066666a68.266667 68.266667 0 0 0-68.266666-68.266667H102.4zM375.466667 630.920533v273.066667H102.4v-273.066667h273.066667z m-273.066667-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066667a68.266667 68.266667 0 0 0 68.266666-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266666-68.266666H102.4zM716.8 96.529067l193.058133 193.058133L716.8 482.7136 523.741867 289.5872 716.8 96.529067zM475.409067 241.322667a68.266667 68.266667 0 0 0 0 96.597333l193.1264 193.058133a68.266667 68.266667 0 0 0 96.529066 0l193.1264-193.058133a68.266667 68.266667 0 0 0 0-96.597333L765.064533 48.264533a68.266667 68.266667 0 0 0-96.529066 0L475.409067 241.322667zM853.333333 630.920533v273.066667H580.266667v-273.066667h273.066666z m-273.066666-68.266666a68.266667 68.266667 0 0 0-68.266667 68.266666v273.066667a68.266667 68.266667 0 0 0 68.266667 68.266667h273.066666a68.266667 68.266667 0 0 0 68.266667-68.266667v-273.066667a68.266667 68.266667 0 0 0-68.266667-68.266666H580.266667z" p-id="4734"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-fund.svg b/src/icons/svg/device-fund.svg
new file mode 100644
index 0000000..62d2f30
--- /dev/null
+++ b/src/icons/svg/device-fund.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667558781575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M823.808 373.162667a339.754667 339.754667 0 0 1 26.026667 187.733333l-99.584-38.229333 106.965333 240.213333a426.496 426.496 0 0 0 44.544-424.405333C805.973333 123.178667 553.728 26.368 338.474667 122.197333a426.496 426.496 0 0 0-109.013334 69.930667l36.864 82.773333a341.333333 341.333333 0 0 1 557.482667 98.261334zM650.837333 823.808a340.352 340.352 0 0 0 106.837334-74.709333l36.864 82.773333a426.538667 426.538667 0 0 1-109.013334 69.888c-215.253333 95.872-467.456-0.938667-563.328-216.234667A426.496 426.496 0 0 1 166.826667 261.12l106.922666 240.213333-99.584-38.229333a341.333333 341.333333 0 0 0 476.672 360.704z" p-id="15588"></path><path d="M451.669333 391.338667l-181.034666 180.992 60.330666 60.330666L451.669333 512l120.661334 120.661333 181.034666-180.992-60.330666-60.373333L572.330667 512l-120.661334-120.661333z" p-id="15589"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/device-panel.svg b/src/icons/svg/device-panel.svg
new file mode 100644
index 0000000..96c1fd1
--- /dev/null
+++ b/src/icons/svg/device-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472278621" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="200"><path d="M565.28704 603.712a28.992 28.992 0 0 0 12.8-3.072l535.04-269.888a32.832 32.832 0 0 0 0-57.6L578.08704 3.328a28.736 28.736 0 0 0-26.048 0L16.99904 273.152a32.896 32.896 0 0 0 0 57.6l535.04 269.888a29.184 29.184 0 0 0 13.248 3.072z m0-536.32l464.704 234.496L565.28704 536.32 100.58304 301.888z" p-id="3394"></path><path d="M1108.32704 478.592l-522.112 273.024-522.048-273.024a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88L572.83904 816a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-280a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3395"></path><path d="M1108.32704 683.328l-522.112 272.96-522.048-272.96a29.568 29.568 0 0 0-40.576 14.528 32.896 32.896 0 0 0 13.696 42.88l535.552 279.936a29.056 29.056 0 0 0 13.376 3.328 29.504 29.504 0 0 0 13.44-3.328l535.488-279.936a32.896 32.896 0 0 0 13.76-42.88 29.568 29.568 0 0 0-40.576-14.528z" p-id="3396"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/management-panel.svg b/src/icons/svg/management-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/management-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/supplier-panel.svg b/src/icons/svg/supplier-panel.svg
new file mode 100644
index 0000000..5552981
--- /dev/null
+++ b/src/icons/svg/supplier-panel.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667472482310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6719" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M852 112c33.137 0 60 26.863 60 60v680c0 33.137-26.863 60-60 60H172c-33.137 0-60-26.863-60-60V172c0-33.137 26.863-60 60-60h680z m0.344 40H172c-10.93 0-19.813 8.769-20 19.656V852c0 10.93 8.769 19.813 19.656 20H852c10.93 0 19.813-8.769 20-19.656V172c0-10.93-8.769-19.813-19.656-20zM362 542c11.046 0 20 8.954 20 20v132c0 11.046-8.954 20-20 20s-20-8.954-20-20V562c0-11.046 8.954-20 20-20z m150-176c11.046 0 20 8.954 20 20v308c0 11.046-8.954 20-20 20s-20-8.954-20-20V386c0-11.046 8.954-20 20-20z m150 114c11.046 0 20 8.954 20 20v194c0 11.046-8.954 20-20 20s-20-8.954-20-20V500c0-11.046 8.954-20 20-20z" fill="#222222" p-id="6720"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue
index 368f5a5..1bf1aa9 100644
--- a/src/views/dashboard/components/dashboardHeader.vue
+++ b/src/views/dashboard/components/dashboardHeader.vue
@@ -23,13 +23,13 @@
 
 <style lang="scss" scoped>
 .header-container {
-   width: 100%;
    display: flex;
    justify-content: space-between;
    .text{
     font-size: 25px;
     display: flex;
     align-items: center;
+    // width: 3000px;
    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/deviceList.vue b/src/views/dashboard/components/deviceList.vue
new file mode 100644
index 0000000..d8e2e1e
--- /dev/null
+++ b/src/views/dashboard/components/deviceList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="(item, index) of device"
+      class="device"
+      :key="item.title"
+      :style="{ width: index === 0 ? '51%' : '50%' }"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "deviceList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    device: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutAreaChart.vue b/src/views/dashboard/components/layoutAreaChart.vue
new file mode 100644
index 0000000..740f277
--- /dev/null
+++ b/src/views/dashboard/components/layoutAreaChart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <areaChart :xAxisData="xAxisData" :seriesData="seriesData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import areaChart from "../../../components/echart/lineChart/areaChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    areaChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend['供应商数量']
+    },1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartDoughnu.vue b/src/views/dashboard/components/layoutChartDoughnu.vue
new file mode 100644
index 0000000..d06ab18
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartDoughnu.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <doughnutChart :seriesData="seriesData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import doughnutChart from '../../../components/echart/pieChart/doughnutChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    doughnutChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        { value: 1048, name: 'banana' },
+        { value: 735, name: 'orange' },
+        { value: 222, name: 'apple'}
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
new file mode 100644
index 0000000..e7f6e1a
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">用户分布统计</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartSelect.vue b/src/views/dashboard/components/layoutChartSelect.vue
new file mode 100644
index 0000000..6039dcf
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartSelect.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">{{ name }}</span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
+    </div>
+  </div>
+</template>
+
+<script>
+import baseRadarChartVue from "../../../components/echart/radarChart/baseRadarChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    baseRadarChartVue,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        {
+          value: "12",
+          label: "近一年",
+        },
+        {
+          value: "1",
+          label: "近一月",
+        },
+      ],
+      seriesData: [],
+      indicator: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          type: "radar",
+          data: [
+            {
+              value: [4200, 3000, 20000, 35000, 50000, 18000],
+              name: "Allocated Budget",
+            },
+          ],
+        },
+      ];
+      this.indicator = [
+        { name: "Sales", max: 6500 },
+        { name: "Administration", max: 16000 },
+        { name: "Information Technology", max: 30000 },
+        { name: "Customer Support", max: 38000 },
+        { name: "Development", max: 52000 },
+        { name: "Marketing", max: 25000 },
+      ];
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
new file mode 100644
index 0000000..89b57f7
--- /dev/null
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title">区域设备排行榜</span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import verticalBarChart from '../../../components/echart/barChart/verticalBarChart.vue';
+export default {
+  name: "layoutChartSelect",
+  components: {
+    verticalBarChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      yAxisData:[]
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          data: [120, 200, 150, 80, 70, 110, 130],
+        },
+      ];
+      this.yAxisData = [
+        '北京','上海','天津','河北','山东','四川','深圳'
+      ]
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutMixChart.vue b/src/views/dashboard/components/layoutMixChart.vue
new file mode 100644
index 0000000..b2bad49
--- /dev/null
+++ b/src/views/dashboard/components/layoutMixChart.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"> 经销商订单同比/环比统计 </span>
+      <el-select v-model="value" placeholder="请选择" size="mini">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <MixChart
+        :xAxisData="xAxisData"
+        :seriesData="seriesData"
+        :yAxisData="yAxisData"
+        :legend="legend"
+        width="600px"
+        height="400px"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MixChart from "../../../components/echart/barChart/MixChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    MixChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      value: "12",
+      options: [
+        { value: "12", label: "近一年" },
+        { value: "1", label: "近一月" },
+      ],
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          name: "Evaporation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
+          ],
+        },
+        {
+          name: "Precipitation",
+          type: "bar",
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " ml";
+            },
+          },
+          data: [
+            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
+          ],
+        },
+        {
+          name: "Temperature",
+          type: "line",
+          yAxisIndex: 1,
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + " °C";
+            },
+          },
+          data: [
+            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+          ],
+        },
+      ];
+      this.xAxisData = ["北京", "上海", "天津", "河北", "山东", "四川", "深圳"];
+      this.yAxisData = [
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} ml",
+            fontSize: 12,
+            color:'#000'
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: { //多条横线
+            show: true
+          },
+          interval: 20,
+        },
+        {
+          type: "value",
+          show: true,
+          axisLabel: {
+            formatter: "{value} °C",
+            fontSize: 12,
+            color:'#000'
+          },
+          splitLine: {
+            //多条横线
+            show: true,
+          },
+          axisLine: {
+            show: false,
+          },
+          interval: 20,
+        },
+      ];
+      this.legend = ["Evaporation", "Precipitation", "Temperature"];
+    });
+  },
+  watch: {
+    value(newVal) {
+      // 根据选择的选项获取不同的数据
+      if (newVal === "12") {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+            ],
+          },
+        ];
+      } else {
+        this.seriesData = [
+          {
+            name: "Evaporation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              22.0, 43.9, 17.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "Precipitation",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " ml";
+              },
+            },
+            data: [
+              12.6, 15.9, 29.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "Temperature",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + " °C";
+              },
+            },
+            data: [
+              42.0, 2.2, 3.3, 94.5, 36.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0,
+              16.2,
+            ],
+          },
+        ];
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/layoutStackAreaChart.vue b/src/views/dashboard/components/layoutStackAreaChart.vue
new file mode 100644
index 0000000..b100ad3
--- /dev/null
+++ b/src/views/dashboard/components/layoutStackAreaChart.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="chart-container">
+    <div class="chart-header">
+      <!--标题  -->
+      <span class="title"></span>
+    </div>
+    <div class="chart-content" :style="{'height':height,'width':width}">
+      <!-- echarts内容 -->
+      <gradientLineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import gradientLineChart from "../../../components/echart/lineChart/gradientLineChart.vue";
+export default {
+  name: "layoutChartSelect",
+  components: {
+    gradientLineChart,
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    width:{
+      type: String,
+      default: "500px"
+    },
+    height:{
+      type: String,
+      default: "250px"
+    }
+  },
+  data() {
+    return {
+      seriesData: [],
+      xAxisData: [],
+      yAxisData: [],
+      legend: [],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.seriesData = [
+        {
+          name:'1',
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+        {
+          name:'2',
+          data: [620, 432, 901, 934, 1290, 5330, 820],
+        },
+        {
+          name:'3',
+          data: [420, 632, 301, 934, 790, 330, 870],
+        },
+        {
+          name:'4',
+          data: [820, 492, 201, 934, 290, 830, 620],
+        },
+      ];
+      this.xAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+      this.legend=['1','2','3','4']
+    }, 1000);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  .chart-header {
+    width: 600px;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .chart-content {
+    // width: 600px;
+    // height: 400px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
new file mode 100644
index 0000000..e6000f1
--- /dev/null
+++ b/src/views/dashboard/components/managementList.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <div
+      v-for="item of management"
+      class="device"
+      :key="item.title"
+    >
+      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+      <div class="content">
+        <div>{{ item.title }}</div>
+        <div>{{ item.count }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import SvgIcon from "@/components/SvgIcon";
+export default {
+  name: "managementList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    management: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  // justify-content: ;
+  .device {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    ::v-deep .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: rgb(64, 158, 255);
+    }
+    .content{
+      margin-left: 10px;
+      text-align: center;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue
index 58a493d..f373cab 100644
--- a/src/views/dashboard/components/switch.vue
+++ b/src/views/dashboard/components/switch.vue
@@ -2,7 +2,7 @@
   <div class="container">
       <ul>
         <li v-for="(btn, index) of btns" :key="index" @click="changeBtn(btn, index)">
-        <svg-icon :icon-class="btn.icon" :style="{'color':active === index ? '#409EFF' : ''}"></svg-icon>
+        <svg-icon :icon-class="btn.icon"></svg-icon>
         <span class="title" :style="{'color':active === index ? '#409EFF' : ''}">{{btn.name}}</span>
         </li>
       </ul>
diff --git a/src/views/dashboard/devicePanel.vue b/src/views/dashboard/devicePanel.vue
index c543e97..65a6733 100644
--- a/src/views/dashboard/devicePanel.vue
+++ b/src/views/dashboard/devicePanel.vue
@@ -1,13 +1,76 @@
 <template>
-  <div>devicePanel</div>
+  <div class="container">
+    <!-- <layoutChartRadar/>
+    <layoutChartDoughnu />
+    <layoutChartVerticalBar />
+    <layoutMixChart />
+    <layoutAreaChart />
+    <layoutStackAreaChart /> -->
+    <div class="show-data">
+      <deviceList :device="device"/>
+      <layoutStackAreaChart /> 
+      <layoutChartDoughnu/>
+      <layoutChartVerticalBar />
+    </div>
+  </div>
 </template>
 
 <script>
+import layoutChartRadar from './components/layoutChartRadar.vue';
+import layoutChartDoughnu from './components/layoutChartDoughnu.vue';
+import layoutChartVerticalBar from './components/layoutChartVerticalBar.vue';
+import layoutMixChart from './components/layoutMixChart.vue';
+import layoutAreaChart from './components/layoutAreaChart.vue';
+import layoutStackAreaChart from './components/layoutStackAreaChart.vue';
+import deviceList from './components/deviceList.vue';
 export default {
-    name:'devicePanel'
+    name:'devicePanel',
+    components:{
+      layoutChartRadar,
+      layoutChartDoughnu,
+      layoutChartVerticalBar,
+      layoutMixChart,
+      layoutAreaChart,
+      layoutStackAreaChart,
+      deviceList,
+    },
+    data() {
+      return{
+        device:[
+          {
+            title:'设备总数',
+            count:'123',
+            icon:'device-count'
+          },
+          {
+            title:'IOT设备数量',
+            count:'1263',
+            icon:'device-count'
+          },
+          {
+            title:'IOT设备在线率',
+            count:'80%',
+            icon:'device-fund'
+          },
+        ]
+      }
+    },
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.container{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .show-data{
+    position: absolute;
+    right: 3%;
+    top:0;
+    background: transparent;
+    width: 450px;
+    // float: right;
 
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 41cb204..f017854 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -47,6 +47,9 @@
 .dashboard {
   &-container {
     margin: 10px 20px;
+    width: 100%;
+    box-sizing: content-box;
+    // overflow: hidden;
   }
   &-text {
     font-size: 30px;
diff --git a/src/views/dashboard/managementPanel.vue b/src/views/dashboard/managementPanel.vue
index 13d930c..ea6d857 100644
--- a/src/views/dashboard/managementPanel.vue
+++ b/src/views/dashboard/managementPanel.vue
@@ -1,13 +1,73 @@
 <template>
-  <div>managementPanel</div>
+  <div class="container">
+    <managementList :management="management" class="common-width"/>
+    <layoutStackAreaChart class="common-width"/> 
+    <layoutChartRadar class="common-width"/>
+  </div>
 </template>
 
 <script>
+import managementList from './components/managementList.vue';
+import layoutStackAreaChart from './components/layoutStackAreaChart.vue';
+import layoutChartRadar from './components/layoutChartRadar.vue';
 export default {
-    name:'managementPanel'
+    name:'managementPanel',
+    components:{
+      managementList,
+      layoutStackAreaChart,
+      layoutChartRadar
+    },
+    data() {
+      return{
+        management:[
+          {
+            title:'集团公司用户',
+            count:'50',
+            icon:'device'
+          },
+          {
+            title:'集团公司用户',
+            count:'50',
+            icon:'device'
+          },
+          {
+            title:'集团公司用户',
+            count:'50',
+            icon:'device'
+          },
+          {
+            title:'集团公司用户',
+            count:'50',
+            icon:'device'
+          },
+          {
+            title:'集团公司用户',
+            count:'50',
+            icon:'device'
+          },
+          {
+            title:'集团公司用户',
+            count:'50',
+            icon:'device'
+          },
+          {
+            title:'集团公司用户',
+            count:'50',
+            icon:'device'
+          },
+        ]
+      }
+    }
 }
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+.container{
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  .common-width{
+      width: 33%;
+  }
+}
 </style>
\ No newline at end of file