新增大屏饼图组件

2024-03-22 18:34:38 +08:00
parent 10b43594ca
commit bffb6d14e0
24 changed files with 815 additions and 669 deletions
--- a/components/AiEchart/echartTpls.js
+++ b/components/AiEchart/echartTpls.js
@@ -1,35 +1,7 @@
-import barChart1 from "./template/bar/barChart1"
-import barChart2 from "./template/bar/barChart2"
-import barChart3 from "./template/bar/barChart3"
-import barChart5 from "./template/bar/barChart5"
-import barChart7 from "./template/bar/barChart7"
-import barChart8 from "./template/bar/barChart8"
-import barChart9 from "./template/bar/barChart9"
-
-import lineChart1 from "./template/line/lineChart1"
-import lineChart2 from "./template/line/lineChart2"
-import lineChart3 from "./template/line/lineChart3"
-import lineChart4 from "./template/line/lineChart4"
-import lineChart5 from "./template/line/lineChart5"
-
-import pieChart1 from "./template/pie/pieChart1"
-import pieChart2 from "./template/pie/pieChart2"
-import pieChart3 from "./template/pie/pieChart3"
+import pie from "./template/pie"
+import line from "./template/line";
+import bar from "./template/bar";

 export default {
-  barChart1,
-  barChart2,
-  barChart3,
-  barChart5,
-  barChart7,
-  barChart8,
-  barChart9,
-  lineChart1,
-  lineChart2,
-  lineChart3,
-  lineChart4,
-  lineChart5,
-  pieChart1,
-  pieChart2,
-  pieChart3
+  ...bar, ...line, ...pie
 }
