diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/baseDetail.vue b/src/views/cityConstruction/components/plan/components/baseDetail.vue
index c1ce4d3..0e5cc85 100644
--- a/src/views/cityConstruction/components/plan/components/baseDetail.vue
+++ b/src/views/cityConstruction/components/plan/components/baseDetail.vue
@@ -15,6 +15,7 @@
 import ChartLayout from '@/components/layout/chartLayout'
 // import {fetchOccupationByPark} from '@/api/cityManage'
 import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'PeopleDetail',
   components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
@@ -53,6 +54,7 @@
   },
   methods: {
     getData () {
+      this.boardConfig.data = mockData.base.table
       // fetchOccupationByPark().then(response => {
       //   if (response.code === 200) {
       //     const data = response.data

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/baseDetail.vue b/src/views/cityConstruction/components/plan/components/baseDetail.vue
index c1ce4d3..0e5cc85 100644
--- a/src/views/cityConstruction/components/plan/components/baseDetail.vue
+++ b/src/views/cityConstruction/components/plan/components/baseDetail.vue
@@ -15,6 +15,7 @@
 import ChartLayout from '@/components/layout/chartLayout'
 // import {fetchOccupationByPark} from '@/api/cityManage'
 import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'PeopleDetail',
   components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
@@ -53,6 +54,7 @@
   },
   methods: {
     getData () {
+      this.boardConfig.data = mockData.base.table
       // fetchOccupationByPark().then(response => {
       //   if (response.code === 200) {
       //     const data = response.data
diff --git a/src/views/cityConstruction/components/plan/components/basePie.vue b/src/views/cityConstruction/components/plan/components/basePie.vue
index 775728a..212ee80 100644
--- a/src/views/cityConstruction/components/plan/components/basePie.vue
+++ b/src/views/cityConstruction/components/plan/components/basePie.vue
@@ -11,6 +11,7 @@
         :width="data.width"
         :height="data.height"
         :roseType="true"
+        :isRotate="true"
         :seriesData="data.data">
       </simple-pie-chart>
     </div>
@@ -18,9 +19,10 @@
 </template>
 
 <script>
-import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SimplePieChart from '@/components/pieChart/simplePieChartCarousel'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -52,11 +54,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.base.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/baseDetail.vue b/src/views/cityConstruction/components/plan/components/baseDetail.vue
index c1ce4d3..0e5cc85 100644
--- a/src/views/cityConstruction/components/plan/components/baseDetail.vue
+++ b/src/views/cityConstruction/components/plan/components/baseDetail.vue
@@ -15,6 +15,7 @@
 import ChartLayout from '@/components/layout/chartLayout'
 // import {fetchOccupationByPark} from '@/api/cityManage'
 import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'PeopleDetail',
   components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
@@ -53,6 +54,7 @@
   },
   methods: {
     getData () {
+      this.boardConfig.data = mockData.base.table
       // fetchOccupationByPark().then(response => {
       //   if (response.code === 200) {
       //     const data = response.data
diff --git a/src/views/cityConstruction/components/plan/components/basePie.vue b/src/views/cityConstruction/components/plan/components/basePie.vue
index 775728a..212ee80 100644
--- a/src/views/cityConstruction/components/plan/components/basePie.vue
+++ b/src/views/cityConstruction/components/plan/components/basePie.vue
@@ -11,6 +11,7 @@
         :width="data.width"
         :height="data.height"
         :roseType="true"
+        :isRotate="true"
         :seriesData="data.data">
       </simple-pie-chart>
     </div>
@@ -18,9 +19,10 @@
 </template>
 
 <script>
-import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SimplePieChart from '@/components/pieChart/simplePieChartCarousel'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -52,11 +54,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.base.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/ecologyLine.vue b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
index 5b4e66c..c5584c6 100644
--- a/src/views/cityConstruction/components/plan/components/ecologyLine.vue
+++ b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
@@ -22,6 +22,7 @@
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchProjectCountByYear} from '@/api/projectManage'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'EcologyLine',
   components: {SingleLayout, GradientLineChart},
@@ -45,7 +46,9 @@
     this.getData()
   },
   methods: {
-    // getData () {
+    getData () {
+      this.options.xAxisData = mockData.gardens.line.xData
+      this.options.seriesData = mockData.gardens.line.yData
     //   const currentYear = new Date().getFullYear()
     //   const threeYear = currentYear - 2
     //   const yearRange = [threeYear.toString(), (currentYear).toString()]
@@ -66,7 +69,7 @@
     //       this.options.seriesData = dataFilter
     //     }
     //   })
-    // }
+    }
   }
 }
 </script>

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/baseDetail.vue b/src/views/cityConstruction/components/plan/components/baseDetail.vue
index c1ce4d3..0e5cc85 100644
--- a/src/views/cityConstruction/components/plan/components/baseDetail.vue
+++ b/src/views/cityConstruction/components/plan/components/baseDetail.vue
@@ -15,6 +15,7 @@
 import ChartLayout from '@/components/layout/chartLayout'
 // import {fetchOccupationByPark} from '@/api/cityManage'
 import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'PeopleDetail',
   components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
@@ -53,6 +54,7 @@
   },
   methods: {
     getData () {
+      this.boardConfig.data = mockData.base.table
       // fetchOccupationByPark().then(response => {
       //   if (response.code === 200) {
       //     const data = response.data
diff --git a/src/views/cityConstruction/components/plan/components/basePie.vue b/src/views/cityConstruction/components/plan/components/basePie.vue
index 775728a..212ee80 100644
--- a/src/views/cityConstruction/components/plan/components/basePie.vue
+++ b/src/views/cityConstruction/components/plan/components/basePie.vue
@@ -11,6 +11,7 @@
         :width="data.width"
         :height="data.height"
         :roseType="true"
+        :isRotate="true"
         :seriesData="data.data">
       </simple-pie-chart>
     </div>
@@ -18,9 +19,10 @@
 </template>
 
 <script>
-import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SimplePieChart from '@/components/pieChart/simplePieChartCarousel'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -52,11 +54,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.base.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/ecologyLine.vue b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
index 5b4e66c..c5584c6 100644
--- a/src/views/cityConstruction/components/plan/components/ecologyLine.vue
+++ b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
@@ -22,6 +22,7 @@
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchProjectCountByYear} from '@/api/projectManage'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'EcologyLine',
   components: {SingleLayout, GradientLineChart},
@@ -45,7 +46,9 @@
     this.getData()
   },
   methods: {
-    // getData () {
+    getData () {
+      this.options.xAxisData = mockData.gardens.line.xData
+      this.options.seriesData = mockData.gardens.line.yData
     //   const currentYear = new Date().getFullYear()
     //   const threeYear = currentYear - 2
     //   const yearRange = [threeYear.toString(), (currentYear).toString()]
@@ -66,7 +69,7 @@
     //       this.options.seriesData = dataFilter
     //     }
     //   })
-    // }
+    }
   }
 }
 </script>
diff --git a/src/views/cityConstruction/components/plan/components/landUse.vue b/src/views/cityConstruction/components/plan/components/landUse.vue
index 007316c..2e12697 100644
--- a/src/views/cityConstruction/components/plan/components/landUse.vue
+++ b/src/views/cityConstruction/components/plan/components/landUse.vue
@@ -48,6 +48,7 @@
 import GaugeItem from './gaugeItem'
 import RoundLiquidFill from '@/components/liquidFill/roundLiquidFill'
 import {fetchProjectCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'LandUse',
   components: {RoundLiquidFill, GaugeItem, ProgressBar2, Legend},
@@ -106,10 +107,15 @@
       this.compTimer = null
     },
     getData () {
+      this.total = mockData.planningLandUse.total
+      this.already = mockData.planningLandUse.already
+      this.percent = mockData.planningLandUse.percent
       if (this.currentComp === 'data1') {
-        this.data = this.data1
+        // this.data = this.data1
+        this.data = mockData.planningLandUse.data1
       } else if (this.currentComp === 'data2') {
-        this.data = this.data2
+        // this.data = this.data2
+        this.data = mockData.planningLandUse.data2
       }
       // fetchProjectCount().then(response => {
       //   if (response.code === 200) {

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/baseDetail.vue b/src/views/cityConstruction/components/plan/components/baseDetail.vue
index c1ce4d3..0e5cc85 100644
--- a/src/views/cityConstruction/components/plan/components/baseDetail.vue
+++ b/src/views/cityConstruction/components/plan/components/baseDetail.vue
@@ -15,6 +15,7 @@
 import ChartLayout from '@/components/layout/chartLayout'
 // import {fetchOccupationByPark} from '@/api/cityManage'
 import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'PeopleDetail',
   components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
@@ -53,6 +54,7 @@
   },
   methods: {
     getData () {
+      this.boardConfig.data = mockData.base.table
       // fetchOccupationByPark().then(response => {
       //   if (response.code === 200) {
       //     const data = response.data
diff --git a/src/views/cityConstruction/components/plan/components/basePie.vue b/src/views/cityConstruction/components/plan/components/basePie.vue
index 775728a..212ee80 100644
--- a/src/views/cityConstruction/components/plan/components/basePie.vue
+++ b/src/views/cityConstruction/components/plan/components/basePie.vue
@@ -11,6 +11,7 @@
         :width="data.width"
         :height="data.height"
         :roseType="true"
+        :isRotate="true"
         :seriesData="data.data">
       </simple-pie-chart>
     </div>
@@ -18,9 +19,10 @@
 </template>
 
 <script>
-import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SimplePieChart from '@/components/pieChart/simplePieChartCarousel'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -52,11 +54,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.base.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/ecologyLine.vue b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
index 5b4e66c..c5584c6 100644
--- a/src/views/cityConstruction/components/plan/components/ecologyLine.vue
+++ b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
@@ -22,6 +22,7 @@
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchProjectCountByYear} from '@/api/projectManage'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'EcologyLine',
   components: {SingleLayout, GradientLineChart},
@@ -45,7 +46,9 @@
     this.getData()
   },
   methods: {
-    // getData () {
+    getData () {
+      this.options.xAxisData = mockData.gardens.line.xData
+      this.options.seriesData = mockData.gardens.line.yData
     //   const currentYear = new Date().getFullYear()
     //   const threeYear = currentYear - 2
     //   const yearRange = [threeYear.toString(), (currentYear).toString()]
@@ -66,7 +69,7 @@
     //       this.options.seriesData = dataFilter
     //     }
     //   })
-    // }
+    }
   }
 }
 </script>
diff --git a/src/views/cityConstruction/components/plan/components/landUse.vue b/src/views/cityConstruction/components/plan/components/landUse.vue
index 007316c..2e12697 100644
--- a/src/views/cityConstruction/components/plan/components/landUse.vue
+++ b/src/views/cityConstruction/components/plan/components/landUse.vue
@@ -48,6 +48,7 @@
 import GaugeItem from './gaugeItem'
 import RoundLiquidFill from '@/components/liquidFill/roundLiquidFill'
 import {fetchProjectCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'LandUse',
   components: {RoundLiquidFill, GaugeItem, ProgressBar2, Legend},
@@ -106,10 +107,15 @@
       this.compTimer = null
     },
     getData () {
+      this.total = mockData.planningLandUse.total
+      this.already = mockData.planningLandUse.already
+      this.percent = mockData.planningLandUse.percent
       if (this.currentComp === 'data1') {
-        this.data = this.data1
+        // this.data = this.data1
+        this.data = mockData.planningLandUse.data1
       } else if (this.currentComp === 'data2') {
-        this.data = this.data2
+        // this.data = this.data2
+        this.data = mockData.planningLandUse.data2
       }
       // fetchProjectCount().then(response => {
       //   if (response.code === 200) {
diff --git a/src/views/cityConstruction/components/plan/ecology.vue b/src/views/cityConstruction/components/plan/ecology.vue
index e4c4f49..f97a6af 100644
--- a/src/views/cityConstruction/components/plan/ecology.vue
+++ b/src/views/cityConstruction/components/plan/ecology.vue
@@ -27,6 +27,7 @@
 import Corner1 from '@/components/corner/Corner1'
 import SimpleBlock from '@/components/block/simpleBlock'
 import EcologyLine from './components/ecologyLine'
+import mockData from '../../../../../static/plan.json'
 // import {fetchInfrastructure} from '@/api/jgzl'
 export default {
   name: 'Ecology',
@@ -46,9 +47,13 @@
   },
   methods: {
     getData () {
-      for (const item of Object.keys(this.data)) {
-        this.getItemData(item)
-      }
+      this.data.csgy.value = mockData.gardens.count.park
+      this.data.jgzl.value = mockData.gardens.count.UFA
+      this.data.cscl.value = mockData.gardens.count.maintenance
+      this.data.stgy.value = mockData.gardens.count.passengerFlow
+      // for (const item of Object.keys(this.data)) {
+      //   this.getItemData(item)
+      // }
     },
     // item，传参数
     getItemData (item) {

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/baseDetail.vue b/src/views/cityConstruction/components/plan/components/baseDetail.vue
index c1ce4d3..0e5cc85 100644
--- a/src/views/cityConstruction/components/plan/components/baseDetail.vue
+++ b/src/views/cityConstruction/components/plan/components/baseDetail.vue
@@ -15,6 +15,7 @@
 import ChartLayout from '@/components/layout/chartLayout'
 // import {fetchOccupationByPark} from '@/api/cityManage'
 import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'PeopleDetail',
   components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
@@ -53,6 +54,7 @@
   },
   methods: {
     getData () {
+      this.boardConfig.data = mockData.base.table
       // fetchOccupationByPark().then(response => {
       //   if (response.code === 200) {
       //     const data = response.data
diff --git a/src/views/cityConstruction/components/plan/components/basePie.vue b/src/views/cityConstruction/components/plan/components/basePie.vue
index 775728a..212ee80 100644
--- a/src/views/cityConstruction/components/plan/components/basePie.vue
+++ b/src/views/cityConstruction/components/plan/components/basePie.vue
@@ -11,6 +11,7 @@
         :width="data.width"
         :height="data.height"
         :roseType="true"
+        :isRotate="true"
         :seriesData="data.data">
       </simple-pie-chart>
     </div>
@@ -18,9 +19,10 @@
 </template>
 
 <script>
-import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SimplePieChart from '@/components/pieChart/simplePieChartCarousel'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -52,11 +54,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.base.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/ecologyLine.vue b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
index 5b4e66c..c5584c6 100644
--- a/src/views/cityConstruction/components/plan/components/ecologyLine.vue
+++ b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
@@ -22,6 +22,7 @@
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchProjectCountByYear} from '@/api/projectManage'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'EcologyLine',
   components: {SingleLayout, GradientLineChart},
@@ -45,7 +46,9 @@
     this.getData()
   },
   methods: {
-    // getData () {
+    getData () {
+      this.options.xAxisData = mockData.gardens.line.xData
+      this.options.seriesData = mockData.gardens.line.yData
     //   const currentYear = new Date().getFullYear()
     //   const threeYear = currentYear - 2
     //   const yearRange = [threeYear.toString(), (currentYear).toString()]
@@ -66,7 +69,7 @@
     //       this.options.seriesData = dataFilter
     //     }
     //   })
-    // }
+    }
   }
 }
 </script>
diff --git a/src/views/cityConstruction/components/plan/components/landUse.vue b/src/views/cityConstruction/components/plan/components/landUse.vue
index 007316c..2e12697 100644
--- a/src/views/cityConstruction/components/plan/components/landUse.vue
+++ b/src/views/cityConstruction/components/plan/components/landUse.vue
@@ -48,6 +48,7 @@
 import GaugeItem from './gaugeItem'
 import RoundLiquidFill from '@/components/liquidFill/roundLiquidFill'
 import {fetchProjectCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'LandUse',
   components: {RoundLiquidFill, GaugeItem, ProgressBar2, Legend},
@@ -106,10 +107,15 @@
       this.compTimer = null
     },
     getData () {
+      this.total = mockData.planningLandUse.total
+      this.already = mockData.planningLandUse.already
+      this.percent = mockData.planningLandUse.percent
       if (this.currentComp === 'data1') {
-        this.data = this.data1
+        // this.data = this.data1
+        this.data = mockData.planningLandUse.data1
       } else if (this.currentComp === 'data2') {
-        this.data = this.data2
+        // this.data = this.data2
+        this.data = mockData.planningLandUse.data2
       }
       // fetchProjectCount().then(response => {
       //   if (response.code === 200) {
diff --git a/src/views/cityConstruction/components/plan/ecology.vue b/src/views/cityConstruction/components/plan/ecology.vue
index e4c4f49..f97a6af 100644
--- a/src/views/cityConstruction/components/plan/ecology.vue
+++ b/src/views/cityConstruction/components/plan/ecology.vue
@@ -27,6 +27,7 @@
 import Corner1 from '@/components/corner/Corner1'
 import SimpleBlock from '@/components/block/simpleBlock'
 import EcologyLine from './components/ecologyLine'
+import mockData from '../../../../../static/plan.json'
 // import {fetchInfrastructure} from '@/api/jgzl'
 export default {
   name: 'Ecology',
@@ -46,9 +47,13 @@
   },
   methods: {
     getData () {
-      for (const item of Object.keys(this.data)) {
-        this.getItemData(item)
-      }
+      this.data.csgy.value = mockData.gardens.count.park
+      this.data.jgzl.value = mockData.gardens.count.UFA
+      this.data.cscl.value = mockData.gardens.count.maintenance
+      this.data.stgy.value = mockData.gardens.count.passengerFlow
+      // for (const item of Object.keys(this.data)) {
+      //   this.getItemData(item)
+      // }
     },
     // item，传参数
     getItemData (item) {
diff --git a/src/views/cityConstruction/components/plan/pipeCountBar.vue b/src/views/cityConstruction/components/plan/pipeCountBar.vue
index 33d53de..58c734a 100644
--- a/src/views/cityConstruction/components/plan/pipeCountBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeCountBar.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchPipeCount} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -42,13 +43,16 @@
   },
   methods: {
     getData () {
-      fetchPipeCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.name })
-          this.options.seriesData = data.map(item => { return item.value })
-        }
-      })
+      this.options.xAxisData = mockData.undergroundPipelines.chart2.xData
+      this.options.seriesData = mockData.undergroundPipelines.chart2.yData
+      this.options.unit = mockData.undergroundPipelines.chart2.yUnit
+      // fetchPipeCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.name })
+      //     this.options.seriesData = data.map(item => { return item.value })
+      //   }
+      // })
     }
   }
 }

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/baseDetail.vue b/src/views/cityConstruction/components/plan/components/baseDetail.vue
index c1ce4d3..0e5cc85 100644
--- a/src/views/cityConstruction/components/plan/components/baseDetail.vue
+++ b/src/views/cityConstruction/components/plan/components/baseDetail.vue
@@ -15,6 +15,7 @@
 import ChartLayout from '@/components/layout/chartLayout'
 // import {fetchOccupationByPark} from '@/api/cityManage'
 import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'PeopleDetail',
   components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
@@ -53,6 +54,7 @@
   },
   methods: {
     getData () {
+      this.boardConfig.data = mockData.base.table
       // fetchOccupationByPark().then(response => {
       //   if (response.code === 200) {
       //     const data = response.data
diff --git a/src/views/cityConstruction/components/plan/components/basePie.vue b/src/views/cityConstruction/components/plan/components/basePie.vue
index 775728a..212ee80 100644
--- a/src/views/cityConstruction/components/plan/components/basePie.vue
+++ b/src/views/cityConstruction/components/plan/components/basePie.vue
@@ -11,6 +11,7 @@
         :width="data.width"
         :height="data.height"
         :roseType="true"
+        :isRotate="true"
         :seriesData="data.data">
       </simple-pie-chart>
     </div>
@@ -18,9 +19,10 @@
 </template>
 
 <script>
-import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SimplePieChart from '@/components/pieChart/simplePieChartCarousel'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -52,11 +54,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.base.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/ecologyLine.vue b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
index 5b4e66c..c5584c6 100644
--- a/src/views/cityConstruction/components/plan/components/ecologyLine.vue
+++ b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
@@ -22,6 +22,7 @@
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchProjectCountByYear} from '@/api/projectManage'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'EcologyLine',
   components: {SingleLayout, GradientLineChart},
@@ -45,7 +46,9 @@
     this.getData()
   },
   methods: {
-    // getData () {
+    getData () {
+      this.options.xAxisData = mockData.gardens.line.xData
+      this.options.seriesData = mockData.gardens.line.yData
     //   const currentYear = new Date().getFullYear()
     //   const threeYear = currentYear - 2
     //   const yearRange = [threeYear.toString(), (currentYear).toString()]
@@ -66,7 +69,7 @@
     //       this.options.seriesData = dataFilter
     //     }
     //   })
-    // }
+    }
   }
 }
 </script>
diff --git a/src/views/cityConstruction/components/plan/components/landUse.vue b/src/views/cityConstruction/components/plan/components/landUse.vue
index 007316c..2e12697 100644
--- a/src/views/cityConstruction/components/plan/components/landUse.vue
+++ b/src/views/cityConstruction/components/plan/components/landUse.vue
@@ -48,6 +48,7 @@
 import GaugeItem from './gaugeItem'
 import RoundLiquidFill from '@/components/liquidFill/roundLiquidFill'
 import {fetchProjectCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'LandUse',
   components: {RoundLiquidFill, GaugeItem, ProgressBar2, Legend},
@@ -106,10 +107,15 @@
       this.compTimer = null
     },
     getData () {
+      this.total = mockData.planningLandUse.total
+      this.already = mockData.planningLandUse.already
+      this.percent = mockData.planningLandUse.percent
       if (this.currentComp === 'data1') {
-        this.data = this.data1
+        // this.data = this.data1
+        this.data = mockData.planningLandUse.data1
       } else if (this.currentComp === 'data2') {
-        this.data = this.data2
+        // this.data = this.data2
+        this.data = mockData.planningLandUse.data2
       }
       // fetchProjectCount().then(response => {
       //   if (response.code === 200) {
diff --git a/src/views/cityConstruction/components/plan/ecology.vue b/src/views/cityConstruction/components/plan/ecology.vue
index e4c4f49..f97a6af 100644
--- a/src/views/cityConstruction/components/plan/ecology.vue
+++ b/src/views/cityConstruction/components/plan/ecology.vue
@@ -27,6 +27,7 @@
 import Corner1 from '@/components/corner/Corner1'
 import SimpleBlock from '@/components/block/simpleBlock'
 import EcologyLine from './components/ecologyLine'
+import mockData from '../../../../../static/plan.json'
 // import {fetchInfrastructure} from '@/api/jgzl'
 export default {
   name: 'Ecology',
@@ -46,9 +47,13 @@
   },
   methods: {
     getData () {
-      for (const item of Object.keys(this.data)) {
-        this.getItemData(item)
-      }
+      this.data.csgy.value = mockData.gardens.count.park
+      this.data.jgzl.value = mockData.gardens.count.UFA
+      this.data.cscl.value = mockData.gardens.count.maintenance
+      this.data.stgy.value = mockData.gardens.count.passengerFlow
+      // for (const item of Object.keys(this.data)) {
+      //   this.getItemData(item)
+      // }
     },
     // item，传参数
     getItemData (item) {
diff --git a/src/views/cityConstruction/components/plan/pipeCountBar.vue b/src/views/cityConstruction/components/plan/pipeCountBar.vue
index 33d53de..58c734a 100644
--- a/src/views/cityConstruction/components/plan/pipeCountBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeCountBar.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchPipeCount} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -42,13 +43,16 @@
   },
   methods: {
     getData () {
-      fetchPipeCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.name })
-          this.options.seriesData = data.map(item => { return item.value })
-        }
-      })
+      this.options.xAxisData = mockData.undergroundPipelines.chart2.xData
+      this.options.seriesData = mockData.undergroundPipelines.chart2.yData
+      this.options.unit = mockData.undergroundPipelines.chart2.yUnit
+      // fetchPipeCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.name })
+      //     this.options.seriesData = data.map(item => { return item.value })
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/pipeLengthBar.vue b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
index 889b210..a5de0a0 100644
--- a/src/views/cityConstruction/components/plan/pipeLengthBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
@@ -9,13 +9,13 @@
     <!--<div style="width: 100%;height:100%;padding:0.1rem">-->
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data1" :key="index">
+        <div class="progress-container" v-for="(value,index) in data1" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data2" :key="index">
+        <div class="progress-container" v-for="(value,index) in data2" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
@@ -26,8 +26,9 @@
 
 <script>
 import Legend from '@/components/legend/Legend'
-import ProgressBar2 from '@/components/progressBar/ProgressBar2'
+import ProgressBar2 from '@/components/progressBar/ProgressBar3'
 import {fetchPipeLength} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeLengthBar',
   components: {ProgressBar2, Legend},
@@ -50,6 +51,18 @@
   },
   methods: {
     getData () {
+      this.data1 = mockData.undergroundPipelines.chart1.data1.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
+      this.data2 = mockData.undergroundPipelines.chart1.data2.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
       // fetchPipeLength().then(response => {
       //   if (response.code === 200) {
       //     const dataFilter = []
@@ -88,7 +101,15 @@
     margin: 0.04rem;
     /*padding:0.1rem;*/
     .block{
-
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      .progress-container {
+        width: 100%;
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
     }
   }
 </style>

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/baseDetail.vue b/src/views/cityConstruction/components/plan/components/baseDetail.vue
index c1ce4d3..0e5cc85 100644
--- a/src/views/cityConstruction/components/plan/components/baseDetail.vue
+++ b/src/views/cityConstruction/components/plan/components/baseDetail.vue
@@ -15,6 +15,7 @@
 import ChartLayout from '@/components/layout/chartLayout'
 // import {fetchOccupationByPark} from '@/api/cityManage'
 import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'PeopleDetail',
   components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
@@ -53,6 +54,7 @@
   },
   methods: {
     getData () {
+      this.boardConfig.data = mockData.base.table
       // fetchOccupationByPark().then(response => {
       //   if (response.code === 200) {
       //     const data = response.data
diff --git a/src/views/cityConstruction/components/plan/components/basePie.vue b/src/views/cityConstruction/components/plan/components/basePie.vue
index 775728a..212ee80 100644
--- a/src/views/cityConstruction/components/plan/components/basePie.vue
+++ b/src/views/cityConstruction/components/plan/components/basePie.vue
@@ -11,6 +11,7 @@
         :width="data.width"
         :height="data.height"
         :roseType="true"
+        :isRotate="true"
         :seriesData="data.data">
       </simple-pie-chart>
     </div>
@@ -18,9 +19,10 @@
 </template>
 
 <script>
-import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SimplePieChart from '@/components/pieChart/simplePieChartCarousel'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -52,11 +54,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.base.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/ecologyLine.vue b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
index 5b4e66c..c5584c6 100644
--- a/src/views/cityConstruction/components/plan/components/ecologyLine.vue
+++ b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
@@ -22,6 +22,7 @@
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchProjectCountByYear} from '@/api/projectManage'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'EcologyLine',
   components: {SingleLayout, GradientLineChart},
@@ -45,7 +46,9 @@
     this.getData()
   },
   methods: {
-    // getData () {
+    getData () {
+      this.options.xAxisData = mockData.gardens.line.xData
+      this.options.seriesData = mockData.gardens.line.yData
     //   const currentYear = new Date().getFullYear()
     //   const threeYear = currentYear - 2
     //   const yearRange = [threeYear.toString(), (currentYear).toString()]
@@ -66,7 +69,7 @@
     //       this.options.seriesData = dataFilter
     //     }
     //   })
-    // }
+    }
   }
 }
 </script>