--- a/components/AiEchart/template/bar.js
+++ b/components/AiEchart/template/bar.js
@@ -0,0 +1,270 @@
+import tools from "./tools";
+
+export const barChart1 = {
+  yAxis: {
+    nameGap: 23,
+    minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#C3C4C4'},
+    axisPointer: {show: false}
+  },
+  axisPointer: {
+    type: 'shadow',
+    triggerTooltip: false,
+    shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
+  },
+  color: [
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        {offset: 0, color: 'rgba(0, 249, 255, 1)'},
+        {offset: 1, color: 'rgba(0, 249, 255, 0.4)'}
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        {offset: 0, color: 'rgba(236, 102, 102, 1)'},
+        {offset: 1, color: 'rgba(236, 102, 102, 0.4)'}
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        {offset: 0, color: 'rgba(252, 59, 255, 1)'},
+        {offset: 1, color: 'rgba(252, 59, 255, 0.4)'}
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        {offset: 0, color: 'rgba(24, 144, 255, 1)'},
+        {offset: 1, color: 'rgba(24, 144, 255, 0.4)'}
+      ]
+    },
+    {
+      type: 'linear',
+      x: 0,
+      x2: 0,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        {offset: 0, color: 'rgba(149, 255, 68, 1)'},
+        {offset: 1, color: 'rgba(149, 255, 68, 0.4)'}
+      ]
+    }
+  ],
+  daemon: {
+    type: 'bar',
+    barWidth: 20,
+    barCategoryGap: 40,
+    itemStyle: {}
+  }
+}
+export const barChart2 = {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+    itemWidth: 16, itemHeight: 5
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'}
+  },
+  yAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff'}, axisPointer: {show: false}
+  },
+  axisPointer: {
+    type: 'shadow', show: true,
+    shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
+  },
+  daemon: {type: 'bar', barWidth: 2, barGap: 4}
+}
+export const barChart3 = {
+  legend: {show: false},
+  yAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff'}, axisPointer: {show: false}
+  },
+  axisPointer: {
+    type: 'none', show: true, triggerTooltip: false,
+  },
+  daemon: {
+    type: 'bar', label: {show: true, position: 'insideBottom', color: '#fff'},
+    barWidth: 24,
+    showBackground: true,
+    // backgroundStyle: {
+    //   color: 'rgba(123, 165, 255, .2)'
+    // },
+    emphasis: {
+      itemStyle: {
+        color: {
+          type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
+          // colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}]
+        }
+      }
+    }
+  }
+}
+export const barChart5 = {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+    itemWidth: 16, itemHeight: 5
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'}
+  },
+  yAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff'}, axisPointer: {show: false}
+  },
+  axisPointer: {
+    type: 'none', show: true, triggerTooltip: false,
+  },
+}
+export const barChart7 = {
+  legend: {show: false},
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
+    axisPointer: {
+      type: 'shadow', shadowStyle: {color: 'rgba(46, 153, 255, .2)'},
+      label: {show: true, backgroundColor: 'transparent', fontSize: 14, margin: 1, color: '#28FBFF'}
+    }
+  },
+  yAxis: {
+    type: 'category',
+    axisLabel: {color: '#fff', fontSize: 14},
+    axisTick: {show: false},
+    axisLine: {show: false},
+  },
+  xAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff', fontSize: 14},
+  },
+  daemon: {
+    type: 'bar', barWidth: 10, barGap: '40%',
+    label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14},
+    showBackground: true,
+    backgroundStyle: {
+      color: 'rgba(123, 165, 255, .2)'
+    },
+    itemStyle: {
+      color: {
+        type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
+        colorStops: [{offset: 0, color: 'rgba(37, 143, 255,.5)'}, {offset: 1, color: 'rgba(43, 199, 255, 1)'}]
+      }
+    },
+    emphasis: {
+      label: {color: '#28FBFF', position: 'right'},
+      itemStyle: {
+        color: {
+          type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
+          colorStops: [{offset: 0, color: 'rgba(37, 255, 246, 0.5)'}, {offset: 1, color: '#28FBFF'}]
+        }
+      }
+    }
+  }
+}
+export const barChart8 = {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+    itemWidth: 16, itemHeight: 5
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'}
+  },
+  yAxis: {
+    type: 'category',
+    axisLabel: {color: '#fff', fontSize: 14},
+    axisLine: {lineStyle: {color: 'rgba(255,255,255,.5)'}},
+    axisPointer: {show: false},
+  },
+  xAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff', fontSize: 14},
+  },
+  daemon: {
+    type: 'bar', barWidth: 10,
+    itemStyle: {
+      color: ({color}) => ({
+        type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
+        colorStops: [{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, {offset: 1, color}]
+      })
+    },
+  }
+}
+export const barChart9 = {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+    itemWidth: 16, itemHeight: 5
+  },
+  grid: {
+    left: 80, right: 0
+  },
+  tooltip: {
+    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
+  },
+  yAxis: {
+    type: 'category',
+    axisLabel: {color: '#fff', fontSize: 14, margin: 23},
+    axisTick: {show: false},
+    axisLine: {show: false},
+  },
+  xAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff', fontSize: 14},
+  },
+  daemon: {
+    type: 'bar', barWidth: 10, barGap: '40%', stack: 'stack',
+    showBackground: true,
+    backgroundStyle: {color: 'rgba(123, 165, 255, .2)'}
+  }
+}
+
+export default {
+  barChart1,
+  barChart2,
+  barChart3,
+  barChart5,
+  barChart7,
+  barChart8,
+  barChart9,
+}
--- a/components/AiEchart/template/bar/barChart1.js
+++ b/components/AiEchart/template/bar/barChart1.js
@@ -1,77 +0,0 @@
-export default {
-  yAxis: {
-    nameGap: 23,
-    minInterval: 1,
-    splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
-    axisLabel: { color: '#C3C4C4' },
-    axisPointer: { show: false }
-  },
-  axisPointer: {
-    type: 'shadow',
-    triggerTooltip: false,
-    shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
-  },
-  color: [
-    {
-      type: 'linear',
-      x: 0,
-      x2: 0,
-      y: 0,
-      y2: 1,
-      colorStops: [
-        { offset: 0, color: 'rgba(0, 249, 255, 1)' },
-        { offset: 1, color: 'rgba(0, 249, 255, 0.4)' }
-      ]
-    },
-    {
-      type: 'linear',
-      x: 0,
-      x2: 0,
-      y: 0,
-      y2: 1,
-      colorStops: [
-        { offset: 0, color: 'rgba(236, 102, 102, 1)' },
-        { offset: 1, color: 'rgba(236, 102, 102, 0.4)' }
-      ]
-    },
-    {
-      type: 'linear',
-      x: 0,
-      x2: 0,
-      y: 0,
-      y2: 1,
-      colorStops: [
-        { offset: 0, color: 'rgba(252, 59, 255, 1)' },
-        { offset: 1, color: 'rgba(252, 59, 255, 0.4)' }
-      ]
-    },
-    {
-      type: 'linear',
-      x: 0,
-      x2: 0,
-      y: 0,
-      y2: 1,
-      colorStops: [
-        { offset: 0, color: 'rgba(24, 144, 255, 1)' },
-        { offset: 1, color: 'rgba(24, 144, 255, 0.4)' }
-      ]
-    },
-    {
-      type: 'linear',
-      x: 0,
-      x2: 0,
-      y: 0,
-      y2: 1,
-      colorStops: [
-        { offset: 0, color: 'rgba(149, 255, 68, 1)' },
-        { offset: 1, color: 'rgba(149, 255, 68, 0.4)' }
-      ]
-    }
-  ],
-  daemon: {
-    type: 'bar',
-    barWidth: 20,
-    barCategoryGap: 40,
-    itemStyle: {}
-  }
-}
--- a/components/AiEchart/template/bar/barChart2.js
+++ b/components/AiEchart/template/bar/barChart2.js
@@ -1,24 +0,0 @@
-export default {
-  legend: {
-    right: 0, itemGap: 16,
-    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
-    itemWidth: 16, itemHeight: 5
-  },
-  grid: {
-    left: 50, right: 0
-  },
-  tooltip: {
-    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
-    textStyle: {color: '#fff'}
-  },
-  yAxis: {
-    nameGap: 23, minInterval: 1,
-    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
-    axisLabel: {color: '#fff'}, axisPointer: {show: false}
-  },
-  axisPointer: {
-    type: 'shadow', show: true,
-    shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
-  },
-  daemon: {type: 'bar', barWidth: 2, barGap: 4}
-}
--- a/components/AiEchart/template/bar/barChart3.js
+++ b/components/AiEchart/template/bar/barChart3.js
@@ -1,27 +0,0 @@
-export default {
-  legend: {show: false},
-  yAxis: {
-    nameGap: 23, minInterval: 1,
-    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
-    axisLabel: {color: '#fff'}, axisPointer: {show: false}
-  },
-  axisPointer: {
-    type: 'none', show: true, triggerTooltip: false,
-  },
-  daemon: {
-    type: 'bar', label: {show: true, position: 'insideBottom', color: '#fff'},
-    barWidth: 24,
-    showBackground: true,
-    // backgroundStyle: {
-    //   color: 'rgba(123, 165, 255, .2)'
-    // },
-    emphasis: {
-      itemStyle: {
-        color: {
-          type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
-          // colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}]
-        }
-      }
-    }
-  }
-}
--- a/components/AiEchart/template/bar/barChart5.js
+++ b/components/AiEchart/template/bar/barChart5.js
@@ -1,22 +0,0 @@
-export default {
-  legend: {
-    right: 0, itemGap: 16,
-    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
-    itemWidth: 16, itemHeight: 5
-  },
-  grid: {
-    left: 50, right: 0
-  },
-  tooltip: {
-    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
-    textStyle: {color: '#fff'}
-  },
-  yAxis: {
-    nameGap: 23, minInterval: 1,
-    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
-    axisLabel: {color: '#fff'}, axisPointer: {show: false}
-  },
-  axisPointer: {
-    type: 'none', show: true, triggerTooltip: false,
-  },
-}
--- a/components/AiEchart/template/bar/barChart7.js
+++ b/components/AiEchart/template/bar/barChart7.js
@@ -1,45 +0,0 @@
-export default {
-  legend: {show: false},
-  tooltip: {
-    trigger: 'axis',
-    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
-    axisPointer: {
-      type: 'shadow', shadowStyle: {color: 'rgba(46, 153, 255, .2)'},
-      label: {show: true, backgroundColor: 'transparent', fontSize: 14, margin: 1, color: '#28FBFF'}
-    }
-  },
-  yAxis: {
-    type: 'category',
-    axisLabel: {color: '#fff', fontSize: 14},
-    axisTick: {show: false},
-    axisLine: {show: false},
-  },
-  xAxis: {
-    nameGap: 23, minInterval: 1,
-    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
-    axisLabel: {color: '#fff', fontSize: 14},
-  },
-  daemon: {
-    type: 'bar', barWidth: 10, barGap: '40%',
-    label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14},
-    showBackground: true,
-    backgroundStyle: {
-      color: 'rgba(123, 165, 255, .2)'
-    },
-    itemStyle: {
-      color: {
-        type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
-        colorStops: [{offset: 0, color: 'rgba(37, 143, 255,.5)'}, {offset: 1, color: 'rgba(43, 199, 255, 1)'}]
-      }
-    },
-    emphasis: {
-      label: {color: '#28FBFF', position: 'right'},
-      itemStyle: {
-        color: {
-          type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
-          colorStops: [{offset: 0, color: 'rgba(37, 255, 246, 0.5)'}, {offset: 1, color: '#28FBFF'}]
-        }
-      }
-    }
-  }
-}
--- a/components/AiEchart/template/bar/barChart8.js
+++ b/components/AiEchart/template/bar/barChart8.js
@@ -1,36 +0,0 @@
-import tools from "../tools";
-
-export default {
-  legend: {
-    right: 0, itemGap: 16,
-    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
-    itemWidth: 16, itemHeight: 5
-  },
-  grid: {
-    left: 50, right: 0
-  },
-  tooltip: {
-    trigger: 'axis',
-    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'}
-  },
-  yAxis: {
-    type: 'category',
-    axisLabel: {color: '#fff', fontSize: 14},
-    axisLine: {lineStyle: {color: 'rgba(255,255,255,.5)'}},
-    axisPointer: {show: false},
-  },
-  xAxis: {
-    nameGap: 23, minInterval: 1,
-    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
-    axisLabel: {color: '#fff', fontSize: 14},
-  },
-  daemon: {
-    type: 'bar', barWidth: 10,
-    itemStyle: {
-      color: ({color}) => ({
-        type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
-        colorStops: [{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, {offset: 1, color}]
-      })
-    },
-  }
-}
--- a/components/AiEchart/template/bar/barChart9.js
+++ b/components/AiEchart/template/bar/barChart9.js
@@ -1,29 +0,0 @@
-export default {
-  legend: {
-    right: 0, itemGap: 16,
-    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
-    itemWidth: 16, itemHeight: 5
-  },
-  grid: {
-    left: 80, right: 0
-  },
-  tooltip: {
-    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
-  },
-  yAxis: {
-    type: 'category',
-    axisLabel: {color: '#fff', fontSize: 14, margin: 23},
-    axisTick: {show: false},
-    axisLine: {show: false},
-  },
-  xAxis: {
-    nameGap: 23, minInterval: 1,
-    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
-    axisLabel: {color: '#fff', fontSize: 14},
-  },
-  daemon: {
-    type: 'bar', barWidth: 10, barGap: '40%', stack: 'stack',
-    showBackground: true,
-    backgroundStyle: {color: 'rgba(123, 165, 255, .2)'}
-  }
-}
--- a/components/AiEchart/template/line.js
+++ b/components/AiEchart/template/line.js
@@ -0,0 +1,148 @@
+import tools from "./tools";
+
+export const lineChart1 = {
+  legend: { show: false },
+  grid: {
+    left: 50,
+    right: 0
+  },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(14, 51, 111, 0.9)',
+    borderColor: '#1A6ABC',
+    textStyle: { color: '#fff' },
+    axisPointer: { type: 'cross' }
+  },
+  yAxis: {
+    nameGap: 23,
+    minInterval: 1,
+    splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
+    axisLabel: { color: '#fff' },
+    axisPointer: { snap: true }
+  },
+  daemon: (color) => ({
+    showSymbol: false,
+    smooth: true,
+    lineStyle: {
+      shadowBlur: 4,
+      shadowOffsetY: 2,
+      width: 2
+    },
+    areaStyle: {
+      color: {
+        type: 'linear',
+        x: 0,
+        x2: 0,
+        y: 0,
+        y2: 1,
+        colorStops: [
+          { offset: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.3) },
+          { offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.1) }
+        ]
+      }
+    }
+  })
+};
+export const lineChart2 = {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'}
+  },
+  daemon: color => ({
+    showSymbol: false,
+    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
+    areaStyle: {
+      color: {
+        type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
+          {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
+          {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
+        ]
+      }
+    }
+  })
+};
+export const lineChart3 = {
+  // legend: {
+  //   right: 0, itemGap: 16,
+  //   textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+  // },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'}
+  },
+  daemon: {
+    smooth: true,
+    lineStyle: {
+      shadowBlur: 1,
+      shadowOffsetY: 2,
+      width: 3
+    }
+  }
+};
+export const lineChart4 = {
+  legend: {
+    right: 0, itemGap: 16,
+    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
+  },
+  grid: {
+    left: 50, right: 0
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'}
+  },
+  daemon: {
+    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
+    emphasis: {
+      focus: 'self'
+    }
+  }
+};
+export const lineChart5 =  {
+  legend: {show: false},
+  grid: {
+    left: 50, right: 0, top: 10, bottom: 30
+  },
+  tooltip: {
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    textStyle: {color: '#fff'},
+    axisPointer: {type: 'cross'}
+  },
+  yAxis: {
+    nameGap: 23, minInterval: 1,
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff'},
+    axisPointer: {snap: true}
+  },
+  daemon: color => ({
+    showSymbol: false, smooth: true,
+    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
+    areaStyle: {
+      color: {
+        type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
+          {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
+          {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
+        ]
+      }
+    }
+  })
+};
+
+
+export default {
+  lineChart1,
+  lineChart2,
+  lineChart3,
+  lineChart4,
+  lineChart5,
+}
--- a/components/AiEchart/template/line/lineChart1.js
+++ b/components/AiEchart/template/line/lineChart1.js
@@ -1,45 +0,0 @@
-import tools from '../tools';
-
-export default {
-	legend: { show: false },
-	grid: {
-		left: 50,
-		right: 0
-	},
-	tooltip: {
-		trigger: 'axis',
-		backgroundColor: 'rgba(14, 51, 111, 0.9)',
-		borderColor: '#1A6ABC',
-		textStyle: { color: '#fff' },
-		axisPointer: { type: 'cross' }
-	},
-	yAxis: {
-		nameGap: 23,
-		minInterval: 1,
-		splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
-		axisLabel: { color: '#fff' },
-		axisPointer: { snap: true }
-	},
-	daemon: (color) => ({
-		showSymbol: false,
-    smooth: true,
-		lineStyle: {
-			shadowBlur: 4,
-			shadowOffsetY: 2,
-			width: 2
-		},
-		areaStyle: {
-			color: {
-				type: 'linear',
-				x: 0,
-				x2: 0,
-				y: 0,
-				y2: 1,
-				colorStops: [
-					{ offset: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.3) },
-					{ offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.1) }
-				]
-			}
-		}
-	})
-};
--- a/components/AiEchart/template/line/lineChart2.js
+++ b/components/AiEchart/template/line/lineChart2.js
@@ -1,27 +0,0 @@
-import tools from "../tools";
-
-export default {
-  legend: {
-    right: 0, itemGap: 16,
-    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
-  },
-  grid: {
-    left: 50, right: 0
-  },
-  tooltip: {
-    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
-    textStyle: {color: '#fff'}
-  },
-  daemon: color => ({
-    showSymbol: false,
-    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
-    areaStyle: {
-      color: {
-        type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
-          {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
-          {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
-        ]
-      }
-    }
-  })
-}
--- a/components/AiEchart/template/line/lineChart3.js
+++ b/components/AiEchart/template/line/lineChart3.js
@@ -1,21 +0,0 @@
-export default {
-  // legend: {
-  //   right: 0, itemGap: 16,
-  //   textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
-  // },
-  grid: {
-    left: 50, right: 0
-  },
-  tooltip: {
-    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
-    textStyle: {color: '#fff'}
-  },
-  daemon: {
-    smooth: true,
-    lineStyle: {
-      shadowBlur: 1,
-      shadowOffsetY: 2,
-      width: 3
-    }
-  }
-}
--- a/components/AiEchart/template/line/lineChart4.js
+++ b/components/AiEchart/template/line/lineChart4.js
@@ -1,19 +0,0 @@
-export default {
-  legend: {
-    right: 0, itemGap: 16,
-    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
-  },
-  grid: {
-    left: 50, right: 0
-  },
-  tooltip: {
-    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
-    textStyle: {color: '#fff'}
-  },
-  daemon: {
-    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
-    emphasis: {
-      focus: 'self'
-    }
-  }
-}
--- a/components/AiEchart/template/line/lineChart5.js
+++ b/components/AiEchart/template/line/lineChart5.js
@@ -1,31 +0,0 @@
-import tools from "../tools";
-
-export default {
-  legend: {show: false},
-  grid: {
-    left: 50, right: 0, top: 10, bottom: 30
-  },
-  tooltip: {
-    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
-    textStyle: {color: '#fff'},
-    axisPointer: {type: 'cross'}
-  },
-  yAxis: {
-    nameGap: 23, minInterval: 1,
-    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
-    axisLabel: {color: '#fff'},
-    axisPointer: {snap: true}
-  },
-  daemon: color => ({
-    showSymbol: false, smooth: true,
-    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
-    areaStyle: {
-      color: {
-        type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
-          {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
-          {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
-        ]
-      }
-    }
-  })
-}
--- a/components/AiEchart/template/pie.js
+++ b/components/AiEchart/template/pie.js
@@ -0,0 +1,225 @@
+export const pieChart1 = {
+  legend: {
+    right: 20,
+    top: 'middle',
+    orient: 'vertical',
+    textStyle: {color: "#fff", fontSize: 14}
+  },
+  grid: {
+    top: '0%',
+    left: '0%',
+    right: '0px',
+    bottom: '0%'
+  },
+  xAxis: {show: false},
+  yAxis: {show: false},
+  tooltip: {},
+  series: {
+    type: "pie",
+    radius: ['60%', '70%'],
+    minShowLabelAngle: 10,
+    itemStyle: {
+      borderColor: 'rgba(128, 128, 128, 0.1)',
+    },
+    label: {
+      show: false
+    }
+  }
+}
+export const pieChart2 = {
+  legend: {
+    bottom: 0,
+    itemGap: 14,
+    itemWidth: 16,
+    itemHeight: 5,
+    textStyle: {color: "#fff", fontSize: 14}
+  },
+  grid: {
+    height: 260
+  },
+  xAxis: {show: false},
+  yAxis: {show: false},
+  tooltip: {
+    backgroundColor: "rgba(14, 51, 111, 0.9)",
+    borderColor: "#1A6ABC",
+    textStyle: {color: "#fff"}
+  },
+  series: {
+    type: "pie",
+    minShowLabelAngle: 10,
+    radius: [70, 81],
+    itemStyle: {
+      borderColor: "#fff",
+      borderWidth: 2
+    },
+    label: {
+      color: "#A8D7F3",
+      fontSize: 14,
+      formatter: "{name|{b}}\n{v|{d}%}",
+      minMargin: 5,
+      edgeDistance: 10,
+      lineHeight: 22,
+      rich: {
+        v: {
+          color: "#fff"
+        }
+      }
+    },
+    labelLine: {},
+    labelLayout: function (params) {
+      let points = params.labelLinePoints
+      if (points) {
+        const isLeft = points[2][0] < points[1][0]
+        points[2][0] += (params.labelRect.width + 4) * (isLeft ? -1 : 1)
+      }
+      return {
+        labelLinePoints: points
+      }
+    }
+  },
+  render: (h, params) => {
+    const formatNum = num => {
+      if (num >= 10000000) {
+        return num / 10000000 + "千万"
+      }
+
+      if (num >= 100000) {
+        return num / 10000 + "万"
+      }
+
+      return parseFloat(num.toFixed(2))
+    }
+
+    let total = params.data.reduce((t, e) => {
+      return t + Number(Object.values(e)?.[1] || 0)
+    }, 0)
+    return h(
+        "div",
+        {
+          style: {
+            height: "162px",
+            width: "162px",
+            color: "#8BCCFF",
+            left: "50%",
+            top: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            position: "absolute",
+            transform: "translate(-50%,-50%)",
+            backgroundImage: `url('https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie2Circle.png')`,
+            backgroundPosition: "center"
+          }
+        },
+        [
+          h(
+              "span",
+              {style: {fontSize: "28px", color: "#fff", fontFamily: "DIN"}},
+              formatNum(total)
+          ),
+          h("span", null, "总量")
+        ]
+    )
+  }
+}
+export const pieChart3 = {
+  legend: {
+    right: 20,
+    top: 'middle',
+    orient: 'vertical',
+    textStyle: {color: "#fff", fontSize: 14}
+  },
+  grid: {
+    top: '0%',
+    left: '0%',
+    right: '0px',
+    bottom: '0%'
+  },
+  xAxis: {show: false},
+  yAxis: {show: false},
+  tooltip: {},
+  series: {
+    type: "pie",
+    minShowLabelAngle: 10,
+    radius: [50, 71],
+    itemStyle: {
+      borderColor: "#8d1419",
+      borderWidth: 2
+    },
+    label: {
+      show: false
+    },
+    labelLine: {}
+  },
+  render: (h, params) => {
+    const formatNum = num => {
+      if (num >= 10000000) {
+        return num / 10000000 + "千万"
+      }
+
+      if (num >= 10000) {
+        return num / 10000 + "万"
+      }
+
+      return parseFloat(num.toFixed(2))
+    }
+
+    let total = params.data.reduce((t, e) => {
+      return t + Number(Object.values(e)?.[1] || 0)
+    }, 0)
+    return h(
+        "div",
+        {
+          style: {
+            height: "162px",
+            width: "162px",
+            color: "#8BCCFF",
+            left: "50%",
+            top: "50%",
+            zIndex: '-1',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            position: "absolute",
+            transform: "translate(-50%,-50%)",
+            backgroundPosition: "center"
+          }
+        },
+        [
+          h(
+              'span',
+              {
+                style: {
+                  'font-size': '32px',
+                  'font-weight': 'bold',
+                  'margin-bottom': '3px',
+                  'color': '#CEE1FF',
+                  'line-height': '28px',
+                  'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.1)',
+                  'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
+                  '-webkit-background-clip': 'text',
+                  '-webkit-text-fill-color': 'transparent'
+                }
+              },
+              formatNum(total)
+          ),
+          h('span', {
+            style: {
+              'font-size': '16px',
+              'color': '#CEE1FF',
+              'line-height': '16px',
+              'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.5)',
+              'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
+              '-webkit-background-clip': 'text',
+              '-webkit-text-fill-color': 'transparent'
+            }
+          }, "总量")
+        ]
+    )
+  }
+}
+export default {
+  pieChart1, pieChart2, pieChart3
+}
--- a/components/AiEchart/template/pie/pieChart1.js
+++ b/components/AiEchart/template/pie/pieChart1.js
@@ -1,29 +0,0 @@
-export default {
-  legend: {
-    right: 20,
-    top: 'middle',
-    orient: 'vertical',
-    textStyle: {color: "#fff", fontSize: 14}
-  },
-  grid: {
-    top: '0%',
-    left: '0%',
-    right: '0px',
-    bottom: '0%'
-  },
-  xAxis: {show: false},
-  yAxis: {show: false},
-  tooltip: {
-  },
-  series: {
-    type: "pie",
-    radius: ['60%', '70%'],
-    minShowLabelAngle: 10,
-    itemStyle: {
-      borderColor: 'rgba(128, 128, 128, 0.1)',
-    },
-    label: {
-      show: false
-    }
-  }
-}
--- a/components/AiEchart/template/pie/pieChart2.js
+++ b/components/AiEchart/template/pie/pieChart2.js
@@ -1,97 +0,0 @@
-export default {
-  legend: {
-    bottom: 0,
-    itemGap: 14,
-    itemWidth: 16,
-    itemHeight: 5,
-    textStyle: {color: "#fff", fontSize: 14}
-  },
-  grid: {
-    height: 260
-  },
-  xAxis: {show: false},
-  yAxis: {show: false},
-  tooltip: {
-    backgroundColor: "rgba(14, 51, 111, 0.9)",
-    borderColor: "#1A6ABC",
-    textStyle: {color: "#fff"}
-  },
-  series: {
-    type: "pie",
-    minShowLabelAngle: 10,
-    radius: [70, 81],
-    itemStyle: {
-      borderColor: "#fff",
-      borderWidth: 2
-    },
-    label: {
-      color: "#A8D7F3",
-      fontSize: 14,
-      formatter: "{name|{b}}\n{v|{d}%}",
-      minMargin: 5,
-      edgeDistance: 10,
-      lineHeight: 22,
-      rich: {
-        v: {
-          color: "#fff"
-        }
-      }
-    },
-    labelLine: {},
-    labelLayout: function (params) {
-      let points = params.labelLinePoints
-      if (points) {
-        const isLeft = points[2][0] < points[1][0]
-        points[2][0] += (params.labelRect.width + 4) * (isLeft ? -1 : 1)
-      }
-      return {
-        labelLinePoints: points
-      }
-    }
-  },
-  render: (h, params) => {
-    const formatNum = num => {
-      if (num >= 10000000) {
-        return num / 10000000 + "千万"
-      }
-
-      if (num >= 100000) {
-        return num / 10000 + "万"
-      }
-
-      return parseFloat(num.toFixed(2))
-    }
-
-    let total = params.data.reduce((t, e) => {
-      return t + Number(Object.values(e)?.[1] || 0)
-    }, 0)
-    return h(
-      "div",
-      {
-        style: {
-          height: "162px",
-          width: "162px",
-          color: "#8BCCFF",
-          left: "50%",
-          top: "50%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          flexDirection: "column",
-          position: "absolute",
-          transform: "translate(-50%,-50%)",
-          backgroundImage: `url('https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie2Circle.png')`,
-          backgroundPosition: "center"
-        }
-      },
-      [
-        h(
-          "span",
-          {style: {fontSize: "28px", color: "#fff", fontFamily: "DIN"}},
-          formatNum(total)
-        ),
-        h("span", null, "总量")
-      ]
-    )
-  }
-}
--- a/components/AiEchart/template/pie/pieChart3.js
+++ b/components/AiEchart/template/pie/pieChart3.js
@@ -1,98 +0,0 @@
-export default {
-  legend: {
-    right: 20,
-    top: 'middle',
-    orient: 'vertical',
-    textStyle: {color: "#fff", fontSize: 14}
-  },
-  grid: {
-    top: '0%',
-    left: '0%',
-    right: '0px',
-    bottom: '0%'
-  },
-  xAxis: {show: false},
-  yAxis: {show: false},
-  tooltip: {
-  },
-  series: {
-    type: "pie",
-    minShowLabelAngle: 10,
-    radius: [50, 71],
-    itemStyle: {
-      borderColor: "#8d1419",
-      borderWidth: 2
-    },
-    label: {
-      show: false
-    },
-    labelLine: {}
-  },
-  render: (h, params) => {
-    const formatNum = num => {
-      if (num >= 10000000) {
-        return num / 10000000 + "千万"
-      }
-
-      if (num >= 10000) {
-        return num / 10000 + "万"
-      }
-
-      return parseFloat(num.toFixed(2))
-    }
-
-    let total = params.data.reduce((t, e) => {
-      return t + Number(Object.values(e)?.[1] || 0)
-    }, 0)
-    return h(
-        "div",
-        {
-          style: {
-            height: "162px",
-            width: "162px",
-            color: "#8BCCFF",
-            left: "50%",
-            top: "50%",
-            zIndex: '-1',
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            flexDirection: "column",
-            position: "absolute",
-            transform: "translate(-50%,-50%)",
-            backgroundPosition: "center"
-          }
-        },
-        [
-          h(
-            'span',
-            {
-              style: {
-                'font-size': '32px',
-                'font-weight': 'bold',
-                'margin-bottom': '3px',
-                'color': '#CEE1FF',
-                'line-height': '28px',
-                'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.1)',
-                'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
-                '-webkit-background-clip': 'text',
-                '-webkit-text-fill-color': 'transparent'
-              }
-            },
-            formatNum(total)
-          ),
-          h('span', {
-            style: {
-              'font-size': '16px',
-              'color': '#CEE1FF',
-              'line-height': '16px',
-              'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.5)',
-              'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
-              '-webkit-background-clip': 'text',
-              '-webkit-text-fill-color': 'transparent'
-            }
-          }, "总量")
-        ]
-    )
-  }
-}
--- a/components/layout/AiDvSummary/AiDvSummary.vue
+++ b/components/layout/AiDvSummary/AiDvSummary.vue
@@ -26,11 +26,13 @@ import Summary17 from './components/Summary17'
 import Summary18 from './components/Summary18'
 import Summary19 from "./components/Summary19";
 import Summary20 from "./components/Summary20";
+import ProcessPie from "./components/processPie.vue";

 export default {
  name: 'AiDvSummary',

  components: {
+    ProcessPie,
    Summary20,
    Summary19,
    Summary0,
--- a/components/layout/AiDvSummary/components/processPie.vue
+++ b/components/layout/AiDvSummary/components/processPie.vue
@@ -0,0 +1,132 @@
+<script>
+export default {
+  name: "processPie",
+  props: {
+    data: Object
+  },
+  computed: {
+    percentage: v => Math.floor(v.data.v1 / v.data.total * 100),
+    legend: v => {
+      const {totalLabel, label, v1, total} = v.data
+      return [
+        {label: totalLabel, value: total},
+        {label, value: v1},
+      ]
+    }
+  },
+  mounted() {
+    const svg = this.$el.querySelector("svg")
+    const path = this.$el.querySelector(".el-progress-circle__path")
+    const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
+    gradient.setAttribute('id', 'gradient');
+    gradient.setAttribute('x1', '0%');
+    gradient.setAttribute('y1', '0%');
+    gradient.setAttribute('x2', '100%');
+    gradient.setAttribute('y2', '0%');
+
+    const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+    stop1.setAttribute('offset', '0%');
+    stop1.setAttribute('style', 'stop-color:#2C96E7;stop-opacity:1');
+    gradient.appendChild(stop1);
+
+    const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+    stop2.setAttribute('offset', '100%');
+    stop2.setAttribute('style', 'stop-color:#5CFFF3;stop-opacity:1');
+    gradient.appendChild(stop2);
+    svg.insertBefore(gradient, path);
+    path.setAttribute('stroke', 'url(#gradient)');
+  }
+}
+</script>
+
+<template>
+  <section class="processPie flex">
+    <div class="progress">
+      <el-progress type="circle" :percentage="percentage" :stroke-width="7" define-back-color="#66798a66"
+                   :show-text="false" :width="106"/>
+      <div class="label">
+        <div class="percentage" v-text="`${percentage}%`"/>
+        <div v-text="data.name"/>
+      </div>
+    </div>
+    <div class="fill">
+      <div class="item flex" v-for="(item, i) in legend" :key="i">
+        <div class="label fill" v-text="item.label"/>
+        <div class="value" v-text="item.value"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.processPie {
+  .progress {
+    position: relative;
+    margin-right: 60px;
+
+    .label {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-weight: 400;
+      font-size: 12px;
+      color: #FFFFFF;
+      white-space: nowrap;
+      width: 84px;
+      height: 84px;
+      border-radius: 50%;
+      border: 1px solid #66798a66;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .percentage {
+        font-weight: 700;
+        font-size: 22px;
+        color: #02FEFF;
+        letter-spacing: 0;
+        text-align: right;
+        line-height: 23px;
+        font-family: DINAlternate;
+      }
+    }
+  }
+
+  .item {
+    margin-bottom: 25px;
+    height: 32px;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+
+    .label {
+      margin-right: 25px;
+      font-weight: 400;
+      font-size: 18px;
+      color: #9BB7D4;
+      letter-spacing: 0;
+
+      &:before {
+        content: "●";
+        color: #66798a66;
+        margin-right: 8px;
+      }
+    }
+
+    &:first-of-type > .label:before {
+      color: #5AF9F0;
+    }
+
+    .value {
+      font-weight: 600;
+      font-size: 20px;
+      color: #FFFFFF;
+      letter-spacing: 0;
+      text-align: right;
+    }
+  }
+}
+</style>
--- a/components/layout/AiDvWrapper/AiDvWrapper.vue
+++ b/components/layout/AiDvWrapper/AiDvWrapper.vue
@@ -66,7 +66,7 @@ export default {
      classic: Classic,
      black: Primary,
    }[v.type]),
-    backgroundImage: v => v.background ? `url(${v.background})` : undefined
+    backgroundImage: v => v.background ? `url("${v.background}")` : undefined
  },
  watch: {
    title: {
--- a/packages/bigscreen/designer/config.js
+++ b/packages/bigscreen/designer/config.js
@@ -383,7 +383,21 @@ export const chartTpl = [{
    config: 'pieChart3',
    sourceDataId: '',
    dynamicData: []
-  }]
+  }, {
+    type: 'summary',
+    label: '进度饼图',
+    title: '进度饼图',
+    border: 'border15',
+    display: 'processPie',
+    width: 500,
+    height: 300,
+    zIndex: 1,
+    top: 0,
+    left: 0,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/processPieChart.png',
+    dataType: 'staticData',
+    staticData: {name: '综合调处率', label: "累计调解成功", v1: 23, totalLabel: "累计排查受理", total: 33},
+  },]
 }]

 const customHtml = {
@@ -767,9 +781,9 @@ export class DvCompData {

  getData() {
    return this.type == 'staticData' ? this.getStaticData() :
-      this.type == 'htmlData' ? this.getStaticData() :
-        this.type == 'dynamicData' ? this.getDynamicData() :
-          this.type == 'apiData' ? this.getApiData() : []
+        this.type == 'htmlData' ? this.getStaticData() :
+            this.type == 'dynamicData' ? this.getDynamicData() :
+                this.type == 'apiData' ? this.getApiData() : []
  }

  getDynamicData() {
@@ -793,8 +807,8 @@ export class DvCompData {
    return this.instance.post(api).then(res => {
      if (res?.data) {
        const list = res.data,
-          firstRecord = list?.[0] || {},
-          keys = Object.keys(firstRecord)
+            firstRecord = list?.[0] || {},
+            keys = Object.keys(firstRecord)
        let meta = []
        if (['AiDvTable', 'table'].includes(this.params.type)) {
          meta = keys.map(v => {
--- a/packages/bigscreen/designer/viewport.vue
+++ b/packages/bigscreen/designer/viewport.vue
@@ -17,7 +17,10 @@
      <div class="layout-left" :class="{hide:leftHide}">
        <h2 class="flex">
          <div class="fill">全部资产</div>
-          <el-button class="leftHideBtn" type="text" @click="leftHide=!leftHide">{{ leftHide ? "展开" : "收起" }}</el-button>
+          <el-button class="leftHideBtn" type="text" @click="leftHide=!leftHide">{{
+              leftHide ? "展开" : "收起"
+            }}
+          </el-button>
        </h2>
        <div class="layout-left__wrapper">
          <div class="layout-left__left">
@@ -306,6 +309,13 @@ export default {
      }

      return []
+    },
+    comps: v => {
+      const obj = {}
+      v.components.map(e => e.list.map(c => c.list.map(com => {
+        obj[com.type] = com
+      })))
+      return obj
    }
  },
  mounted() {
@@ -378,7 +388,7 @@ export default {
      id && this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
        if (res?.data) {
          const data = JSON.parse(res.data.config)
-          this.componentList = data.config.filter(Boolean)
+          this.componentList = data.config.filter(Boolean).map(e => ({...this.comps[e.type], ...e}))
          this.dashboard = data.dashboard
          this.images = data.images || []
        }
@@ -408,7 +418,7 @@ export default {
      }).then(res => {
        if (res?.code == 0) {
          this.$message.success('保存成功')
-          this.back(res.data)
+          this.getInfo(this.$route.query.did)
        }
      })
    },