diff --git a/src/views/cityConstruction/components/plan/components/landUse.vue b/src/views/cityConstruction/components/plan/components/landUse.vue
index 007316c..2e12697 100644
--- a/src/views/cityConstruction/components/plan/components/landUse.vue
+++ b/src/views/cityConstruction/components/plan/components/landUse.vue
@@ -48,6 +48,7 @@
 import GaugeItem from './gaugeItem'
 import RoundLiquidFill from '@/components/liquidFill/roundLiquidFill'
 import {fetchProjectCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'LandUse',
   components: {RoundLiquidFill, GaugeItem, ProgressBar2, Legend},
@@ -106,10 +107,15 @@
       this.compTimer = null
     },
     getData () {
+      this.total = mockData.planningLandUse.total
+      this.already = mockData.planningLandUse.already
+      this.percent = mockData.planningLandUse.percent
       if (this.currentComp === 'data1') {
-        this.data = this.data1
+        // this.data = this.data1
+        this.data = mockData.planningLandUse.data1
       } else if (this.currentComp === 'data2') {
-        this.data = this.data2
+        // this.data = this.data2
+        this.data = mockData.planningLandUse.data2
       }
       // fetchProjectCount().then(response => {
       //   if (response.code === 200) {
diff --git a/src/views/cityConstruction/components/plan/ecology.vue b/src/views/cityConstruction/components/plan/ecology.vue
index e4c4f49..f97a6af 100644
--- a/src/views/cityConstruction/components/plan/ecology.vue
+++ b/src/views/cityConstruction/components/plan/ecology.vue
@@ -27,6 +27,7 @@
 import Corner1 from '@/components/corner/Corner1'
 import SimpleBlock from '@/components/block/simpleBlock'
 import EcologyLine from './components/ecologyLine'
+import mockData from '../../../../../static/plan.json'
 // import {fetchInfrastructure} from '@/api/jgzl'
 export default {
   name: 'Ecology',
@@ -46,9 +47,13 @@
   },
   methods: {
     getData () {
-      for (const item of Object.keys(this.data)) {
-        this.getItemData(item)
-      }
+      this.data.csgy.value = mockData.gardens.count.park
+      this.data.jgzl.value = mockData.gardens.count.UFA
+      this.data.cscl.value = mockData.gardens.count.maintenance
+      this.data.stgy.value = mockData.gardens.count.passengerFlow
+      // for (const item of Object.keys(this.data)) {
+      //   this.getItemData(item)
+      // }
     },
     // item，传参数
     getItemData (item) {
diff --git a/src/views/cityConstruction/components/plan/pipeCountBar.vue b/src/views/cityConstruction/components/plan/pipeCountBar.vue
index 33d53de..58c734a 100644
--- a/src/views/cityConstruction/components/plan/pipeCountBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeCountBar.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchPipeCount} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -42,13 +43,16 @@
   },
   methods: {
     getData () {
-      fetchPipeCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.name })
-          this.options.seriesData = data.map(item => { return item.value })
-        }
-      })
+      this.options.xAxisData = mockData.undergroundPipelines.chart2.xData
+      this.options.seriesData = mockData.undergroundPipelines.chart2.yData
+      this.options.unit = mockData.undergroundPipelines.chart2.yUnit
+      // fetchPipeCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.name })
+      //     this.options.seriesData = data.map(item => { return item.value })
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/pipeLengthBar.vue b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
index 889b210..a5de0a0 100644
--- a/src/views/cityConstruction/components/plan/pipeLengthBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
@@ -9,13 +9,13 @@
     <!--<div style="width: 100%;height:100%;padding:0.1rem">-->
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data1" :key="index">
+        <div class="progress-container" v-for="(value,index) in data1" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data2" :key="index">
+        <div class="progress-container" v-for="(value,index) in data2" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
@@ -26,8 +26,9 @@
 
 <script>
 import Legend from '@/components/legend/Legend'
-import ProgressBar2 from '@/components/progressBar/ProgressBar2'
+import ProgressBar2 from '@/components/progressBar/ProgressBar3'
 import {fetchPipeLength} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeLengthBar',
   components: {ProgressBar2, Legend},
@@ -50,6 +51,18 @@
   },
   methods: {
     getData () {
+      this.data1 = mockData.undergroundPipelines.chart1.data1.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
+      this.data2 = mockData.undergroundPipelines.chart1.data2.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
       // fetchPipeLength().then(response => {
       //   if (response.code === 200) {
       //     const dataFilter = []
@@ -88,7 +101,15 @@
     margin: 0.04rem;
     /*padding:0.1rem;*/
     .block{
-
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      .progress-container {
+        width: 100%;
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
     }
   }
 </style>
diff --git a/src/views/cityManage/components/contradiction/components/contradictionLine.vue b/src/views/cityManage/components/contradiction/components/contradictionLine.vue
index a421384..5641801 100644
--- a/src/views/cityManage/components/contradiction/components/contradictionLine.vue
+++ b/src/views/cityManage/components/contradiction/components/contradictionLine.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchCaseByDay} from '@/api/cityManage'
+import mockData from '../../../../../../static/city.json'
 import SingleLayout from '@/components/layout/singleLayout'
 export default {
   name: 'contradictionLine',
@@ -60,6 +61,8 @@
       //     ]
       //   }
       // })
+      this.options.seriesData = mockData.diversifiedSolutions.contradictionTrends.yData
+      this.options.xAxisData = mockData.diversifiedSolutions.contradictionTrends.xData
     }
   }
 }

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/baseDetail.vue b/src/views/cityConstruction/components/plan/components/baseDetail.vue
index c1ce4d3..0e5cc85 100644
--- a/src/views/cityConstruction/components/plan/components/baseDetail.vue
+++ b/src/views/cityConstruction/components/plan/components/baseDetail.vue
@@ -15,6 +15,7 @@
 import ChartLayout from '@/components/layout/chartLayout'
 // import {fetchOccupationByPark} from '@/api/cityManage'
 import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'PeopleDetail',
   components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
@@ -53,6 +54,7 @@
   },
   methods: {
     getData () {
+      this.boardConfig.data = mockData.base.table
       // fetchOccupationByPark().then(response => {
       //   if (response.code === 200) {
       //     const data = response.data
diff --git a/src/views/cityConstruction/components/plan/components/basePie.vue b/src/views/cityConstruction/components/plan/components/basePie.vue
index 775728a..212ee80 100644
--- a/src/views/cityConstruction/components/plan/components/basePie.vue
+++ b/src/views/cityConstruction/components/plan/components/basePie.vue
@@ -11,6 +11,7 @@
         :width="data.width"
         :height="data.height"
         :roseType="true"
+        :isRotate="true"
         :seriesData="data.data">
       </simple-pie-chart>
     </div>
@@ -18,9 +19,10 @@
 </template>
 
 <script>
-import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SimplePieChart from '@/components/pieChart/simplePieChartCarousel'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -52,11 +54,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.base.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/ecologyLine.vue b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
index 5b4e66c..c5584c6 100644
--- a/src/views/cityConstruction/components/plan/components/ecologyLine.vue
+++ b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
@@ -22,6 +22,7 @@
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchProjectCountByYear} from '@/api/projectManage'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'EcologyLine',
   components: {SingleLayout, GradientLineChart},
@@ -45,7 +46,9 @@
     this.getData()
   },
   methods: {
-    // getData () {
+    getData () {
+      this.options.xAxisData = mockData.gardens.line.xData
+      this.options.seriesData = mockData.gardens.line.yData
     //   const currentYear = new Date().getFullYear()
     //   const threeYear = currentYear - 2
     //   const yearRange = [threeYear.toString(), (currentYear).toString()]
@@ -66,7 +69,7 @@
     //       this.options.seriesData = dataFilter
     //     }
     //   })
-    // }
+    }
   }
 }
 </script>
diff --git a/src/views/cityConstruction/components/plan/components/landUse.vue b/src/views/cityConstruction/components/plan/components/landUse.vue
index 007316c..2e12697 100644
--- a/src/views/cityConstruction/components/plan/components/landUse.vue
+++ b/src/views/cityConstruction/components/plan/components/landUse.vue
@@ -48,6 +48,7 @@
 import GaugeItem from './gaugeItem'
 import RoundLiquidFill from '@/components/liquidFill/roundLiquidFill'
 import {fetchProjectCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'LandUse',
   components: {RoundLiquidFill, GaugeItem, ProgressBar2, Legend},
@@ -106,10 +107,15 @@
       this.compTimer = null
     },
     getData () {
+      this.total = mockData.planningLandUse.total
+      this.already = mockData.planningLandUse.already
+      this.percent = mockData.planningLandUse.percent
       if (this.currentComp === 'data1') {
-        this.data = this.data1
+        // this.data = this.data1
+        this.data = mockData.planningLandUse.data1
       } else if (this.currentComp === 'data2') {
-        this.data = this.data2
+        // this.data = this.data2
+        this.data = mockData.planningLandUse.data2
       }
       // fetchProjectCount().then(response => {
       //   if (response.code === 200) {
diff --git a/src/views/cityConstruction/components/plan/ecology.vue b/src/views/cityConstruction/components/plan/ecology.vue
index e4c4f49..f97a6af 100644
--- a/src/views/cityConstruction/components/plan/ecology.vue
+++ b/src/views/cityConstruction/components/plan/ecology.vue
@@ -27,6 +27,7 @@
 import Corner1 from '@/components/corner/Corner1'
 import SimpleBlock from '@/components/block/simpleBlock'
 import EcologyLine from './components/ecologyLine'
+import mockData from '../../../../../static/plan.json'
 // import {fetchInfrastructure} from '@/api/jgzl'
 export default {
   name: 'Ecology',
@@ -46,9 +47,13 @@
   },
   methods: {
     getData () {
-      for (const item of Object.keys(this.data)) {
-        this.getItemData(item)
-      }
+      this.data.csgy.value = mockData.gardens.count.park
+      this.data.jgzl.value = mockData.gardens.count.UFA
+      this.data.cscl.value = mockData.gardens.count.maintenance
+      this.data.stgy.value = mockData.gardens.count.passengerFlow
+      // for (const item of Object.keys(this.data)) {
+      //   this.getItemData(item)
+      // }
     },
     // item，传参数
     getItemData (item) {
diff --git a/src/views/cityConstruction/components/plan/pipeCountBar.vue b/src/views/cityConstruction/components/plan/pipeCountBar.vue
index 33d53de..58c734a 100644
--- a/src/views/cityConstruction/components/plan/pipeCountBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeCountBar.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchPipeCount} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -42,13 +43,16 @@
   },
   methods: {
     getData () {
-      fetchPipeCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.name })
-          this.options.seriesData = data.map(item => { return item.value })
-        }
-      })
+      this.options.xAxisData = mockData.undergroundPipelines.chart2.xData
+      this.options.seriesData = mockData.undergroundPipelines.chart2.yData
+      this.options.unit = mockData.undergroundPipelines.chart2.yUnit
+      // fetchPipeCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.name })
+      //     this.options.seriesData = data.map(item => { return item.value })
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/pipeLengthBar.vue b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
index 889b210..a5de0a0 100644
--- a/src/views/cityConstruction/components/plan/pipeLengthBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
@@ -9,13 +9,13 @@
     <!--<div style="width: 100%;height:100%;padding:0.1rem">-->
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data1" :key="index">
+        <div class="progress-container" v-for="(value,index) in data1" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data2" :key="index">
+        <div class="progress-container" v-for="(value,index) in data2" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
@@ -26,8 +26,9 @@
 
 <script>
 import Legend from '@/components/legend/Legend'
-import ProgressBar2 from '@/components/progressBar/ProgressBar2'
+import ProgressBar2 from '@/components/progressBar/ProgressBar3'
 import {fetchPipeLength} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeLengthBar',
   components: {ProgressBar2, Legend},
@@ -50,6 +51,18 @@
   },
   methods: {
     getData () {
+      this.data1 = mockData.undergroundPipelines.chart1.data1.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
+      this.data2 = mockData.undergroundPipelines.chart1.data2.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
       // fetchPipeLength().then(response => {
       //   if (response.code === 200) {
       //     const dataFilter = []
@@ -88,7 +101,15 @@
     margin: 0.04rem;
     /*padding:0.1rem;*/
     .block{
-
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      .progress-container {
+        width: 100%;
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
     }
   }
 </style>
diff --git a/src/views/cityManage/components/contradiction/components/contradictionLine.vue b/src/views/cityManage/components/contradiction/components/contradictionLine.vue
index a421384..5641801 100644
--- a/src/views/cityManage/components/contradiction/components/contradictionLine.vue
+++ b/src/views/cityManage/components/contradiction/components/contradictionLine.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchCaseByDay} from '@/api/cityManage'
+import mockData from '../../../../../../static/city.json'
 import SingleLayout from '@/components/layout/singleLayout'
 export default {
   name: 'contradictionLine',
@@ -60,6 +61,8 @@
       //     ]
       //   }
       // })
+      this.options.seriesData = mockData.diversifiedSolutions.contradictionTrends.yData
+      this.options.xAxisData = mockData.diversifiedSolutions.contradictionTrends.xData
     }
   }
 }
diff --git a/src/views/cityManage/components/contradiction/components/contradictionPie.vue b/src/views/cityManage/components/contradiction/components/contradictionPie.vue
index 105c123..48eeeae 100644
--- a/src/views/cityManage/components/contradiction/components/contradictionPie.vue
+++ b/src/views/cityManage/components/contradiction/components/contradictionPie.vue
@@ -20,6 +20,7 @@
 <script>
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/city.json'
 export default {
   name: 'contradictionPie',
   components: {SingleLayout, SimplePieChart},
@@ -44,7 +45,7 @@
   },
   methods: {
     getData () {
-
+      this.data.data = mockData.diversifiedSolutions.contradictionPercent
     }
   }
 }

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/baseDetail.vue b/src/views/cityConstruction/components/plan/components/baseDetail.vue
index c1ce4d3..0e5cc85 100644
--- a/src/views/cityConstruction/components/plan/components/baseDetail.vue
+++ b/src/views/cityConstruction/components/plan/components/baseDetail.vue
@@ -15,6 +15,7 @@
 import ChartLayout from '@/components/layout/chartLayout'
 // import {fetchOccupationByPark} from '@/api/cityManage'
 import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'PeopleDetail',
   components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
@@ -53,6 +54,7 @@
   },
   methods: {
     getData () {
+      this.boardConfig.data = mockData.base.table
       // fetchOccupationByPark().then(response => {
       //   if (response.code === 200) {
       //     const data = response.data
diff --git a/src/views/cityConstruction/components/plan/components/basePie.vue b/src/views/cityConstruction/components/plan/components/basePie.vue
index 775728a..212ee80 100644
--- a/src/views/cityConstruction/components/plan/components/basePie.vue
+++ b/src/views/cityConstruction/components/plan/components/basePie.vue
@@ -11,6 +11,7 @@
         :width="data.width"
         :height="data.height"
         :roseType="true"
+        :isRotate="true"
         :seriesData="data.data">
       </simple-pie-chart>
     </div>
@@ -18,9 +19,10 @@
 </template>
 
 <script>
-import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SimplePieChart from '@/components/pieChart/simplePieChartCarousel'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -52,11 +54,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.base.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/ecologyLine.vue b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
index 5b4e66c..c5584c6 100644
--- a/src/views/cityConstruction/components/plan/components/ecologyLine.vue
+++ b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
@@ -22,6 +22,7 @@
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchProjectCountByYear} from '@/api/projectManage'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'EcologyLine',
   components: {SingleLayout, GradientLineChart},
@@ -45,7 +46,9 @@
     this.getData()
   },
   methods: {
-    // getData () {
+    getData () {
+      this.options.xAxisData = mockData.gardens.line.xData
+      this.options.seriesData = mockData.gardens.line.yData
     //   const currentYear = new Date().getFullYear()
     //   const threeYear = currentYear - 2
     //   const yearRange = [threeYear.toString(), (currentYear).toString()]
@@ -66,7 +69,7 @@
     //       this.options.seriesData = dataFilter
     //     }
     //   })
-    // }
+    }
   }
 }
 </script>
diff --git a/src/views/cityConstruction/components/plan/components/landUse.vue b/src/views/cityConstruction/components/plan/components/landUse.vue
index 007316c..2e12697 100644
--- a/src/views/cityConstruction/components/plan/components/landUse.vue
+++ b/src/views/cityConstruction/components/plan/components/landUse.vue
@@ -48,6 +48,7 @@
 import GaugeItem from './gaugeItem'
 import RoundLiquidFill from '@/components/liquidFill/roundLiquidFill'
 import {fetchProjectCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'LandUse',
   components: {RoundLiquidFill, GaugeItem, ProgressBar2, Legend},
@@ -106,10 +107,15 @@
       this.compTimer = null
     },
     getData () {
+      this.total = mockData.planningLandUse.total
+      this.already = mockData.planningLandUse.already
+      this.percent = mockData.planningLandUse.percent
       if (this.currentComp === 'data1') {
-        this.data = this.data1
+        // this.data = this.data1
+        this.data = mockData.planningLandUse.data1
       } else if (this.currentComp === 'data2') {
-        this.data = this.data2
+        // this.data = this.data2
+        this.data = mockData.planningLandUse.data2
       }
       // fetchProjectCount().then(response => {
       //   if (response.code === 200) {
diff --git a/src/views/cityConstruction/components/plan/ecology.vue b/src/views/cityConstruction/components/plan/ecology.vue
index e4c4f49..f97a6af 100644
--- a/src/views/cityConstruction/components/plan/ecology.vue
+++ b/src/views/cityConstruction/components/plan/ecology.vue
@@ -27,6 +27,7 @@
 import Corner1 from '@/components/corner/Corner1'
 import SimpleBlock from '@/components/block/simpleBlock'
 import EcologyLine from './components/ecologyLine'
+import mockData from '../../../../../static/plan.json'
 // import {fetchInfrastructure} from '@/api/jgzl'
 export default {
   name: 'Ecology',
@@ -46,9 +47,13 @@
   },
   methods: {
     getData () {
-      for (const item of Object.keys(this.data)) {
-        this.getItemData(item)
-      }
+      this.data.csgy.value = mockData.gardens.count.park
+      this.data.jgzl.value = mockData.gardens.count.UFA
+      this.data.cscl.value = mockData.gardens.count.maintenance
+      this.data.stgy.value = mockData.gardens.count.passengerFlow
+      // for (const item of Object.keys(this.data)) {
+      //   this.getItemData(item)
+      // }
     },
     // item，传参数
     getItemData (item) {
diff --git a/src/views/cityConstruction/components/plan/pipeCountBar.vue b/src/views/cityConstruction/components/plan/pipeCountBar.vue
index 33d53de..58c734a 100644
--- a/src/views/cityConstruction/components/plan/pipeCountBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeCountBar.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchPipeCount} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -42,13 +43,16 @@
   },
   methods: {
     getData () {
-      fetchPipeCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.name })
-          this.options.seriesData = data.map(item => { return item.value })
-        }
-      })
+      this.options.xAxisData = mockData.undergroundPipelines.chart2.xData
+      this.options.seriesData = mockData.undergroundPipelines.chart2.yData
+      this.options.unit = mockData.undergroundPipelines.chart2.yUnit
+      // fetchPipeCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.name })
+      //     this.options.seriesData = data.map(item => { return item.value })
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/pipeLengthBar.vue b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
index 889b210..a5de0a0 100644
--- a/src/views/cityConstruction/components/plan/pipeLengthBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
@@ -9,13 +9,13 @@
     <!--<div style="width: 100%;height:100%;padding:0.1rem">-->
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data1" :key="index">
+        <div class="progress-container" v-for="(value,index) in data1" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data2" :key="index">
+        <div class="progress-container" v-for="(value,index) in data2" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
@@ -26,8 +26,9 @@
 
 <script>
 import Legend from '@/components/legend/Legend'
-import ProgressBar2 from '@/components/progressBar/ProgressBar2'
+import ProgressBar2 from '@/components/progressBar/ProgressBar3'
 import {fetchPipeLength} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeLengthBar',
   components: {ProgressBar2, Legend},
@@ -50,6 +51,18 @@
   },
   methods: {
     getData () {
+      this.data1 = mockData.undergroundPipelines.chart1.data1.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
+      this.data2 = mockData.undergroundPipelines.chart1.data2.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
       // fetchPipeLength().then(response => {
       //   if (response.code === 200) {
       //     const dataFilter = []
@@ -88,7 +101,15 @@
     margin: 0.04rem;
     /*padding:0.1rem;*/
     .block{
-
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      .progress-container {
+        width: 100%;
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
     }
   }
 </style>
diff --git a/src/views/cityManage/components/contradiction/components/contradictionLine.vue b/src/views/cityManage/components/contradiction/components/contradictionLine.vue
index a421384..5641801 100644
--- a/src/views/cityManage/components/contradiction/components/contradictionLine.vue
+++ b/src/views/cityManage/components/contradiction/components/contradictionLine.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchCaseByDay} from '@/api/cityManage'
+import mockData from '../../../../../../static/city.json'
 import SingleLayout from '@/components/layout/singleLayout'
 export default {
   name: 'contradictionLine',
@@ -60,6 +61,8 @@
       //     ]
       //   }
       // })
+      this.options.seriesData = mockData.diversifiedSolutions.contradictionTrends.yData
+      this.options.xAxisData = mockData.diversifiedSolutions.contradictionTrends.xData
     }
   }
 }
diff --git a/src/views/cityManage/components/contradiction/components/contradictionPie.vue b/src/views/cityManage/components/contradiction/components/contradictionPie.vue
index 105c123..48eeeae 100644
--- a/src/views/cityManage/components/contradiction/components/contradictionPie.vue
+++ b/src/views/cityManage/components/contradiction/components/contradictionPie.vue
@@ -20,6 +20,7 @@
 <script>
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/city.json'
 export default {
   name: 'contradictionPie',
   components: {SingleLayout, SimplePieChart},
@@ -44,7 +45,7 @@
   },
   methods: {
     getData () {
-
+      this.data.data = mockData.diversifiedSolutions.contradictionPercent
     }
   }
 }
diff --git a/src/views/cityManage/components/wisdomTraffic/trafficBase.vue b/src/views/cityManage/components/wisdomTraffic/trafficBase.vue
index b1307b4..e6740c1 100644
--- a/src/views/cityManage/components/wisdomTraffic/trafficBase.vue
+++ b/src/views/cityManage/components/wisdomTraffic/trafficBase.vue
@@ -19,6 +19,7 @@
 <script>
 import SimpleBlock from '@/components/block/simpleBlock'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../static/plan.json'
 // import {fetchInfrastructure} from '@/api/jgzl'
 export default {
   name: 'TrafficBase',
@@ -40,9 +41,15 @@
   },
   methods: {
     getData () {
-      for (const item of Object.keys(this.data)) {
-        this.getItemData(item)
-      }
+      // for (const item of Object.keys(this.data)) {
+      //   this.getItemData(item)
+      // }
+      this.data.jgzl.value = mockData.traffic.intersection
+      this.data.cscl.value = mockData.traffic.bus
+      this.data.stgy.value = mockData.traffic.bridge
+      this.data.csgy.value = mockData.traffic.tunnel
+      this.data.hp.value = mockData.traffic.gas
+      this.data.hl.value = mockData.traffic.hub
     },
     // item，传参数
     getItemData (item) {

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/baseDetail.vue b/src/views/cityConstruction/components/plan/components/baseDetail.vue
index c1ce4d3..0e5cc85 100644
--- a/src/views/cityConstruction/components/plan/components/baseDetail.vue
+++ b/src/views/cityConstruction/components/plan/components/baseDetail.vue
@@ -15,6 +15,7 @@
 import ChartLayout from '@/components/layout/chartLayout'
 // import {fetchOccupationByPark} from '@/api/cityManage'
 import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'PeopleDetail',
   components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
@@ -53,6 +54,7 @@
   },
   methods: {
     getData () {
+      this.boardConfig.data = mockData.base.table
       // fetchOccupationByPark().then(response => {
       //   if (response.code === 200) {
       //     const data = response.data
diff --git a/src/views/cityConstruction/components/plan/components/basePie.vue b/src/views/cityConstruction/components/plan/components/basePie.vue
index 775728a..212ee80 100644
--- a/src/views/cityConstruction/components/plan/components/basePie.vue
+++ b/src/views/cityConstruction/components/plan/components/basePie.vue
@@ -11,6 +11,7 @@
         :width="data.width"
         :height="data.height"
         :roseType="true"
+        :isRotate="true"
         :seriesData="data.data">
       </simple-pie-chart>
     </div>
@@ -18,9 +19,10 @@
 </template>
 
 <script>
-import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SimplePieChart from '@/components/pieChart/simplePieChartCarousel'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -52,11 +54,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.base.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/ecologyLine.vue b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
index 5b4e66c..c5584c6 100644
--- a/src/views/cityConstruction/components/plan/components/ecologyLine.vue
+++ b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
@@ -22,6 +22,7 @@
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchProjectCountByYear} from '@/api/projectManage'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'EcologyLine',
   components: {SingleLayout, GradientLineChart},
@@ -45,7 +46,9 @@
     this.getData()
   },
   methods: {
-    // getData () {
+    getData () {
+      this.options.xAxisData = mockData.gardens.line.xData
+      this.options.seriesData = mockData.gardens.line.yData
     //   const currentYear = new Date().getFullYear()
     //   const threeYear = currentYear - 2
     //   const yearRange = [threeYear.toString(), (currentYear).toString()]
@@ -66,7 +69,7 @@
     //       this.options.seriesData = dataFilter
     //     }
     //   })
-    // }
+    }
   }
 }
 </script>
diff --git a/src/views/cityConstruction/components/plan/components/landUse.vue b/src/views/cityConstruction/components/plan/components/landUse.vue
index 007316c..2e12697 100644
--- a/src/views/cityConstruction/components/plan/components/landUse.vue
+++ b/src/views/cityConstruction/components/plan/components/landUse.vue
@@ -48,6 +48,7 @@
 import GaugeItem from './gaugeItem'
 import RoundLiquidFill from '@/components/liquidFill/roundLiquidFill'
 import {fetchProjectCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'LandUse',
   components: {RoundLiquidFill, GaugeItem, ProgressBar2, Legend},
@@ -106,10 +107,15 @@
       this.compTimer = null
     },
     getData () {
+      this.total = mockData.planningLandUse.total
+      this.already = mockData.planningLandUse.already
+      this.percent = mockData.planningLandUse.percent
       if (this.currentComp === 'data1') {
-        this.data = this.data1
+        // this.data = this.data1
+        this.data = mockData.planningLandUse.data1
       } else if (this.currentComp === 'data2') {
-        this.data = this.data2
+        // this.data = this.data2
+        this.data = mockData.planningLandUse.data2
       }
       // fetchProjectCount().then(response => {
       //   if (response.code === 200) {
diff --git a/src/views/cityConstruction/components/plan/ecology.vue b/src/views/cityConstruction/components/plan/ecology.vue
index e4c4f49..f97a6af 100644
--- a/src/views/cityConstruction/components/plan/ecology.vue
+++ b/src/views/cityConstruction/components/plan/ecology.vue
@@ -27,6 +27,7 @@
 import Corner1 from '@/components/corner/Corner1'
 import SimpleBlock from '@/components/block/simpleBlock'
 import EcologyLine from './components/ecologyLine'
+import mockData from '../../../../../static/plan.json'
 // import {fetchInfrastructure} from '@/api/jgzl'
 export default {
   name: 'Ecology',
@@ -46,9 +47,13 @@
   },
   methods: {
     getData () {
-      for (const item of Object.keys(this.data)) {
-        this.getItemData(item)
-      }
+      this.data.csgy.value = mockData.gardens.count.park
+      this.data.jgzl.value = mockData.gardens.count.UFA
+      this.data.cscl.value = mockData.gardens.count.maintenance
+      this.data.stgy.value = mockData.gardens.count.passengerFlow
+      // for (const item of Object.keys(this.data)) {
+      //   this.getItemData(item)
+      // }
     },
     // item，传参数
     getItemData (item) {
diff --git a/src/views/cityConstruction/components/plan/pipeCountBar.vue b/src/views/cityConstruction/components/plan/pipeCountBar.vue
index 33d53de..58c734a 100644
--- a/src/views/cityConstruction/components/plan/pipeCountBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeCountBar.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchPipeCount} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -42,13 +43,16 @@
   },
   methods: {
     getData () {
-      fetchPipeCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.name })
-          this.options.seriesData = data.map(item => { return item.value })
-        }
-      })
+      this.options.xAxisData = mockData.undergroundPipelines.chart2.xData
+      this.options.seriesData = mockData.undergroundPipelines.chart2.yData
+      this.options.unit = mockData.undergroundPipelines.chart2.yUnit
+      // fetchPipeCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.name })
+      //     this.options.seriesData = data.map(item => { return item.value })
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/pipeLengthBar.vue b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
index 889b210..a5de0a0 100644
--- a/src/views/cityConstruction/components/plan/pipeLengthBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
@@ -9,13 +9,13 @@
     <!--<div style="width: 100%;height:100%;padding:0.1rem">-->
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data1" :key="index">
+        <div class="progress-container" v-for="(value,index) in data1" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data2" :key="index">
+        <div class="progress-container" v-for="(value,index) in data2" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
@@ -26,8 +26,9 @@
 
 <script>
 import Legend from '@/components/legend/Legend'
-import ProgressBar2 from '@/components/progressBar/ProgressBar2'
+import ProgressBar2 from '@/components/progressBar/ProgressBar3'
 import {fetchPipeLength} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeLengthBar',
   components: {ProgressBar2, Legend},
@@ -50,6 +51,18 @@
   },
   methods: {
     getData () {
+      this.data1 = mockData.undergroundPipelines.chart1.data1.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
+      this.data2 = mockData.undergroundPipelines.chart1.data2.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
       // fetchPipeLength().then(response => {
       //   if (response.code === 200) {
       //     const dataFilter = []
@@ -88,7 +101,15 @@
     margin: 0.04rem;
     /*padding:0.1rem;*/
     .block{
-
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      .progress-container {
+        width: 100%;
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
     }
   }
 </style>
diff --git a/src/views/cityManage/components/contradiction/components/contradictionLine.vue b/src/views/cityManage/components/contradiction/components/contradictionLine.vue
index a421384..5641801 100644
--- a/src/views/cityManage/components/contradiction/components/contradictionLine.vue
+++ b/src/views/cityManage/components/contradiction/components/contradictionLine.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchCaseByDay} from '@/api/cityManage'
+import mockData from '../../../../../../static/city.json'
 import SingleLayout from '@/components/layout/singleLayout'
 export default {
   name: 'contradictionLine',
@@ -60,6 +61,8 @@
       //     ]
       //   }
       // })
+      this.options.seriesData = mockData.diversifiedSolutions.contradictionTrends.yData
+      this.options.xAxisData = mockData.diversifiedSolutions.contradictionTrends.xData
     }
   }
 }
diff --git a/src/views/cityManage/components/contradiction/components/contradictionPie.vue b/src/views/cityManage/components/contradiction/components/contradictionPie.vue
index 105c123..48eeeae 100644
--- a/src/views/cityManage/components/contradiction/components/contradictionPie.vue
+++ b/src/views/cityManage/components/contradiction/components/contradictionPie.vue
@@ -20,6 +20,7 @@
 <script>
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/city.json'
 export default {
   name: 'contradictionPie',
   components: {SingleLayout, SimplePieChart},
@@ -44,7 +45,7 @@
   },
   methods: {
     getData () {
-
+      this.data.data = mockData.diversifiedSolutions.contradictionPercent
     }
   }
 }
diff --git a/src/views/cityManage/components/wisdomTraffic/trafficBase.vue b/src/views/cityManage/components/wisdomTraffic/trafficBase.vue
index b1307b4..e6740c1 100644
--- a/src/views/cityManage/components/wisdomTraffic/trafficBase.vue
+++ b/src/views/cityManage/components/wisdomTraffic/trafficBase.vue
@@ -19,6 +19,7 @@
 <script>
 import SimpleBlock from '@/components/block/simpleBlock'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../static/plan.json'
 // import {fetchInfrastructure} from '@/api/jgzl'
 export default {
   name: 'TrafficBase',
@@ -40,9 +41,15 @@
   },
   methods: {
     getData () {
-      for (const item of Object.keys(this.data)) {
-        this.getItemData(item)
-      }
+      // for (const item of Object.keys(this.data)) {
+      //   this.getItemData(item)
+      // }
+      this.data.jgzl.value = mockData.traffic.intersection
+      this.data.cscl.value = mockData.traffic.bus
+      this.data.stgy.value = mockData.traffic.bridge
+      this.data.csgy.value = mockData.traffic.tunnel
+      this.data.hp.value = mockData.traffic.gas
+      this.data.hl.value = mockData.traffic.hub
     },
     // item，传参数
     getItemData (item) {
diff --git a/src/views/header/header1.vue b/src/views/header/header1.vue
index b7cb49e..6d22553 100644
--- a/src/views/header/header1.vue
+++ b/src/views/header/header1.vue
@@ -63,6 +63,8 @@
       topMenuRight: [
         { label: '社会民生', id: 3, component: 'socialLivelihood' },
         { label: '产业经济', id: 4, component: 'industrialEconomy' }
+        // { label: '交通概况', id: 5, component: 'socialLivelihood' },
+        // { label: '城管执法', id: 6, component: 'industrialEconomy' }
       ]
     }
   },

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/baseDetail.vue b/src/views/cityConstruction/components/plan/components/baseDetail.vue
index c1ce4d3..0e5cc85 100644
--- a/src/views/cityConstruction/components/plan/components/baseDetail.vue
+++ b/src/views/cityConstruction/components/plan/components/baseDetail.vue
@@ -15,6 +15,7 @@
 import ChartLayout from '@/components/layout/chartLayout'
 // import {fetchOccupationByPark} from '@/api/cityManage'
 import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'PeopleDetail',
   components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
@@ -53,6 +54,7 @@
   },
   methods: {
     getData () {
+      this.boardConfig.data = mockData.base.table
       // fetchOccupationByPark().then(response => {
       //   if (response.code === 200) {
       //     const data = response.data
diff --git a/src/views/cityConstruction/components/plan/components/basePie.vue b/src/views/cityConstruction/components/plan/components/basePie.vue
index 775728a..212ee80 100644
--- a/src/views/cityConstruction/components/plan/components/basePie.vue
+++ b/src/views/cityConstruction/components/plan/components/basePie.vue
@@ -11,6 +11,7 @@
         :width="data.width"
         :height="data.height"
         :roseType="true"
+        :isRotate="true"
         :seriesData="data.data">
       </simple-pie-chart>
     </div>
@@ -18,9 +19,10 @@
 </template>
 
 <script>
-import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SimplePieChart from '@/components/pieChart/simplePieChartCarousel'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -52,11 +54,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.base.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/ecologyLine.vue b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
index 5b4e66c..c5584c6 100644
--- a/src/views/cityConstruction/components/plan/components/ecologyLine.vue
+++ b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
@@ -22,6 +22,7 @@
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchProjectCountByYear} from '@/api/projectManage'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'EcologyLine',
   components: {SingleLayout, GradientLineChart},
@@ -45,7 +46,9 @@
     this.getData()
   },
   methods: {
-    // getData () {
+    getData () {
+      this.options.xAxisData = mockData.gardens.line.xData
+      this.options.seriesData = mockData.gardens.line.yData
     //   const currentYear = new Date().getFullYear()
     //   const threeYear = currentYear - 2
     //   const yearRange = [threeYear.toString(), (currentYear).toString()]
@@ -66,7 +69,7 @@
     //       this.options.seriesData = dataFilter
     //     }
     //   })
-    // }
+    }
   }
 }
 </script>
diff --git a/src/views/cityConstruction/components/plan/components/landUse.vue b/src/views/cityConstruction/components/plan/components/landUse.vue
index 007316c..2e12697 100644
--- a/src/views/cityConstruction/components/plan/components/landUse.vue
+++ b/src/views/cityConstruction/components/plan/components/landUse.vue
@@ -48,6 +48,7 @@
 import GaugeItem from './gaugeItem'
 import RoundLiquidFill from '@/components/liquidFill/roundLiquidFill'
 import {fetchProjectCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'LandUse',
   components: {RoundLiquidFill, GaugeItem, ProgressBar2, Legend},
@@ -106,10 +107,15 @@
       this.compTimer = null
     },
     getData () {
+      this.total = mockData.planningLandUse.total
+      this.already = mockData.planningLandUse.already
+      this.percent = mockData.planningLandUse.percent
       if (this.currentComp === 'data1') {
-        this.data = this.data1
+        // this.data = this.data1
+        this.data = mockData.planningLandUse.data1
       } else if (this.currentComp === 'data2') {
-        this.data = this.data2
+        // this.data = this.data2
+        this.data = mockData.planningLandUse.data2
       }
       // fetchProjectCount().then(response => {
       //   if (response.code === 200) {
diff --git a/src/views/cityConstruction/components/plan/ecology.vue b/src/views/cityConstruction/components/plan/ecology.vue
index e4c4f49..f97a6af 100644
--- a/src/views/cityConstruction/components/plan/ecology.vue
+++ b/src/views/cityConstruction/components/plan/ecology.vue
@@ -27,6 +27,7 @@
 import Corner1 from '@/components/corner/Corner1'
 import SimpleBlock from '@/components/block/simpleBlock'
 import EcologyLine from './components/ecologyLine'
+import mockData from '../../../../../static/plan.json'
 // import {fetchInfrastructure} from '@/api/jgzl'
 export default {
   name: 'Ecology',
@@ -46,9 +47,13 @@
   },
   methods: {
     getData () {
-      for (const item of Object.keys(this.data)) {
-        this.getItemData(item)
-      }
+      this.data.csgy.value = mockData.gardens.count.park
+      this.data.jgzl.value = mockData.gardens.count.UFA
+      this.data.cscl.value = mockData.gardens.count.maintenance
+      this.data.stgy.value = mockData.gardens.count.passengerFlow
+      // for (const item of Object.keys(this.data)) {
+      //   this.getItemData(item)
+      // }
     },
     // item，传参数
     getItemData (item) {
diff --git a/src/views/cityConstruction/components/plan/pipeCountBar.vue b/src/views/cityConstruction/components/plan/pipeCountBar.vue
index 33d53de..58c734a 100644
--- a/src/views/cityConstruction/components/plan/pipeCountBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeCountBar.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchPipeCount} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -42,13 +43,16 @@
   },
   methods: {
     getData () {
-      fetchPipeCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.name })
-          this.options.seriesData = data.map(item => { return item.value })
-        }
-      })
+      this.options.xAxisData = mockData.undergroundPipelines.chart2.xData
+      this.options.seriesData = mockData.undergroundPipelines.chart2.yData
+      this.options.unit = mockData.undergroundPipelines.chart2.yUnit
+      // fetchPipeCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.name })
+      //     this.options.seriesData = data.map(item => { return item.value })
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/pipeLengthBar.vue b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
index 889b210..a5de0a0 100644
--- a/src/views/cityConstruction/components/plan/pipeLengthBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
@@ -9,13 +9,13 @@
     <!--<div style="width: 100%;height:100%;padding:0.1rem">-->
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data1" :key="index">
+        <div class="progress-container" v-for="(value,index) in data1" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data2" :key="index">
+        <div class="progress-container" v-for="(value,index) in data2" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
@@ -26,8 +26,9 @@
 
 <script>
 import Legend from '@/components/legend/Legend'
-import ProgressBar2 from '@/components/progressBar/ProgressBar2'
+import ProgressBar2 from '@/components/progressBar/ProgressBar3'
 import {fetchPipeLength} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeLengthBar',
   components: {ProgressBar2, Legend},
@@ -50,6 +51,18 @@
   },
   methods: {
     getData () {
+      this.data1 = mockData.undergroundPipelines.chart1.data1.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
+      this.data2 = mockData.undergroundPipelines.chart1.data2.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
       // fetchPipeLength().then(response => {
       //   if (response.code === 200) {
       //     const dataFilter = []
@@ -88,7 +101,15 @@
     margin: 0.04rem;
     /*padding:0.1rem;*/
     .block{
-
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      .progress-container {
+        width: 100%;
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
     }
   }
 </style>
diff --git a/src/views/cityManage/components/contradiction/components/contradictionLine.vue b/src/views/cityManage/components/contradiction/components/contradictionLine.vue
index a421384..5641801 100644
--- a/src/views/cityManage/components/contradiction/components/contradictionLine.vue
+++ b/src/views/cityManage/components/contradiction/components/contradictionLine.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchCaseByDay} from '@/api/cityManage'
+import mockData from '../../../../../../static/city.json'
 import SingleLayout from '@/components/layout/singleLayout'
 export default {
   name: 'contradictionLine',
@@ -60,6 +61,8 @@
       //     ]
       //   }
       // })
+      this.options.seriesData = mockData.diversifiedSolutions.contradictionTrends.yData
+      this.options.xAxisData = mockData.diversifiedSolutions.contradictionTrends.xData
     }
   }
 }
diff --git a/src/views/cityManage/components/contradiction/components/contradictionPie.vue b/src/views/cityManage/components/contradiction/components/contradictionPie.vue
index 105c123..48eeeae 100644
--- a/src/views/cityManage/components/contradiction/components/contradictionPie.vue
+++ b/src/views/cityManage/components/contradiction/components/contradictionPie.vue
@@ -20,6 +20,7 @@
 <script>
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/city.json'
 export default {
   name: 'contradictionPie',
   components: {SingleLayout, SimplePieChart},
@@ -44,7 +45,7 @@
   },
   methods: {
     getData () {
-
+      this.data.data = mockData.diversifiedSolutions.contradictionPercent
     }
   }
 }
diff --git a/src/views/cityManage/components/wisdomTraffic/trafficBase.vue b/src/views/cityManage/components/wisdomTraffic/trafficBase.vue
index b1307b4..e6740c1 100644
--- a/src/views/cityManage/components/wisdomTraffic/trafficBase.vue
+++ b/src/views/cityManage/components/wisdomTraffic/trafficBase.vue
@@ -19,6 +19,7 @@
 <script>
 import SimpleBlock from '@/components/block/simpleBlock'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../static/plan.json'
 // import {fetchInfrastructure} from '@/api/jgzl'
 export default {
   name: 'TrafficBase',
@@ -40,9 +41,15 @@
   },
   methods: {
     getData () {
-      for (const item of Object.keys(this.data)) {
-        this.getItemData(item)
-      }
+      // for (const item of Object.keys(this.data)) {
+      //   this.getItemData(item)
+      // }
+      this.data.jgzl.value = mockData.traffic.intersection
+      this.data.cscl.value = mockData.traffic.bus
+      this.data.stgy.value = mockData.traffic.bridge
+      this.data.csgy.value = mockData.traffic.tunnel
+      this.data.hp.value = mockData.traffic.gas
+      this.data.hl.value = mockData.traffic.hub
     },
     // item，传参数
     getItemData (item) {
diff --git a/src/views/header/header1.vue b/src/views/header/header1.vue
index b7cb49e..6d22553 100644
--- a/src/views/header/header1.vue
+++ b/src/views/header/header1.vue
@@ -63,6 +63,8 @@
       topMenuRight: [
         { label: '社会民生', id: 3, component: 'socialLivelihood' },
         { label: '产业经济', id: 4, component: 'industrialEconomy' }
+        // { label: '交通概况', id: 5, component: 'socialLivelihood' },
+        // { label: '城管执法', id: 6, component: 'industrialEconomy' }
       ]
     }
   },
diff --git a/static/city.json b/static/city.json
index 17251be..ff86bda 100644
--- a/static/city.json
+++ b/static/city.json
@@ -41,7 +41,7 @@
     "gridCount": 105
   },
 
-  
+
   "adolescentDesc": "青少年犯罪与校园安全",
   "adolescent": {
     "count": [
@@ -62,16 +62,29 @@
       {"value": 8.7, "name": "卫生事件"},
       {"value": 4.35, "name": "消防事件"},
       {"value": 34.78, "name": "其他事件"}
+    ]
+  },
+
+
+  "diversifiedSolutionsDesc": "多元化解",
+  "diversifiedSolutions": {
+    "count": [
+      { "name": "已处理数", "num": 182 },
+      { "name": "矛盾事件总数", "num": 217 },
+      { "name": "处理率", "num": "83.9%" }
     ],
-
-
-    "diversifiedSolutionsDesc": "多元化解",
-    "diversifiedSolutions": {
-      "count": [
-        { "name": "已处理数", "num": 182 },
-        { "name": "矛盾事件总数", "num": 217 },
-        { "name": "处理率", "num": "83.9%" }
+    "contradictionTrends": {
+      "xData": ["1月", "2月", "3月", "4月"],
+      "yData": [
+        {"name": "案件总数", "data": [11,20,8,12], "color": "255,45,85"},
+        {"name": "处理数", "data": [9,15,7,10], "color": "0,144,255"}
       ]
-    }
+    },
+    "contradictionPercent": [
+      {"value": 34, "name": "民事纠纷"},
+      {"value": 5, "name": "行政纠纷"},
+      {"value": 1, "name": "涉法纠纷"},
+      {"value": 11, "name": "其他纠纷"}
+    ]
   }
 }

diff --git a/src/components/annularProgress/annularComp.vue b/src/components/annularProgress/annularComp.vue
index 5305f16..5a09137 100644
--- a/src/components/annularProgress/annularComp.vue
+++ b/src/components/annularProgress/annularComp.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <span>在线设备数：<b :style="'color:'+data.color">{{value.online}}</b></span>
-        <!--<span>离线率：{{data.leave}} %</span>-->
+        <!-- <span>离线率：{{data.leave}} %</span> -->
       </div>
     </div>
   </div>
@@ -64,14 +64,25 @@
     this.refreshValue()
   },
   watch: {
-    value (val) {
-      this.refreshValue()
+    // value (val) {
+    //   console.log('-----------------------------监听到诶覆盖');
+
+    //   this.refreshValue(val)
+    // },
+    value: {
+      handler (newValue, oldValue) {
+        console.log('-----------------------------监听到诶覆盖', newValue)
+        this.refreshValue(newValue)
+      },
+      // 开启深度监听
+      deep: true,
+      immediate: true
     }
   },
   methods: {
-    refreshValue () {
+    refreshValue (val) {
       console.log('refreshValue')
-      const val = this.value
+      // const val = this.value
       if (val) {
         const online = Math.round(val.online / val.total * 100) // 求在线率
         this.data.online = online
@@ -110,14 +121,14 @@
         height: .12rem;
       }
       span{
-        font-size: .04rem;
+        font-size: .07rem;
         color:$blockTextColor;
         -webkit-transform-origin-x: 0;
         transform:  scale(0.5833333333333334);
         -webkit-transform: scale(.5);
         b{
           font-weight: bold;
-          font-size: .07rem
+          font-size: .1rem
         }
       }
     }
diff --git a/src/components/earthViews/EarthViews.vue b/src/components/earthViews/EarthViews.vue
index 3ad4400..f585ada 100644
--- a/src/components/earthViews/EarthViews.vue
+++ b/src/components/earthViews/EarthViews.vue
@@ -49,8 +49,10 @@
   overflow: hidden;
 }
 .earth-main > div > div {
-  width: 0.37rem;
-  height: 0.37rem;
+  // width: 0.37rem;
+  // height: 0.37rem;
+  width: 0.42rem;
+  height: 0.42rem;
   font-weight: bold;
   font-size: 0.12rem;
   font-family: $digitalFamily;
diff --git a/src/components/pieChart/simplePieChartCarousel.vue b/src/components/pieChart/simplePieChartCarousel.vue
new file mode 100644
index 0000000..58b1a72
--- /dev/null
+++ b/src/components/pieChart/simplePieChartCarousel.vue
@@ -0,0 +1,379 @@
+<template>
+  <div
+    :id="id"
+    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
+  >
+  </div>
+</template>
+<script>
+/**
+   * @author 王晓颖
+   * @date 2020/08/18
+   * @Description 普通饼图
+   * @props 数据格式：{
+   *    id: '',
+      width: 0,
+      height: 0,
+      xAxisData:[],
+      seriesData: []
+    }
+   *
+   */
+export default {
+  name: 'SimplePieChart',
+  props: {
+    id: { // id
+      type: String,
+      default: 'simplePieChart'
+    },
+    width: { // 宽
+      type: Number | String,
+      default: '100%'
+    },
+    height: { // 高
+      type: Number | String,
+      default: '100%'
+    },
+    radius: { // 饼图的半径[内半径，外半径]
+      type: Array,
+      default: () => {
+        return ['30%', '45%']
+      }
+    },
+    fontFamily: { // 值显示字体
+      type: String,
+      default: ''
+    },
+    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+      type: String | Boolean,
+      default: false
+    },
+    colors: { // 颜色组
+      type: Array,
+      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#0078d4', '#90ed7d', '#f7a35c', '#8085e9'] }
+    },
+    fontColor: { // 标签文字颜色
+      type: String,
+      default: '#ffffff'
+    },
+    valueType: { // 显示值类型：percentage百分比|value数值
+      type: String,
+      default: 'percentage'
+    },
+    labelShow: {
+      type: Boolean,
+      default: true
+    },
+    labelFormatter: {
+      type: String,
+      default: ''
+    },
+    hoverFormatter: {
+      type: String,
+      default: '{b}<br/>{c}<br/>{d}%'
+    },
+    seriesData: { // 数据
+      type: Array,
+      default: () => { return [] }
+    },
+    rotateInterval: { // 轮播间隔时间(ms)
+      type: Number,
+      default: 3000
+    },
+    isRotate: { // 是否开启轮播
+      type: Boolean,
+      default: false
+    },
+    activeFontColor: { // 激活标签字体颜色
+      type: String,
+      default: '#fff'
+    },
+    labelLineColor: { // 标签线颜色
+      type: String,
+      default: '#ccc'
+    },
+    labelLineWidth: { // 标签线宽度
+      type: Number,
+      default: 1.5
+    }
+  },
+  data () {
+    return {
+      rotateIndex: 0,
+      rotateTimer: null,
+      activeLabelIndex: -1,
+      isMouseOver: false, // 鼠标是否悬停
+      hoveredIndex: -1, // 鼠标悬停的数据项索引
+      curWidth: this.width,
+      curHeight: this.height,
+      option: {
+        tooltip: {
+          trigger: 'item',
+          formatter: this.hoverFormatter,
+          textStyle: {
+            fontSize: 15
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '5%',
+          right: '5%',
+          bottom: 20,
+          containLabel: true // 是否包含坐标轴的刻度标签
+        }, // 网格
+        color: this.colors,
+        series: [
+          {
+            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+            type: 'pie',
+            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+            roseType: this.roseType, // 玫瑰图类型
+            radius: this.radius, // 饼图的半径[内半径，外半径]
+            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+            startAngle: 140,
+            label: {
+              show: this.labelShow,
+              formatter: this.labelFormatter,
+              fontSize: 19,
+              lineHeight: 19,
+              rich: {
+                style1: {
+                  color: this.fontColor,
+                  fontSize: 16
+                },
+                style2: {
+                  fontWeight: 'bolder',
+                  fontSize: 19,
+                  fontFamily: this.fontFamily
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 17,
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 15
+            },
+            data: [
+              // {value:34, name:'申报立案'},
+            ]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    width (newVal, oldVal) {
+      this.curWidth = newVal
+      this.refreshEchart()
+    },
+    height (newVal, oldVal) {
+      this.curHeight = newVal
+      this.refreshEchart()
+    },
+    seriesData (newVal, oldVal) {
+      this.option.series[0].data = newVal
+      this.refreshEchart()
+    }
+  },
+  computed: {
+    // 动态计算标签格式化函数
+    labelFormatter () {
+      return (params) => {
+        // 只在非鼠标悬停状态下显示当前轮播项的标签
+        if (!this.isMouseOver && params.dataIndex === this.activeLabelIndex) {
+          return `${params.name}\n${params.value} (${params.percent}%)`
+        }
+        return '' // 鼠标悬停时或非当前项不显示标签
+      }
+    }
+  },
+  mounted () {
+    if (this.seriesData && this.seriesData.length) {
+      // 格式化
+      if (this.labelFormatter) {
+        this.option.series[0].label.formatter = this.labelFormatter
+      } else {
+        if (this.valueType === 'percentage') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
+        } else if (this.valueType === 'value') {
+          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
+        }
+      }
+      this.option.series[0].data = this.seriesData
+      this.initEchart()
+    }
+    if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+      this.startRotation()
+    }
+  },
+  beforeDestroy () {
+    this.stopRotation() // 组件销毁前停止轮播
+  },
+  methods: {
+    // refreshEchart () {
+    //   if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
+    //     this.initEchart()
+    //   }
+    // },
+    refreshEchart () {
+      if (this.curWidth && this.curHeight && this.seriesData) { // 去掉多余的xAxisData判断（饼图不需要xAxisData）
+        this.initEchart()
+      }
+    },
+    // initEchart () {
+    //   const _div = document.getElementById(this.id)
+    //   setTimeout(() => {
+    //     let myChart = this.$echarts.init(this.$el)
+    //     myChart.setOption(this.option, true)
+    //     window.onresize = myChart.resize
+    //   }, 500)
+    // }
+    // 开始轮播
+    startRotation () {
+      if (this.rotateTimer) clearInterval(this.rotateTimer)
+
+      this.rotateTimer = setInterval(() => {
+        // 仅在鼠标未悬停时更新轮播
+        if (!this.isMouseOver) {
+          this.rotateIndex = (this.rotateIndex + 1) % this.seriesData.length
+          this.updateActiveLabel(this.rotateIndex)
+        }
+      }, this.rotateInterval)
+    },
+
+    // 停止轮播
+    stopRotation () {
+      if (this.rotateTimer) {
+        clearInterval(this.rotateTimer)
+        this.rotateTimer = null
+      }
+    },
+
+    // 更新激活的标签
+    updateActiveLabel (index) {
+      const chart = this.$echarts.getInstanceByDom(this.$el)
+      if (chart) {
+        this.activeLabelIndex = index
+
+        // 更新标签配置
+        chart.setOption({
+          series: [{
+            data: this.seriesData.map((item, i) => ({
+              ...item,
+              label: {
+                show: !this.isMouseOver && i === index,
+                formatter: this.labelFormatter,
+                fontSize: 14,
+                fontWeight: 'bold',
+                // color: this.activeFontColor,
+                borderRadius: 4
+              },
+              labelLine: {
+                show: !this.isMouseOver && i === index, // 明确控制显示/隐藏
+                length: 12,
+                length2: 15,
+                lineStyle: {
+                  // color: this.labelLineColor,
+                  // width: this.labelLineWidth
+                }
+              }
+            }))
+          }]
+        }) // 第二个参数设为true，强制覆盖配置
+
+        // 取消上一项的高亮（避免残留）
+        const prevIndex = (index - 1 + this.seriesData.length) % this.seriesData.length;
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: prevIndex
+        })
+      }
+    },
+
+    // 重写initEchart方法
+    initEchart () {
+      const _div = document.getElementById(this.id)
+      setTimeout(() => {
+        let myChart = this.$echarts.init(this.$el)
+
+        // 修改默认配置
+        const option = {
+          ...this.option,
+          tooltip: {
+            show: true, // 启用tooltip
+            trigger: 'item',
+            formatter: '{b}<br/>{c} ({d}%)',
+            backgroundColor: 'rgba(255,255,255,0.95)',
+            textStyle: {
+              color: '#333'
+            },
+            extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.15);'
+          },
+          series: [{
+            ...this.option.series[0],
+            label: {
+              // show: false // 默认不显示标签
+            },
+            labelLine: {
+              // show: false // 默认不显示标签线
+            }
+          }]
+        }
+
+        myChart.setOption(option, true)
+
+        // 窗口大小变化时重绘图表
+        window.addEventListener('resize', myChart.resize)
+
+        // 鼠标悬停事件
+        myChart.on('mouseover', (params) => {
+          this.isMouseOver = true
+          this.hoveredIndex = params.dataIndex
+
+          // 停止轮播
+          this.stopRotation()
+
+          // 隐藏所有标签和标签线
+          this.updateActiveLabel(this.activeLabelIndex)
+
+          // 显示tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: params.dataIndex
+          })
+        })
+
+        // 鼠标移出事件
+        myChart.on('mouseout', () => {
+          this.isMouseOver = false
+          this.hoveredIndex = -1
+
+          // 恢复轮播
+          this.startRotation()
+
+          // 隐藏tooltip
+          myChart.dispatchAction({
+            type: 'hideTip'
+          })
+        })
+
+        // 启动轮播
+        if (this.isRotate && this.seriesData && this.seriesData.length > 1) {
+          this.startRotation()
+        }
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/progressBar/ProgressBar3.vue b/src/components/progressBar/ProgressBar3.vue
new file mode 100644
index 0000000..07fdcb5
--- /dev/null
+++ b/src/components/progressBar/ProgressBar3.vue
@@ -0,0 +1,80 @@
+<!--两行的进度条-->
+<template>
+  <div class="progress-wrap">
+    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
+    <div class="progress-point">
+      <img :src="require('@/assets/images/icon-point.png')" />
+    </div>
+    <!-- 为进度条部分添加类名，方便控制宽度 -->
+    <div class="progress-bars">
+      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
+      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 进度条2
+ * */
+import Progress from './Progress'
+export default {
+  name: 'ProgressBar2',
+  props: {
+    data: Object,
+    labelWidth: String | Number,
+    color1: String,
+    color2: String
+  },
+  components: {
+    Progress
+  },
+  computed: {
+    percentage () {
+      if (this.data.percentage) {
+        return this.data.percentage
+      } else {
+        return this.data.num1 / (this.data.num2) * 100
+      }
+    }
+  },
+  data () {
+    return {
+      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
+      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '../../assets/css/variable.scss';
+  .progress-wrap{
+    padding: .025rem .02rem .027rem .05rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%; // 确保进度条包装器占满容器高度
+    width: 100%;
+  }
+  .progress-wrap .progress-title{
+    text-align: right;
+    color: $progressBarTextColor;
+    font-size: .07rem;
+    padding-top: .01rem;
+    margin-right: .03rem;
+  }
+  // 让进度条部分占据剩余空间
+  .progress-wrap .progress-bars {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .progress-point{
+    padding-right: .02rem;
+  }
+  .progress-point img{
+    width: .04rem;
+    vertical-align: -.01rem;
+  }
+</style>
diff --git a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
index 5332423..be05ecb 100644
--- a/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceCountBar.vue
@@ -21,6 +21,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchDeviceCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -41,14 +42,16 @@
   },
   methods: {
     getData () {
-      fetchDeviceCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.type })
-          this.options.seriesData = data.map(item => { return Number(item.value) })
-          console.log(this.options)
-        }
-      })
+      this.options.xAxisData = mockData.ioT.bar.xData
+      this.options.seriesData = mockData.ioT.bar.yData
+      // fetchDeviceCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.type })
+      //     this.options.seriesData = data.map(item => { return Number(item.value) })
+      //     console.log(this.options)
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/deviceOnline.vue b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
index 9001450..186729d 100644
--- a/src/views/cityConstruction/components/iot/components/deviceOnline.vue
+++ b/src/views/cityConstruction/components/iot/components/deviceOnline.vue
@@ -6,8 +6,8 @@
 <template>
   <single-layout title="设备运行情况">
     <div class="device-online-container" v-if="isShow">
-      <div class="block" v-for="(value,key,index) in data" :key="index">
-        <annular-comp :value="value"/>
+      <div class="block" v-for="(value,index) in data" :key="index">
+        <AnnularComp :value="value"/>
       </div>
     </div>
   </single-layout>
@@ -15,8 +15,9 @@
 
 <script>
 import {fetchDeviceState} from '@/api/cityManage'
-import AnnularComp from '@/components/annularProgress/annularComp'
+import AnnularComp from '../../../../../components/annularProgress/annularComp.vue'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'deviceOnline',
   components: {SingleLayout, AnnularComp},
@@ -25,81 +26,82 @@
       isShow: false,
       data: [
         {
-          name: '井盖状态监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '井盖状态监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '液位监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '液位监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '燃气智能终端', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '燃气智能终端',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '有害气体监测仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '有害气体监测仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '噪声记录仪', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#fc5e5f', '#f90006']
+          'name': '噪声记录仪',
+          'total': 0,
+          'online': 0,
+          'color': ['#fc5e5f', '#f90006']
         },
         {
-          name: '摄像头', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '摄像头',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         },
         {
-          name: '路灯控制器', // 设备名称
-          total: 0, // 设备总数
-          online: 0, // 在线数
-          color: ['#39edfb', '#19ddff']
+          'name': '路灯控制器',
+          'total': 0,
+          'online': 0,
+          'color': ['#39edfb', '#19ddff']
         }
       ]
     }
   },
-  created () {
+  mounted () {
     this.getData()
   },
   methods: {
     getData () {
-      fetchDeviceState().then(response => {
-        if (response.code === 200) {
-          this.data = []
-          var data = response.data
-          var item
-          for (let i = 0; i < 8; i++) {
-            if (i % 2 === 0) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#fc5e5f', '#f90006']
-              }
-            } else if (i % 2 === 1) {
-              item = {
-                name: data[i].type,
-                total: Number(data[i].value),
-                online: Number(data[i].online),
-                color: ['#39edfb', '#19ddff']
-              }
-            }
-            this.data.push(item)
-          }
-          this.isShow = true
-        }
-      })
+      this.data = mockData.ioT.equipmentOperationStatus
+      // fetchDeviceState().then(response => {
+      //   if (response.code === 200) {
+      //     this.data = []
+      //     var data = response.data
+      //     var item
+      //     for (let i = 0; i < 8; i++) {
+      //       if (i % 2 === 0) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#fc5e5f', '#f90006']
+      //         }
+      //       } else if (i % 2 === 1) {
+      //         item = {
+      //           name: data[i].type,
+      //           total: Number(data[i].value),
+      //           online: Number(data[i].online),
+      //           color: ['#39edfb', '#19ddff']
+      //         }
+      //       }
+      //       this.data.push(item)
+      //     }
+      this.isShow = true
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/iot/components/devicePie.vue b/src/views/cityConstruction/components/iot/components/devicePie.vue
index c7e4dec..7e3cb78 100644
--- a/src/views/cityConstruction/components/iot/components/devicePie.vue
+++ b/src/views/cityConstruction/components/iot/components/devicePie.vue
@@ -21,6 +21,7 @@
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -44,11 +45,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.ioT.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/baseDetail.vue b/src/views/cityConstruction/components/plan/components/baseDetail.vue
index c1ce4d3..0e5cc85 100644
--- a/src/views/cityConstruction/components/plan/components/baseDetail.vue
+++ b/src/views/cityConstruction/components/plan/components/baseDetail.vue
@@ -15,6 +15,7 @@
 import ChartLayout from '@/components/layout/chartLayout'
 // import {fetchOccupationByPark} from '@/api/cityManage'
 import ScrollBoard from '@/components/board/ScrollBoard'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'PeopleDetail',
   components: {ScrollBoard, ChartLayout, Corner1, SimplePieChart},
@@ -53,6 +54,7 @@
   },
   methods: {
     getData () {
+      this.boardConfig.data = mockData.base.table
       // fetchOccupationByPark().then(response => {
       //   if (response.code === 200) {
       //     const data = response.data
diff --git a/src/views/cityConstruction/components/plan/components/basePie.vue b/src/views/cityConstruction/components/plan/components/basePie.vue
index 775728a..212ee80 100644
--- a/src/views/cityConstruction/components/plan/components/basePie.vue
+++ b/src/views/cityConstruction/components/plan/components/basePie.vue
@@ -11,6 +11,7 @@
         :width="data.width"
         :height="data.height"
         :roseType="true"
+        :isRotate="true"
         :seriesData="data.data">
       </simple-pie-chart>
     </div>
@@ -18,9 +19,10 @@
 </template>
 
 <script>
-import SimplePieChart from '@/components/pieChart/simplePieChart'
+import SimplePieChart from '@/components/pieChart/simplePieChartCarousel'
 import SingleLayout from '@/components/layout/singleLayout'
 import {fetchCaseByArea} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'devicePie',
   components: {SingleLayout, SimplePieChart},
@@ -52,11 +54,12 @@
   },
   methods: {
     getData () {
-      fetchCaseByArea().then(response => {
-        if (response.code === 200) {
-          this.data.data = response.data
-        }
-      })
+      this.data.data = mockData.base.pie
+      // fetchCaseByArea().then(response => {
+      //   if (response.code === 200) {
+      //     this.data.data = response.data
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/components/ecologyLine.vue b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
index 5b4e66c..c5584c6 100644
--- a/src/views/cityConstruction/components/plan/components/ecologyLine.vue
+++ b/src/views/cityConstruction/components/plan/components/ecologyLine.vue
@@ -22,6 +22,7 @@
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchProjectCountByYear} from '@/api/projectManage'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'EcologyLine',
   components: {SingleLayout, GradientLineChart},
@@ -45,7 +46,9 @@
     this.getData()
   },
   methods: {
-    // getData () {
+    getData () {
+      this.options.xAxisData = mockData.gardens.line.xData
+      this.options.seriesData = mockData.gardens.line.yData
     //   const currentYear = new Date().getFullYear()
     //   const threeYear = currentYear - 2
     //   const yearRange = [threeYear.toString(), (currentYear).toString()]
@@ -66,7 +69,7 @@
     //       this.options.seriesData = dataFilter
     //     }
     //   })
-    // }
+    }
   }
 }
 </script>
diff --git a/src/views/cityConstruction/components/plan/components/landUse.vue b/src/views/cityConstruction/components/plan/components/landUse.vue
index 007316c..2e12697 100644
--- a/src/views/cityConstruction/components/plan/components/landUse.vue
+++ b/src/views/cityConstruction/components/plan/components/landUse.vue
@@ -48,6 +48,7 @@
 import GaugeItem from './gaugeItem'
 import RoundLiquidFill from '@/components/liquidFill/roundLiquidFill'
 import {fetchProjectCount} from '@/api/cityManage'
+import mockData from '../../../../../../static/plan.json'
 export default {
   name: 'LandUse',
   components: {RoundLiquidFill, GaugeItem, ProgressBar2, Legend},
@@ -106,10 +107,15 @@
       this.compTimer = null
     },
     getData () {
+      this.total = mockData.planningLandUse.total
+      this.already = mockData.planningLandUse.already
+      this.percent = mockData.planningLandUse.percent
       if (this.currentComp === 'data1') {
-        this.data = this.data1
+        // this.data = this.data1
+        this.data = mockData.planningLandUse.data1
       } else if (this.currentComp === 'data2') {
-        this.data = this.data2
+        // this.data = this.data2
+        this.data = mockData.planningLandUse.data2
       }
       // fetchProjectCount().then(response => {
       //   if (response.code === 200) {
diff --git a/src/views/cityConstruction/components/plan/ecology.vue b/src/views/cityConstruction/components/plan/ecology.vue
index e4c4f49..f97a6af 100644
--- a/src/views/cityConstruction/components/plan/ecology.vue
+++ b/src/views/cityConstruction/components/plan/ecology.vue
@@ -27,6 +27,7 @@
 import Corner1 from '@/components/corner/Corner1'
 import SimpleBlock from '@/components/block/simpleBlock'
 import EcologyLine from './components/ecologyLine'
+import mockData from '../../../../../static/plan.json'
 // import {fetchInfrastructure} from '@/api/jgzl'
 export default {
   name: 'Ecology',
@@ -46,9 +47,13 @@
   },
   methods: {
     getData () {
-      for (const item of Object.keys(this.data)) {
-        this.getItemData(item)
-      }
+      this.data.csgy.value = mockData.gardens.count.park
+      this.data.jgzl.value = mockData.gardens.count.UFA
+      this.data.cscl.value = mockData.gardens.count.maintenance
+      this.data.stgy.value = mockData.gardens.count.passengerFlow
+      // for (const item of Object.keys(this.data)) {
+      //   this.getItemData(item)
+      // }
     },
     // item，传参数
     getItemData (item) {
diff --git a/src/views/cityConstruction/components/plan/pipeCountBar.vue b/src/views/cityConstruction/components/plan/pipeCountBar.vue
index 33d53de..58c734a 100644
--- a/src/views/cityConstruction/components/plan/pipeCountBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeCountBar.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import ChartLayout from '@/components/layout/chartLayout'
 import {fetchPipeCount} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeCountBar',
   components: {ChartLayout, ColorfulBarChart},
@@ -42,13 +43,16 @@
   },
   methods: {
     getData () {
-      fetchPipeCount().then(response => {
-        if (response.code === 200) {
-          const data = response.data
-          this.options.xAxisData = data.map(item => { return item.name })
-          this.options.seriesData = data.map(item => { return item.value })
-        }
-      })
+      this.options.xAxisData = mockData.undergroundPipelines.chart2.xData
+      this.options.seriesData = mockData.undergroundPipelines.chart2.yData
+      this.options.unit = mockData.undergroundPipelines.chart2.yUnit
+      // fetchPipeCount().then(response => {
+      //   if (response.code === 200) {
+      //     const data = response.data
+      //     this.options.xAxisData = data.map(item => { return item.name })
+      //     this.options.seriesData = data.map(item => { return item.value })
+      //   }
+      // })
     }
   }
 }
diff --git a/src/views/cityConstruction/components/plan/pipeLengthBar.vue b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
index 889b210..a5de0a0 100644
--- a/src/views/cityConstruction/components/plan/pipeLengthBar.vue
+++ b/src/views/cityConstruction/components/plan/pipeLengthBar.vue
@@ -9,13 +9,13 @@
     <!--<div style="width: 100%;height:100%;padding:0.1rem">-->
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data1" :key="index">
+        <div class="progress-container" v-for="(value,index) in data1" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
       <div class="block" style="width: 50%;">
         <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
-        <div v-for="(value,index) in data2" :key="index">
+        <div class="progress-container" v-for="(value,index) in data2" :key="index">
           <ProgressBar2 :data="value" :labelWidth=".4" />
         </div>
       </div>
@@ -26,8 +26,9 @@
 
 <script>
 import Legend from '@/components/legend/Legend'
-import ProgressBar2 from '@/components/progressBar/ProgressBar2'
+import ProgressBar2 from '@/components/progressBar/ProgressBar3'
 import {fetchPipeLength} from '@/api/cityManage'
+import mockData from '../../../../../static/plan.json'
 export default {
   name: 'pipeLengthBar',
   components: {ProgressBar2, Legend},
@@ -50,6 +51,18 @@
   },
   methods: {
     getData () {
+      this.data1 = mockData.undergroundPipelines.chart1.data1.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
+      this.data2 = mockData.undergroundPipelines.chart1.data2.map(item => {
+        return {
+          ...item,
+          percentage: 100 * item.num1 / item.num2
+        }
+      })
       // fetchPipeLength().then(response => {
       //   if (response.code === 200) {
       //     const dataFilter = []
@@ -88,7 +101,15 @@
     margin: 0.04rem;
     /*padding:0.1rem;*/
     .block{
-
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      .progress-container {
+        width: 100%;
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
     }
   }
 </style>
diff --git a/src/views/cityManage/components/contradiction/components/contradictionLine.vue b/src/views/cityManage/components/contradiction/components/contradictionLine.vue
index a421384..5641801 100644
--- a/src/views/cityManage/components/contradiction/components/contradictionLine.vue
+++ b/src/views/cityManage/components/contradiction/components/contradictionLine.vue
@@ -22,6 +22,7 @@
 import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
 import GradientLineChart from '@/components/lineChart/gradientLineChart'
 import {fetchCaseByDay} from '@/api/cityManage'
+import mockData from '../../../../../../static/city.json'
 import SingleLayout from '@/components/layout/singleLayout'
 export default {
   name: 'contradictionLine',
@@ -60,6 +61,8 @@
       //     ]
       //   }
       // })
+      this.options.seriesData = mockData.diversifiedSolutions.contradictionTrends.yData
+      this.options.xAxisData = mockData.diversifiedSolutions.contradictionTrends.xData
     }
   }
 }
diff --git a/src/views/cityManage/components/contradiction/components/contradictionPie.vue b/src/views/cityManage/components/contradiction/components/contradictionPie.vue
index 105c123..48eeeae 100644
--- a/src/views/cityManage/components/contradiction/components/contradictionPie.vue
+++ b/src/views/cityManage/components/contradiction/components/contradictionPie.vue
@@ -20,6 +20,7 @@
 <script>
 import SimplePieChart from '@/components/pieChart/simplePieChart'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../../static/city.json'
 export default {
   name: 'contradictionPie',
   components: {SingleLayout, SimplePieChart},
@@ -44,7 +45,7 @@
   },
   methods: {
     getData () {
-
+      this.data.data = mockData.diversifiedSolutions.contradictionPercent
     }
   }
 }
diff --git a/src/views/cityManage/components/wisdomTraffic/trafficBase.vue b/src/views/cityManage/components/wisdomTraffic/trafficBase.vue
index b1307b4..e6740c1 100644
--- a/src/views/cityManage/components/wisdomTraffic/trafficBase.vue
+++ b/src/views/cityManage/components/wisdomTraffic/trafficBase.vue
@@ -19,6 +19,7 @@
 <script>
 import SimpleBlock from '@/components/block/simpleBlock'
 import SingleLayout from '@/components/layout/singleLayout'
+import mockData from '../../../../../static/plan.json'
 // import {fetchInfrastructure} from '@/api/jgzl'
 export default {
   name: 'TrafficBase',
@@ -40,9 +41,15 @@
   },
   methods: {
     getData () {
-      for (const item of Object.keys(this.data)) {
-        this.getItemData(item)
-      }
+      // for (const item of Object.keys(this.data)) {
+      //   this.getItemData(item)
+      // }
+      this.data.jgzl.value = mockData.traffic.intersection
+      this.data.cscl.value = mockData.traffic.bus
+      this.data.stgy.value = mockData.traffic.bridge
+      this.data.csgy.value = mockData.traffic.tunnel
+      this.data.hp.value = mockData.traffic.gas
+      this.data.hl.value = mockData.traffic.hub
     },
     // item，传参数
     getItemData (item) {
diff --git a/src/views/header/header1.vue b/src/views/header/header1.vue
index b7cb49e..6d22553 100644
--- a/src/views/header/header1.vue
+++ b/src/views/header/header1.vue
@@ -63,6 +63,8 @@
       topMenuRight: [
         { label: '社会民生', id: 3, component: 'socialLivelihood' },
         { label: '产业经济', id: 4, component: 'industrialEconomy' }
+        // { label: '交通概况', id: 5, component: 'socialLivelihood' },
+        // { label: '城管执法', id: 6, component: 'industrialEconomy' }
       ]
     }
   },
diff --git a/static/city.json b/static/city.json
index 17251be..ff86bda 100644
--- a/static/city.json
+++ b/static/city.json
@@ -41,7 +41,7 @@
     "gridCount": 105
   },
 
-  
+
   "adolescentDesc": "青少年犯罪与校园安全",
   "adolescent": {
     "count": [
@@ -62,16 +62,29 @@
       {"value": 8.7, "name": "卫生事件"},
       {"value": 4.35, "name": "消防事件"},
       {"value": 34.78, "name": "其他事件"}
+    ]
+  },
+
+
+  "diversifiedSolutionsDesc": "多元化解",
+  "diversifiedSolutions": {
+    "count": [
+      { "name": "已处理数", "num": 182 },
+      { "name": "矛盾事件总数", "num": 217 },
+      { "name": "处理率", "num": "83.9%" }
     ],
-
-
-    "diversifiedSolutionsDesc": "多元化解",
-    "diversifiedSolutions": {
-      "count": [
-        { "name": "已处理数", "num": 182 },
-        { "name": "矛盾事件总数", "num": 217 },
-        { "name": "处理率", "num": "83.9%" }
+    "contradictionTrends": {
+      "xData": ["1月", "2月", "3月", "4月"],
+      "yData": [
+        {"name": "案件总数", "data": [11,20,8,12], "color": "255,45,85"},
+        {"name": "处理数", "data": [9,15,7,10], "color": "0,144,255"}
       ]
-    }
+    },
+    "contradictionPercent": [
+      {"value": 34, "name": "民事纠纷"},
+      {"value": 5, "name": "行政纠纷"},
+      {"value": 1, "name": "涉法纠纷"},
+      {"value": 11, "name": "其他纠纷"}
+    ]
   }
 }
diff --git a/static/plan.json b/static/plan.json
new file mode 100644
index 0000000..4862f16
--- /dev/null
+++ b/static/plan.json
@@ -0,0 +1,164 @@
+{
+  "title": "=======================规划建设==============================",
+  "gardensDesc": "园林建设",
+  "gardens": {
+    "count": {
+      "park": 175481,
+      "UFA": 350,
+      "maintenance": 148729,
+      "passengerFlow": 152
+    },
+    "line": {
+      "xData": ["2016", "2017", "2018","2019","2020"],
+      "yData": [{"name": "客流量", "data": [ 142, 155, 124, 166, 150 ], "color": "255,45,85"}]
+    }
+  },
+
+
+  "baseDesc": "基础建设",
+  "base": {
+    "table": [
+      ["道路设施", "564", "183", "23"],
+      ["轨道设施", "132", "78", "12"],
+      ["行政设施", "51", "30", "2"],
+      ["教育设施", "373", "182", "41"],
+      ["金融邮电设施", "15", "2", "0"],
+      ["商业设施", "31", "8", "2"],
+      ["社会福利设施", "56", "11", "2"],
+      ["社会服务设施", "20", "4", "1"],
+      ["市政设施", "137", "101", "57"],
+      ["文化设施", "87", "61", "15"],
+      ["医疗设施", "20", "5", "0"]
+    ],
+    "pie": [
+      {"value": 183, "name": "道路设施"},
+      {"value": 78, "name": "轨道设施"},
+      {"value": 30, "name": "行政设施"},
+      {"value": 182, "name": "教育设施"},
+      {"value": 2, "name": "金融邮电设施"},
+      {"value": 8, "name": "商业设施"},
+      {"value": 4, "name": "社会福利设施"},
+      {"value": 4, "name": "社会服务设施"},
+      {"value": 101, "name": "市政设施"},
+      {"value": 61, "name": "文化设施"},
+      {"value": 5, "name": "医疗设施"}
+    ]
+  },
+
+
+  "trafficDesc": "交通基本设施",
+  "traffic": {
+    "intersection": 78,
+    "bus": 76,
+    "bridge": 12,
+    "tunnel": 4,
+    "gas": 6,
+    "hub": 7
+  },
+
+
+  "planningLandUseDesc": "规划用地",
+  "planningLandUse": {
+    "total": 7702.87,
+    "already": 2397.63,
+    "percent": [0.31],
+    "data1": [
+      {"title": "居住用地", "data": {"total": "1038.28", "already": 568.14, "rate": 55}},
+      {"title": "物流仓库用地", "data": {"total": "121.82", "already": 91.08, "rate": 75}},
+      {"title": "公共设施用地", "data": {"total": "813.13", "already": 672.01, "rate": 83}},
+      {"title": "绿地与广场用地", "data": {"total": "1050.38", "already": 432.79, "rate": 41}},
+      {"title": "城市建设用地", "data": {"total": "4998.89", "already": 2853.39, "rate": 57}},
+      {"title": "道路交通用地", "data": {"total": "133.84", "already": 80.22, "rate": 60}}
+    ],
+    "data2": [
+      {"title": "公共管理与服务设施用地", "data": {"total": "813.13", "already": 276.54, "rate": 34}},
+      {"title": "商业服务设施用地", "data": {"total": "540.05", "already": 311.14, "rate": 58}},
+      {"title": "发展备用地", "data": {"total": "189.16", "already": 81.12, "rate": 43}},
+      {"title": "铁路用地", "data": {"total": "29.33", "already": 21.98, "rate": 72}},
+      {"title": "公路用地", "data": {"total": "0", "already": 0, "rate": 0}},
+      {"title": "非建设用地", "data": {"total": "2504.64", "already": 1695.46, "rate": 68}}
+    ]
+  },
+
+
+  "undergroundPipelinesDesc": "地下管线",
+  "undergroundPipelines": {
+    "chart1": {
+      "data1": [
+        {"title": "雨水管线", "num2": 3786, "num1": 1582},
+        {"title": "污水管线", "num2": 3421, "num1": 1321},
+        {"title": "给水管线", "num2": 2109, "num1": 238},
+        {"title": "燃气管线", "num2": 2578, "num1": 306},
+        {"title": "通讯管线", "num2": 2311, "num1": 334}
+      ],
+      "data2": [
+        {"title": "其他", "num2": 4078, "num1": 550}
+      ]
+    },
+    "chart2": {
+      "xData": ["给水", "雨水", "燃气", "通讯", "排污", "其他"],
+      "yData": [238, 1582, 306, 334, 1321, 550],
+      "yUnit": "个"
+    },
+    "chart3": "---------管线附属物接口有数据，这里不进行配置---------"
+  },
+
+
+  "ioTDesc": "物联网建设",
+  "ioT": {
+    "bar": {
+      "xData": ["井盖状态监测仪", "液位检测仪", "燃气智能监测终端", "噪声记录仪", "有害气体监测仪", "摄像头", "路灯控制器"],
+      "yData": [1267, 320, 175, 408, 1, 3031, 1227]
+    },
+    "equipmentOperationStatusDesc": "设备运行情况",
+    "equipmentOperationStatus": [
+        {
+          "name": "井盖状态监测仪",
+          "total": 1267,
+          "online": 1267,
+          "color": ["#39edfb", "#19ddff"]
+        },
+        {
+          "name": "液位监测仪",
+          "total": 320,
+          "online": 320,
+          "color": ["#fc5e5f", "#f90006"]
+        },
+        {
+          "name": "燃气智能终端",
+          "total": 175,
+          "online": 175,
+          "color": ["#39edfb", "#19ddff"]
+        },
+        {
+          "name": "有害气体监测仪",
+          "total": 1,
+          "online": 1,
+          "color": ["#39edfb", "#19ddff"]
+        },
+        {
+          "name": "噪声记录仪",
+          "total": 408,
+          "online": 408,
+          "color": ["#fc5e5f", "#f90006"]
+        },
+        {
+          "name": "摄像头",
+          "total": 3031,
+          "online": 3031,
+          "color": ["#39edfb", "#19ddff"]
+        },
+        {
+          "name": "路灯控制器",
+          "total": 1227,
+          "online": 1227,
+          "color": ["#39edfb", "#19ddff"]
+        }
+      ],
+    "pie": [
+      {"value": 2671, "name": "潭东镇"},
+      {"value": 1823, "name": "潭口镇"},
+      {"value": 1935, "name": "高校园区"}
+    ]
+  }
+}