feat:增加eslint+prettier 代码校验格式化

.eslintignore

@@ -0,0 +1,15 @@
+
+*.sh
+node_modules
+*.md
+*.woff
+*.ttf
+.vscode
+.idea
+dist
+/public
+/docs
+.husky
+.local
+/bin
+Dockerfile

.eslintrc.cjs

@@ -0,0 +1,25 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node":true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/vue3-essential",
+        "plugin:@typescript-eslint/recommended",
+        'plugin:prettier/recommended'
+    ],
+    "parser": "vue-eslint-parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "parser": "@typescript-eslint/parser",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue",
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}

.prettierignore

@@ -0,0 +1,9 @@
+/dist/*
+.local
+.output.js
+/node_modules/**
+
+**/*.svg
+**/*.sh
+
+/public/*

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
+    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
+    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
   },
   "dependencies": {
     "@better-scroll/core": "^2.4.2",
@@ -47,14 +48,19 @@
     "@vitejs/plugin-vue": "^3.0.0",
     "dart-sass": "^1.25.0",
     "eslint": "^8.21.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.3.0",
     "fast-glob": "^3.2.11",
+    "prettier": "^2.7.1",
     "typescript": "^4.6.4",
     "unplugin-auto-import": "^0.10.3",
     "unplugin-vue-components": "^0.21.2",
+    "unplugin-vue-define-options": "^0.7.3",
     "vite": "^3.0.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^0.38.4"
   }
 }

prettier.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  // 一行的字符数，如果超过会进行换行，默认为80
+  printWidth: 100,
+  // 行位是否使用分号，默认为true
+  semi: false,
+  vueIndentScriptAndStyle: true,
+  // 字符串是否使用单引号，默认为false，使用双引号
+  singleQuote: true,
+  // 是否使用尾逗号，有三个可选值"<none|es5|all>"
+  trailingComma: 'all',
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'auto',
+};

src/App.vue

@@ -14,10 +14,10 @@
     -moz-osx-font-smoothing: grayscale;
     color: #2c3e50;
   }
-html,body{
+  html,
+  body {
     height: 100%;
     background: #f6f8f9;
-
   }
   .el-pager li:focus {
     border: none;

src/components/Charts/Keyboard.vue

@@ -11,24 +11,24 @@ export default {
     props: {
       className: {
         type: String,
-      default: 'chart'
+        default: 'chart',
       },
       id: {
         type: String,
-      default: 'chart'
+        default: 'chart',
       },
       width: {
         type: String,
-      default: '200px'
+        default: '200px',
       },
       height: {
         type: String,
-      default: '200px'
+        default: '200px',
-    }
+      },
     },
     data() {
       return {
-      chart: null
+        chart: null,
       }
     },
     mounted() {
@@ -57,44 +57,48 @@ export default {
           backgroundColor: '#08263a',
           grid: {
             left: '5%',
-          right: '5%'
+            right: '5%',
           },
-        xAxis: [{
+          xAxis: [
+            {
               show: false,
-          data: xAxisData
+              data: xAxisData,
-        }, {
+            },
+            {
               show: false,
-          data: xAxisData
+              data: xAxisData,
-        }],
+            },
+          ],
           visualMap: {
             show: false,
             min: 0,
             max: 50,
             dimension: 0,
             inRange: {
-            color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+              color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055'],
-          }
+            },
           },
           yAxis: {
             axisLine: {
-            show: false
+              show: false,
             },
             axisLabel: {
               textStyle: {
-              color: '#4a657a'
+                color: '#4a657a',
-            }
+              },
             },
             splitLine: {
               show: true,
               lineStyle: {
-              color: '#08263f'
+                color: '#08263f',
-            }
+              },
             },
             axisTick: {
-            show: false
+              show: false,
-          }
             },
-        series: [{
+          },
+          series: [
+            {
               name: 'back',
               type: 'bar',
               data: data2,
@@ -104,10 +108,11 @@ export default {
                   opacity: 0.4,
                   barBorderRadius: 5,
                   shadowBlur: 3,
-              shadowColor: '#111'
+                  shadowColor: '#111',
-            }
+                },
-          }
+              },
-        }, {
+            },
+            {
               name: 'Simulate Shadow',
               type: 'line',
               data,
@@ -118,17 +123,18 @@ export default {
               animationDuration: 1200,
               lineStyle: {
                 normal: {
-              color: 'transparent'
+                  color: 'transparent',
-            }
+                },
               },
               areaStyle: {
                 normal: {
                   color: '#08263a',
                   shadowBlur: 50,
-              shadowColor: '#000'
+                  shadowColor: '#000',
-            }
+                },
-          }
+              },
-        }, {
+            },
+            {
               name: 'front',
               type: 'bar',
               data,
@@ -136,10 +142,11 @@ export default {
               z: 3,
               itemStyle: {
                 normal: {
-              barBorderRadius: 5
+                  barBorderRadius: 5,
-            }
+                },
-          }
+              },
-        }],
+            },
+          ],
           animationEasing: 'elasticOut',
           animationEasingUpdate: 'elasticOut',
           animationDelay(idx) {
@@ -147,9 +154,9 @@ export default {
           },
           animationDelayUpdate(idx) {
             return idx * 20
-        }
+          },
         })
-    }
+      },
-  }
+    },
   }
 </script>

src/components/Charts/LineMarker.vue

@@ -3,34 +3,34 @@
 </template>
 <script lang="ts" setup>
   import * as echarts from 'echarts'
-import {computed, nextTick, onMounted, ref, watch} from "vue";
+  import { computed, nextTick, onMounted, ref, watch } from 'vue'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {useStore} from "vuex";
+  import { useStore } from 'vuex'
   // 在setup中获取store
   const store = useStore()
   let props = defineProps({
     className: {
       type: String,
-      default: 'chart'
+      default: 'chart',
     },
     id: {
       type: String,
-      default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-      default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-      default: '200px'
+      default: '200px',
-    }
+    },
   })
   const isCollapse = computed(() => {
     return store.state.app.isCollapse
   })
 
-let chart:EChartsType;
+  let chart: EChartsType
 
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
@@ -42,17 +42,17 @@ const initChart =()=> {
         textStyle: {
           fontWeight: 'normal',
           fontSize: 16,
-        color: '#F1F1F3'
+          color: '#F1F1F3',
         },
-      left: '1%'
+        left: '1%',
       },
       tooltip: {
         trigger: 'axis',
         axisPointer: {
           lineStyle: {
-          color: '#57617B'
+            color: '#57617B',
-        }
+          },
-      }
+        },
       },
       legend: {
         top: 20,
@@ -64,50 +64,68 @@ const initChart =()=> {
         right: '4%',
         textStyle: {
           fontSize: 12,
-        color: '#F1F1F3'
+          color: '#F1F1F3',
-      }
+        },
       },
       grid: {
         top: 100,
         left: '2%',
         right: '2%',
         bottom: '2%',
-      containLabel: true
+        containLabel: true,
       },
-    xAxis: [{
+      xAxis: [
+        {
           type: 'category',
           boundaryGap: false,
           axisLine: {
             lineStyle: {
-          color: '#57617B'
+              color: '#57617B',
-        }
             },
-      data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
+          },
-    }],
+          data: [
-    yAxis: [{
+            '13:00',
+            '13:05',
+            '13:10',
+            '13:15',
+            '13:20',
+            '13:25',
+            '13:30',
+            '13:35',
+            '13:40',
+            '13:45',
+            '13:50',
+            '13:55',
+          ],
+        },
+      ],
+      yAxis: [
+        {
           type: 'value',
           name: '(%)',
           axisTick: {
-        show: false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-          color: '#57617B'
+              color: '#57617B',
-        }
+            },
           },
           axisLabel: {
             margin: 10,
             textStyle: {
-          fontSize: 14
+              fontSize: 14,
-        }
+            },
           },
           splitLine: {
             lineStyle: {
-          color: '#57617B'
+              color: '#57617B',
-        }
+            },
-      }
+          },
-    }],
+        },
-    series: [{
+      ],
+      series: [
+        {
           name: 'CMCC',
           type: 'line',
           smooth: true,
@@ -116,32 +134,42 @@ const initChart =()=> {
           showSymbol: false,
           lineStyle: {
             normal: {
-          width: 1
+              width: 1,
-        }
+            },
           },
           areaStyle: {
             normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
                     offset: 0,
-            color: 'rgba(137, 189, 27, 0.3)'
+                    color: 'rgba(137, 189, 27, 0.3)',
-          }, {
+                  },
+                  {
                     offset: 0.8,
-            color: 'rgba(137, 189, 27, 0)'
+                    color: 'rgba(137, 189, 27, 0)',
-          }], false),
+                  },
+                ],
+                false,
+              ),
               shadowColor: 'rgba(0, 0, 0, 0.1)',
-          shadowBlur: 10
+              shadowBlur: 10,
-        }
+            },
           },
           itemStyle: {
             normal: {
               color: 'rgb(137,189,27)',
               borderColor: 'rgba(137,189,2,0.27)',
-          borderWidth: 12
+              borderWidth: 12,
-
-        }
             },
-      data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
+          },
-    }, {
+          data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
+        },
+        {
           name: 'CTCC',
           type: 'line',
           smooth: true,
@@ -150,32 +178,42 @@ const initChart =()=> {
           showSymbol: false,
           lineStyle: {
             normal: {
-          width: 1
+              width: 1,
-        }
+            },
           },
           areaStyle: {
             normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
                     offset: 0,
-            color: 'rgba(0, 136, 212, 0.3)'
+                    color: 'rgba(0, 136, 212, 0.3)',
-          }, {
+                  },
+                  {
                     offset: 0.8,
-            color: 'rgba(0, 136, 212, 0)'
+                    color: 'rgba(0, 136, 212, 0)',
-          }], false),
+                  },
+                ],
+                false,
+              ),
               shadowColor: 'rgba(0, 0, 0, 0.1)',
-          shadowBlur: 10
+              shadowBlur: 10,
-        }
+            },
           },
           itemStyle: {
             normal: {
               color: 'rgb(0,136,212)',
               borderColor: 'rgba(0,136,212,0.2)',
-          borderWidth: 12
+              borderWidth: 12,
-
-        }
             },
-      data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
+          },
-    }, {
+          data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150],
+        },
+        {
           name: 'CUCC',
           type: 'line',
           smooth: true,
@@ -184,31 +222,42 @@ const initChart =()=> {
           showSymbol: false,
           lineStyle: {
             normal: {
-          width: 1
+              width: 1,
-        }
+            },
           },
           areaStyle: {
             normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
                     offset: 0,
-            color: 'rgba(219, 50, 51, 0.3)'
+                    color: 'rgba(219, 50, 51, 0.3)',
-          }, {
+                  },
+                  {
                     offset: 0.8,
-            color: 'rgba(219, 50, 51, 0)'
+                    color: 'rgba(219, 50, 51, 0)',
-          }], false),
+                  },
+                ],
+                false,
+              ),
               shadowColor: 'rgba(0, 0, 0, 0.1)',
-          shadowBlur: 10
+              shadowBlur: 10,
-        }
+            },
           },
           itemStyle: {
             normal: {
               color: 'rgb(219,50,51)',
               borderColor: 'rgba(219,50,51,0.2)',
-          borderWidth: 12
+              borderWidth: 12,
-        }
             },
-      data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
+          },
-    }]
+          data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122],
+        },
+      ],
     })
     return chart
   }
@@ -219,12 +268,10 @@ watch(isCollapse,()=>{
     }, 300)
   })
 
-
   onMounted(() => {
     chart = initChart()
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/components/Charts/MixChart.vue

@@ -11,24 +11,24 @@ export default {
     props: {
       className: {
         type: String,
-      default: 'chart'
+        default: 'chart',
       },
       id: {
         type: String,
-      default: 'chart'
+        default: 'chart',
       },
       width: {
         type: String,
-      default: '200px'
+        default: '200px',
       },
       height: {
         type: String,
-      default: '200px'
+        default: '200px',
-    }
+      },
     },
     data() {
       return {
-      chart: null
+        chart: null,
       }
     },
     mounted() {
@@ -50,7 +50,7 @@ export default {
             data.push(i + 'month')
           }
           return data
-      }())
+        })()
         this.chart.setOption({
           backgroundColor: '#344b58',
           title: {
@@ -59,20 +59,20 @@ export default {
             top: '20',
             textStyle: {
               color: '#fff',
-            fontSize: '22'
+              fontSize: '22',
             },
             subtextStyle: {
               color: '#90979c',
-            fontSize: '16'
+              fontSize: '16',
-          }
+            },
           },
           tooltip: {
             trigger: 'axis',
             axisPointer: {
               textStyle: {
-              color: '#fff'
+                color: '#fff',
-            }
+              },
-          }
+            },
           },
           grid: {
             left: '5%',
@@ -81,87 +81,92 @@ export default {
             top: 150,
             bottom: 95,
             textStyle: {
-            color: '#fff'
+              color: '#fff',
-          }
+            },
           },
           legend: {
             x: '5%',
             top: '10%',
             textStyle: {
-            color: '#90979c'
+              color: '#90979c',
             },
-          data: ['female', 'male', 'average']
+            data: ['female', 'male', 'average'],
           },
           calculable: true,
-        xAxis: [{
+          xAxis: [
+            {
               type: 'category',
               axisLine: {
                 lineStyle: {
-              color: '#90979c'
+                  color: '#90979c',
-            }
+                },
               },
               splitLine: {
-            show: false
+                show: false,
               },
               axisTick: {
-            show: false
+                show: false,
               },
               splitArea: {
-            show: false
+                show: false,
               },
               axisLabel: {
-            interval: 0
+                interval: 0,
-
               },
-          data: xData
+              data: xData,
-        }],
+            },
-        yAxis: [{
+          ],
+          yAxis: [
+            {
               type: 'value',
               splitLine: {
-            show: false
+                show: false,
               },
               axisLine: {
                 lineStyle: {
-              color: '#90979c'
+                  color: '#90979c',
-            }
+                },
               },
               axisTick: {
-            show: false
+                show: false,
               },
               axisLabel: {
-            interval: 0
+                interval: 0,
               },
               splitArea: {
-            show: false
+                show: false,
-          }
+              },
-        }],
+            },
-        dataZoom: [{
+          ],
+          dataZoom: [
+            {
               show: true,
               height: 30,
-          xAxisIndex: [
+              xAxisIndex: [0],
-            0
-          ],
               bottom: 30,
               start: 10,
               end: 80,
-          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+              handleIcon:
+                'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
               handleSize: '110%',
               handleStyle: {
-            color: '#d3dee5'
+                color: '#d3dee5',
-
               },
               textStyle: {
-            color: '#fff' },
+                color: '#fff',
-          borderColor: '#90979c'
+              },
-
+              borderColor: '#90979c',
-        }, {
+            },
+            {
               type: 'inside',
               show: true,
               height: 15,
               start: 1,
-          end: 35
+              end: 35,
-        }],
+            },
-        series: [{
+          ],
+          series: [
+            {
               name: 'female',
               type: 'bar',
               stack: 'total',
@@ -173,29 +178,16 @@ export default {
                   label: {
                     show: true,
                     textStyle: {
-                  color: '#fff'
+                      color: '#fff',
                     },
                     position: 'insideTop',
                     formatter(p) {
                       return p.value > 0 ? p.value : ''
-                }
-              }
-            }
                     },
-          data: [
+                  },
-            709,
+                },
-            1917,
+              },
-            2455,
+              data: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078],
-            2610,
-            1719,
-            1433,
-            1544,
-            3285,
-            5208,
-            3372,
-            2484,
-            4078
-          ]
             },
 
             {
@@ -211,25 +203,13 @@ export default {
                     position: 'top',
                     formatter(p) {
                       return p.value > 0 ? p.value : ''
-                }
-              }
-            }
                     },
-          data: [
+                  },
-            327,
+                },
-            1776,
+              },
-            507,
+              data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
-            1200,
+            },
-            800,
+            {
-            482,
-            204,
-            1390,
-            1001,
-            951,
-            381,
-            220
-          ]
-        }, {
               name: 'average',
               type: 'line',
               stack: 'total',
@@ -244,28 +224,15 @@ export default {
                     position: 'top',
                     formatter(p) {
                       return p.value > 0 ? p.value : ''
-                }
-              }
-            }
                     },
-          data: [
+                  },
-            1036,
+                },
-            3693,
+              },
-            2962,
+              data: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298],
-            3810,
+            },
-            2519,
+          ],
-            1915,
-            1748,
-            4675,
-            6209,
-            4323,
-            2865,
-            4298
-          ]
-        }
-        ]
         })
-    }
+      },
-  }
+    },
   }
 </script>

src/components/Charts/mixins/resize.js

@@ -4,7 +4,7 @@ export default {
   data() {
     return {
       $_sidebarElm: null,
-      $_resizeHandler: null
+      $_resizeHandler: null,
     }
   },
   mounted() {
@@ -40,17 +40,19 @@ export default {
       window.addEventListener('resize', this.$_resizeHandler)
 
       this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+      this.$_sidebarElm &&
+        this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
     },
     destroyListener() {
       window.removeEventListener('resize', this.$_resizeHandler)
       this.$_resizeHandler = null
 
-      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+      this.$_sidebarElm &&
+        this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
     },
     resize() {
       const { chart } = this
       chart && chart.resize()
-    }
+    },
-  }
+  },
 }

src/components/HelloWorld.vue

@@ -19,9 +19,8 @@ const count = ref(0)
 
   <p>
     Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the
-      >create-vue</a
+    official Vue + Vite starter
-    >, the official Vue + Vite starter
   </p>
   <p>
     Install

src/components/SvgIcon/index.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { computed } from "@vue/reactivity";
+  import { computed } from 'vue'
   export default {
-  name: "baseSvgIcon",
+    name: 'baseSvgIcon',
     props: {
       iconClass: { type: String },
       className: { type: String },
@@ -15,14 +15,14 @@ export default {
     setup(props) {
       console.log(11111111)
       const iconName = computed(() => {
-      return props.iconClass ? `#icon-${props.iconClass}` : "#icon";
+        return props.iconClass ? `#icon-${props.iconClass}` : '#icon'
-    });
+      })
       const svgClass = computed(() => {
-      return props.className ? "svg-icon " + props.className : "svg-icon";
+        return props.className ? 'svg-icon ' + props.className : 'svg-icon'
-    });
+      })
-    return { iconName, svgClass };
+      return { iconName, svgClass }
     },
-};
+  }
 </script>
 
 <style scoped lang="scss">
@@ -34,4 +34,3 @@ export default {
     overflow: hidden;
   }
 </style>
-

src/components/pipeline/zb-pipeline-start.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="zb-pipeline-start-wrapper">
-    <div class="zb-pipeline-start" v-bind:class="control === value ? 'active' : ''" v-on:click="handleClick">
+    <div
+      class="zb-pipeline-start"
+      v-bind:class="control === value ? 'active' : ''"
+      v-on:click="handleClick"
+    >
       <div class="zb-pipeline-start-header">
         <zb-icon type="play-filled" />
       </div>
@@ -23,41 +27,128 @@
   </div>
 </template>
 <script lang="ts" setup>
-import {
+  import { Help } from '@element-plus/icons-vue'
-  Help
-} from '@element-plus/icons-vue'
 </script>
 <style>
   /* zb-pipeline-start-wrapper */
-.zb-pipeline-start-wrapper { position:relative; padding:0 40px; }
+  .zb-pipeline-start-wrapper {
+    position: relative;
+    padding: 0 40px;
+  }
 
   /* zb-pipeline-start */
-.zb-pipeline-start { cursor:pointer; user-select:none; position:relative; display:flex; justify-content:flex-start; align-items:stretch; width:200px; height:40px; border-radius:2px; background-color:#fff; }
+  .zb-pipeline-start {
-.zb-pipeline-start:after { content:""; position:absolute; top:20px; right:-40px; display:block; width:40px; height:1px; background-color:#2d8cf0; }
+    cursor: pointer;
-.zb-pipeline-start .zb-pipeline-start-header { display:flex; justify-content:center; align-items:center; width:40px; border-width:1px 0 1px 1px; border-style:solid; border-color:#2d8cf0; border-radius:2px 0 0 2px; background-color:#2d8cf0; color:#fff; font-size:14px; font-weight:600; transition:all 0.2s cubic-bezier(0.23,1,0.32,1); }
+    user-select: none;
-.zb-pipeline-start .zb-pipeline-start-body { flex:1; display:flex; border-width:1px 1px 1px 0; border-style:solid; border-color:#e3e8f0; border-radius:0 2px 2px 0; padding:0 8px; overflow:hidden; transition:all 0.2s cubic-bezier(0.23,1,0.32,1); }
+    position: relative;
-.zb-pipeline-start .zb-pipeline-start-title { flex:1; display:block; overflow:hidden; color:#262626; font-size:14px; font-weight:600; line-height:38px; white-space:nowrap; text-overflow:ellipsis; }
+    display: flex;
-.zb-pipeline-start .zb-pipeline-start-tooltip { cursor:pointer; display:flex; justify-content:center; align-items:center; margin-left:8px; }
+    justify-content: flex-start;
-.zb-pipeline-start .zb-pipeline-start-tooltip .zb-tooltip { display:block; }
+    align-items: stretch;
-.zb-pipeline-start .zb-pipeline-start-tooltip .zb-icon { display:block; color:#595959; font-size:14px; }
+    width: 200px;
+    height: 40px;
+    border-radius: 2px;
+    background-color: #fff;
+  }
+  .zb-pipeline-start:after {
+    content: '';
+    position: absolute;
+    top: 20px;
+    right: -40px;
+    display: block;
+    width: 40px;
+    height: 1px;
+    background-color: #2d8cf0;
+  }
+  .zb-pipeline-start .zb-pipeline-start-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    border-width: 1px 0 1px 1px;
+    border-style: solid;
+    border-color: #2d8cf0;
+    border-radius: 2px 0 0 2px;
+    background-color: #2d8cf0;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
+  }
+  .zb-pipeline-start .zb-pipeline-start-body {
+    flex: 1;
+    display: flex;
+    border-width: 1px 1px 1px 0;
+    border-style: solid;
+    border-color: #e3e8f0;
+    border-radius: 0 2px 2px 0;
+    padding: 0 8px;
+    overflow: hidden;
+    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
+  }
+  .zb-pipeline-start .zb-pipeline-start-title {
+    flex: 1;
+    display: block;
+    overflow: hidden;
+    color: #262626;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 38px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .zb-pipeline-start .zb-pipeline-start-tooltip {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 8px;
+  }
+  .zb-pipeline-start .zb-pipeline-start-tooltip .zb-tooltip {
+    display: block;
+  }
+  .zb-pipeline-start .zb-pipeline-start-tooltip .zb-icon {
+    display: block;
+    color: #595959;
+    font-size: 14px;
+  }
 
   /* zb-pipeline-start hover */
-.zb-pipeline-start:hover {  }
+  .zb-pipeline-start:hover {
-.zb-pipeline-start:hover:after {  }
+  }
-.zb-pipeline-start:hover .zb-pipeline-start-header { border-color:#2d8cf0; }
+  .zb-pipeline-start:hover:after {
-.zb-pipeline-start:hover .zb-pipeline-start-body { border-color:#2d8cf0; }
+  }
-.zb-pipeline-start:hover .zb-pipeline-start-title {  }
+  .zb-pipeline-start:hover .zb-pipeline-start-header {
-.zb-pipeline-start:hover .zb-pipeline-start-tooltip {  }
+    border-color: #2d8cf0;
-.zb-pipeline-start:hover .zb-pipeline-start-tooltip .zb-tooltip {  }
+  }
-.zb-pipeline-start:hover .zb-pipeline-start-tooltip .zb-icon {  }
+  .zb-pipeline-start:hover .zb-pipeline-start-body {
+    border-color: #2d8cf0;
+  }
+  .zb-pipeline-start:hover .zb-pipeline-start-title {
+  }
+  .zb-pipeline-start:hover .zb-pipeline-start-tooltip {
+  }
+  .zb-pipeline-start:hover .zb-pipeline-start-tooltip .zb-tooltip {
+  }
+  .zb-pipeline-start:hover .zb-pipeline-start-tooltip .zb-icon {
+  }
 
   /* zb-pipeline-start active */
-.zb-pipeline-start.active {  }
+  .zb-pipeline-start.active {
-.zb-pipeline-start.active:after {  }
+  }
-.zb-pipeline-start.active .zb-pipeline-start-header { border-color:#2d8cf0; }
+  .zb-pipeline-start.active:after {
-.zb-pipeline-start.active .zb-pipeline-start-body { border-color:#2d8cf0; }
+  }
-.zb-pipeline-start.active .zb-pipeline-start-title {  }
+  .zb-pipeline-start.active .zb-pipeline-start-header {
-.zb-pipeline-start.active .zb-pipeline-start-tooltip {  }
+    border-color: #2d8cf0;
-.zb-pipeline-start.active .zb-pipeline-start-tooltip .zb-tooltip {  }
+  }
-.zb-pipeline-start.active .zb-pipeline-start-tooltip .zb-icon {  }
+  .zb-pipeline-start.active .zb-pipeline-start-body {
+    border-color: #2d8cf0;
+  }
+  .zb-pipeline-start.active .zb-pipeline-start-title {
+  }
+  .zb-pipeline-start.active .zb-pipeline-start-tooltip {
+  }
+  .zb-pipeline-start.active .zb-pipeline-start-tooltip .zb-tooltip {
+  }
+  .zb-pipeline-start.active .zb-pipeline-start-tooltip .zb-icon {
+  }
 </style>

src/components/u-Hamburger/index.vue

@@ -2,7 +2,11 @@
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item, index) in obj.levelList" :key="item.path">
-        <span v-if="item.redirect==='noRedirect'||index==obj.levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
+        <span
+          v-if="item.redirect === 'noRedirect' || index == obj.levelList.length - 1"
+          class="no-redirect"
+          >{{ item.meta.title }}</span
+        >
         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
     </transition-group>
@@ -11,7 +15,7 @@
 
 <script lang="ts" setup>
   import pathToRegexp from 'path-to-regexp'
-  import {onMounted, reactive, watch} from "vue";
+  import { onMounted, reactive, watch } from 'vue'
   import { useRoute } from 'vue-router'
 
   const obj = reactive({ levelList: {} })
@@ -19,9 +23,11 @@
 
   // 获取面包屑
   const getBreadcrumb = () => {
-    let matched = route.matched.filter(item => item.meta && item.meta.title)
+    let matched = route.matched.filter((item) => item.meta && item.meta.title)
     const first = matched[0]
-    obj.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+    obj.levelList = matched.filter(
+      (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false,
+    )
   }
   onMounted(() => {
     getBreadcrumb()

src/components/u-container-layout/index.vue

@@ -6,9 +6,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup></script>
-
-</script>
 
 <style lang="scss" scoped>
   .m-container-layout {

src/components/u-count-to/index.js

@@ -1,5 +1,5 @@
-import CountTo from './vue-countTo.vue';
+import CountTo from './vue-countTo.vue'
-export default CountTo;
+export default CountTo
 if (typeof window !== 'undefined' && window.Vue) {
-  window.Vue.component('count-to', CountTo);
+  window.Vue.component('count-to', CountTo)
 }

src/components/u-count-to/requestAnimationFrame.js

@@ -18,10 +18,15 @@ if (isServer) {
   let prefix
   // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
   for (let i = 0; i < prefixes.length; i++) {
-    if (requestAnimationFrame && cancelAnimationFrame) { break }
+    if (requestAnimationFrame && cancelAnimationFrame) {
+      break
+    }
     prefix = prefixes[i]
     requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
-    cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
+    cancelAnimationFrame =
+      cancelAnimationFrame ||
+      window[prefix + 'CancelAnimationFrame'] ||
+      window[prefix + 'CancelRequestAnimationFrame']
   }
 
   // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout

src/components/u-count-to/vue-countTo.vue

@@ -10,22 +10,22 @@ export default {
       startVal: {
         type: Number,
         required: false,
-      default: 0
+        default: 0,
       },
       endVal: {
         type: Number,
         required: false,
-      default: 2017
+        default: 2017,
       },
       duration: {
         type: Number,
         required: false,
-      default: 3000
+        default: 3000,
       },
       autoplay: {
         type: Boolean,
         required: false,
-      default: true
+        default: true,
       },
       decimals: {
         type: Number,
@@ -33,39 +33,39 @@ export default {
         default: 0,
         validator(value) {
           return value >= 0
-      }
+        },
       },
       decimal: {
         type: String,
         required: false,
-      default: '.'
+        default: '.',
       },
       separator: {
         type: String,
         required: false,
-      default: ','
+        default: ',',
       },
       prefix: {
         type: String,
         required: false,
-      default: ''
+        default: '',
       },
       suffix: {
         type: String,
         required: false,
-      default: ''
+        default: '',
       },
       useEasing: {
         type: Boolean,
         required: false,
-      default: true
+        default: true,
       },
       easingFn: {
         type: Function,
         default(t, b, c, d) {
-        return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
+          return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
-      }
+        },
-    }
+      },
     },
     data() {
       return {
@@ -77,115 +77,126 @@ export default {
         startTime: null,
         timestamp: null,
         remaining: null,
-      rAF: null
+        rAF: null,
-    };
+      }
     },
     computed: {
       countDown() {
         return this.startVal > this.endVal
-    }
+      },
     },
     watch: {
       startVal() {
         if (this.autoplay) {
-        this.start();
+          this.start()
         }
       },
       endVal() {
         if (this.autoplay) {
-        this.start();
+          this.start()
-      }
         }
       },
+    },
     mounted() {
       if (this.autoplay) {
-      this.start();
+        this.start()
       }
       this.$emit('mountedCallback')
     },
     methods: {
       start() {
-      this.localStartVal = this.startVal;
+        this.localStartVal = this.startVal
-      this.startTime = null;
+        this.startTime = null
-      this.localDuration = this.duration;
+        this.localDuration = this.duration
-      this.paused = false;
+        this.paused = false
-      this.rAF = requestAnimationFrame(this.count);
+        this.rAF = requestAnimationFrame(this.count)
       },
       pauseResume() {
         if (this.paused) {
-        this.resume();
+          this.resume()
-        this.paused = false;
+          this.paused = false
         } else {
-        this.pause();
+          this.pause()
-        this.paused = true;
+          this.paused = true
         }
       },
       pause() {
-      cancelAnimationFrame(this.rAF);
+        cancelAnimationFrame(this.rAF)
       },
       resume() {
-      this.startTime = null;
+        this.startTime = null
-      this.localDuration = +this.remaining;
+        this.localDuration = +this.remaining
-      this.localStartVal = +this.printVal;
+        this.localStartVal = +this.printVal
-      requestAnimationFrame(this.count);
+        requestAnimationFrame(this.count)
       },
       reset() {
-      this.startTime = null;
+        this.startTime = null
-      cancelAnimationFrame(this.rAF);
+        cancelAnimationFrame(this.rAF)
-      this.displayValue = this.formatNumber(this.startVal);
+        this.displayValue = this.formatNumber(this.startVal)
       },
       count(timestamp) {
-      if (!this.startTime) this.startTime = timestamp;
+        if (!this.startTime) this.startTime = timestamp
-      this.timestamp = timestamp;
+        this.timestamp = timestamp
-      const progress = timestamp - this.startTime;
+        const progress = timestamp - this.startTime
-      this.remaining = this.localDuration - progress;
+        this.remaining = this.localDuration - progress
 
         if (this.useEasing) {
           if (this.countDown) {
-          this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
+            this.printVal =
+              this.localStartVal -
+              this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
           } else {
-          this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
+            this.printVal = this.easingFn(
+              progress,
+              this.localStartVal,
+              this.endVal - this.localStartVal,
+              this.localDuration,
+            )
           }
         } else {
           if (this.countDown) {
-          this.printVal = this.localStartVal - ((this.localStartVal - this.endVal) * (progress / this.localDuration));
+            this.printVal =
+              this.localStartVal -
+              (this.localStartVal - this.endVal) * (progress / this.localDuration)
           } else {
-          this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
+            this.printVal =
+              this.localStartVal +
+              (this.endVal - this.localStartVal) * (progress / this.localDuration)
           }
         }
         if (this.countDown) {
-        this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
+          this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal
         } else {
-        this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
+          this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal
         }
 
         this.displayValue = this.formatNumber(this.printVal)
         if (progress < this.localDuration) {
-        this.rAF = requestAnimationFrame(this.count);
+          this.rAF = requestAnimationFrame(this.count)
         } else {
-        this.$emit('callback');
+          this.$emit('callback')
         }
       },
       isNumber(val) {
         return !isNaN(parseFloat(val))
       },
       formatNumber(num) {
-      num = num.toFixed(this.decimals);
+        num = num.toFixed(this.decimals)
-      num += '';
+        num += ''
-      const x = num.split('.');
+        const x = num.split('.')
-      let x1 = x[0];
+        let x1 = x[0]
-      const x2 = x.length > 1 ? this.decimal + x[1] : '';
+        const x2 = x.length > 1 ? this.decimal + x[1] : ''
-      const rgx = /(\d+)(\d{3})/;
+        const rgx = /(\d+)(\d{3})/
         if (this.separator && !this.isNumber(this.separator)) {
           while (rgx.test(x1)) {
-          x1 = x1.replace(rgx, '$1' + this.separator + '$2');
+            x1 = x1.replace(rgx, '$1' + this.separator + '$2')
           }
         }
-      return this.prefix + x1 + x2 + this.suffix;
+        return this.prefix + x1 + x2 + this.suffix
-    }
+      },
     },
     destroyed() {
       cancelAnimationFrame(this.rAF)
+    },
   }
-};
 </script>

src/components/u-info/index.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="m-info">
-        <el-popover
+    <el-popover width="200px" placement="bottom">
-                width="200px"
-                placement="bottom"
-        >
       <template #reference>
         <el-badge :value="3" class="item-info-pop">
           <el-icon class="bell"><Bell /></el-icon>
@@ -12,16 +9,20 @@
       <div>
         <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
           <el-tab-pane label="通知" name="first">
-                       <div class="item-child"> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div>
+            <div class="item-child">
-                        <div class="item-child"> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div>
+              github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div
-                        <div class="item-child"> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div>
+            >
+            <div class="item-child">
+              github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div
+            >
+            <div class="item-child">
+              github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div
+            >
           </el-tab-pane>
         </el-tabs>
       </div>
     </el-popover>
-
   </div>
-
 </template>
 
 <script lang="ts" setup>
@@ -44,7 +45,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all .3s;
+    transition: all 0.3s;
     .item-info-pop {
       //  width:100% ;
       //height: 100%;

src/components/u-mavonEditor/index.vue

@@ -1,7 +1,3 @@
-<template>
+<template> </template>
 
-</template>
+<script lang="ts"></script>
-
-<script lang="ts">
-
-</script>

src/components/u-rightClickMenu/index.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="g-right-click-menu" :style="style" v-if="isShow" ref="rightMenu">
     <div
-        v-for="item,index in data"
+      v-for="(item, index) in data"
       :key="index"
-        class="operating" @click.stop="operatingRightAction($event,item)">{{item.label}}</div>
+      class="operating"
+      @click.stop="operatingRightAction($event, item)"
+      >{{ item.label }}</div
+    >
   </div>
 </template>
 <script lang="ts">
@@ -11,28 +14,28 @@ export default {
     props: {
       data: {
         type: Array,
-      default:()=>[]
+        default: () => [],
       },
       left: {
         type: Number,
-      default: 0
+        default: 0,
       },
       type: {
         type: Number,
-      default: 1
+        default: 1,
       },
       dataInfo: {
         type: Object,
-      default: () => {}
+        default: () => {},
       },
       top: {
         type: Number,
-      default: 0
+        default: 0,
       },
       isViewInfo: {
         type: Boolean,
-      default: true
+        default: true,
-    }
+      },
     },
     watch: {
       left: {
@@ -40,10 +43,10 @@ export default {
           if (newName) {
             this.isShow = true
           }
-      }
+        },
         // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
         // immediate: true
-    }
+      },
     },
     computed: {
       style() {
@@ -54,11 +57,11 @@ export default {
         } else {
           return `left:${this.left}px;top:${this.top}px`
         }
-    }
+      },
     },
     data() {
       return {
-      isShow: false
+        isShow: false,
       }
     },
     methods: {
@@ -69,7 +72,7 @@ export default {
       operatingRightAction($event, val) {
         this.$emit('ok', $event, val)
         this.isShow = false
-    }
+      },
     },
     mounted() {
       let _self = this
@@ -81,7 +84,7 @@ export default {
           _self.isShow = false
         }
       })
-  }
+    },
   }
 </script>
 <style lang="scss" scoped>

src/components/u-screenfull/index.js

@@ -17,7 +17,6 @@ const methodMap = [
     'webkitFullscreenEnabled',
     'webkitfullscreenchange',
     'webkitfullscreenerror',
-
   ],
   // Old WebKit
   [
@@ -27,7 +26,6 @@ const methodMap = [
     'webkitCancelFullScreen',
     'webkitfullscreenchange',
     'webkitfullscreenerror',
-
   ],
   [
     'mozRequestFullScreen',
@@ -45,30 +43,30 @@ const methodMap = [
     'MSFullscreenChange',
     'MSFullscreenError',
   ],
-];
+]
 
 const nativeAPI = (() => {
-	const unprefixedMethods = methodMap[0];
+  const unprefixedMethods = methodMap[0]
-	const returnValue = {};
+  const returnValue = {}
 
   for (const methodList of methodMap) {
-		const exitFullscreenMethod = methodList?.[1];
+    const exitFullscreenMethod = methodList?.[1]
     if (exitFullscreenMethod in document) {
       for (const [index, method] of methodList.entries()) {
-				returnValue[unprefixedMethods[index]] = method;
+        returnValue[unprefixedMethods[index]] = method
       }
 
-			return returnValue;
+      return returnValue
     }
   }
 
-	return false;
+  return false
-})();
+})()
 
 const eventNameMap = {
   change: nativeAPI.fullscreenchange,
   error: nativeAPI.fullscreenerror,
-};
+}
 
 // eslint-disable-next-line import/no-mutable-exports
 let screenfull = {
@@ -76,63 +74,63 @@ let screenfull = {
   request(element = document.documentElement, options) {
     return new Promise((resolve, reject) => {
       const onFullScreenEntered = () => {
-				screenfull.off('change', onFullScreenEntered);
+        screenfull.off('change', onFullScreenEntered)
-				resolve();
+        resolve()
-			};
+      }
 
-			screenfull.on('change', onFullScreenEntered);
+      screenfull.on('change', onFullScreenEntered)
 
-			const returnPromise = element[nativeAPI.requestFullscreen](options);
+      const returnPromise = element[nativeAPI.requestFullscreen](options)
 
       if (returnPromise instanceof Promise) {
-				returnPromise.then(onFullScreenEntered).catch(reject);
+        returnPromise.then(onFullScreenEntered).catch(reject)
       }
-		});
+    })
   },
   exit() {
     return new Promise((resolve, reject) => {
       if (!screenfull.isFullscreen) {
-				resolve();
+        resolve()
-				return;
+        return
       }
 
       const onFullScreenExit = () => {
-				screenfull.off('change', onFullScreenExit);
+        screenfull.off('change', onFullScreenExit)
-				resolve();
+        resolve()
-			};
+      }
 
-			screenfull.on('change', onFullScreenExit);
+      screenfull.on('change', onFullScreenExit)
 
-			const returnPromise = document[nativeAPI.exitFullscreen]();
+      const returnPromise = document[nativeAPI.exitFullscreen]()
 
       if (returnPromise instanceof Promise) {
-				returnPromise.then(onFullScreenExit).catch(reject);
+        returnPromise.then(onFullScreenExit).catch(reject)
       }
-		});
+    })
   },
   toggle(element, options) {
-		return screenfull.isFullscreen ? screenfull.exit() : screenfull.request(element, options);
+    return screenfull.isFullscreen ? screenfull.exit() : screenfull.request(element, options)
   },
   onchange(callback) {
-		screenfull.on('change', callback);
+    screenfull.on('change', callback)
   },
   onerror(callback) {
-		screenfull.on('error', callback);
+    screenfull.on('error', callback)
   },
   on(event, callback) {
-		const eventName = eventNameMap[event];
+    const eventName = eventNameMap[event]
     if (eventName) {
-			document.addEventListener(eventName, callback, false);
+      document.addEventListener(eventName, callback, false)
     }
   },
   off(event, callback) {
-		const eventName = eventNameMap[event];
+    const eventName = eventNameMap[event]
     if (eventName) {
-			document.removeEventListener(eventName, callback, false);
+      document.removeEventListener(eventName, callback, false)
     }
   },
   raw: nativeAPI,
-};
+}
 
 Object.defineProperties(screenfull, {
   isFullscreen: {
@@ -147,11 +145,10 @@ Object.defineProperties(screenfull, {
     // Coerce to boolean in case of old WebKit.
     get: () => Boolean(document[nativeAPI.fullscreenEnabled]),
   },
-});
+})
 
 if (!nativeAPI) {
-	screenfull = {isEnabled: false};
+  screenfull = { isEnabled: false }
 }
 
-
+export default screenfull
-export default screenfull;

src/components/u-screenfull/index.vue

@@ -4,22 +4,23 @@
       class="full-screen"
       title="全屏"
       @click.stop="click"
-            style="margin-right: 10px;cursor: pointer" ><full-screen /></el-icon>
+      style="margin-right: 10px; cursor: pointer"
+      ><full-screen
+    /></el-icon>
   </div>
 </template>
 
 <script lang="ts" setup>
   import screenfull from './index'
   import { ElMessage } from 'element-plus'
-  import {onBeforeUnmount, onMounted, ref} from "vue";
+  import { onBeforeUnmount, onMounted, ref } from 'vue'
-
 
   let isFullscreen = ref(false)
   const click = () => {
     if (!screenfull.isEnabled) {
       ElMessage({
         message: '你的浏览器不支持',
-        type: 'warning'
+        type: 'warning',
       })
       return false
     }
@@ -57,7 +58,7 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all .3s;
+    transition: all 0.3s;
   }
   .transverseMenu {
     .full-screen {

src/components/u-setting/index.vue

@@ -7,9 +7,7 @@
           主题配置
         </div>
         <div class="item-child item-child2" @click="operator(2)">
-                    <el-icon size="30"
+          <el-icon size="30" color="#3698fd" style="margin-bottom: 8px"><Link /></el-icon>
-                             color="#3698fd"
-                             style="margin-bottom: 8px"><Link /></el-icon>
           源码拷贝
         </div>
       </div>
@@ -17,7 +15,12 @@
     <el-drawer v-model="drawer" title="主题配置" size="300px">
       <div class="drawer-item">
         <label>布局</label>
-                <el-select v-model="layout"  placeholder="请选择" style="width: 150px" @change="(val)=>changeSwitch(val,2)">
+        <el-select
+          v-model="layout"
+          placeholder="请选择"
+          style="width: 150px"
+          @change="(val) => changeSwitch(val, 2)"
+        >
           <el-option label="纵向" value="vertical"></el-option>
           <el-option label="横向" value="horizontal"></el-option>
         </el-select>
@@ -35,7 +38,7 @@
   const drawer = ref(false)
   const tag = ref(true)
   const layout = ref('vertical')
-    import {useStore} from "vuex";
+  import { useStore } from 'vuex'
 
   const store = useStore()
   const operator = (type) => {
@@ -49,7 +52,6 @@
     }
   }
 
-
   const changeSwitch = (val, type) => {
     switch (type) {
       // 是否显示tag
@@ -61,10 +63,8 @@
         return
     }
   }
-
 </script>
 
-
 <style lang="scss" scoped>
   .m-setting-fix {
     position: fixed;
@@ -105,16 +105,16 @@
       border-radius: 5.5px;
       font-size: 12px;
       background: #ebf5ff;
-        transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
+      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
-
+        box-shadow 0.15s ease;
     }
     .item-child2 {
       margin-top: 10px;
       color: #b37feb;
       background: #f7f2fd;
-        transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
+      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
+        box-shadow 0.15s ease;
     }
-
   }
   .drawer-item {
     width: 100%;

src/components/u-upload/index.vue

@@ -21,26 +21,24 @@
   import { Plus } from '@element-plus/icons-vue'
 
   import type { UploadProps, UploadUserFile } from 'element-plus'
-    import {ElMessage} from "element-plus";
+  import { ElMessage } from 'element-plus'
   let emit = defineEmits(['update'])
   let props = defineProps({
     modelValue: Array,
     multiple: {
       type: Boolean,
-            default:true
+      default: true,
     },
     listType: {
       type: String,
-            default:'picture-card'
+      default: 'picture-card',
     },
     showFileList: {
       type: Boolean,
-            default:true
+      default: true,
-        }
+    },
   })
-    let fileList = ref([
+  let fileList = ref([])
-
-    ])
 
   const dialogImageUrl = ref('')
   const dialogVisible = ref(false)
@@ -52,14 +50,14 @@
   const beforeUploadAction = (file, fileLi) => {
     return new Promise((resolve, reject) => {
       var reader = new FileReader()
-            let reg = (/\.jpg$|\.jpeg$|\.gif$|\.png$/i)
+      let reg = /\.jpg$|\.jpeg$|\.gif$|\.png$/i
       reader.readAsDataURL(file)
       let name = file.name
       if (reg.test(name)) {
         reader.onload = (e: FileReader) => {
           fileList.value.push({
             name: name,
-                        url:e.target.result
+            url: e.target.result,
           })
           emit('update', fileList.value)
           resolve(e.target.result)
@@ -77,10 +75,14 @@
   }
 
   onMounted(() => {
-        watch(()=>props.modelValue,(value)=>{
+    watch(
+      () => props.modelValue,
+      (value) => {
         fileList.value = value
-        },{
+      },
-            immediate:true
+      {
-        })
+        immediate: true,
+      },
+    )
   })
 </script>

src/components/u-wangEdior/index.vue

@@ -6,15 +6,14 @@
 <script lang="ts" setup>
   // 引入 wangEditor
   import wangEditor from 'wangeditor'
-import {onBeforeUnmount, onMounted, watch} from "vue";
+  import { onBeforeUnmount, onMounted, watch } from 'vue'
   let editors = null
 
   let emit = defineEmits(['update:modelValue'])
   let props = defineProps({
-  modelValue:String
+    modelValue: String,
   })
 
-
   const getEditorData = () => {
     // 通过代码获取编辑器内容
     let data = editors.txt.html()
@@ -22,9 +21,12 @@ const getEditorData = () =>{
   }
 
   onMounted(() => {
-  watch(()=>props.modelValue,(value)=>{
+    watch(
+      () => props.modelValue,
+      (value) => {
         editors.txt.html(value)
-  })
+      },
+    )
     const editor = new wangEditor(`#wangEditor`)
     // 配置 onchange 回调函数，将数据同步到 vue 中
     editor.config.onchange = (newHtml) => {
@@ -41,8 +43,5 @@ onBeforeUnmount(()=>{
     editors.destroy()
     editors = null
   })
-
 </script>
-<style>
+<style></style>
-
-</style>

src/icons/index.js

@@ -5,7 +5,7 @@ console.log(11111111)
 // const req = require.context('./svg', false, /\.svg$/)
 const req = import.meta.globEager('./svg/*.svg')
 consoole.log('req', req)
-const requireAll = requireContext => requireContext.keys().map(requireContext)
+const requireAll = (requireContext) => requireContext.keys().map(requireContext)
 requireAll(req)
 
 export default SvgIcon

src/layout/components/Sidebar/Link.vue

@@ -11,8 +11,8 @@ export default {
     props: {
       to: {
         type: String,
-      required: true
+        required: true,
-    }
+      },
     },
     computed: {
       isExternal() {
@@ -23,7 +23,7 @@ export default {
           return 'a'
         }
         return 'router-link'
-    }
+      },
     },
     methods: {
       linkProps(to) {
@@ -31,14 +31,14 @@ export default {
           return {
             href: to,
             target: '_blank',
-          rel: 'noopener'
+            rel: 'noopener',
           }
         }
         return {
-        to: to
+          to: to,
-      }
-    }
         }
+      },
+    },
   }
 </script>
 

src/layout/components/Sidebar/Logo.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':isCollapse}">
+  <div class="sidebar-logo-container" :class="{ collapse: isCollapse }">
     <transition name="sidebarLogoFade">
       <router-link v-if="isCollapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
         <h1 v-else class="sidebar-title">Perfect </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
         <h1 class="sidebar-title"> {{ title }}</h1>
       </router-link>
     </transition>
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, reactive, ref} from "vue";
+  import { computed, reactive, ref } from 'vue'
   import { useStore } from 'vuex' // useStore ===vue2.0中的this.$store
   import logo from '@/assets/logo.png'
 
@@ -24,7 +24,6 @@ const title = ref<string>('Vue Admin Perfect')
   const isCollapse = computed(() => {
     return !store.state.app.isCollapse
   })
-
 </script>
 
 <style lang="scss" scoped>

src/layout/components/Sidebar/SidebarItem.vue

@@ -33,17 +33,17 @@
   const props = defineProps({
     item: {
       type: Object,
-      required: true
+      required: true,
     },
     basePath: {
       type: String,
-      default: ''
+      default: '',
-    }
+    },
   })
 
   const onlyOneChild = ref(null)
   const hasOneShowingChild = (children = [], parent) => {
-    const showingChildren = children.filter(item => {
+    const showingChildren = children.filter((item) => {
       // 过滤掉需要隐藏的菜单
       if (item.hidden) {
         return false
@@ -67,7 +67,6 @@
     return false
   }
 
-
   const resolvePath = (routePath) => {
     if (isExternal(routePath)) {
       return routePath
@@ -77,5 +76,4 @@
     }
     return path.resolve(props.basePath, routePath)
   }
-
 </script>

src/layout/components/Sidebar/menuSlide.vue

@@ -9,7 +9,12 @@
     class="el-menu-vertical-demo"
     :collapse="isCollapse"
   >
-           <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path"/>
+    <sidebar-item
+      v-for="route in permission_routes"
+      :key="route.path"
+      :item="route"
+      :base-path="route.path"
+    />
   </el-menu>
 </template>
 

src/layout/components/TagsView/betterScroll.vue

@@ -7,43 +7,43 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted,nextTick } from 'vue';
+  import { ref, computed, watch, onMounted, nextTick } from 'vue'
-import { useElementSize } from '@vueuse/core';
+  import { useElementSize } from '@vueuse/core'
-import BScroll from '@better-scroll/core';
+  import BScroll from '@better-scroll/core'
-import type { Options } from '@better-scroll/core';
+  import type { Options } from '@better-scroll/core'
 
   interface Props {
     /** better-scroll的配置: https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html */
-  options: Options;
+    options: Options
   }
 
-const props = defineProps<Props>();
+  const props = defineProps<Props>()
 
-const bsWrap = ref<HTMLElement>();
+  const bsWrap = ref<HTMLElement>()
-const instance = ref<BScroll>();
+  const instance = ref<BScroll>()
-const bsContent = ref<HTMLElement>();
+  const bsContent = ref<HTMLElement>()
 
   function initBetterScroll() {
     nextTick(() => {
-    instance.value = new BScroll(bsWrap.value, props.options);
+      instance.value = new BScroll(bsWrap.value, props.options)
     })
   }
 
   // 滚动元素发生变化，刷新BS
-const { width: wrapWidth } = useElementSize(bsWrap);
+  const { width: wrapWidth } = useElementSize(bsWrap)
 
-const { width, height } = useElementSize(bsContent);
+  const { width, height } = useElementSize(bsContent)
   watch([() => wrapWidth.value, () => width.value, () => height.value], () => {
     if (instance.value) {
-    instance.value.refresh();
+      instance.value.refresh()
     }
-});
+  })
 
   onMounted(() => {
-  initBetterScroll();
+    initBetterScroll()
-});
+  })
 
-defineExpose({ instance });
+  defineExpose({ instance })
 </script>
 <style scoped>
   .tags-scroll-wrap {

src/layout/components/TagsView/index.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="tags-wrap-container">
     <div class="tags-view" ref="scrollContainer">
-      <better-scroll  :options="{ scrollX: true, scrollY: false, }" ref="bsScroll">
+      <better-scroll :options="{ scrollX: true, scrollY: false }" ref="bsScroll">
         <div class="tags-scroll-inner">
-          <div v-for="tag in visitedViews"
+          <div
+            v-for="tag in visitedViews"
             :ref="setTagRef"
             :path="tag.path"
             :data-id="tag.path"
@@ -12,33 +13,28 @@
             :key="tag.path"
             class="item-tag-wrap"
             :class="isActive(tag) ? 'active' : ''"
-               @click="routerGo(tag)">
+            @click="routerGo(tag)"
+          >
             <div class="tags-view-item">{{ tag.title }}</div>
             <el-icon @click.prevent.stop="(e) => closeSelectedTag(e, tag)" class="tag-icon">
-              <circle-close-filled /></el-icon>
+              <circle-close-filled
+            /></el-icon>
           </div>
         </div>
       </better-scroll>
     </div>
-    <el-tooltip
+    <el-tooltip class="box-item" effect="dark" content="点击刷新" placement="bottom-end">
-        class="box-item"
-        effect="dark"
-        content="点击刷新"
-        placement="bottom-end"
-    >
       <div class="refresh" @click="refresh">
         <div class="refresh-inner">
-         <el-icon><Refresh />
+          <el-icon><Refresh /> </el-icon> </div
-        </el-icon>
+      ></div>
-      </div></div>
     </el-tooltip>
-
   </div>
 </template>
 
 <script lang="ts" setup>
-  import {computed, nextTick, onMounted, reactive, ref, watch} from "vue";
+  import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
-  import betterScroll from "./betterScroll.vue";
+  import betterScroll from './betterScroll.vue'
   import { useStore } from 'vuex'
   import { useRoute, useRouter } from 'vue-router'
 
@@ -59,7 +55,7 @@
     return store.state.tagsView.visitedViews
   })
 
-  const bsScroll = ref<Expose.BetterScroll>();
+  const bsScroll = ref<Expose.BetterScroll>()
   let obj = new WeakMap()
 
   let affixTags = ref([])
@@ -79,14 +75,14 @@
 
   function filterAffixTags(routes, basePath = '/') {
     let tags = []
-    routes.forEach(route => {
+    routes.forEach((route) => {
       if (route.meta && route.meta.affix) {
         const tagPath = path.resolve(basePath, route.path)
         tags.push({
           fullPath: tagPath,
           path: tagPath,
           name: route.name,
-          meta: { ...route.meta }
+          meta: { ...route.meta },
         })
       }
       if (route.children) {
@@ -101,7 +97,7 @@
 
   const initTags = () => {
     let routesNew = routes.value
-    let affixTag = affixTags.value = filterAffixTags(routesNew)
+    let affixTag = (affixTags.value = filterAffixTags(routesNew))
     for (const tag of affixTag) {
       if (tag.name) {
         store.dispatch('tagsView/addVisitedView', tag)
@@ -146,7 +142,6 @@
     store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
       if (isActive(view)) {
         toLastView(visitedViews, view)
-
       }
     })
   }
@@ -161,14 +156,14 @@
   function handleScrollAction(currentTag) {
     const scrollContainerRect = scrollContainer.value.getBoundingClientRect()
     let { left: currx, width: currentWidth } = currentTag.getBoundingClientRect()
-    const clientX = currx + currentWidth / 2;
+    const clientX = currx + currentWidth / 2
-    const currentX = clientX - scrollContainerRect.left;
+    const currentX = clientX - scrollContainerRect.left
-    const deltaX = currentX - scrollContainerRect.width / 2;
+    const deltaX = currentX - scrollContainerRect.width / 2
     if (bsScroll.value) {
-      const { maxScrollX, x: leftX } = bsScroll.value.instance;
+      const { maxScrollX, x: leftX } = bsScroll.value.instance
-      const rightX = maxScrollX - leftX;
+      const rightX = maxScrollX - leftX
-      const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX);
+      const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX)
-      bsScroll.value?.instance.scrollBy(update, 0, 300);
+      bsScroll.value?.instance.scrollBy(update, 0, 300)
     }
   }
 
@@ -189,7 +184,6 @@
     })
   }
 
-
   onMounted(() => {
     initTags()
     addTags()
@@ -199,7 +193,6 @@
       }, 50)
     })
 
-
     watch(route, () => {
       addTags()
       nextTick(() => {
@@ -210,15 +203,16 @@
     })
 
     router.beforeEach(async (to, from, next) => {
-      if((from.fullPath==='/error/404'||from.fullPath==='/error/401')&&to.fullPath==="/home") {
+      if (
+        (from.fullPath === '/error/404' || from.fullPath === '/error/401') &&
+        to.fullPath === '/home'
+      ) {
         let whiteList = ['/error/404', '/error/401']
         await store.dispatch('tagsView/removeView', whiteList)
       }
       next()
     })
   })
-
-
 </script>
 
 <style lang="scss" scoped>

src/layout/components/UHeader/Personal.vue

@@ -1,9 +1,5 @@
 <template>
-  <el-dialog
+  <el-dialog v-model="dialogVisible" title="修改密码" width="60%">
-      v-model="dialogVisible"
-      title="修改密码"
-      width="60%"
-  >
     <el-form
       ref="ruleFormRef"
       :model="ruleForm"
@@ -25,16 +21,14 @@
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitForm(ruleFormRef)"
+        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
-        >确定</el-button
-        >
       </span>
     </template>
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
-  import { ref,defineExpose,reactive, } from 'vue'
+  import { ref, defineExpose, reactive } from 'vue'
   import { ElMessageBox } from 'element-plus'
   import type { ElForm } from 'element-plus'
   const dialogVisible = ref(false)

src/layout/components/UHeader/index.vue

@@ -1,10 +1,14 @@
 <template>
   <div
     class="m-layout-header"
-          :style="{left:`${mode==='horizontal'?0:isCollapse?'56':'210'}px`}">
+    :style="{ left: `${mode === 'horizontal' ? 0 : isCollapse ? '56' : '210'}px` }"
-        <div class="header" :class="{
+  >
-            transverseMenu:mode==='horizontal'
+    <div
-          }">
+      class="header"
+      :class="{
+        transverseMenu: mode === 'horizontal',
+      }"
+    >
       <menu-slide v-if="mode === 'horizontal'" />
       <div class="left" v-if="mode === 'vertical'">
         <div>
@@ -18,7 +22,9 @@
         <u-screen-full />
         <el-dropdown @command="commandAction">
           <span class="el-dropdown-link">
-             <el-avatar :icon="UserFilled" :size="30" style="margin-right: 6px"/>{{ userInfo.username }}
+            <el-avatar :icon="UserFilled" :size="30" style="margin-right: 6px" />{{
+              userInfo.username
+            }}
             <el-icon class="el-icon--right">
               <arrow-down />
             </el-icon>
@@ -41,14 +47,14 @@
   import { UserFilled } from '@element-plus/icons-vue'
   import Personal from './Personal.vue'
   import TagViews from '../TagsView/index.vue'
-  import UHamburger from "@/components/u-Hamburger/index.vue"
+  import UHamburger from '@/components/u-Hamburger/index.vue'
   import UScreenFull from '@/components/u-screenfull/index.vue'
   import UInfo from '@/components/u-info/index.vue'
   import MenuSlide from '../Sidebar/menuSlide.vue'
-  import {computed, ref,} from 'vue'
+  import { computed, ref } from 'vue'
   import { useRouter } from 'vue-router'
   import { ElMessageBox, ElMessage } from 'element-plus'
-  import {useStore} from "vuex";
+  import { useStore } from 'vuex'
 
   const store = useStore()
   const person = ref()
@@ -69,40 +75,31 @@
     return store.state.user.userInfo
   })
 
-
   const logOut = async () => {
-    ElMessageBox.confirm(
+    ElMessageBox.confirm('确定退出登录吗？', '退出登录', {
-        '确定退出登录吗？',
-        '退出登录',
-        {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning',
-        }
+    })
-    )
       .then(async () => {
         try {
           await store.dispatch('user/logout')
           router.push({ path: '/login' })
           store.dispatch('permission/clearRoutes')
           store.dispatch('tagsView/clearVisitedView')
-          }catch (e) {
+        } catch (e) {}
-
-          }
-        })
-        .catch(() => {
-
       })
+      .catch(() => {})
   }
 
   const commandAction = (key: number) => {
     switch (key) {
       case 1:
         logOut()
-        break;
+        break
       case 2:
         person.value.show()
-        break;
+        break
     }
   }
   const handleCollapse = () => {
@@ -161,5 +158,4 @@
     display: flex;
     align-items: center;
   }
-
 </style>

src/layout/index.vue

@@ -2,9 +2,12 @@
   <div class="g-container-layout" :class="classObj">
     <div v-if="device === 'mobile' && !isCollapse" class="drawer-bg" @click="handleClickOutside" />
     <sidebar class="sidebar-container" v-if="mode === 'vertical'" />
-    <div class="main-container" :class="{
+    <div
-      hideSliderLayout:mode==='horizontal'
+      class="main-container"
-    }">
+      :class="{
+        hideSliderLayout: mode === 'horizontal',
+      }"
+    >
       <u-header />
       <div class="m-container-content" :class="{ 'app-main-hide-tag': !isShowTag }">
         <app-main />
@@ -14,13 +17,13 @@
 </template>
 
 <script lang="ts">
-  import {computed, defineComponent, ref} from 'vue';
+  import { computed, defineComponent, ref } from 'vue'
   import Sidebar from './components/Sidebar/index.vue'
   import UHeader from './components/UHeader/index.vue'
   import AppMain from './components/AppMain.vue'
   import { useResizeHandler } from './hooks/useResizeHandler'
 
-  import {useStore} from "vuex";
+  import { useStore } from 'vuex'
 
   export default defineComponent({
     name: 'layout',
@@ -42,7 +45,7 @@
           hideSidebar: !store.state.app.isCollapse,
           openSidebar: store.state.app.isCollapse,
           withoutAnimation: store.state.app.withoutAnimation,
-          mobile: device.value === 'mobile'
+          mobile: device.value === 'mobile',
         }
       })
       const handleClickOutside = () => {
@@ -61,10 +64,10 @@
         classObj,
         isShowTag,
         mode,
-        handleClickOutside
+        handleClickOutside,
       }
-    }
+    },
-  });
+  })
 </script>
 
 <style lang="scss" scoped>
@@ -77,7 +80,7 @@
       display: flex;
       flex: 1;
       box-sizing: border-box;
-      flex-direction: column
+      flex-direction: column;
     }
     &.mobile.openSidebar {
       position: fixed;

src/styles/index.scss

@@ -1,3 +1,3 @@
 @import './variables.scss';
 @import './sidebar.scss';
-@import "./transition.scss";
+@import './transition.scss';

src/styles/sidebar.scss

@@ -1,8 +1,7 @@
 #app {
-
   .main-container {
     min-height: 100%;
-    transition: margin-left .28s;
+    transition: margin-left 0.28s;
     margin-left: $sideBarWidth;
     position: relative;
   }
@@ -173,7 +172,7 @@
     }
 
     .sidebar-container {
-      transition: transform .28s;
+      transition: transform 0.28s;
       width: $sideBarWidth !important;
     }
 
@@ -187,7 +186,6 @@
   }
 
   .withoutAnimation {
-
     .main-container,
     .sidebar-container {
       transition: none;

src/styles/transition.scss

@@ -27,7 +27,6 @@
   transform: translateX(20px);
 }
 
-
 // 面包屑动画
 .breadcrumb-enter-active {
   transition: all 0.25s;
@@ -38,8 +37,6 @@
   transform: translateX(30px) skewX(-50deg);
 }
 
-
-
 .fade-transform-leave-active,
 .fade-transform-enter-active {
   transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s;

src/styles/variables.scss

@@ -1,16 +1,16 @@
 // base color
 $blue: #324157;
-$light-blue:#3A71A8;
+$light-blue: #3a71a8;
-$red:#C03639;
+$red: #c03639;
-$pink: #E65D6E;
+$pink: #e65d6e;
-$green: #30B08F;
+$green: #30b08f;
-$tiffany: #4AB7BD;
+$tiffany: #4ab7bd;
-$yellow:#FEC171;
+$yellow: #fec171;
-$panGreen: #30B08F;
+$panGreen: #30b08f;
 
 // sidebar
 $menuText: #bfcbd9;
-$menuActiveText:#409EFF;
+$menuActiveText: #409eff;
 $subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
 
 $menuBg: #304156;

src/utils/auth.js

@@ -1,4 +1,3 @@
-
 const TokenKey = 'zb-token'
 
 export function getToken() {
@@ -6,9 +5,9 @@ export function getToken() {
 }
 
 export function setToken(token) {
-  return localStorage.TokenKey = token
+  return (localStorage.TokenKey = token)
 }
 
 export function removeToken() {
-  return localStorage.TokenKey =''
+  return (localStorage.TokenKey = '')
 }

src/utils/downloadzip.ts

@@ -88,7 +88,7 @@ export async function downloadFiles2ZipWithFolder(params: IDownloadFiles2ZipWith
 
 async function handleFolder(zip: JsZip, folder: IFolder) {
     console.log({folder})
-    let folderPromises: Promise<any>[] = [];
+    const folderPromises: Promise<any>[] = [];
     const promises = folder?.files?.map(async param => await handleEachFile(param, zip, folder.folderName));
     await Promise.all([...promises, ...folderPromises]);
 }
@@ -169,7 +169,7 @@ function handleDataWithRender(worksheet: Worksheet, sheet: ISheet) {
 // @ts-ignore
 function getValueFromRender(renderResult: any) {
     if (renderResult?.type) {
-        let children = renderResult?.props?.children;
+        const children = renderResult?.props?.children;
         if (children?.type) {
             return getValueFromRender(children);
         } else {

src/utils/emojis.js

@@ -1,12 +1,35 @@
 export default {
-  imgs: ['爱你',
+  imgs: [
-    '爱情', '爱心', '傲慢',
+    '爱你',
-    '白眼', '抱拳', '鄙视',
+    '爱情',
-    '闭嘴', '便便', '擦汗',
+    '爱心',
-    '菜刀', '差劲', '呲牙',
+    '傲慢',
-    '大哭', '蛋糕', '刀',
+    '白眼',
-    '得意', '凋谢', '发呆', 'NO', 'OK',
+    '抱拳',
-    '发抖', '发怒', '饭', '飞吻', '奋斗',
+    '鄙视',
-    '疯了', '尴尬', '勾引', '鼓掌', '哈欠',
+    '闭嘴',
-  ]
+    '便便',
+    '擦汗',
+    '菜刀',
+    '差劲',
+    '呲牙',
+    '大哭',
+    '蛋糕',
+    '刀',
+    '得意',
+    '凋谢',
+    '发呆',
+    'NO',
+    'OK',
+    '发抖',
+    '发怒',
+    '饭',
+    '飞吻',
+    '奋斗',
+    '疯了',
+    '尴尬',
+    '勾引',
+    '鼓掌',
+    '哈欠',
+  ],
 }

src/utils/exprotExcel.ts

@@ -21,15 +21,15 @@ export const exportExcel = async ({column,data,filename,autoWidth,format})=>{
     // 创建工作表
     const worksheet = workbook.addWorksheet(filename);
     // 设置列名
-    let columnsName = [];
+    const columnsName = [];
     column.forEach((item,index)=>{
-        let obj = {
+        const obj = {
             header: item.label, key:item.name, width: null
         }
         if(autoWidth){
-            let maxArr = [autoWidthAction(item.label)]
+            const maxArr = [autoWidthAction(item.label)]
             data.forEach(ite=>{
-                let str = ite[item.name] ||''
+                const str = ite[item.name] ||''
                 if(str){
                     maxArr.push(autoWidthAction(str))
                 }
@@ -93,15 +93,15 @@ export const exportStyleExcel =async ({column,data,filename,autoWidth,format})=>
     // 创建工作表
     const worksheet = workbook.addWorksheet(filename);
     // 设置列名
-    let columnsName = [];
+    const columnsName = [];
     column.forEach((item,index)=>{
-        let obj = {
+        const obj = {
             header: item.label, key:item.name, width: null
         }
         if(autoWidth){
-            let maxArr = [autoWidthAction(item.label)]
+            const maxArr = [autoWidthAction(item.label)]
             data.forEach(ite=>{
-                let str = ite[item.name] ||''
+                const str = ite[item.name] ||''
                 if(str){
                     maxArr.push(autoWidthAction(str))
                 }
@@ -161,7 +161,7 @@ export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
     // 创建excel
     const workbook = new ExcelJS.Workbook();
     // 创建工作表
-    let sheet = workbook.addWorksheet("sheet1");
+    const sheet = workbook.addWorksheet("sheet1");
 
     // 添加表头
     sheet.getRow(1).values = ["序号", "日期","地址" ,"配送消息"  ,,, ];
@@ -173,16 +173,16 @@ export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
         "城市",
         "邮编"
     ];
-    let headers = [];
+    const headers = [];
     column.forEach((item,index)=>{
         if(item.children){
             item.children.forEach(itemChild=>{
-                let obj = {
+                const obj = {
                     key:itemChild.name, width: null
                 }
-                let maxArr = [autoWidthAction(itemChild.label)]
+                const maxArr = [autoWidthAction(itemChild.label)]
                 data.forEach(ite=>{
-                    let str = ite[itemChild.name] ||''
+                    const str = ite[itemChild.name] ||''
                     if(str){
                         maxArr.push(autoWidthAction(str))
                     }
@@ -193,12 +193,12 @@ export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
             })
 
         }else {
-            let obj = {
+            const obj = {
                 key:item.name, width: null
             }
-            let maxArr = [autoWidthAction(item.label)]
+            const maxArr = [autoWidthAction(item.label)]
             data.forEach(ite=>{
-                let str = ite[item.name] ||''
+                const str = ite[item.name] ||''
                 if(str){
                     maxArr.push(autoWidthAction(str))
                 }

src/utils/index.js

@@ -17,8 +17,8 @@ export function parseTime(time, cFormat) {
   if (typeof time === 'object') {
     date = time
   } else {
-    if ((typeof time === 'string')) {
+    if (typeof time === 'string') {
-      if ((/^[0-9]+$/.test(time))) {
+      if (/^[0-9]+$/.test(time)) {
         // support "1548221490638"
         time = parseInt(time)
       } else {
@@ -28,7 +28,7 @@ export function parseTime(time, cFormat) {
       }
     }
 
-    if ((typeof time === 'number') && (time.toString().length === 10)) {
+    if (typeof time === 'number' && time.toString().length === 10) {
       time = time * 1000
     }
     date = new Date(time)
@@ -40,12 +40,14 @@ export function parseTime(time, cFormat) {
     h: date.getHours(),
     i: date.getMinutes(),
     s: date.getSeconds(),
-    a: date.getDay()
+    a: date.getDay(),
   }
   const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
     const value = formatObj[key]
     // Note: getDay() returns 0 on Sunday
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
     return value.toString().padStart(2, '0')
   })
   return time_str
@@ -81,15 +83,7 @@ export function formatTime(time, option) {
     return parseTime(time, option)
   } else {
     return (
-      d.getMonth() +
+      d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
-      1 +
-      '月' +
-      d.getDate() +
-      '日' +
-      d.getHours() +
-      '时' +
-      d.getMinutes() +
-      '分'
     )
   }
 }
@@ -124,7 +118,7 @@ export function byteLength(str) {
     const code = str.charCodeAt(i)
     if (code > 0x7f && code <= 0x7ff) s++
     else if (code > 0x7ff && code <= 0xffff) s += 2
-    if (code >= 0xDC00 && code <= 0xDFFF) i--
+    if (code >= 0xdc00 && code <= 0xdfff) i--
   }
   return s
 }
@@ -150,10 +144,10 @@ export function cleanArray(actual) {
 export function param(json) {
   if (!json) return ''
   return cleanArray(
-    Object.keys(json).map(key => {
+    Object.keys(json).map((key) => {
       if (json[key] === undefined) return ''
       return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
-    })
+    }),
   ).join('&')
 }
 
@@ -168,7 +162,7 @@ export function param2Obj(url) {
   }
   const obj = {}
   const searchArr = search.split('&')
-  searchArr.forEach(v => {
+  searchArr.forEach((v) => {
     const index = v.indexOf('=')
     if (index !== -1) {
       const name = v.substring(0, index)
@@ -202,7 +196,7 @@ export function objectMerge(target, source) {
   if (Array.isArray(source)) {
     return source.slice()
   }
-  Object.keys(source).forEach(property => {
+  Object.keys(source).forEach((property) => {
     const sourceProperty = source[property]
     if (typeof sourceProperty === 'object') {
       target[property] = objectMerge(target[property], sourceProperty)
@@ -227,8 +221,7 @@ export function toggleClass(element, className) {
     classString += '' + className
   } else {
     classString =
-      classString.substr(0, nameIndex) +
+      classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length)
-      classString.substr(nameIndex + className.length)
   }
   element.className = classString
 }
@@ -298,7 +291,7 @@ export function deepClone(source) {
     throw new Error('error arguments', 'deepClone')
   }
   const targetObj = source.constructor === Array ? [] : {}
-  Object.keys(source).forEach(keys => {
+  Object.keys(source).forEach((keys) => {
     if (source[keys] && typeof source[keys] === 'object') {
       targetObj[keys] = deepClone(source[keys])
     } else {
@@ -356,70 +349,77 @@ export function removeClass(ele, cls) {
   }
 }
 
-
 export function getColor() {
-  var str = '#';
+  var str = '#'
-  var arr = ['1', '2', '3', '4', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
+  var arr = ['1', '2', '3', '4', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
   for (var i = 0; i < 6; i++) {
-    var num = parseInt(Math.random() * 16);
+    var num = parseInt(Math.random() * 16)
-    str += arr[num];
+    str += arr[num]
   }
-  return str;
+  return str
 }
 // 检查给定的值是否是数组
 export const isArray = function (value) {
-  return objToString.call(value) === "[object Array]";
+  return objToString.call(value) === '[object Array]'
-};
+}
-var funProto = Function.prototype;
+var funProto = Function.prototype
-var objProto = Object.prototype;
+var objProto = Object.prototype
 
-var getPrototypeOf = Object.getPrototypeOf;
+var getPrototypeOf = Object.getPrototypeOf
 
-var objToString = objProto.toString;
+var objToString = objProto.toString
-var hasOwnProperty = objProto.hasOwnProperty;
+var hasOwnProperty = objProto.hasOwnProperty
-var funToString = funProto.toString;
+var funToString = funProto.toString
 // 检查给定的值是否是字符串
 export const isString = function (value) {
-  return objToString.call(value) === "[object String]";
+  return objToString.call(value) === '[object String]'
-};
+}
 // 检查给定的值是否是纯对象，纯对象是指通过 {} 或 new Object() 声明的对象
 export const isPlainObject = function (value) {
-  if (!value || objToString.call(value) !== "[object Object]") {
+  if (!value || objToString.call(value) !== '[object Object]') {
-    return false;
+    return false
   }
 
-  var prototype = getPrototypeOf(value);
+  var prototype = getPrototypeOf(value)
 
   if (prototype === null) {
-    return true;
+    return true
   }
 
-  var constructor = hasOwnProperty.call(prototype, "constructor") && prototype.constructor;
+  var constructor = hasOwnProperty.call(prototype, 'constructor') && prototype.constructor
 
-  return typeof constructor === "function" && funToString.call(constructor) === funToString.call(Object);
+  return (
-};
+    typeof constructor === 'function' && funToString.call(constructor) === funToString.call(Object)
+  )
+}
 
 // // 深度克隆 array 数组或 json 对象，返回克隆后的副本
 export const deepObjClone = function (obj) {
   let weakMap = new WeakMap()
   function clone(obj) {
-    if(obj==null){return obj}
+    if (obj == null) {
-    if(obj instanceof Date){ return new Date(obj) }
+      return obj
-    if(obj instanceof RegExp){ return new RegExp(obj)}
+    }
+    if (obj instanceof Date) {
+      return new Date(obj)
+    }
+    if (obj instanceof RegExp) {
+      return new RegExp(obj)
+    }
     if (typeof obj !== 'object') return obj
 
     if (weakMap.get(obj)) {
       return weakMap.get(obj)
     }
-    var copy =  new obj.constructor
+    var copy = new obj.constructor()
     weakMap.set(obj, copy)
     for (var key in obj) {
       if (Object.prototype.hasOwnProperty.call(obj, key)) {
-        var value = obj[key];
+        var value = obj[key]
-        copy[key] = clone(value);
+        copy[key] = clone(value)
       }
     }
-    return copy;
+    return copy
   }
   return clone(obj)
-};
+}

src/utils/validate.js

@@ -24,7 +24,8 @@ export function validUsername(str) {
  * @returns {Boolean}
  */
 export function validURL(url) {
-  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  const reg =
+    /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
   return reg.test(url)
 }
 
@@ -60,7 +61,8 @@ export function validAlphabets(str) {
  * @returns {Boolean}
  */
 export function validEmail(email) {
-  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  const reg =
+    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
   return reg.test(email)
 }
 

src/views/Home.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
+    <img alt="Vue logo" src="../assets/logo.png" />
     <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+  import { defineComponent } from 'vue'
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+  import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
 
   export default defineComponent({
     name: 'Home',
     components: {
       HelloWorld,
     },
-});
+  })
 </script>

src/views/charts/animation.vue

@@ -8,7 +8,9 @@
         <div class="item-right">
           <div class="item-right-inner">
             <div class="text-title">带动就业人数</div>
-              <div class="text-number"><count-to :startVal="0" :endVal="6285" :duration="4000" separator=""></count-to></div>
+            <div class="text-number"
+              ><count-to :startVal="0" :endVal="6285" :duration="4000" separator=""></count-to
+            ></div>
             <div class="text-der text-decenter-wrapr">
               <span class="left">同比去年</span>
               <img src="@/assets/image/allow.png" />
@@ -19,10 +21,15 @@
       </div>
     </div>
     <div>
-        <div class="circle-dot" v-for="item,index in pointStyle" :key="index" :style="{
+      <div
+        class="circle-dot"
+        v-for="(item, index) in pointStyle"
+        :key="index"
+        :style="{
           left: `${item.left}px`,
-          top:`${item.top}px`
+          top: `${item.top}px`,
-        }"></div>
+        }"
+      ></div>
     </div>
   </div>
 </template>
@@ -47,11 +54,15 @@ const getAttribute = () => {
     const mAnimationInfo = mAnimation.value.getBoundingClientRect()
     const obj = []
     for (let i = 0; i < 30; i++) {
-    if (!obj[i]) { obj[i] = {} }
+      if (!obj[i]) {
+        obj[i] = {}
+      }
       obj[i].left = randomNum(0, mAnimationInfo.width)
     }
     for (let i = 0; i < 30; i++) {
-    if (!obj[i]) { obj[i] = {} }
+      if (!obj[i]) {
+        obj[i] = {}
+      }
       obj[i].top = randomNum(0, mAnimationInfo.height)
     }
     return obj
@@ -75,11 +86,14 @@ onMounted(() => {
       animation: rotate 5s infinite linear;
     }
     @keyframes rotate {
-    0%{transform:rotate(0deg);}
+      0% {
-    100%{transform:rotate(360deg);}
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
     }
     .item {
-
       display: flex;
       /*align-items: center;*/
       .item-icon {
@@ -87,7 +101,7 @@ onMounted(() => {
         height: 109px;
       }
       .item-icon1 {
-      background: url("../../assets/image/center-inner1.png") no-repeat center 43%;
+        background: url('../../assets/image/center-inner1.png') no-repeat center 43%;
       }
       .item-right {
         margin-left: 20px;
@@ -127,14 +141,11 @@ onMounted(() => {
           }
           .right {
             color: #ff0000;
-
           }
         }
       }
     }
 
-
-
     .circle-dot {
       width: 5px;
       height: 5px;
@@ -190,7 +201,6 @@ onMounted(() => {
       }
     }
 
-
     .item-animation {
       padding: 20px;
     }

src/views/charts/complex.vue

@@ -14,7 +14,6 @@
 <script setup lang="ts">
   import LineCharts from './components/complex/line/index.vue'
   import BarCharts from './components/complex/bar/index.vue'
-
 </script>
 <style lang="scss" scoped>
   .m-complex {
@@ -35,5 +34,4 @@ import BarCharts from './components/complex/bar/index.vue'
     background-size: contain;
     background-repeat: no-repeat;
   }
-
 </style>

src/views/charts/components/complex/Histogram.vue

@@ -3,31 +3,31 @@
 </template>
 <script lang="ts" setup>
   import 'echarts-liquidfill/src/liquidFill.js'
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     legend: {
@@ -38,12 +38,12 @@ const options = {
         '60岁全程接种量',
         '80岁任务数',
         '80岁全程接种量',
-        '完成率'
+        '完成率',
-      ]
+      ],
     },
     xAxis: {
       type: 'category',
-      data: ['街道1', '街道2', '街道3', '街道4', '街道5', '街道6', '街道7']
+      data: ['街道1', '街道2', '街道3', '街道4', '街道5', '街道6', '街道7'],
     },
     yAxis: [
       { type: 'value' },
@@ -54,7 +54,7 @@ const options = {
         // max: 100,
         nameTextStyle: {
           color: '#ccc',
-          padding: [0, 0, 10, -30]
+          padding: [0, 0, 10, -30],
         },
         splitNumber: 5,
         splitLine: {
@@ -63,16 +63,16 @@ const options = {
             type: 'dashed',
             width: 1,
             // 使用深浅的间隔色
-            color: ['#566471', '#566471']
+            color: ['#566471', '#566471'],
-          }
+          },
         },
         axisLabel: {
           show: true,
           textStyle: {
-            fontSize: 12
+            fontSize: 12,
-          }
+          },
-        }
+        },
-      }
+      },
     ],
     // tooltip: {
     //   trigger: 'axis',
@@ -81,56 +81,60 @@ const options = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'shadow'
+        type: 'shadow',
       },
       textStyle: {
         color: '#fff',
         align: 'left',
-        fontSize: 14
+        fontSize: 14,
       },
-      axisLine: {//x坐标轴轴线
+      axisLine: {
+        //x坐标轴轴线
         show: true,
-        lineStyle: {//x坐标轴轴线样式
+        lineStyle: {
+          //x坐标轴轴线样式
           color: '#000', //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
-        }
+        },
       },
 
       backgroundColor: 'rgba(0,0,0,0.8)',
       formatter: function (params) {
-        console.log(params);
+        console.log(params)
-        let str = params[0].name + '<br />';
+        let str = params[0].name + '<br />'
-        console.log(str);
+        console.log(str)
         params.forEach((item) => {
-          console.log(item.seriesName);
+          console.log(item.seriesName)
           if (item.value) {
             if (item.seriesName.indexOf('岁全程接种量') != -1) {
-              str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
+              str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${
+                item.color
+              }
                                     "></span>
                                          ${item.seriesName}
                                          :
                                        ${item.value}人  <br/>
                                          &nbsp; &nbsp;  全程完成率
                                        : ${item.value / 100}%
-                                        <br/><br/>`;
+                                        <br/><br/>`
             } else if (item.seriesName.indexOf('岁任务数') != -1) {
               str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
                                     "></span>
                                          ${item.seriesName}
                                          :
                                        ${item.value}人
-                                        <br/>`;
+                                        <br/>`
             } else {
               str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
                                     "></span>
                                         ${item.seriesName}
                                         :
                                       ${item.value}%
-                                        <br/>`;
+                                        <br/>`
             }
           }
-        });
+        })
-        return str;
+        return str
-      }
+      },
     },
 
     series: [
@@ -138,37 +142,37 @@ const options = {
         name: '3-11岁任务数',
         data: [150, 230, 224, 218, 135, 147, 260],
         stack: 'BB',
-        type: 'bar'
+        type: 'bar',
       },
       {
         name: '3-11岁全程接种量',
         data: [150, 230, 224, 218, 135, 147, 260],
         stack: 'BB',
-        type: 'bar'
+        type: 'bar',
       },
       {
         name: '60岁任务数',
         data: [150, 230, 224, 218, 135, 147, 260],
         stack: 'AA',
-        type: 'bar'
+        type: 'bar',
       },
       {
         name: '60岁全程接种量',
         data: [880, 30, 124, 118, 35, 47, 160],
         stack: 'AA',
-        type: 'bar'
+        type: 'bar',
       },
       {
         name: '80岁任务数',
         data: [660, 30, 124, 118, 35, 47, 160],
         stack: 'Ad',
-        type: 'bar'
+        type: 'bar',
       },
       {
         name: '80岁全程接种量',
         data: [880, 30, 124, 118, 35, 47, 160],
         stack: 'Ad',
-        type: 'bar'
+        type: 'bar',
       },
       {
         name: '完成率',
@@ -180,25 +184,25 @@ const options = {
           itemStyle: {
             normal: {
               lineStyle: {
-                type: 'dotted'
+                type: 'dotted',
-              }
-            }
               },
-          data: [{ type: 'average', name: 'Avg' + '%' }]
+            },
+          },
+          data: [{ type: 'average', name: 'Avg' + '%' }],
         },
         //   symbol: 'none',
         itemStyle: {
           normal: {
             lineStyle: {
               width: 2,
-              type: 'solid' //'dotted'虚线 'solid'实线
+              type: 'solid', //'dotted'虚线 'solid'实线
+            },
+          },
+        },
+      },
+    ],
   }
-          }
+  let chart: EChartsType
-        }
-      }
-    ]
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -209,6 +213,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/complex/bar/components/bar.vue

@@ -10,32 +10,32 @@ const chartsRef = ref<HTMLElement|null>()
   const props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     xAxisData: {
       type: Array,
-    default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     },
     config: {
       type: Object,
-    default: () => {}
+      default: () => {},
     },
     seriesData: {
       type: Array,
-    default: () => [150, 230, 224, 218, 135, 147, 260]
+      default: () => [150, 230, 224, 218, 135, 147, 260],
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     grid: {
@@ -47,18 +47,18 @@ const options = {
     },
     xAxis: {
       type: 'category',
-    data: props.xAxisData
+      data: props.xAxisData,
     },
     yAxis: {
-    type: 'value'
+      type: 'value',
     },
     series: [
       {
         data: props.seriesData,
-      type: 'bar'
+        type: 'bar',
-    }
+      },
     ],
-  ...props.config
+    ...props.config,
   }
   let chart: EChartsType
   const initChart = () => {
@@ -74,6 +74,4 @@ onMounted(() => {
   })
 </script>
 
-<style>
+<style></style>
-
-</style>

src/views/charts/components/complex/bar/index.vue

@@ -14,8 +14,8 @@ data.forEach((item,index) => {
     let obj = {
       value: data[index],
       itemStyle: {
-      color: color[index]
+        color: color[index],
-    }
+      },
     }
     dataOptions.push(obj)
   })
@@ -27,7 +27,7 @@ const lineConfig = reactive({
       left: '3%',
       right: '4%',
       bottom: '10%',
-    containLabel: true
+      containLabel: true,
     },
     tooltip: {
       trigger: 'axis',
@@ -41,44 +41,47 @@ const lineConfig = reactive({
                          <div class="title" >完成占比${name[0].value}</div>
                  </div>`
         return tipHtml
-    }
+      },
     },
     yAxis: {
       // 设置坐标轴的 文字样式
       axisLabel: {
         color: '#bbdaff',
-      margin: 20 // 刻度标签与轴线之间的距离。
+        margin: 20, // 刻度标签与轴线之间的距离。
       },
-    axisTick: { // 取消坐标轴刻度线
+      axisTick: {
-      show: false
+        // 取消坐标轴刻度线
+        show: false,
       },
       // 坐标轴轴线相关设置。
       splitLine: {
         lineStyle: {
-        color: '#2d5baf'
+          color: '#2d5baf',
-      }
+        },
-    }
+      },
     },
     xAxis: {
       splitLine: {
-      show: false
+        show: false,
       },
       // 坐标轴轴线相关设置。
       axisLine: {
         lineStyle: {
-        color: '#2d5baf'
+          color: '#2d5baf',
-      }
+        },
       },
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    axisLabel: { // 设置坐标轴的 文字样式
+      axisLabel: {
+        // 设置坐标轴的 文字样式
         color: '#bbdaff',
-      margin: 20 // 刻度标签与轴线之间的距离。
+        margin: 20, // 刻度标签与轴线之间的距离。
       },
 
-    axisTick: { // 取消坐标轴刻度线
+      axisTick: {
-      show: false
+        // 取消坐标轴刻度线
-    }
+        show: false,
+      },
     },
     series: [
       {
@@ -86,13 +89,11 @@ const lineConfig = reactive({
         type: 'bar',
         barMaxWidth: 18,
         markLine: {
-        silent: true
+          silent: true,
         },
-
+      },
-
+    ],
-    }]
   })
-
 </script>
 <style lang="scss" scoped>
   .item-charts {

src/views/charts/components/complex/line.vue

@@ -10,32 +10,32 @@ const chartsRef = ref<HTMLElement|null>()
   const props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     xAxisData: {
       type: Array,
-    default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     },
     config: {
       type: Object,
-    default: () => {}
+      default: () => {},
     },
     seriesData: {
       type: Array,
-    default: () => [150, 230, 224, 218, 135, 147, 260]
+      default: () => [150, 230, 224, 218, 135, 147, 260],
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     grid: {
@@ -47,18 +47,18 @@ const options = {
     },
     xAxis: {
       type: 'category',
-    data: props.xAxisData
+      data: props.xAxisData,
     },
     yAxis: {
-    type: 'value'
+      type: 'value',
     },
     series: [
       {
         data: props.seriesData,
-      type: 'line'
+        type: 'line',
-    }
+      },
     ],
-  ...props.config
+    ...props.config,
   }
   let chart: EChartsType
   const initChart = () => {
@@ -74,6 +74,4 @@ onMounted(() => {
   })
 </script>
 
-<style>
+<style></style>
-
-</style>

src/views/charts/components/complex/line/components/line.vue

@@ -10,32 +10,32 @@ const chartsRef = ref<HTMLElement|null>()
   const props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     xAxisData: {
       type: Array,
-    default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     },
     config: {
       type: Object,
-    default: () => {}
+      default: () => {},
     },
     seriesData: {
       type: Array,
-    default: () => [150, 230, 224, 218, 135, 147, 260]
+      default: () => [150, 230, 224, 218, 135, 147, 260],
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     grid: {
@@ -47,18 +47,18 @@ const options = {
     },
     xAxis: {
       type: 'category',
-    data: props.xAxisData
+      data: props.xAxisData,
     },
     yAxis: {
-    type: 'value'
+      type: 'value',
     },
     series: [
       {
         data: props.seriesData,
-      type: 'line'
+        type: 'line',
-    }
+      },
     ],
-  ...props.config
+    ...props.config,
   }
   let chart: EChartsType
   const initChart = () => {
@@ -74,6 +74,4 @@ onMounted(() => {
   })
 </script>
 
-<style>
+<style></style>
-
-</style>

src/views/charts/components/complex/line/index.vue

@@ -13,7 +13,7 @@ const lineConfig = reactive({
       left: '3%',
       right: '4%',
       bottom: '10%',
-    containLabel: true
+      containLabel: true,
     },
     tooltip: {
       trigger: 'axis',
@@ -27,41 +27,43 @@ const lineConfig = reactive({
                          <div class="title" >完成占比${name[0].data}</div>
                  </div>`
         return tipHtml
-    }
+      },
     },
     yAxis: {
       // 设置坐标轴的 文字样式
       axisLabel: {
         color: '#bbdaff',
-      margin: 20 // 刻度标签与轴线之间的距离。
+        margin: 20, // 刻度标签与轴线之间的距离。
       },
       // 坐标轴轴线相关设置。
       splitLine: {
         lineStyle: {
-        color: '#2d5baf'
+          color: '#2d5baf',
-      }
+        },
-    }
+      },
     },
     xAxis: {
       splitLine: {
-      show: false
+        show: false,
       },
       // 坐标轴轴线相关设置。
       axisLine: {
         lineStyle: {
-        color: '#2d5baf'
+          color: '#2d5baf',
-      }
+        },
       },
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    axisLabel: { // 设置坐标轴的 文字样式
+      axisLabel: {
+        // 设置坐标轴的 文字样式
         color: '#bbdaff',
-      margin: 20 // 刻度标签与轴线之间的距离。
+        margin: 20, // 刻度标签与轴线之间的距离。
       },
       boundaryGap: false, // 设置坐标轴两边的留白 ，从刻度原点开始，
-    axisTick: { // 取消坐标轴刻度线
+      axisTick: {
-      show: false
+        // 取消坐标轴刻度线
-    }
+        show: false,
+      },
     },
     series: [
       {
@@ -71,7 +73,7 @@ const lineConfig = reactive({
         symbolSize: 12, // 拐点圆的大小
         symbol: 'circle',
         markLine: {
-        silent: true
+          silent: true,
         },
         itemStyle: {
           normal: {
@@ -79,14 +81,13 @@ const lineConfig = reactive({
             lineStyle: {
               width: 3,
               color: '#920783',
-            type: 'solid' // 'dotted'虚线 'solid'实线
+              type: 'solid', // 'dotted'虚线 'solid'实线
-          }
+            },
-        }
+          },
-      }
+        },
-
+      },
-    }]
+    ],
   })
-
 </script>
 <style lang="scss" scoped>
   .item-charts {

src/views/charts/components/complex/liquidFill.vue

@@ -3,31 +3,31 @@
 </template>
 <script lang="ts" setup>
   import 'echarts-liquidfill/src/liquidFill.js'
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     grid: {
@@ -35,7 +35,7 @@ const options = {
       left: '2%',
       right: '2%',
       bottom: '2%',
-    containLabel: true
+      containLabel: true,
     },
     backgroundColor: '#0F224C', //背景色
     series: [
@@ -44,7 +44,7 @@ const options = {
         radius: '80%', //显示比例
         center: ['50%', '50%'], //中心点
         amplitude: 20, //水波振幅
-      data: [0.5,.5,.5], // data个数代表波浪数
+        data: [0.5, 0.5, 0.5], // data个数代表波浪数
         color: [
           {
             type: 'linear',
@@ -89,8 +89,8 @@ const options = {
         },
       },
     ],
-};
+  }
-let chart:EChartsType;
+  let chart: EChartsType
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -101,6 +101,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/complex/painting.vue

@@ -2,59 +2,59 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
   const indicator = [
     {
       text: '文明村',
       min: 0,
-    max: 100
+      max: 100,
     },
     {
       text: '卫生村',
       min: 0,
-    max: 100
+      max: 100,
     },
     {
       text: '森林村庄',
       min: 0,
-    max: 100
+      max: 100,
     },
     {
       text: '全面小康',
       min: 0,
-    max: 100
+      max: 100,
     },
     {
       text: '景区村庄',
       min: 0,
-    max: 100
+      max: 100,
-  }
+    },
   ]
   const Data = [80, 61, 70, 86, 77]
   function setData() {
@@ -66,11 +66,11 @@ function setData() {
             lineStyle: {
               color: '#4BFFFC',
               shadowColor: '#4BFFFC',
-            shadowBlur: 5
+              shadowBlur: 5,
             },
             shadowColor: '#4BFFFC',
-          shadowBlur: 5
+            shadowBlur: 5,
-        }
+          },
         },
         areaStyle: {
           normal: {
@@ -83,19 +83,19 @@ function setData() {
               colorStops: [
                 {
                   offset: 1,
-                color: '#4BFFFC'
+                  color: '#4BFFFC',
                 },
                 {
                   offset: 0,
-                color: 'rgba(0,0,0,0)'
+                  color: 'rgba(0,0,0,0)',
-              }
+                },
-            ],
+              ],
-            globalCoord: false
+              globalCoord: false,
+            },
+            opacity: 0.8, // 区域透明度
+          },
+        },
       },
-          opacity: 0.8 // 区域透明度
-        }
-      }
-    }
     ]
   }
 
@@ -109,23 +109,23 @@ function setgauge(i) {
       startAngle: 90 + 72 * i + 18, //开始刻度的角度
       endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
       axisLine: {
-      show: false
+        show: false,
       },
       axisTick: {
         show: true,
         lineStyle: {
           color: '#66ccff',
-        width: 1
+          width: 1,
         },
         length: 6,
-      splitNumber: 1
+        splitNumber: 1,
       },
       splitLine: {
-      show: false
+        show: false,
       },
       axisLabel: {
-      show: false
+        show: false,
-    }
+      },
     }
   }
   function setSpot() {
@@ -139,9 +139,9 @@ function setSpot() {
             borderColor: '#fff',
             borderWidth: 1,
             shadowColor: color[i],
-          shadowBlur: 8
+            shadowBlur: 8,
-        }
+          },
-      }
+        },
       })
     })
     return scatterData
@@ -151,7 +151,7 @@ const options = {
     backgroundColor: '#0E1327',
     polar: {
       center: ['50%', '50%'],
-    radius: '60%'
+      radius: '60%',
     },
     radar: {
       shape: 'circle',
@@ -161,7 +161,7 @@ const options = {
       axisName: {
         color: '#b7e9fd',
         fontSize: 13,
-      padding: -20
+        padding: -20,
       },
       nameGap: 45,
       splitNumber: 4,
@@ -170,21 +170,21 @@ const options = {
         show: true,
         areaStyle: {
           // 分隔区域的样式设置。
-        color: ['rgba(27, 50, 66, 0.4)']
+          color: ['rgba(27, 50, 66, 0.4)'],
-      }
+        },
       },
       axisLine: {
         //指向外圈文本的分隔线样式
         lineStyle: {
-        color: '#5aa3d0'
+          color: '#5aa3d0',
-      }
+        },
       },
       splitLine: {
         lineStyle: {
           color: 'rgba(99,192,251,0.2)', // 分隔线颜色
-        width: 2 // 分隔线线宽
+          width: 2, // 分隔线线宽
-      }
+        },
-    }
+      },
     },
     angleAxis: {
       type: 'category',
@@ -193,40 +193,40 @@ const options = {
       boundaryGap: false,
       clockwise: false,
       axisTick: {
-      show: false
+        show: false,
       },
       axisLabel: {
-      show: false
+        show: false,
       },
       axisLine: {
-      show: false
+        show: false,
       },
       splitLine: {
-      show: false
+        show: false,
-    }
+      },
     },
     radiusAxis: {
       min: 0,
       max: 100,
       interval: 25,
       splitLine: {
-      show: false
+        show: false,
       },
       axisTick: {
-      show: false
+        show: false,
       },
       axisLine: {
         //指向外圈文本的分隔线样式
         lineStyle: {
-        color: '#5aa3d0'
+          color: '#5aa3d0',
-      }
+        },
       },
       axisLabel: {
         fontSize: 12,
         color: '#5aa3d0',
         align: 'left',
-      margin: -5
+        margin: -5,
-    }
+      },
     },
     series: [
       setgauge(0),
@@ -238,22 +238,22 @@ const options = {
         type: 'radar',
         silent: true,
         lineStyle: {
-        color: '#66ffff'
+          color: '#66ffff',
         },
         areaStyle: {
-        color: 'rgba(102, 255, 255, 0.31)'
+          color: 'rgba(102, 255, 255, 0.31)',
         },
-      data: setData()
+        data: setData(),
       },
       {
         type: 'scatter',
         coordinateSystem: 'polar',
         symbolSize: 20,
-      data: setSpot()
+        data: setSpot(),
+      },
+    ],
   }
-  ]
+  let chart: EChartsType
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -262,10 +262,8 @@ const initChart =()=> {
   onMounted(() => {
     chart = initChart()
 
-
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/complex/pie.vue

@@ -2,33 +2,33 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
-let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
+  let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
   let echartData = [
     {
       name: '设备1',
@@ -46,11 +46,11 @@ let echartData = [
       name: '设备4',
       value: '1420',
     },
-];
+  ]
   let formatNumber = function (num) {
-  let reg = /(?=(\B)(\d{3})+$)/g;
+    let reg = /(?=(\B)(\d{3})+$)/g
-  return num.toString().replace(reg, ',');
+    return num.toString().replace(reg, ',')
-};
+  }
 
   const options = {
     backgroundColor: '#364686',
@@ -123,7 +123,9 @@ const options = {
         label: {
           normal: {
             formatter: (params) => {
-            return '{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}';
+              return (
+                '{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}'
+              )
             },
             padding: [0, -70, 30, -70],
             rich: {
@@ -183,8 +185,8 @@ const options = {
         ],
       },
     ],
-};
+  }
-let chart:EChartsType;
+  let chart: EChartsType
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -195,6 +197,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/complex/progress.vue

@@ -2,34 +2,33 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
 
-
   const options = {
     title: [
       {
@@ -132,8 +131,8 @@ const options = {
         data: [100],
       },
     ],
-};
+  }
-let chart:EChartsType;
+  let chart: EChartsType
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -144,6 +143,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/complex/rotate.vue

@@ -1,55 +1,72 @@
-
 <template>
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
-var data = [],data2=[];
+  var data = [],
+    data2 = []
   var trafficWay = [
     {
       name: '病假',
-    value: 20
+      value: 20,
-  },{
+    },
+    {
       name: '事假',
-    value: 1
+      value: 1,
-  },{
+    },
+    {
       name: '婚假',
-    value: 30
+      value: 30,
-  },{
+    },
+    {
       name: '丧假',
-    value: 40
+      value: 40,
-  },{
+    },
+    {
       name: '年休假',
-    value: 40
+      value: 40,
-  }];
+    },
-var color=['#2A8BFD','#BAFF7F','#00FAC1','#00CAFF','#FDE056','#4ED33C','#FF8A26','#FF5252','#9689FF','#CB00FF']
+  ]
+  var color = [
+    '#2A8BFD',
+    '#BAFF7F',
+    '#00FAC1',
+    '#00CAFF',
+    '#FDE056',
+    '#4ED33C',
+    '#FF8A26',
+    '#FF5252',
+    '#9689FF',
+    '#CB00FF',
+  ]
   for (var i = 0; i < trafficWay.length; i++) {
-  data.push({
+    data.push(
+      {
         value: trafficWay[i].value,
         name: trafficWay[i].name,
         itemStyle: {
@@ -58,28 +75,30 @@ for (var i = 0; i < trafficWay.length; i++) {
             shadowBlur: 20,
             borderRadius: 20,
             borderColor: color[i],
-        shadowColor: color[i]
+            shadowColor: color[i],
-      }
+          },
-    }
+        },
-  }, {
+      },
+      {
         value: 5,
         name: '',
         itemStyle: {
           normal: {
             label: {
-          show: false
+              show: false,
             },
             labelLine: {
-          show: false
+              show: false,
             },
             color: 'rgba(0, 0, 0, 0)',
             borderColor: 'rgba(0, 0, 0, 0)',
-        borderWidth: 0
+            borderWidth: 0,
-
+          },
-      }
+        },
-    }
+      },
-  });
+    )
-  data2.push({
+    data2.push(
+      {
         value: trafficWay[i].value,
         name: trafficWay[i].name,
       },
@@ -89,26 +108,25 @@ for (var i = 0; i < trafficWay.length; i++) {
         itemStyle: {
           normal: {
             label: {
-              show: false
+              show: false,
             },
             labelLine: {
-              show: false
+              show: false,
             },
             color: 'rgba(0, 0, 0, 0)',
             borderColor: 'rgba(0, 0, 0, 0)',
             borderWidth: 0,
-            opacity:0.2
+            opacity: 0.2,
-
+          },
-          }
+        },
-        }
+      },
-      }
     )
   }
 
-let angle = 0;//角度，用来做简单的动画效果的
+  let angle = 0 //角度，用来做简单的动画效果的
 
   const option = {
-  backgroundColor:"#061740",
+    backgroundColor: '#061740',
     color: color,
     legend: {
       right: '10%',
@@ -118,204 +136,212 @@ const option = {
       itemHeight: 15,
       textStyle: {
         color: '#ffffff',
-    }
+      },
     },
     series: [
-    {//外线1
+      {
-      name: "ring5",
+        //外线1
+        name: 'ring5',
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
           return {
             type: 'arc',
             shape: {
               cx: api.getWidth() / 3,
               cy: api.getHeight() / 2,
-            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
-            startAngle: (0+angle) * Math.PI / 180,
+              startAngle: ((0 + angle) * Math.PI) / 180,
-            endAngle: (90+angle) * Math.PI / 180
+              endAngle: ((90 + angle) * Math.PI) / 180,
             },
             style: {
               stroke: '#4EE9E6',
-            fill: "transparent",
+              fill: 'transparent',
-            lineWidth: 1.5
+              lineWidth: 1.5,
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//内线1
+      {
-      name: "ring5",
+        //内线1
+        name: 'ring5',
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
           return {
             type: 'arc',
             shape: {
               cx: api.getWidth() / 3,
               cy: api.getHeight() / 2,
-            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
-            startAngle: (180+angle) * Math.PI / 180,
+              startAngle: ((180 + angle) * Math.PI) / 180,
-            endAngle: (270+angle) * Math.PI / 180
+              endAngle: ((270 + angle) * Math.PI) / 180,
             },
             style: {
-            stroke: "#4EE9E6",
+              stroke: '#4EE9E6',
-            fill: "transparent",
+              fill: 'transparent',
-            lineWidth: 1.5
+              lineWidth: 1.5,
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//外线2
+      {
-      name: "ring5",
+        //外线2
+        name: 'ring5',
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
           return {
             type: 'arc',
             shape: {
               cx: api.getWidth() / 3,
               cy: api.getHeight() / 2,
-            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
-            startAngle: (270+-angle) * Math.PI / 180,
+              startAngle: ((270 + -angle) * Math.PI) / 180,
-            endAngle: (40+-angle) * Math.PI / 180
+              endAngle: ((40 + -angle) * Math.PI) / 180,
             },
             style: {
-            stroke: "#4EE9E6",
+              stroke: '#4EE9E6',
-            fill: "transparent",
+              fill: 'transparent',
-            lineWidth: 1.5
+              lineWidth: 1.5,
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//外线2
+      {
-      name: "ring5",
+        //外线2
+        name: 'ring5',
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
           return {
             type: 'arc',
             shape: {
               cx: api.getWidth() / 3,
               cy: api.getHeight() / 2,
-            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
-            startAngle: (90+-angle) * Math.PI / 180,
+              startAngle: ((90 + -angle) * Math.PI) / 180,
-            endAngle: (220+-angle) * Math.PI / 180
+              endAngle: ((220 + -angle) * Math.PI) / 180,
             },
             style: {
-            stroke: "#4EE9E6",
+              stroke: '#4EE9E6',
-            fill: "transparent",
+              fill: 'transparent',
-            lineWidth: 1.5
+              lineWidth: 1.5,
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//绿点1
+      {
-      name: "ring5",
+        //绿点1
+        name: 'ring5',
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
-        let x0 = api.getWidth() / 3;
+          let x0 = api.getWidth() / 3
-        let y0 = api.getHeight() / 2;
+          let y0 = api.getHeight() / 2
-        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
+          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
-        let point = getCirlPoint(x0, y0, r, (90+-angle))
+          let point = getCirlPoint(x0, y0, r, 90 + -angle)
           return {
             type: 'circle',
             shape: {
               cx: point.x,
               cy: point.y,
-            r: 4
+              r: 4,
             },
             style: {
-            stroke: "#66FFFF",//粉
+              stroke: '#66FFFF', //粉
-            fill: "#66FFFF"
+              fill: '#66FFFF',
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//绿点2
+      {
-      name: "ring5",  //绿点
+        //绿点2
+        name: 'ring5', //绿点
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
-        let x0 = api.getWidth() / 3;
+          let x0 = api.getWidth() / 3
-        let y0 = api.getHeight() / 2;
+          let y0 = api.getHeight() / 2
-        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
+          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
-        let point = getCirlPoint(x0, y0, r, (270+-angle))
+          let point = getCirlPoint(x0, y0, r, 270 + -angle)
           return {
             type: 'circle',
             shape: {
               cx: point.x,
               cy: point.y,
-            r: 4
+              r: 4,
             },
             style: {
-            stroke: "#66FFFF",//粉
+              stroke: '#66FFFF', //粉
-            fill: "#66FFFF"
+              fill: '#66FFFF',
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//绿点3
+      {
-      name: "ring5",
+        //绿点3
+        name: 'ring5',
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
-        let x0 = api.getWidth() / 3;
+          let x0 = api.getWidth() / 3
-        let y0 = api.getHeight() / 2;
+          let y0 = api.getHeight() / 2
-        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
+          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6
-        let point = getCirlPoint(x0, y0, r, (90+angle))
+          let point = getCirlPoint(x0, y0, r, 90 + angle)
           return {
             type: 'circle',
             shape: {
               cx: point.x,
               cy: point.y,
-            r: 4
+              r: 4,
             },
             style: {
-            stroke: "#66FFFF",//粉
+              stroke: '#66FFFF', //粉
-            fill: "#66FFFF"
+              fill: '#66FFFF',
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//绿点4
+      {
-      name: "ring5",  //绿点
+        //绿点4
+        name: 'ring5', //绿点
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
-        let x0 = api.getWidth() / 3;
+          let x0 = api.getWidth() / 3
-        let y0 = api.getHeight() / 2;
+          let y0 = api.getHeight() / 2
-        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
+          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6
-        let point = getCirlPoint(x0, y0, r, (270+angle))
+          let point = getCirlPoint(x0, y0, r, 270 + angle)
           return {
             type: 'circle',
             shape: {
               cx: point.x,
               cy: point.y,
-            r: 4
+              r: 4,
             },
             style: {
-            stroke: "#66FFFF",//粉
+              stroke: '#66FFFF', //粉
-            fill: "#66FFFF"
+              fill: '#66FFFF',
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
       {
         name: '',
@@ -324,19 +350,19 @@ const option = {
         radius: ['98%', '95%'],
         hoverAnimation: false,
         center: ['33.33%', '50%'],
-      top:"center",
+        top: 'center',
         itemStyle: {
           normal: {
             label: {
-            show:false
+              show: false,
-          }
-        }
             },
-      data:data
+          },
+        },
+        data: data,
       },
       {
         type: 'pie',
-      top:"center",
+        top: 'center',
         startAngle: 90,
         clockwise: false,
         center: ['33.33%', '50%'],
@@ -344,16 +370,16 @@ const option = {
         hoverAnimation: false,
         radius: ['94%', '55%'],
         itemStyle: {
-        opacity:0.15
+          opacity: 0.15,
         },
         label: {
           show: false,
-        position: 'center'
+          position: 'center',
         },
         labelLine: {
-        show: false
+          show: false,
         },
-      data:data2
+        data: data2,
       },
       {
         name: '',
@@ -362,30 +388,29 @@ const option = {
         center: ['33.33%', '50%'],
         radius: ['39%', '38%'],
         hoverAnimation: false,
-      top:"center",
+        top: 'center',
         itemStyle: {
           normal: {
             label: {
-            show:false
+              show: false,
-          }
-        }
             },
-      data:data
           },
-  ]
+        },
-};
+        data: data,
+      },
+    ],
+  }
   //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
   function getCirlPoint(x0, y0, r, angle) {
-  let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
+    let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
-  let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
+    let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
     return {
       x: x1,
-    y: y1
+      y: y1,
     }
   }
 
-
+  let chart: EChartsType
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     draw(chart)
@@ -403,11 +428,10 @@ onMounted(()=>{
     setInterval(function () {
       //用setInterval做动画感觉有问题
       draw(chart)
-  }, 100);
+    }, 100)
 
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/complex/sankey.vue

@@ -2,230 +2,229 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   let datalist = [
     {
-    name: "公共平台"
+      name: '公共平台',
     },
     {
-    name: "系统0000"
+      name: '系统0000',
     },
     {
-    name: "系统0011"
+      name: '系统0011',
     },
     {
-    name: "系统0022"
+      name: '系统0022',
     },
     {
-    name: "系统0033"
+      name: '系统0033',
     },
     {
-    name: "系统0044"
+      name: '系统0044',
     },
     {
-    name: "系统0055"
+      name: '系统0055',
-  },{
-    name: "系统11"
     },
     {
-    name: "系统22"
+      name: '系统11',
     },
     {
-    name: "系统33"
+      name: '系统22',
     },
     {
-    name: "系统44"
+      name: '系统33',
     },
     {
-    name: "系统55"
+      name: '系统44',
     },
     {
-    name: "系统66"
+      name: '系统55',
     },
     {
-    name: "系统77"
+      name: '系统66',
     },
     {
-    name: "系统88"
+      name: '系统77',
     },
     {
-    name: "系统99"
+      name: '系统88',
-  }
+    },
-];
+    {
+      name: '系统99',
+    },
+  ]
   let linksData = [
     {
-    source: "公共平台",
+      source: '公共平台',
-    target: "系统0000",
+      target: '系统0000',
-    value: 1044305
+      value: 1044305,
     },
     {
-    source: "公共平台",
+      source: '公共平台',
-    target: "系统0011",
+      target: '系统0011',
-    value: 651527
+      value: 651527,
     },
     {
-    source: "公共平台",
+      source: '公共平台',
-    target: "系统0022",
+      target: '系统0022',
-    value: 651527
+      value: 651527,
     },
     {
-    source: "公共平台",
+      source: '公共平台',
-    target: "系统0033",
+      target: '系统0033',
-    value: 486710
+      value: 486710,
     },
     {
-    source: "公共平台",
+      source: '公共平台',
-    target: "系统0044",
+      target: '系统0044',
-    value: 212670
+      value: 212670,
     },
     {
-    source: "公共平台",
+      source: '公共平台',
-    target: "系统0055",
+      target: '系统0055',
-    value: 210400
+      value: 210400,
-  },{
-    source: "系统0011",
-    target: "系统11",
-    value: 645246
     },
     {
-    source: "系统0022",
+      source: '系统0011',
-    target: "系统22",
+      target: '系统11',
-    value: 513275
+      value: 645246,
     },
     {
-    source: "系统0011",
+      source: '系统0022',
-    target: "系统33",
+      target: '系统22',
-    value: 282986
+      value: 513275,
     },
     {
-    source: "系统0011",
+      source: '系统0011',
-    target: "系统44",
+      target: '系统33',
-    value: 118655
+      value: 282986,
     },
     {
-    source: "系统0022",
+      source: '系统0011',
-    target: "系统55",
+      target: '系统44',
-    value: 105989
+      value: 118655,
     },
     {
-    source: "系统0022",
+      source: '系统0022',
-    target: "系统66",
+      target: '系统55',
-    value: 95100
+      value: 105989,
     },
     {
-    source: "系统0033",
+      source: '系统0022',
-    target: "系统77",
+      target: '系统66',
-    value: 87796
+      value: 95100,
     },
     {
-    source: "系统0044",
+      source: '系统0033',
-    target: "系统88",
+      target: '系统77',
-    value: 47658
+      value: 87796,
     },
     {
-    source: "系统0055",
+      source: '系统0044',
-    target: "系统99",
+      target: '系统88',
-    value: 243660
+      value: 47658,
     },
-
+    {
-
+      source: '系统0055',
-];
+      target: '系统99',
+      value: 243660,
+    },
+  ]
   let Color = [
-  "#61FEFF",
+    '#61FEFF',
-  "#937FE6",
+    '#937FE6',
-  "#2B56D3",
+    '#2B56D3',
-  "#87E7AA",
+    '#87E7AA',
-  "#937FE6",
+    '#937FE6',
-  "#FF9B97",
+    '#FF9B97',
-  "#8f23f5",
+    '#8f23f5',
-  "#0576ea",
+    '#0576ea',
-  "#2cb8cf",
+    '#2cb8cf',
-  "#8A7EE0",
+    '#8A7EE0',
-  "#2cb8cf",
+    '#2cb8cf',
-  "#4e70f0",
+    '#4e70f0',
-  "#1fa3de",
+    '#1fa3de',
-  "#bbc951",
+    '#bbc951',
-  "#FFC14B",
+    '#FFC14B',
-  "#b785a6",
+    '#b785a6',
-
+  ]
-];  let Color1 = [
+  let Color1 = [
-  "#04E0F3",
+    '#04E0F3',
-  "#682EFC",
+    '#682EFC',
-  "#35A7FE",
+    '#35A7FE',
-  "#0DC09F",
+    '#0DC09F',
-  "#682EFC",
+    '#682EFC',
-  "#ED6663",
+    '#ED6663',
-  "#8f23f5",
+    '#8f23f5',
-  "#0576ea",
+    '#0576ea',
-  "#2cb8cf",
+    '#2cb8cf',
-  "#8A7EE0",
+    '#8A7EE0',
-  "#2cb8cf",
+    '#2cb8cf',
-  "#4e70f0",
+    '#4e70f0',
-  "#1fa3de",
+    '#1fa3de',
-  "#bbc951",
+    '#bbc951',
-  "#FFC14B",
+    '#FFC14B',
-  "#b785a6",
+    '#b785a6',
-
+  ]
-];
   let sourceLabel = [
-  "right",
+    'right',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left"
+    'left',
-];
+  ]
-let itemStyleColor = [];
+  let itemStyleColor = []
-let labelSource = [];
+  let labelSource = []
   for (let i = 0; i < datalist.length; i++) {
     datalist[i].label = {
       normal: {
-      position: sourceLabel[i]
+        position: sourceLabel[i],
+      },
     }
-  };
+    labelSource.push(sourceLabel[i])
-  labelSource.push(sourceLabel[i]);
   }
   for (let d = 0; d < datalist.length; d++) {
     datalist[d].itemStyle = {
       normal: {
         // color: Color[d]
         color: {
-        type: "linear",
+          type: 'linear',
           x: 0,
           y: 1,
           x2: 0,
@@ -242,57 +241,59 @@ for (let d = 0; d < datalist.length; d++) {
           ],
           global: false, // 缺省为 false
         },
+      },
     }
-  };
+    itemStyleColor.push(datalist[d])
-  itemStyleColor.push(datalist[d]);
   }
 
   const options = {
-  backgroundColor: "#031d7a",
+    backgroundColor: '#031d7a',
     tooltip: {
-    trigger: "item",
+      trigger: 'item',
-    triggerOn: "mousemove",
+      triggerOn: 'mousemove',
       formatter: function (params) {
-      if (params.name == "公共平台") {
+        if (params.name == '公共平台') {
-        return " 公共平台 "
+          return ' 公共平台 '
         } else {
-        let value = params.data.value;
+          let value = params.data.value
-        if (!value && value !== 0) return 0;
+          if (!value && value !== 0) return 0
-        let str = value.toString();
+          let str = value.toString()
-        let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
+          let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
-        if (params.data.source == "公共平台") {
+          if (params.data.source == '公共平台') {
-          return params.data.target + " : " + str.replace(reg, "$1,");
+            return params.data.target + ' : ' + str.replace(reg, '$1,')
           } else {
-          return params.data.source + " : " + str.replace(reg, "$1,");
+            return params.data.source + ' : ' + str.replace(reg, '$1,')
-        }
           }
         }
       },
-  series: [{
+    },
-    type: "sankey",
+    series: [
-    layout: "none",
+      {
-    top: "4%",
+        type: 'sankey',
-    bottom: "12%",
+        layout: 'none',
-    left: "20",
+        top: '4%',
-    right: "20",
+        bottom: '12%',
+        left: '20',
+        right: '20',
         nodeGap: 15,
         nodeWidth: 25,
-    focusNodeAdjacency: "allEdges",
+        focusNodeAdjacency: 'allEdges',
         data: itemStyleColor,
         links: linksData,
         label: {
           normal: {
-        color: "#fff",
+            color: '#fff',
             fontSize: 14,
             formatter: function (params) {
               if (params.data.name == '公共平台') {
-            let strs = params.data.name.split(''); //字符串数组
+                let strs = params.data.name.split('') //字符串数组
                 let str = ''
-            for (let i = 0, s; s = strs[i++];) { //遍历字符串数组
+                for (let i = 0, s; (s = strs[i++]); ) {
-              str += s;
+                  //遍历字符串数组
-              if (!(i % 1)) str += '\n'; //按需要求余
+                  str += s
+                  if (!(i % 1)) str += '\n' //按需要求余
                 }
-            return "{white|" + str + "}"
+                return '{white|' + str + '}'
               } else {
                 return params.data.name
               }
@@ -301,27 +302,28 @@ const options = {
               white: {
                 fontSize: 16,
                 lineHeight: 30,
-            padding: [0, 0, 0, -26]
+                padding: [0, 0, 0, -26],
-          }
+              },
-        }
+            },
-      }
+          },
         },
         lineStyle: {
           normal: {
             opacity: 0.4,
-        color: "source",
+            color: 'source',
-        curveness: 0.5
+            curveness: 0.5,
-      }
+          },
         },
         itemStyle: {
           normal: {
             borderWidth: 1,
-        borderColor: "transparent"
+            borderColor: 'transparent',
+          },
+        },
+      },
+    ],
   }
-    }
+  let chart: EChartsType
-  }]
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -332,6 +334,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/js/data.js

@@ -1,40 +1,38 @@
 export const cityIconData = [
   {
     adcode: 650000,
-        name: "新疆维吾尔自治区",
+    name: '新疆维吾尔自治区',
-        value:[88.999903,43.607078]
+    value: [88.999903, 43.607078],
-    },{
-        adcode: 150000,
-        name: "内蒙古自治区",
-        value:[119.24787,42.205741]
   },
-    ,{
+  {
     adcode: 150000,
-        name: "内蒙古自治区",
+    name: '内蒙古自治区',
-        value:[110.627161,41.16628]
+    value: [119.24787, 42.205741],
+  },
+  ,
+  {
+    adcode: 150000,
+    name: '内蒙古自治区',
+    value: [110.627161, 41.16628],
   },
   {
     adcode: 540000,
-        name: "西藏自治区",
+    name: '西藏自治区',
-        value:[89.483714,30.251951]
+    value: [89.483714, 30.251951],
   },
   {
     adcode: 630000,
-        name: "青海省",
+    name: '青海省',
-        value:[102.064693,37.084008]
+    value: [102.064693, 37.084008],
   },
   {
     adcode: 530000,
-        name: "云南省",
+    name: '云南省',
-        value:[102.187665,25.083688]
+    value: [102.187665, 25.083688],
   },
   {
     adcode: 610000,
-        name: "陕西省",
+    name: '陕西省',
-        value:[109.20663,35.018625]
+    value: [109.20663, 35.018625],
   },
-
 ]
-
-
-

src/views/charts/components/map/bmap.min.js

@@ -1,4 +1,3 @@
-
 /*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -18,5 +17,198 @@
  * under the License.
  */
 
-
+!(function (t, e) {
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("echarts")):"function"==typeof define&&define.amd?define(["exports","echarts"],e):e(t.bmap={},t.echarts)}(this,function(t,e){"use strict";function o(t,e){this._bmap=t,this.dimensions=["lng","lat"],this._mapOffset=[0,0],this._api=e,this._projection=new BMap.MercatorProjection}function n(t,o){return o=o||[0,0],e.util.map([0,1],function(e){var n=o[e],i=t[e]/2,a=[],r=[];return a[e]=n-i,r[e]=n+i,a[1-e]=r[1-e]=o[1-e],Math.abs(this.dataToPoint(a)[e]-this.dataToPoint(r)[e])},this)}function i(){function t(t){this._root=t}return t.prototype=new BMap.Overlay,t.prototype.initialize=function(t){return t.getPanes().labelPane.appendChild(this._root),this._root},t.prototype.draw=function(){},t}function a(t,e){return t&&e&&t[0]===e[0]&&t[1]===e[1]}o.prototype.dimensions=["lng","lat"],o.prototype.setZoom=function(t){this._zoom=t},o.prototype.setCenter=function(t){this._center=this._projection.lngLatToPoint(new BMap.Point(t[0],t[1]))},o.prototype.setMapOffset=function(t){this._mapOffset=t},o.prototype.getBMap=function(){return this._bmap},o.prototype.dataToPoint=function(t){var e=new BMap.Point(t[0],t[1]),o=this._bmap.pointToOverlayPixel(e),n=this._mapOffset;return[o.x-n[0],o.y-n[1]]},o.prototype.pointToData=function(t){var e=this._mapOffset;return[(t=this._bmap.overlayPixelToPoint({x:t[0]+e[0],y:t[1]+e[1]})).lng,t.lat]},o.prototype.getViewRect=function(){var t=this._api;return new e.graphic.BoundingRect(0,0,t.getWidth(),t.getHeight())},o.prototype.getRoamTransform=function(){return e.matrix.create()},o.prototype.prepareCustoms=function(t){var o=this.getViewRect();return{coordSys:{type:"bmap",x:o.x,y:o.y,width:o.width,height:o.height},api:{coord:e.util.bind(this.dataToPoint,this),size:e.util.bind(n,this)}}};var r;o.dimensions=o.prototype.dimensions,o.create=function(t,e){var n,a=e.getDom();t.eachComponent("bmap",function(t){var p=e.getZr().painter,s=p.getViewportRoot();if("undefined"==typeof BMap)throw new Error("BMap api is not loaded");if(r=r||i(),n)throw new Error("Only one bmap component can exist");if(!t.__bmap){var m=a.querySelector(".ec-extension-bmap");m&&(s.style.left="0px",s.style.top="0px",a.removeChild(m)),(m=document.createElement("div")).style.cssText="width:100%;height:100%",m.classList.add("ec-extension-bmap"),a.appendChild(m);var c=t.__bmap=new BMap.Map(m),d=new r(s);c.addOverlay(d),p.getViewportRootOffset=function(){return{offsetLeft:0,offsetTop:0}}}var c=t.__bmap,f=t.get("center"),l=t.get("zoom");if(f&&l){var h=new BMap.Point(f[0],f[1]);c.centerAndZoom(h,l)}(n=new o(c,e)).setMapOffset(t.__mapOffset||[0,0]),n.setZoom(l),n.setCenter(f),t.coordinateSystem=n}),t.eachSeries(function(t){"bmap"===t.get("coordinateSystem")&&(t.coordinateSystem=n)})},e.extendComponentModel({type:"bmap",getBMap:function(){return this.__bmap},setCenterAndZoom:function(t,e){this.option.center=t,this.option.zoom=e},centerOrZoomChanged:function(t,e){var o=this.option;return!(a(t,o.center)&&e===o.zoom)},defaultOption:{center:[104.114129,37.550339],zoom:5,mapStyle:{},roam:!1}}),e.extendComponentView({type:"bmap",render:function(t,e,o){function n(){i||o.dispatchAction({type:"bmapRoam"})}var i=!0,a=t.getBMap(),r=o.getZr().painter.getViewportRoot(),p=t.coordinateSystem,s=function(e,n){if(!i){var a=r.parentNode.parentNode.parentNode,s=[-parseInt(a.style.left,10)||0,-parseInt(a.style.top,10)||0];r.style.left=s[0]+"px",r.style.top=s[1]+"px",p.setMapOffset(s),t.__mapOffset=s,o.dispatchAction({type:"bmapRoam"})}};a.removeEventListener("moving",this._oldMoveHandler),a.removeEventListener("zoomend",this._oldZoomEndHandler),a.addEventListener("moving",s),a.addEventListener("zoomend",n),this._oldMoveHandler=s,this._oldZoomEndHandler=n;var m=t.get("roam");m&&"scale"!==m?a.enableDragging():a.disableDragging(),m&&"move"!==m?(a.enableScrollWheelZoom(),a.enableDoubleClickZoom(),a.enablePinchToZoom()):(a.disableScrollWheelZoom(),a.disableDoubleClickZoom(),a.disablePinchToZoom());var c=t.__mapStyle,d=t.get("mapStyle")||{},f=JSON.stringify(d);JSON.stringify(c)!==f&&(Object.keys(d).length&&a.setMapStyle(d),t.__mapStyle=JSON.parse(f)),i=!1}}),e.registerCoordinateSystem("bmap",o),e.registerAction({type:"bmapRoam",event:"bmapRoam",update:"updateLayout"},function(t,e){e.eachComponent("bmap",function(t){var e=t.getBMap(),o=e.getCenter();t.setCenterAndZoom([o.lng,o.lat],e.getZoom())})});t.version="1.0.0"});
+  'object' == typeof exports && 'undefined' != typeof module
+    ? e(exports, require('echarts'))
+    : 'function' == typeof define && define.amd
+    ? define(['exports', 'echarts'], e)
+    : e((t.bmap = {}), t.echarts)
+})(this, function (t, e) {
+  'use strict'
+  function o(t, e) {
+    ;(this._bmap = t),
+      (this.dimensions = ['lng', 'lat']),
+      (this._mapOffset = [0, 0]),
+      (this._api = e),
+      (this._projection = new BMap.MercatorProjection())
+  }
+  function n(t, o) {
+    return (
+      (o = o || [0, 0]),
+      e.util.map(
+        [0, 1],
+        function (e) {
+          var n = o[e],
+            i = t[e] / 2,
+            a = [],
+            r = []
+          return (
+            (a[e] = n - i),
+            (r[e] = n + i),
+            (a[1 - e] = r[1 - e] = o[1 - e]),
+            Math.abs(this.dataToPoint(a)[e] - this.dataToPoint(r)[e])
+          )
+        },
+        this,
+      )
+    )
+  }
+  function i() {
+    function t(t) {
+      this._root = t
+    }
+    return (
+      (t.prototype = new BMap.Overlay()),
+      (t.prototype.initialize = function (t) {
+        return t.getPanes().labelPane.appendChild(this._root), this._root
+      }),
+      (t.prototype.draw = function () {}),
+      t
+    )
+  }
+  function a(t, e) {
+    return t && e && t[0] === e[0] && t[1] === e[1]
+  }
+  ;(o.prototype.dimensions = ['lng', 'lat']),
+    (o.prototype.setZoom = function (t) {
+      this._zoom = t
+    }),
+    (o.prototype.setCenter = function (t) {
+      this._center = this._projection.lngLatToPoint(new BMap.Point(t[0], t[1]))
+    }),
+    (o.prototype.setMapOffset = function (t) {
+      this._mapOffset = t
+    }),
+    (o.prototype.getBMap = function () {
+      return this._bmap
+    }),
+    (o.prototype.dataToPoint = function (t) {
+      var e = new BMap.Point(t[0], t[1]),
+        o = this._bmap.pointToOverlayPixel(e),
+        n = this._mapOffset
+      return [o.x - n[0], o.y - n[1]]
+    }),
+    (o.prototype.pointToData = function (t) {
+      var e = this._mapOffset
+      return [(t = this._bmap.overlayPixelToPoint({ x: t[0] + e[0], y: t[1] + e[1] })).lng, t.lat]
+    }),
+    (o.prototype.getViewRect = function () {
+      var t = this._api
+      return new e.graphic.BoundingRect(0, 0, t.getWidth(), t.getHeight())
+    }),
+    (o.prototype.getRoamTransform = function () {
+      return e.matrix.create()
+    }),
+    (o.prototype.prepareCustoms = function (t) {
+      var o = this.getViewRect()
+      return {
+        coordSys: { type: 'bmap', x: o.x, y: o.y, width: o.width, height: o.height },
+        api: { coord: e.util.bind(this.dataToPoint, this), size: e.util.bind(n, this) },
+      }
+    })
+  var r
+  ;(o.dimensions = o.prototype.dimensions),
+    (o.create = function (t, e) {
+      var n,
+        a = e.getDom()
+      t.eachComponent('bmap', function (t) {
+        var p = e.getZr().painter,
+          s = p.getViewportRoot()
+        if ('undefined' == typeof BMap) throw new Error('BMap api is not loaded')
+        if (((r = r || i()), n)) throw new Error('Only one bmap component can exist')
+        if (!t.__bmap) {
+          var m = a.querySelector('.ec-extension-bmap')
+          m && ((s.style.left = '0px'), (s.style.top = '0px'), a.removeChild(m)),
+            ((m = document.createElement('div')).style.cssText = 'width:100%;height:100%'),
+            m.classList.add('ec-extension-bmap'),
+            a.appendChild(m)
+          var c = (t.__bmap = new BMap.Map(m)),
+            d = new r(s)
+          c.addOverlay(d),
+            (p.getViewportRootOffset = function () {
+              return { offsetLeft: 0, offsetTop: 0 }
+            })
+        }
+        var c = t.__bmap,
+          f = t.get('center'),
+          l = t.get('zoom')
+        if (f && l) {
+          var h = new BMap.Point(f[0], f[1])
+          c.centerAndZoom(h, l)
+        }
+        ;(n = new o(c, e)).setMapOffset(t.__mapOffset || [0, 0]),
+          n.setZoom(l),
+          n.setCenter(f),
+          (t.coordinateSystem = n)
+      }),
+        t.eachSeries(function (t) {
+          'bmap' === t.get('coordinateSystem') && (t.coordinateSystem = n)
+        })
+    }),
+    e.extendComponentModel({
+      type: 'bmap',
+      getBMap: function () {
+        return this.__bmap
+      },
+      setCenterAndZoom: function (t, e) {
+        ;(this.option.center = t), (this.option.zoom = e)
+      },
+      centerOrZoomChanged: function (t, e) {
+        var o = this.option
+        return !(a(t, o.center) && e === o.zoom)
+      },
+      defaultOption: { center: [104.114129, 37.550339], zoom: 5, mapStyle: {}, roam: !1 },
+    }),
+    e.extendComponentView({
+      type: 'bmap',
+      render: function (t, e, o) {
+        function n() {
+          i || o.dispatchAction({ type: 'bmapRoam' })
+        }
+        var i = !0,
+          a = t.getBMap(),
+          r = o.getZr().painter.getViewportRoot(),
+          p = t.coordinateSystem,
+          s = function (e, n) {
+            if (!i) {
+              var a = r.parentNode.parentNode.parentNode,
+                s = [-parseInt(a.style.left, 10) || 0, -parseInt(a.style.top, 10) || 0]
+              ;(r.style.left = s[0] + 'px'),
+                (r.style.top = s[1] + 'px'),
+                p.setMapOffset(s),
+                (t.__mapOffset = s),
+                o.dispatchAction({ type: 'bmapRoam' })
+            }
+          }
+        a.removeEventListener('moving', this._oldMoveHandler),
+          a.removeEventListener('zoomend', this._oldZoomEndHandler),
+          a.addEventListener('moving', s),
+          a.addEventListener('zoomend', n),
+          (this._oldMoveHandler = s),
+          (this._oldZoomEndHandler = n)
+        var m = t.get('roam')
+        m && 'scale' !== m ? a.enableDragging() : a.disableDragging(),
+          m && 'move' !== m
+            ? (a.enableScrollWheelZoom(), a.enableDoubleClickZoom(), a.enablePinchToZoom())
+            : (a.disableScrollWheelZoom(), a.disableDoubleClickZoom(), a.disablePinchToZoom())
+        var c = t.__mapStyle,
+          d = t.get('mapStyle') || {},
+          f = JSON.stringify(d)
+        JSON.stringify(c) !== f &&
+          (Object.keys(d).length && a.setMapStyle(d), (t.__mapStyle = JSON.parse(f))),
+          (i = !1)
+      },
+    }),
+    e.registerCoordinateSystem('bmap', o),
+    e.registerAction(
+      { type: 'bmapRoam', event: 'bmapRoam', update: 'updateLayout' },
+      function (t, e) {
+        e.eachComponent('bmap', function (t) {
+          var e = t.getBMap(),
+            o = e.getCenter()
+          t.setCenterAndZoom([o.lng, o.lat], e.getZoom())
+        })
+      },
+    )
+  t.version = '1.0.0'
+})

src/views/charts/components/map/index.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
@@ -6,127 +5,125 @@
   import 'echarts-liquidfill/src/liquidFill.js'
   import './china.js'
   import './bmap.min.js'
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
 
   //城市经纬度
   var geoCoordMap = {
-  "北京": [116.46, 39.92],
+    北京: [116.46, 39.92],
-  "成都": [104.06, 30.67],
+    成都: [104.06, 30.67],
-  "杭州": [120.19, 30.26],
+    杭州: [120.19, 30.26],
-  "济南": [117, 36.65],
+    济南: [117, 36.65],
-  "福州": [119.3, 26.08],
+    福州: [119.3, 26.08],
-  "上海": [121.48, 31.22],
+    上海: [121.48, 31.22],
-  "重庆": [106.54, 29.59],
+    重庆: [106.54, 29.59],
-  "深圳": [114.07, 22.62],
+    深圳: [114.07, 22.62],
-  "宁波": [121.56, 29.86],
+    宁波: [121.56, 29.86],
-  "南昌": [115.89, 28.68],
+    南昌: [115.89, 28.68],
-  "广州": [113.23, 23.16],
+    广州: [113.23, 23.16],
-  "厦门": [118.1, 24.46],
+    厦门: [118.1, 24.46],
-  "太原": [112.53, 37.87],
+    太原: [112.53, 37.87],
-  "哈尔滨": [126.63, 45.75],
+    哈尔滨: [126.63, 45.75],
-  "西安": [108.95, 34.27],
+    西安: [108.95, 34.27],
-  "沈阳": [123.38, 41.8],
+    沈阳: [123.38, 41.8],
-  "大连": [121.62, 38.92],
+    大连: [121.62, 38.92],
-  "海口": [110.35, 20.02],
+    海口: [110.35, 20.02],
-  "长沙": [113, 28.21],
+    长沙: [113, 28.21],
-  "银川": [106.27, 38.47],
+    银川: [106.27, 38.47],
-  "石家庄": [114.48, 38.03],
+    石家庄: [114.48, 38.03],
-  "昆明": [102.73, 25.04],
+    昆明: [102.73, 25.04],
-  "武汉": [114.31, 30.52],
+    武汉: [114.31, 30.52],
-  "呼和浩特": [111.65, 40.82],
+    呼和浩特: [111.65, 40.82],
-  "天津": [117.2, 39.13],
+    天津: [117.2, 39.13],
-  "贵阳": [106.71, 26.57],
+    贵阳: [106.71, 26.57],
-  "兰州": [103.73, 36.03],
+    兰州: [103.73, 36.03],
-  "青岛": [120.33, 36.07],
+    青岛: [120.33, 36.07],
-  "南京": [118.78, 32.04],
+    南京: [118.78, 32.04],
-  "长春": [125.35, 43.88],
+    长春: [125.35, 43.88],
-  "郑州": [113.65, 34.76],
+    郑州: [113.65, 34.76],
-  "西宁": [101.74, 36.56],
+    西宁: [101.74, 36.56],
-  "合肥": [117.27, 31.86],
+    合肥: [117.27, 31.86],
-  "南宁": [108.33, 22.84],
+    南宁: [108.33, 22.84],
-  "拉萨": [91.11, 29.97],
+    拉萨: [91.11, 29.97],
-  "乌鲁木齐": [87.68, 43.77]
+    乌鲁木齐: [87.68, 43.77],
-};
+  }
-
 
   //数据部分
   var data = [
-  {name:"北京",value:88.8},
+    { name: '北京', value: 88.8 },
-  {name:"成都",value:88.7},
+    { name: '成都', value: 88.7 },
-  {name:"厦门",value:88.01},
+    { name: '厦门', value: 88.01 },
-  {name:"杭州",value:87.9},
+    { name: '杭州', value: 87.9 },
-  {name:"济南",value:87.48},
+    { name: '济南', value: 87.48 },
-  {name:"福州",value:87.47},
+    { name: '福州', value: 87.47 },
-  {name:"上海",value:87.43},
+    { name: '上海', value: 87.43 },
-  {name:"重庆",value:87.38},
+    { name: '重庆', value: 87.38 },
-  {name:"深圳",value:87.37},
+    { name: '深圳', value: 87.37 },
-  {name:"昆明",value:87.26},
+    { name: '昆明', value: 87.26 },
-  {name:"宁波",value:87.1},
+    { name: '宁波', value: 87.1 },
-  {name:"南昌",value:86.06},
+    { name: '南昌', value: 86.06 },
-  {name:"广州",value:85.89},
+    { name: '广州', value: 85.89 },
-  {name:"太原",value:84.45},
+    { name: '太原', value: 84.45 },
-  {name:"哈尔滨",value:83.96},
+    { name: '哈尔滨', value: 83.96 },
-  {name:"西安",value:83.24},
+    { name: '西安', value: 83.24 },
-  {name:"沈阳",value:82.96},
+    { name: '沈阳', value: 82.96 },
-  {name:"大连",value:82.94},
+    { name: '大连', value: 82.94 },
-  {name:"海口",value:82.88},
+    { name: '海口', value: 82.88 },
-  {name:"长沙",value:82.85},
+    { name: '长沙', value: 82.85 },
-  {name:"银川",value:82.49},
+    { name: '银川', value: 82.49 },
-  {name:"石家庄",value:82.24},
+    { name: '石家庄', value: 82.24 },
-  {name:"武汉",value:81.68},
+    { name: '武汉', value: 81.68 },
-  {name:"呼和浩特",value:81.61},
+    { name: '呼和浩特', value: 81.61 },
-  {name:"天津",value:80.99},
+    { name: '天津', value: 80.99 },
-  {name:"贵阳",value:80.71},
+    { name: '贵阳', value: 80.71 },
-  {name:"兰州",value:80.69},
+    { name: '兰州', value: 80.69 },
-  {name:"南京",value:80.65},
+    { name: '南京', value: 80.65 },
-  {name:"青岛",value:80.61},
+    { name: '青岛', value: 80.61 },
-  {name:"长春",value:80.1},
+    { name: '长春', value: 80.1 },
-  {name:"郑州",value:79.56},
+    { name: '郑州', value: 79.56 },
-  {name:"西宁",value:79.07},
+    { name: '西宁', value: 79.07 },
-  {name:"南宁",value:78.2},
+    { name: '南宁', value: 78.2 },
-  {name:"合肥",value:77.29},
+    { name: '合肥', value: 77.29 },
-  {name:"乌鲁木齐",value:76.91},
+    { name: '乌鲁木齐', value: 76.91 },
-  {name:"拉萨",value:76.01}
+    { name: '拉萨', value: 76.01 },
-];
+  ]
   var convertData = function (data) {
-  var res = [];
+    var res = []
     for (var i = 0; i < data.length; i++) {
-    var geoCoord = geoCoordMap[data[i].name];
+      var geoCoord = geoCoordMap[data[i].name]
       if (geoCoord) {
         res.push({
           name: data[i].name,
-        value: geoCoord.concat(data[i].value)
+          value: geoCoord.concat(data[i].value),
-      });
+        })
       }
     }
-  return res;
+    return res
-};
+  }
-
 
   const options = {
     toolbox: {
@@ -134,17 +131,17 @@ const options = {
       feature: {
         dataView: {
           show: true,
-        readOnly: true
+          readOnly: true,
         },
         restore: {
-        show: true
+          show: true,
         },
         saveAsImage: {
-        show: true
+          show: true,
-      }
+        },
       },
       top: 40,
-    right:40
+      right: 40,
     },
     title: {
       //text: '2020年全国大厅监测得分',
@@ -153,18 +150,18 @@ const options = {
       left: 'center',
       textStyle: {
         color: '#ffffff',
-      fontSize: 30
+        fontSize: 30,
       },
       subtextStyle: {
-      fontSize: 20
+        fontSize: 20,
-    }
+      },
     },
     legend: {
       left: 'left',
       data: ['强', '中', '弱'],
       textStyle: {
-      color: '#ccc'
+        color: '#ccc',
-    }
+      },
     },
     backgroundColor: {
       type: 'linear',
@@ -172,12 +169,17 @@ const options = {
       y: 0,
       x2: 1,
       y2: 1,
-    colorStops: [{
+      colorStops: [
-      offset: 0, color: '#0f2c70' // 0% 处的颜色
+        {
-    }, {
+          offset: 0,
-      offset: 1, color: '#091732' // 100% 处的颜色
+          color: '#0f2c70', // 0% 处的颜色
-    }],
+        },
-    globalCoord: false // 缺省为 false
+        {
+          offset: 1,
+          color: '#091732', // 100% 处的颜色
+        },
+      ],
+      globalCoord: false, // 缺省为 false
     },
     visualMap: {
       min: 75,
@@ -187,12 +189,12 @@ const options = {
       calculable: false,
       text: ['高', '低'],
       inRange: {
-      color: ['rgb(4, 1, 255)', 'rgb(225, 1, 255)']
+        color: ['rgb(4, 1, 255)', 'rgb(225, 1, 255)'],
       },
       textStyle: {
         color: '#ffffff',
-      fontSize: 10
+        fontSize: 10,
-    }
+      },
     },
     geo: {
       map: 'china',
@@ -200,17 +202,17 @@ const options = {
       roam: true,
       label: {
         emphasis: {
-        show: true
+          show: true,
-      }
+        },
       },
       itemStyle: {
         normal: {
           areaColor: '#091632',
           borderColor: '#1773c3',
           shadowColor: '#1773c3',
-        shadowBlur: 20
+          shadowBlur: 20,
-      }
+        },
-    }
+      },
     },
     series: [
       {
@@ -226,20 +228,20 @@ const options = {
           emphasis: {
             show: false,
             textStyle: {
-            color: '#fff'
+              color: '#fff',
-          }
+            },
-        }
+          },
         },
         roam: true,
         itemStyle: {
           normal: {
             areaColor: '#031525',
             borderColor: '#3B5077',
-          borderWidth: 1.5
+            borderWidth: 1.5,
           },
           emphasis: {
-          areaColor: '#0f2c70'
+            areaColor: '#0f2c70',
-        }
+          },
         },
       },
       {
@@ -248,7 +250,7 @@ const options = {
         coordinateSystem: 'geo',
         data: convertData(data),
         symbolSize: function (val) {
-        return val[2]/8;
+          return val[2] / 8
         },
         label: {
           normal: {
@@ -257,23 +259,23 @@ const options = {
             textStyle: {
               fontSize: 10,
               fontWeight: 'bolder',
-            color:'#ffffff'
+              color: '#ffffff',
             },
-          show: true
+            show: true,
           },
           emphasis: {
-          show: true
+            show: true,
-        }
+          },
         },
         itemStyle: {
           normal: {
-          color: '#ddb926'
+            color: '#ddb926',
+          },
+        },
+      },
+    ],
   }
-      }
+  let chart: EChartsType
-    }
-  ]
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -284,6 +286,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/migration/index.vue

@@ -11,24 +11,24 @@ import logo from '@/assets/logo.png'
   const props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: () => {}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
 
   var geoGpsMap = [109.1162, 34.2004]
@@ -49,7 +49,7 @@ var geoCoordMap = {
     四川: [113.0823, 28.2568],
     云南: [102.9199, 25.4663],
     广东: [113.12244, 23.009505],
-  海南: [110.3893, 19.8516]
+    海南: [110.3893, 19.8516],
   }
 
   var value = {
@@ -68,8 +68,7 @@ var value = {
     云南: 10000,
     广东: 10000,
     海南: 10000,
-  西藏: 10000
+    西藏: 10000,
-
   }
   var colors = '#f9b207'
 
@@ -85,7 +84,7 @@ for (var key in geoCoordMap) {
       year: '陕西',
       name: key,
       value: value[key] / 100,
-    value1: value[key] / 100
+      value1: value[key] / 100,
     })
   }
 
@@ -105,7 +104,7 @@ var convertData = function (data) {
       if (geoCoord) {
         res.push({
           name: data[i].name,
-        value: geoCoord.concat(data[i].value)
+          value: geoCoord.concat(data[i].value),
         })
       }
     }
@@ -120,12 +119,15 @@ var convertToLineData = function (data, gps) {
       var fromCoord = gps // 郑州
       //  var toCoord = geoGps[Math.random()*3];
       if (fromCoord && toCoord) {
-      res.push([{
+        res.push([
+          {
             coord: fromCoord,
-        value: dataItem.value
+            value: dataItem.value,
-      }, {
+          },
-        coord: toCoord
+          {
-      }])
+            coord: toCoord,
+          },
+        ])
       }
     }
     return res
@@ -136,7 +138,7 @@ const options = {
       trigger: 'item',
       formatter(val) {
         // console.log('val==========',val)
-    }
+      },
     },
     backgroundColor: '#001540',
     geo: {
@@ -147,8 +149,8 @@ const options = {
       center: [101.4038, 36.8207],
       label: {
         emphasis: {
-        show: false
+          show: false,
-      }
+        },
       },
       itemStyle: {
         normal: {
@@ -159,29 +161,31 @@ const options = {
             x: 0.5,
             y: 0.5,
             r: 0.8,
-          colorStops: [{
+            colorStops: [
+              {
                 offset: 0,
-            color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+                color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
-          }, {
+              },
+              {
                 offset: 1,
-            color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+                color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
-          }],
+              },
-          globalCoord: false // 缺省为 false
+            ],
+            globalCoord: false, // 缺省为 false
           },
           shadowColor: 'rgba(128, 217, 248, 1)',
           // shadowColor: 'rgba(255, 255, 255, 1)',
           shadowOffsetX: -2,
           shadowOffsetY: 2,
-        shadowBlur: 10
+          shadowBlur: 10,
         },
         emphasis: {
           areaColor: '#389BB7',
-        borderWidth: 0
+          borderWidth: 0,
-      }
+        },
-    }
+      },
     },
     series: [
-
       // 地图？
       {
         type: 'map',
@@ -191,59 +195,63 @@ const options = {
         showLegendSymbol: false, // 存在legend时显示
         label: {
           normal: {
-          show: false
+            show: false,
           },
           emphasis: {
             show: false,
             textStyle: {
-            color: '#fff'
+              color: '#fff',
-          }
+            },
-        }
+          },
         },
 
         roam: true,
         itemStyle: {
           normal: {
             areaColor: '#031525',
-          borderColor: '#FFFFFF'
+            borderColor: '#FFFFFF',
           },
           emphasis: {
-          areaColor: '#2B91B7'
+            areaColor: '#2B91B7',
-        }
           },
-      animation: false
+        },
+        animation: false,
       },
       // 地图点的动画效果
       {
         //  name: 'Top 5',
         type: 'effectScatter',
         coordinateSystem: 'geo',
-      data: convertData(mapData.sort(function (a, b) {
+        data: convertData(
+          mapData
+            .sort(function (a, b) {
               return b.value - a.value
-      }).slice(0, 20)),
+            })
+            .slice(0, 20),
+        ),
         symbolSize: function (val) {
           return val[2] / 10
         },
         showEffectOn: 'render',
         rippleEffect: {
-        brushType: 'stroke'
+          brushType: 'stroke',
         },
         hoverAnimation: true,
         label: {
           normal: {
             formatter: '{b}',
             position: 'right',
-          show: true
+            show: true,
-        }
+          },
         },
         itemStyle: {
           normal: {
             color: colors,
             shadowBlur: 10,
-          shadowColor: colors
+            shadowColor: colors,
-        }
           },
-      zlevel: 1
+        },
+        zlevel: 1,
       },
       // 地图线的动画效果
       {
@@ -254,17 +262,17 @@ const options = {
           period: 4, // 箭头指向速度，值越小速度越快
           trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
           symbol: 'arrow', // 箭头图标
-        symbolSize: 3 // 图标大小
+          symbolSize: 3, // 图标大小
         },
         lineStyle: {
           normal: {
             color: colors,
             width: 0.1, // 尾迹线条宽度
             opacity: 0.5, // 尾迹线条透明度
-          curveness: 0.3 // 尾迹线条曲直度
+            curveness: 0.3, // 尾迹线条曲直度
-        }
           },
-      data: convertToLineData(mapData, geoGpsMap)
+        },
+        data: convertToLineData(mapData, geoGpsMap),
       },
       {
         type: 'scatter',
@@ -274,7 +282,9 @@ const options = {
         symbol: `image://${logo}`,
         data: cityIconData,
         rippleEffect: {
-        period: 4, brushType: 'stroke', scale: 4
+          period: 4,
+          brushType: 'stroke',
+          scale: 4,
         },
         tooltip: {
           trigger: 'item',
@@ -282,7 +292,7 @@ const options = {
           borderColor: 'black',
           background: 'rgba(0,0,0,0.7)',
           textStyle: {
-          fontSize:20
+            fontSize: 20,
           },
           formatter(val) {
             console.log('val=======', val)
@@ -297,10 +307,10 @@ const options = {
           <!--                        </div>-->
           </div>`
             return tipHtml
-          }
-      }
           },
-  ]
+        },
+      },
+    ],
   }
   let chart: EChartsType
   const initChart = () => {

src/views/charts/components/otherDiscard/Histogram.vue

@@ -3,31 +3,31 @@
 </template>
 <script lang="ts" setup>
   import 'echarts-liquidfill/src/liquidFill.js'
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     legend: {
@@ -38,12 +38,12 @@ const options = {
         '60岁全程接种量',
         '80岁任务数',
         '80岁全程接种量',
-        '完成率'
+        '完成率',
-      ]
+      ],
     },
     xAxis: {
       type: 'category',
-      data: ['街道1', '街道2', '街道3', '街道4', '街道5', '街道6', '街道7']
+      data: ['街道1', '街道2', '街道3', '街道4', '街道5', '街道6', '街道7'],
     },
     yAxis: [
       { type: 'value' },
@@ -54,7 +54,7 @@ const options = {
         // max: 100,
         nameTextStyle: {
           color: '#ccc',
-          padding: [0, 0, 10, -30]
+          padding: [0, 0, 10, -30],
         },
         splitNumber: 5,
         splitLine: {
@@ -63,16 +63,16 @@ const options = {
             type: 'dashed',
             width: 1,
             // 使用深浅的间隔色
-            color: ['#566471', '#566471']
+            color: ['#566471', '#566471'],
-          }
+          },
         },
         axisLabel: {
           show: true,
           textStyle: {
-            fontSize: 12
+            fontSize: 12,
-          }
+          },
-        }
+        },
-      }
+      },
     ],
     // tooltip: {
     //   trigger: 'axis',
@@ -81,56 +81,60 @@ const options = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'shadow'
+        type: 'shadow',
       },
       textStyle: {
         color: '#fff',
         align: 'left',
-        fontSize: 14
+        fontSize: 14,
       },
-      axisLine: {//x坐标轴轴线
+      axisLine: {
+        //x坐标轴轴线
         show: true,
-        lineStyle: {//x坐标轴轴线样式
+        lineStyle: {
+          //x坐标轴轴线样式
           color: '#000', //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
-        }
+        },
       },
 
       backgroundColor: 'rgba(0,0,0,0.8)',
       formatter: function (params) {
-        console.log(params);
+        console.log(params)
-        let str = params[0].name + '<br />';
+        let str = params[0].name + '<br />'
-        console.log(str);
+        console.log(str)
         params.forEach((item) => {
-          console.log(item.seriesName);
+          console.log(item.seriesName)
           if (item.value) {
             if (item.seriesName.indexOf('岁全程接种量') != -1) {
-              str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
+              str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${
+                item.color
+              }
                                     "></span>
                                          ${item.seriesName}
                                          :
                                        ${item.value}人  <br/>
                                          &nbsp; &nbsp;  全程完成率
                                        : ${item.value / 100}%
-                                        <br/><br/>`;
+                                        <br/><br/>`
             } else if (item.seriesName.indexOf('岁任务数') != -1) {
               str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
                                     "></span>
                                          ${item.seriesName}
                                          :
                                        ${item.value}人
-                                        <br/>`;
+                                        <br/>`
             } else {
               str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
                                     "></span>
                                         ${item.seriesName}
                                         :
                                       ${item.value}%
-                                        <br/>`;
+                                        <br/>`
             }
           }
-        });
+        })
-        return str;
+        return str
-      }
+      },
     },
 
     series: [
@@ -138,37 +142,37 @@ const options = {
         name: '3-11岁任务数',
         data: [150, 230, 224, 218, 135, 147, 260],
         stack: 'BB',
-        type: 'bar'
+        type: 'bar',
       },
       {
         name: '3-11岁全程接种量',
         data: [150, 230, 224, 218, 135, 147, 260],
         stack: 'BB',
-        type: 'bar'
+        type: 'bar',
       },
       {
         name: '60岁任务数',
         data: [150, 230, 224, 218, 135, 147, 260],
         stack: 'AA',
-        type: 'bar'
+        type: 'bar',
       },
       {
         name: '60岁全程接种量',
         data: [880, 30, 124, 118, 35, 47, 160],
         stack: 'AA',
-        type: 'bar'
+        type: 'bar',
       },
       {
         name: '80岁任务数',
         data: [660, 30, 124, 118, 35, 47, 160],
         stack: 'Ad',
-        type: 'bar'
+        type: 'bar',
       },
       {
         name: '80岁全程接种量',
         data: [880, 30, 124, 118, 35, 47, 160],
         stack: 'Ad',
-        type: 'bar'
+        type: 'bar',
       },
       {
         name: '完成率',
@@ -180,25 +184,25 @@ const options = {
           itemStyle: {
             normal: {
               lineStyle: {
-                type: 'dotted'
+                type: 'dotted',
-              }
-            }
               },
-          data: [{ type: 'average', name: 'Avg' + '%' }]
+            },
+          },
+          data: [{ type: 'average', name: 'Avg' + '%' }],
         },
         //   symbol: 'none',
         itemStyle: {
           normal: {
             lineStyle: {
               width: 2,
-              type: 'solid' //'dotted'虚线 'solid'实线
+              type: 'solid', //'dotted'虚线 'solid'实线
+            },
+          },
+        },
+      },
+    ],
   }
-          }
+  let chart: EChartsType
-        }
-      }
-    ]
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -209,6 +213,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/otherDiscard/line.vue

@@ -2,31 +2,31 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     backgroundColor: '#031d33',
@@ -37,8 +37,7 @@ const options = {
         fontSize: 16,
         color: 'rgba(101, 213, 255, 1)',
       },
-    icon:
+      icon: 'path://M512 881.777778 512 881.777778C716.222629 881.777778 881.777778 716.222629 881.777778 512 881.777778 307.777371 716.222629 142.222222 512 142.222222 307.777373 142.222222 142.222222 307.777371 142.222222 512 142.222222 716.222629 307.777373 881.777778 512 881.777778L512 881.777778ZM512 1024 512 1024C229.230208 1024 0 794.769789 0 512 0 229.230211 229.230208 0 512 0 794.769789 0 1024 229.230211 1024 512 1024 794.769789 794.769789 1024 512 1024L512 1024Z',
-        'path://M512 881.777778 512 881.777778C716.222629 881.777778 881.777778 716.222629 881.777778 512 881.777778 307.777371 716.222629 142.222222 512 142.222222 307.777373 142.222222 142.222222 307.777371 142.222222 512 142.222222 716.222629 307.777373 881.777778 512 881.777778L512 881.777778ZM512 1024 512 1024C229.230208 1024 0 794.769789 0 512 0 229.230211 229.230208 0 512 0 794.769789 0 1024 229.230211 1024 512 1024 794.769789 794.769789 1024 512 1024L512 1024Z',
       itemWidth: 8, // 设置宽度
       itemHeight: 8, // 设置高度、
       itemGap: 12, // 设置间距
@@ -162,34 +161,34 @@ const options = {
       {
         name: '',
         nameTextStyle: {
-        color: '#65d5ff'
+          color: '#65d5ff',
         },
         min: 0,
         splitLine: {
           show: true,
           lineStyle: {
-          color: '#233653'
+            color: '#233653',
-        }
+          },
         },
         axisLine: {
           show: true,
           lineStyle: {
-          color: '#233653'
+            color: '#233653',
-        }
+          },
         },
         axisLabel: {
           show: true,
           textStyle: {
-          color: '#78bdf5'
+            color: '#78bdf5',
           },
           formatter: function (value) {
             return value * 100 + '%'
-        }
+          },
         },
         axisTick: {
-        show: false
+          show: false,
-      }
+        },
-    }
+      },
     ],
     series: [
       {
@@ -308,21 +307,25 @@ const options = {
         symbol: 'none',
         lineStyle: {
           normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
                 offset: 0,
-            color: 'rgba(255, 227, 168, 0.3)'
+                color: 'rgba(255, 227, 168, 0.3)',
-          }, {
-            offset: 0.5,
-            color: 'rgba(255, 227, 168, 1)'
-          }, {
-            offset: 1,
-            color: 'rgba(255, 227, 168, 0.3)'
-          }]),
-          shadowColor: 'rgba(255, 120, 0,1)',
-          shadowBlur: 10
-        }
               },
-      yAxisIndex: 1
+              {
+                offset: 0.5,
+                color: 'rgba(255, 227, 168, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(255, 227, 168, 0.3)',
+              },
+            ]),
+            shadowColor: 'rgba(255, 120, 0,1)',
+            shadowBlur: 10,
+          },
+        },
+        yAxisIndex: 1,
       },
       {
         name: '变化占比',
@@ -332,21 +335,21 @@ const options = {
         rippleEffect: {
           period: 5,
           scale: 3,
-        brushType: 'stroke'
+          brushType: 'stroke',
         },
         hoverAnimation: true,
         itemStyle: {
           normal: {
             color: 'rgba(217,247,249,1)',
             shadowBlur: 10,
-          shadowColor: '#333'
+            shadowColor: '#333',
-        }
+          },
+        },
+        data: [],
       },
-      data: []
-    }
     ],
-};
+  }
-let chart:EChartsType;
+  let chart: EChartsType
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -357,6 +360,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/otherDiscard/liquidFill.vue

@@ -3,31 +3,31 @@
 </template>
 <script lang="ts" setup>
   import 'echarts-liquidfill/src/liquidFill.js'
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     grid: {
@@ -35,7 +35,7 @@ const options = {
       left: '2%',
       right: '2%',
       bottom: '2%',
-    containLabel: true
+      containLabel: true,
     },
     backgroundColor: '#0F224C', //背景色
     series: [
@@ -44,7 +44,7 @@ const options = {
         radius: '80%', //显示比例
         center: ['50%', '50%'], //中心点
         amplitude: 20, //水波振幅
-      data: [0.5,.5,.5], // data个数代表波浪数
+        data: [0.5, 0.5, 0.5], // data个数代表波浪数
         color: [
           {
             type: 'linear',
@@ -89,8 +89,8 @@ const options = {
         },
       },
     ],
-};
+  }
-let chart:EChartsType;
+  let chart: EChartsType
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -101,6 +101,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/otherDiscard/painting.vue

@@ -2,59 +2,59 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
   const indicator = [
     {
       text: '文明村',
       min: 0,
-    max: 100
+      max: 100,
     },
     {
       text: '卫生村',
       min: 0,
-    max: 100
+      max: 100,
     },
     {
       text: '森林村庄',
       min: 0,
-    max: 100
+      max: 100,
     },
     {
       text: '全面小康',
       min: 0,
-    max: 100
+      max: 100,
     },
     {
       text: '景区村庄',
       min: 0,
-    max: 100
+      max: 100,
-  }
+    },
   ]
   const Data = [80, 61, 70, 86, 77]
   function setData() {
@@ -66,11 +66,11 @@ function setData() {
             lineStyle: {
               color: '#4BFFFC',
               shadowColor: '#4BFFFC',
-            shadowBlur: 5
+              shadowBlur: 5,
             },
             shadowColor: '#4BFFFC',
-          shadowBlur: 5
+            shadowBlur: 5,
-        }
+          },
         },
         areaStyle: {
           normal: {
@@ -83,19 +83,19 @@ function setData() {
               colorStops: [
                 {
                   offset: 1,
-                color: '#4BFFFC'
+                  color: '#4BFFFC',
                 },
                 {
                   offset: 0,
-                color: 'rgba(0,0,0,0)'
+                  color: 'rgba(0,0,0,0)',
-              }
+                },
-            ],
+              ],
-            globalCoord: false
+              globalCoord: false,
+            },
+            opacity: 0.8, // 区域透明度
+          },
+        },
       },
-          opacity: 0.8 // 区域透明度
-        }
-      }
-    }
     ]
   }
 
@@ -109,23 +109,23 @@ function setgauge(i) {
       startAngle: 90 + 72 * i + 18, //开始刻度的角度
       endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
       axisLine: {
-      show: false
+        show: false,
       },
       axisTick: {
         show: true,
         lineStyle: {
           color: '#66ccff',
-        width: 1
+          width: 1,
         },
         length: 6,
-      splitNumber: 1
+        splitNumber: 1,
       },
       splitLine: {
-      show: false
+        show: false,
       },
       axisLabel: {
-      show: false
+        show: false,
-    }
+      },
     }
   }
   function setSpot() {
@@ -139,9 +139,9 @@ function setSpot() {
             borderColor: '#fff',
             borderWidth: 1,
             shadowColor: color[i],
-          shadowBlur: 8
+            shadowBlur: 8,
-        }
+          },
-      }
+        },
       })
     })
     return scatterData
@@ -151,7 +151,7 @@ const options = {
     backgroundColor: '#0E1327',
     polar: {
       center: ['50%', '50%'],
-    radius: '60%'
+      radius: '60%',
     },
     radar: {
       shape: 'circle',
@@ -161,7 +161,7 @@ const options = {
       axisName: {
         color: '#b7e9fd',
         fontSize: 13,
-      padding: -20
+        padding: -20,
       },
       nameGap: 45,
       splitNumber: 4,
@@ -170,21 +170,21 @@ const options = {
         show: true,
         areaStyle: {
           // 分隔区域的样式设置。
-        color: ['rgba(27, 50, 66, 0.4)']
+          color: ['rgba(27, 50, 66, 0.4)'],
-      }
+        },
       },
       axisLine: {
         //指向外圈文本的分隔线样式
         lineStyle: {
-        color: '#5aa3d0'
+          color: '#5aa3d0',
-      }
+        },
       },
       splitLine: {
         lineStyle: {
           color: 'rgba(99,192,251,0.2)', // 分隔线颜色
-        width: 2 // 分隔线线宽
+          width: 2, // 分隔线线宽
-      }
+        },
-    }
+      },
     },
     angleAxis: {
       type: 'category',
@@ -193,40 +193,40 @@ const options = {
       boundaryGap: false,
       clockwise: false,
       axisTick: {
-      show: false
+        show: false,
       },
       axisLabel: {
-      show: false
+        show: false,
       },
       axisLine: {
-      show: false
+        show: false,
       },
       splitLine: {
-      show: false
+        show: false,
-    }
+      },
     },
     radiusAxis: {
       min: 0,
       max: 100,
       interval: 25,
       splitLine: {
-      show: false
+        show: false,
       },
       axisTick: {
-      show: false
+        show: false,
       },
       axisLine: {
         //指向外圈文本的分隔线样式
         lineStyle: {
-        color: '#5aa3d0'
+          color: '#5aa3d0',
-      }
+        },
       },
       axisLabel: {
         fontSize: 12,
         color: '#5aa3d0',
         align: 'left',
-      margin: -5
+        margin: -5,
-    }
+      },
     },
     series: [
       setgauge(0),
@@ -238,22 +238,22 @@ const options = {
         type: 'radar',
         silent: true,
         lineStyle: {
-        color: '#66ffff'
+          color: '#66ffff',
         },
         areaStyle: {
-        color: 'rgba(102, 255, 255, 0.31)'
+          color: 'rgba(102, 255, 255, 0.31)',
         },
-      data: setData()
+        data: setData(),
       },
       {
         type: 'scatter',
         coordinateSystem: 'polar',
         symbolSize: 20,
-      data: setSpot()
+        data: setSpot(),
+      },
+    ],
   }
-  ]
+  let chart: EChartsType
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -262,10 +262,8 @@ const initChart =()=> {
   onMounted(() => {
     chart = initChart()
 
-
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/otherDiscard/pie.vue

@@ -2,33 +2,33 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
-let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
+  let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
   let echartData = [
     {
       name: '设备1',
@@ -46,11 +46,11 @@ let echartData = [
       name: '设备4',
       value: '1420',
     },
-];
+  ]
   let formatNumber = function (num) {
-  let reg = /(?=(\B)(\d{3})+$)/g;
+    let reg = /(?=(\B)(\d{3})+$)/g
-  return num.toString().replace(reg, ',');
+    return num.toString().replace(reg, ',')
-};
+  }
 
   const options = {
     backgroundColor: '#364686',
@@ -123,7 +123,9 @@ const options = {
         label: {
           normal: {
             formatter: (params) => {
-            return '{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}';
+              return (
+                '{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}'
+              )
             },
             padding: [0, -70, 30, -70],
             rich: {
@@ -183,8 +185,8 @@ const options = {
         ],
       },
     ],
-};
+  }
-let chart:EChartsType;
+  let chart: EChartsType
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -195,6 +197,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/otherDiscard/progress.vue

@@ -2,34 +2,33 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
 
-
   const options = {
     title: [
       {
@@ -132,8 +131,8 @@ const options = {
         data: [100],
       },
     ],
-};
+  }
-let chart:EChartsType;
+  let chart: EChartsType
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -144,6 +143,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/otherDiscard/rotate.vue

@@ -1,55 +1,72 @@
-
 <template>
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
-var data = [],data2=[];
+  var data = [],
+    data2 = []
   var trafficWay = [
     {
       name: '病假',
-    value: 20
+      value: 20,
-  },{
+    },
+    {
       name: '事假',
-    value: 1
+      value: 1,
-  },{
+    },
+    {
       name: '婚假',
-    value: 30
+      value: 30,
-  },{
+    },
+    {
       name: '丧假',
-    value: 40
+      value: 40,
-  },{
+    },
+    {
       name: '年休假',
-    value: 40
+      value: 40,
-  }];
+    },
-var color=['#2A8BFD','#BAFF7F','#00FAC1','#00CAFF','#FDE056','#4ED33C','#FF8A26','#FF5252','#9689FF','#CB00FF']
+  ]
+  var color = [
+    '#2A8BFD',
+    '#BAFF7F',
+    '#00FAC1',
+    '#00CAFF',
+    '#FDE056',
+    '#4ED33C',
+    '#FF8A26',
+    '#FF5252',
+    '#9689FF',
+    '#CB00FF',
+  ]
   for (var i = 0; i < trafficWay.length; i++) {
-  data.push({
+    data.push(
+      {
         value: trafficWay[i].value,
         name: trafficWay[i].name,
         itemStyle: {
@@ -58,28 +75,30 @@ for (var i = 0; i < trafficWay.length; i++) {
             shadowBlur: 20,
             borderRadius: 20,
             borderColor: color[i],
-        shadowColor: color[i]
+            shadowColor: color[i],
-      }
+          },
-    }
+        },
-  }, {
+      },
+      {
         value: 5,
         name: '',
         itemStyle: {
           normal: {
             label: {
-          show: false
+              show: false,
             },
             labelLine: {
-          show: false
+              show: false,
             },
             color: 'rgba(0, 0, 0, 0)',
             borderColor: 'rgba(0, 0, 0, 0)',
-        borderWidth: 0
+            borderWidth: 0,
-
+          },
-      }
+        },
-    }
+      },
-  });
+    )
-  data2.push({
+    data2.push(
+      {
         value: trafficWay[i].value,
         name: trafficWay[i].name,
       },
@@ -89,26 +108,25 @@ for (var i = 0; i < trafficWay.length; i++) {
         itemStyle: {
           normal: {
             label: {
-              show: false
+              show: false,
             },
             labelLine: {
-              show: false
+              show: false,
             },
             color: 'rgba(0, 0, 0, 0)',
             borderColor: 'rgba(0, 0, 0, 0)',
             borderWidth: 0,
-            opacity:0.2
+            opacity: 0.2,
-
+          },
-          }
+        },
-        }
+      },
-      }
     )
   }
 
-let angle = 0;//角度，用来做简单的动画效果的
+  let angle = 0 //角度，用来做简单的动画效果的
 
   const option = {
-  backgroundColor:"#061740",
+    backgroundColor: '#061740',
     color: color,
     legend: {
       right: '10%',
@@ -118,204 +136,212 @@ const option = {
       itemHeight: 15,
       textStyle: {
         color: '#ffffff',
-    }
+      },
     },
     series: [
-    {//外线1
+      {
-      name: "ring5",
+        //外线1
+        name: 'ring5',
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
           return {
             type: 'arc',
             shape: {
               cx: api.getWidth() / 3,
               cy: api.getHeight() / 2,
-            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
-            startAngle: (0+angle) * Math.PI / 180,
+              startAngle: ((0 + angle) * Math.PI) / 180,
-            endAngle: (90+angle) * Math.PI / 180
+              endAngle: ((90 + angle) * Math.PI) / 180,
             },
             style: {
               stroke: '#4EE9E6',
-            fill: "transparent",
+              fill: 'transparent',
-            lineWidth: 1.5
+              lineWidth: 1.5,
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//内线1
+      {
-      name: "ring5",
+        //内线1
+        name: 'ring5',
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
           return {
             type: 'arc',
             shape: {
               cx: api.getWidth() / 3,
               cy: api.getHeight() / 2,
-            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
-            startAngle: (180+angle) * Math.PI / 180,
+              startAngle: ((180 + angle) * Math.PI) / 180,
-            endAngle: (270+angle) * Math.PI / 180
+              endAngle: ((270 + angle) * Math.PI) / 180,
             },
             style: {
-            stroke: "#4EE9E6",
+              stroke: '#4EE9E6',
-            fill: "transparent",
+              fill: 'transparent',
-            lineWidth: 1.5
+              lineWidth: 1.5,
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//外线2
+      {
-      name: "ring5",
+        //外线2
+        name: 'ring5',
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
           return {
             type: 'arc',
             shape: {
               cx: api.getWidth() / 3,
               cy: api.getHeight() / 2,
-            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
-            startAngle: (270+-angle) * Math.PI / 180,
+              startAngle: ((270 + -angle) * Math.PI) / 180,
-            endAngle: (40+-angle) * Math.PI / 180
+              endAngle: ((40 + -angle) * Math.PI) / 180,
             },
             style: {
-            stroke: "#4EE9E6",
+              stroke: '#4EE9E6',
-            fill: "transparent",
+              fill: 'transparent',
-            lineWidth: 1.5
+              lineWidth: 1.5,
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//外线2
+      {
-      name: "ring5",
+        //外线2
+        name: 'ring5',
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
           return {
             type: 'arc',
             shape: {
               cx: api.getWidth() / 3,
               cy: api.getHeight() / 2,
-            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
-            startAngle: (90+-angle) * Math.PI / 180,
+              startAngle: ((90 + -angle) * Math.PI) / 180,
-            endAngle: (220+-angle) * Math.PI / 180
+              endAngle: ((220 + -angle) * Math.PI) / 180,
             },
             style: {
-            stroke: "#4EE9E6",
+              stroke: '#4EE9E6',
-            fill: "transparent",
+              fill: 'transparent',
-            lineWidth: 1.5
+              lineWidth: 1.5,
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//绿点1
+      {
-      name: "ring5",
+        //绿点1
+        name: 'ring5',
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
-        let x0 = api.getWidth() / 3;
+          let x0 = api.getWidth() / 3
-        let y0 = api.getHeight() / 2;
+          let y0 = api.getHeight() / 2
-        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
+          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
-        let point = getCirlPoint(x0, y0, r, (90+-angle))
+          let point = getCirlPoint(x0, y0, r, 90 + -angle)
           return {
             type: 'circle',
             shape: {
               cx: point.x,
               cy: point.y,
-            r: 4
+              r: 4,
             },
             style: {
-            stroke: "#66FFFF",//粉
+              stroke: '#66FFFF', //粉
-            fill: "#66FFFF"
+              fill: '#66FFFF',
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//绿点2
+      {
-      name: "ring5",  //绿点
+        //绿点2
+        name: 'ring5', //绿点
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
-        let x0 = api.getWidth() / 3;
+          let x0 = api.getWidth() / 3
-        let y0 = api.getHeight() / 2;
+          let y0 = api.getHeight() / 2
-        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
+          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
-        let point = getCirlPoint(x0, y0, r, (270+-angle))
+          let point = getCirlPoint(x0, y0, r, 270 + -angle)
           return {
             type: 'circle',
             shape: {
               cx: point.x,
               cy: point.y,
-            r: 4
+              r: 4,
             },
             style: {
-            stroke: "#66FFFF",//粉
+              stroke: '#66FFFF', //粉
-            fill: "#66FFFF"
+              fill: '#66FFFF',
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//绿点3
+      {
-      name: "ring5",
+        //绿点3
+        name: 'ring5',
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
-        let x0 = api.getWidth() / 3;
+          let x0 = api.getWidth() / 3
-        let y0 = api.getHeight() / 2;
+          let y0 = api.getHeight() / 2
-        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
+          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6
-        let point = getCirlPoint(x0, y0, r, (90+angle))
+          let point = getCirlPoint(x0, y0, r, 90 + angle)
           return {
             type: 'circle',
             shape: {
               cx: point.x,
               cy: point.y,
-            r: 4
+              r: 4,
             },
             style: {
-            stroke: "#66FFFF",//粉
+              stroke: '#66FFFF', //粉
-            fill: "#66FFFF"
+              fill: '#66FFFF',
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
-    {//绿点4
+      {
-      name: "ring5",  //绿点
+        //绿点4
+        name: 'ring5', //绿点
         type: 'custom',
-      coordinateSystem: "none",
+        coordinateSystem: 'none',
         renderItem: function (params, api) {
-        let x0 = api.getWidth() / 3;
+          let x0 = api.getWidth() / 3
-        let y0 = api.getHeight() / 2;
+          let y0 = api.getHeight() / 2
-        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
+          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6
-        let point = getCirlPoint(x0, y0, r, (270+angle))
+          let point = getCirlPoint(x0, y0, r, 270 + angle)
           return {
             type: 'circle',
             shape: {
               cx: point.x,
               cy: point.y,
-            r: 4
+              r: 4,
             },
             style: {
-            stroke: "#66FFFF",//粉
+              stroke: '#66FFFF', //粉
-            fill: "#66FFFF"
+              fill: '#66FFFF',
             },
-          silent: true
+            silent: true,
-        };
+          }
         },
-      data: [0]
+        data: [0],
       },
       {
         name: '',
@@ -324,19 +350,19 @@ const option = {
         radius: ['98%', '95%'],
         hoverAnimation: false,
         center: ['33.33%', '50%'],
-      top:"center",
+        top: 'center',
         itemStyle: {
           normal: {
             label: {
-            show:false
+              show: false,
-          }
-        }
             },
-      data:data
+          },
+        },
+        data: data,
       },
       {
         type: 'pie',
-      top:"center",
+        top: 'center',
         startAngle: 90,
         clockwise: false,
         center: ['33.33%', '50%'],
@@ -344,16 +370,16 @@ const option = {
         hoverAnimation: false,
         radius: ['94%', '55%'],
         itemStyle: {
-        opacity:0.15
+          opacity: 0.15,
         },
         label: {
           show: false,
-        position: 'center'
+          position: 'center',
         },
         labelLine: {
-        show: false
+          show: false,
         },
-      data:data2
+        data: data2,
       },
       {
         name: '',
@@ -362,30 +388,29 @@ const option = {
         center: ['33.33%', '50%'],
         radius: ['39%', '38%'],
         hoverAnimation: false,
-      top:"center",
+        top: 'center',
         itemStyle: {
           normal: {
             label: {
-            show:false
+              show: false,
-          }
-        }
             },
-      data:data
           },
-  ]
+        },
-};
+        data: data,
+      },
+    ],
+  }
   //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
   function getCirlPoint(x0, y0, r, angle) {
-  let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
+    let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
-  let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
+    let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
     return {
       x: x1,
-    y: y1
+      y: y1,
     }
   }
 
-
+  let chart: EChartsType
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     draw(chart)
@@ -403,11 +428,10 @@ onMounted(()=>{
     setInterval(function () {
       //用setInterval做动画感觉有问题
       draw(chart)
-  }, 100);
+    }, 100)
 
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/otherDiscard/sankey.vue

@@ -2,230 +2,229 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   let datalist = [
     {
-    name: "公共平台"
+      name: '公共平台',
     },
     {
-    name: "系统0000"
+      name: '系统0000',
     },
     {
-    name: "系统0011"
+      name: '系统0011',
     },
     {
-    name: "系统0022"
+      name: '系统0022',
     },
     {
-    name: "系统0033"
+      name: '系统0033',
     },
     {
-    name: "系统0044"
+      name: '系统0044',
     },
     {
-    name: "系统0055"
+      name: '系统0055',
-  },{
-    name: "系统11"
     },
     {
-    name: "系统22"
+      name: '系统11',
     },
     {
-    name: "系统33"
+      name: '系统22',
     },
     {
-    name: "系统44"
+      name: '系统33',
     },
     {
-    name: "系统55"
+      name: '系统44',
     },
     {
-    name: "系统66"
+      name: '系统55',
     },
     {
-    name: "系统77"
+      name: '系统66',
     },
     {
-    name: "系统88"
+      name: '系统77',
     },
     {
-    name: "系统99"
+      name: '系统88',
-  }
+    },
-];
+    {
+      name: '系统99',
+    },
+  ]
   let linksData = [
     {
-    source: "公共平台",
+      source: '公共平台',
-    target: "系统0000",
+      target: '系统0000',
-    value: 1044305
+      value: 1044305,
     },
     {
-    source: "公共平台",
+      source: '公共平台',
-    target: "系统0011",
+      target: '系统0011',
-    value: 651527
+      value: 651527,
     },
     {
-    source: "公共平台",
+      source: '公共平台',
-    target: "系统0022",
+      target: '系统0022',
-    value: 651527
+      value: 651527,
     },
     {
-    source: "公共平台",
+      source: '公共平台',
-    target: "系统0033",
+      target: '系统0033',
-    value: 486710
+      value: 486710,
     },
     {
-    source: "公共平台",
+      source: '公共平台',
-    target: "系统0044",
+      target: '系统0044',
-    value: 212670
+      value: 212670,
     },
     {
-    source: "公共平台",
+      source: '公共平台',
-    target: "系统0055",
+      target: '系统0055',
-    value: 210400
+      value: 210400,
-  },{
-    source: "系统0011",
-    target: "系统11",
-    value: 645246
     },
     {
-    source: "系统0022",
+      source: '系统0011',
-    target: "系统22",
+      target: '系统11',
-    value: 513275
+      value: 645246,
     },
     {
-    source: "系统0011",
+      source: '系统0022',
-    target: "系统33",
+      target: '系统22',
-    value: 282986
+      value: 513275,
     },
     {
-    source: "系统0011",
+      source: '系统0011',
-    target: "系统44",
+      target: '系统33',
-    value: 118655
+      value: 282986,
     },
     {
-    source: "系统0022",
+      source: '系统0011',
-    target: "系统55",
+      target: '系统44',
-    value: 105989
+      value: 118655,
     },
     {
-    source: "系统0022",
+      source: '系统0022',
-    target: "系统66",
+      target: '系统55',
-    value: 95100
+      value: 105989,
     },
     {
-    source: "系统0033",
+      source: '系统0022',
-    target: "系统77",
+      target: '系统66',
-    value: 87796
+      value: 95100,
     },
     {
-    source: "系统0044",
+      source: '系统0033',
-    target: "系统88",
+      target: '系统77',
-    value: 47658
+      value: 87796,
     },
     {
-    source: "系统0055",
+      source: '系统0044',
-    target: "系统99",
+      target: '系统88',
-    value: 243660
+      value: 47658,
     },
-
+    {
-
+      source: '系统0055',
-];
+      target: '系统99',
+      value: 243660,
+    },
+  ]
   let Color = [
-  "#61FEFF",
+    '#61FEFF',
-  "#937FE6",
+    '#937FE6',
-  "#2B56D3",
+    '#2B56D3',
-  "#87E7AA",
+    '#87E7AA',
-  "#937FE6",
+    '#937FE6',
-  "#FF9B97",
+    '#FF9B97',
-  "#8f23f5",
+    '#8f23f5',
-  "#0576ea",
+    '#0576ea',
-  "#2cb8cf",
+    '#2cb8cf',
-  "#8A7EE0",
+    '#8A7EE0',
-  "#2cb8cf",
+    '#2cb8cf',
-  "#4e70f0",
+    '#4e70f0',
-  "#1fa3de",
+    '#1fa3de',
-  "#bbc951",
+    '#bbc951',
-  "#FFC14B",
+    '#FFC14B',
-  "#b785a6",
+    '#b785a6',
-
+  ]
-];  let Color1 = [
+  let Color1 = [
-  "#04E0F3",
+    '#04E0F3',
-  "#682EFC",
+    '#682EFC',
-  "#35A7FE",
+    '#35A7FE',
-  "#0DC09F",
+    '#0DC09F',
-  "#682EFC",
+    '#682EFC',
-  "#ED6663",
+    '#ED6663',
-  "#8f23f5",
+    '#8f23f5',
-  "#0576ea",
+    '#0576ea',
-  "#2cb8cf",
+    '#2cb8cf',
-  "#8A7EE0",
+    '#8A7EE0',
-  "#2cb8cf",
+    '#2cb8cf',
-  "#4e70f0",
+    '#4e70f0',
-  "#1fa3de",
+    '#1fa3de',
-  "#bbc951",
+    '#bbc951',
-  "#FFC14B",
+    '#FFC14B',
-  "#b785a6",
+    '#b785a6',
-
+  ]
-];
   let sourceLabel = [
-  "right",
+    'right',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left",
+    'left',
-  "left"
+    'left',
-];
+  ]
-let itemStyleColor = [];
+  let itemStyleColor = []
-let labelSource = [];
+  let labelSource = []
   for (let i = 0; i < datalist.length; i++) {
     datalist[i].label = {
       normal: {
-      position: sourceLabel[i]
+        position: sourceLabel[i],
+      },
     }
-  };
+    labelSource.push(sourceLabel[i])
-  labelSource.push(sourceLabel[i]);
   }
   for (let d = 0; d < datalist.length; d++) {
     datalist[d].itemStyle = {
       normal: {
         // color: Color[d]
         color: {
-        type: "linear",
+          type: 'linear',
           x: 0,
           y: 1,
           x2: 0,
@@ -242,57 +241,59 @@ for (let d = 0; d < datalist.length; d++) {
           ],
           global: false, // 缺省为 false
         },
+      },
     }
-  };
+    itemStyleColor.push(datalist[d])
-  itemStyleColor.push(datalist[d]);
   }
 
   const options = {
-  backgroundColor: "#031d7a",
+    backgroundColor: '#031d7a',
     tooltip: {
-    trigger: "item",
+      trigger: 'item',
-    triggerOn: "mousemove",
+      triggerOn: 'mousemove',
       formatter: function (params) {
-      if (params.name == "公共平台") {
+        if (params.name == '公共平台') {
-        return " 公共平台 "
+          return ' 公共平台 '
         } else {
-        let value = params.data.value;
+          let value = params.data.value
-        if (!value && value !== 0) return 0;
+          if (!value && value !== 0) return 0
-        let str = value.toString();
+          let str = value.toString()
-        let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
+          let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
-        if (params.data.source == "公共平台") {
+          if (params.data.source == '公共平台') {
-          return params.data.target + " : " + str.replace(reg, "$1,");
+            return params.data.target + ' : ' + str.replace(reg, '$1,')
           } else {
-          return params.data.source + " : " + str.replace(reg, "$1,");
+            return params.data.source + ' : ' + str.replace(reg, '$1,')
-        }
           }
         }
       },
-  series: [{
+    },
-    type: "sankey",
+    series: [
-    layout: "none",
+      {
-    top: "4%",
+        type: 'sankey',
-    bottom: "12%",
+        layout: 'none',
-    left: "20",
+        top: '4%',
-    right: "20",
+        bottom: '12%',
+        left: '20',
+        right: '20',
         nodeGap: 15,
         nodeWidth: 25,
-    focusNodeAdjacency: "allEdges",
+        focusNodeAdjacency: 'allEdges',
         data: itemStyleColor,
         links: linksData,
         label: {
           normal: {
-        color: "#fff",
+            color: '#fff',
             fontSize: 14,
             formatter: function (params) {
               if (params.data.name == '公共平台') {
-            let strs = params.data.name.split(''); //字符串数组
+                let strs = params.data.name.split('') //字符串数组
                 let str = ''
-            for (let i = 0, s; s = strs[i++];) { //遍历字符串数组
+                for (let i = 0, s; (s = strs[i++]); ) {
-              str += s;
+                  //遍历字符串数组
-              if (!(i % 1)) str += '\n'; //按需要求余
+                  str += s
+                  if (!(i % 1)) str += '\n' //按需要求余
                 }
-            return "{white|" + str + "}"
+                return '{white|' + str + '}'
               } else {
                 return params.data.name
               }
@@ -301,27 +302,28 @@ const options = {
               white: {
                 fontSize: 16,
                 lineHeight: 30,
-            padding: [0, 0, 0, -26]
+                padding: [0, 0, 0, -26],
-          }
+              },
-        }
+            },
-      }
+          },
         },
         lineStyle: {
           normal: {
             opacity: 0.4,
-        color: "source",
+            color: 'source',
-        curveness: 0.5
+            curveness: 0.5,
-      }
+          },
         },
         itemStyle: {
           normal: {
             borderWidth: 1,
-        borderColor: "transparent"
+            borderColor: 'transparent',
+          },
+        },
+      },
+    ],
   }
-    }
+  let chart: EChartsType
-  }]
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -332,6 +334,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/simple/bar.vue

@@ -2,31 +2,31 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     grid: {
@@ -34,23 +34,23 @@ const options = {
       left: '2%',
       right: '2%',
       bottom: '2%',
-    containLabel: true
+      containLabel: true,
     },
     xAxis: {
       type: 'category',
-    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
+      data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
     },
     yAxis: {
-    type: 'value'
+      type: 'value',
     },
     series: [
       {
         data: [150, 230, 150, 80, 70, 110, 130],
-      type: 'bar'
+        type: 'bar',
+      },
+    ],
   }
-  ]
+  let chart: EChartsType
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -61,6 +61,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/simple/candlestick.vue

@@ -2,31 +2,31 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     grid: {
@@ -34,10 +34,10 @@ const options = {
       left: '2%',
       right: '2%',
       bottom: '2%',
-    containLabel: true
+      containLabel: true,
     },
     xAxis: {
-    data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
+      data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
     },
     yAxis: {},
     series: [
@@ -47,12 +47,12 @@ const options = {
           [20, 34, 10, 38],
           [40, 35, 30, 50],
           [31, 38, 33, 44],
-        [38, 15, 5, 42]
+          [38, 15, 5, 42],
-      ]
+        ],
+      },
+    ],
   }
-  ]
+  let chart: EChartsType
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -63,6 +63,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/simple/funnel.vue

@@ -2,31 +2,31 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     grid: {
@@ -34,22 +34,22 @@ const options = {
       left: '2%',
       right: '2%',
       bottom: '0%',
-    containLabel: true
+      containLabel: true,
     },
     tooltip: {
       trigger: 'item',
-    formatter: '{a} <br/>{b} : {c}%'
+      formatter: '{a} <br/>{b} : {c}%',
     },
     toolbox: {
       feature: {
         dataView: { readOnly: false },
         restore: {},
-      saveAsImage: {}
+        saveAsImage: {},
-    }
+      },
     },
     legend: {
       show: false,
-    data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
+      data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
     },
     series: [
       {
@@ -67,35 +67,35 @@ const options = {
         gap: 2,
         label: {
           show: true,
-        position: 'inside'
+          position: 'inside',
         },
         labelLine: {
           length: 10,
           lineStyle: {
             width: 1,
-          type: 'solid'
+            type: 'solid',
-        }
+          },
         },
         itemStyle: {
           borderColor: '#fff',
-        borderWidth: 1
+          borderWidth: 1,
         },
         emphasis: {
           label: {
-          fontSize: 20
+            fontSize: 20,
-        }
+          },
         },
         data: [
           { value: 60, name: 'Visit' },
           { value: 40, name: 'Inquiry' },
           { value: 20, name: 'Order' },
           { value: 80, name: 'Click' },
-        { value: 100, name: 'Show' }
+          { value: 100, name: 'Show' },
-      ]
+        ],
+      },
+    ],
   }
-  ]
+  let chart: EChartsType
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -106,6 +106,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/simple/gauge.vue

@@ -2,54 +2,53 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
-
     tooltip: {
-    formatter: '{a} <br/>{b} : {c}%'
+      formatter: '{a} <br/>{b} : {c}%',
     },
     series: [
       {
         name: 'Pressure',
         type: 'gauge',
         detail: {
-        formatter: '{value}'
+          formatter: '{value}',
         },
         data: [
           {
             value: 50,
-          name: 'SCORE'
+            name: 'SCORE',
+          },
+        ],
+      },
+    ],
   }
-      ]
+  let chart: EChartsType
-    }
-  ]
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -60,6 +59,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/simple/graph.vue

@@ -2,59 +2,59 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
-const axisData = ['Mon', 'Tue', 'Wed', 'Very Loooong Thu', 'Fri', 'Sat', 'Sun'];
+  const axisData = ['Mon', 'Tue', 'Wed', 'Very Loooong Thu', 'Fri', 'Sat', 'Sun']
   const data = axisData.map(function (item, i) {
-  return Math.round(Math.random() * 1000 * (i + 1));
+    return Math.round(Math.random() * 1000 * (i + 1))
-});
+  })
   const links = data.map(function (item, i) {
     return {
       source: i,
-    target: i + 1
+      target: i + 1,
-  };
+    }
-});
+  })
-links.pop();
+  links.pop()
   const options = {
     grid: {
       top: 10,
       left: '2%',
       right: '2%',
       bottom: '2%',
-    containLabel: true
+      containLabel: true,
     },
     tooltip: {},
     xAxis: {
       type: 'category',
       boundaryGap: false,
-    data: axisData
+      data: axisData,
     },
     yAxis: {
-    type: 'value'
+      type: 'value',
     },
     series: [
       {
@@ -63,19 +63,19 @@ const options = {
         coordinateSystem: 'cartesian2d',
         symbolSize: 40,
         label: {
-        show: true
+          show: true,
         },
         edgeSymbol: ['circle', 'arrow'],
         edgeSymbolSize: [4, 10],
         data: data,
         links: links,
         lineStyle: {
-        color: '#2f4554'
+          color: '#2f4554',
+        },
+      },
+    ],
   }
-    }
+  let chart: EChartsType
-  ]
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -86,6 +86,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/simple/line.vue

@@ -10,32 +10,32 @@ const chartsRef = ref<HTMLElement|null>()
   const props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     xAxisData: {
       type: Array,
-    default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     },
     config: {
       type: Object,
-    default: () => {}
+      default: () => {},
     },
     seriesData: {
       type: Array,
-    default: () => [150, 230, 224, 218, 135, 147, 260]
+      default: () => [150, 230, 224, 218, 135, 147, 260],
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     grid: {
@@ -47,18 +47,18 @@ const options = {
     },
     xAxis: {
       type: 'category',
-    data: props.xAxisData
+      data: props.xAxisData,
     },
     yAxis: {
-    type: 'value'
+      type: 'value',
     },
     series: [
       {
         data: props.seriesData,
-      type: 'line'
+        type: 'line',
-    }
+      },
     ],
-  ...props.config
+    ...props.config,
   }
   let chart: EChartsType
   const initChart = () => {
@@ -74,6 +74,4 @@ onMounted(() => {
   })
 </script>
 
-<style>
+<style></style>
-
-</style>

src/views/charts/components/simple/pictorialBar.vue

@@ -2,45 +2,43 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
-let category = [];
+  let category = []
-let dottedBase = +new Date();
+  let dottedBase = +new Date()
-let lineData = [];
+  let lineData = []
-let barData = [];
+  let barData = []
 
   for (let i = 0; i < 20; i++) {
-  let date = new Date((dottedBase += 3600 * 24 * 1000));
+    let date = new Date((dottedBase += 3600 * 24 * 1000))
-  category.push(
+    category.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'))
-      [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
+    let b = Math.random() * 200
-  );
+    let d = Math.random() * 200
-  let b = Math.random() * 200;
+    barData.push(b)
-  let d = Math.random() * 200;
+    lineData.push(d + b)
-  barData.push(b);
-  lineData.push(d + b);
   }
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     grid: {
@@ -48,36 +46,36 @@ const options = {
       left: '2%',
       right: '2%',
       bottom: '2%',
-    containLabel: true
+      containLabel: true,
     },
     backgroundColor: '#0f375f',
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-      type: 'shadow'
+        type: 'shadow',
-    }
+      },
     },
     legend: {
       data: ['line', 'bar'],
       textStyle: {
-      color: '#ccc'
+        color: '#ccc',
-    }
+      },
     },
     xAxis: {
       data: category,
       axisLine: {
         lineStyle: {
-        color: '#ccc'
+          color: '#ccc',
-      }
+        },
-    }
+      },
     },
     yAxis: {
       splitLine: { show: false },
       axisLine: {
         lineStyle: {
-        color: '#ccc'
+          color: '#ccc',
-      }
+        },
-    }
+      },
     },
     series: [
       {
@@ -87,7 +85,7 @@ const options = {
         showAllSymbol: true,
         symbol: 'emptyCircle',
         symbolSize: 15,
-      data: lineData
+        data: lineData,
       },
       {
         name: 'bar',
@@ -97,10 +95,10 @@ const options = {
           borderRadius: 5,
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: '#14c8d4' },
-          { offset: 1, color: '#43eec6' }
+            { offset: 1, color: '#43eec6' },
-        ])
+          ]),
         },
-      data: barData
+        data: barData,
       },
       {
         name: 'line',
@@ -111,28 +109,28 @@ const options = {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: 'rgba(20,200,212,0.5)' },
             { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
-          { offset: 1, color: 'rgba(20,200,212,0)' }
+            { offset: 1, color: 'rgba(20,200,212,0)' },
-        ])
+          ]),
         },
         z: -12,
-      data: lineData
+        data: lineData,
       },
       {
         name: 'dotted',
         type: 'pictorialBar',
         symbol: 'rect',
         itemStyle: {
-        color: '#0f375f'
+          color: '#0f375f',
         },
         symbolRepeat: true,
         symbolSize: [12, 4],
         symbolMargin: 1,
         z: -10,
-      data: lineData
+        data: lineData,
+      },
+    ],
   }
-  ]
+  let chart: EChartsType
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -143,6 +141,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/simple/pie.vue

@@ -2,31 +2,31 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     grid: {
@@ -34,14 +34,14 @@ const options = {
       left: '2%',
       right: '2%',
       bottom: '2%',
-    containLabel: true
+      containLabel: true,
     },
     tooltip: {
-    trigger: 'item'
+      trigger: 'item',
     },
     legend: {
       top: '0%',
-    left: 'center'
+      left: 'center',
     },
     series: [
       {
@@ -51,29 +51,29 @@ const options = {
         avoidLabelOverlap: false,
         label: {
           show: false,
-        position: 'center'
+          position: 'center',
         },
         emphasis: {
           label: {
             show: true,
             fontSize: '40',
-          fontWeight: 'bold'
+            fontWeight: 'bold',
-        }
+          },
         },
         labelLine: {
-        show: false
+          show: false,
         },
         data: [
           { value: 1048, name: 'Search Engine' },
           { value: 735, name: 'Direct' },
           { value: 580, name: 'Email' },
           { value: 484, name: 'Union Ads' },
-        { value: 300, name: 'Video Ads' }
+          { value: 300, name: 'Video Ads' },
-      ]
+        ],
+      },
+    ],
   }
-  ]
+  let chart: EChartsType
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -84,6 +84,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/simple/radar.vue

@@ -2,31 +2,31 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const dataBJ = [
     [55, 9, 56, 0.46, 18, 6, 1],
@@ -59,8 +59,8 @@ const dataBJ = [
     [160, 120, 186, 2.77, 91, 50, 28],
     [134, 96, 165, 2.76, 83, 41, 29],
     [52, 24, 60, 1.03, 50, 21, 30],
-  [46, 5, 49, 0.28, 10, 6, 31]
+    [46, 5, 49, 0.28, 10, 6, 31],
-];
+  ]
 
   const dataGZ = [
     [26, 37, 27, 1.163, 27, 13, 1],
@@ -93,8 +93,8 @@ const dataGZ = [
     [56, 48, 68, 1.336, 37, 9, 28],
     [82, 92, 174, 3.29, 0, 13, 29],
     [106, 116, 188, 3.628, 101, 16, 30],
-  [118, 50, 0, 1.383, 76, 11, 31]
+    [118, 50, 0, 1.383, 76, 11, 31],
-];
+  ]
 
   const dataSH = [
     [91, 45, 125, 0.82, 34, 23, 1],
@@ -127,13 +127,13 @@ const dataSH = [
     [93, 68, 96, 1.05, 79, 29, 28],
     [188, 143, 197, 1.66, 99, 51, 29],
     [174, 131, 174, 1.55, 108, 50, 30],
-  [187, 143, 201, 1.39, 89, 53, 31]
+    [187, 143, 201, 1.39, 89, 53, 31],
-];
+  ]
 
   const lineStyle = {
     width: 1,
-  opacity: 0.5
+    opacity: 0.5,
-};
+  }
 
   const options = {
     backgroundColor: '#161627',
@@ -141,8 +141,8 @@ const options = {
       text: 'AQI - Radar',
       left: 'center',
       textStyle: {
-      color: '#eee'
+        color: '#eee',
-    }
+      },
     },
     legend: {
       show: false,
@@ -151,9 +151,9 @@ const options = {
       itemGap: 20,
       textStyle: {
         color: '#fff',
-      fontSize: 14
+        fontSize: 14,
       },
-    selectedMode: 'single'
+      selectedMode: 'single',
     },
     radar: {
       indicator: [
@@ -162,12 +162,12 @@ const options = {
         { name: 'PM10', max: 300, min: 1 },
         { name: 'CO', max: 5, min: 1 },
         { name: 'NO2', max: 200, min: 1 },
-      { name: 'SO2', max: 100,min:1 }
+        { name: 'SO2', max: 100, min: 1 },
       ],
       shape: 'circle',
       splitNumber: 5,
       axisName: {
-      color: 'rgb(238, 197, 102)'
+        color: 'rgb(238, 197, 102)',
       },
       splitLine: {
         lineStyle: {
@@ -177,18 +177,18 @@ const options = {
             'rgba(238, 197, 102, 0.4)',
             'rgba(238, 197, 102, 0.6)',
             'rgba(238, 197, 102, 0.8)',
-          'rgba(238, 197, 102, 1)'
+            'rgba(238, 197, 102, 1)',
-        ].reverse()
+          ].reverse(),
-      }
+        },
       },
       splitArea: {
-      show: false
+        show: false,
       },
       axisLine: {
         lineStyle: {
-        color: 'rgba(238, 197, 102, 0.5)'
+          color: 'rgba(238, 197, 102, 0.5)',
-      }
+        },
-    }
+      },
     },
     series: [
       {
@@ -198,11 +198,11 @@ const options = {
         data: dataBJ,
         symbol: 'none',
         itemStyle: {
-        color: '#F9713C'
+          color: '#F9713C',
         },
         areaStyle: {
-        opacity: 0.1
+          opacity: 0.1,
-      }
+        },
       },
       {
         name: 'Shanghai',
@@ -211,11 +211,11 @@ const options = {
         data: dataSH,
         symbol: 'none',
         itemStyle: {
-        color: '#B3E4A1'
+          color: '#B3E4A1',
         },
         areaStyle: {
-        opacity: 0.05
+          opacity: 0.05,
-      }
+        },
       },
       {
         name: 'Guangzhou',
@@ -224,15 +224,15 @@ const options = {
         data: dataGZ,
         symbol: 'none',
         itemStyle: {
-        color: 'rgb(238, 197, 102)'
+          color: 'rgb(238, 197, 102)',
         },
         areaStyle: {
-        opacity: 0.05
+          opacity: 0.05,
+        },
+      },
+    ],
   }
-    }
+  let chart: EChartsType
-  ]
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -243,6 +243,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/components/simple/scatter.vue

@@ -2,31 +2,31 @@
   <div :id="id" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import * as echarts from "echarts";
+  import * as echarts from 'echarts'
-import {EChartsType} from "echarts/core";
+  import { EChartsType } from 'echarts/core'
-import {onMounted} from "vue";
+  import { onMounted } from 'vue'
 
   let props = defineProps({
     className: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     config: {
       type: Object,
-    default: ()=>{}
+      default: () => {},
     },
     id: {
       type: String,
-    default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-    default: '200px'
+      default: '200px',
     },
     height: {
       type: String,
-    default: '200px'
+      default: '200px',
-  }
+    },
   })
   const options = {
     grid: {
@@ -34,7 +34,7 @@ const options = {
       left: '2%',
       right: '2%',
       bottom: '2%',
-    containLabel: true
+      containLabel: true,
     },
     xAxis: {},
     yAxis: {},
@@ -63,13 +63,13 @@ const options = {
           [12.0, 6.26],
           [12.0, 8.84],
           [7.08, 5.82],
-        [5.02, 5.68]
+          [5.02, 5.68],
+        ],
+        type: 'scatter',
+      },
     ],
-      type: 'scatter'
   }
-  ]
+  let chart: EChartsType
-};
-let chart:EChartsType;
   const initChart = () => {
     let chart = echarts.init(document.getElementById(props.id))
     chart.setOption(options)
@@ -80,6 +80,5 @@ onMounted(()=>{
     window.addEventListener('resize', function () {
       chart && chart.resize()
     })
-
   })
 </script>

src/views/charts/line.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script lang="ts" setup>
-
   import Chart from '@/components/Charts/LineMarker.vue'
 
   // export default {
@@ -21,4 +20,3 @@ import Chart from '@/components/Charts/LineMarker.vue'
     height: calc(100vh - 130px);
   }
 </style>
-

src/views/charts/map.vue

@@ -4,10 +4,8 @@
   </div>
 </template>
 
-
 <script setup lang="ts">
   import MapCharts from './components/map/index.vue'
-
 </script>
 
 <style>

src/views/charts/migration.vue

@@ -7,7 +7,6 @@
 
 <script setup lang="ts">
   import MigrationCharts from './components/migration/index.vue'
-
 </script>
 
 <style lang="scss" scoped>

src/views/charts/simple.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-container-layout style="width: 100%;">
+  <u-container-layout style="width: 100%">
     <el-row class="row-bg" :gutter="10">
       <el-col :xs="24" :sm="12" :lg="8">
         <el-card class="box-card">
@@ -18,8 +18,8 @@
               <span>柱状图</span>
             </div>
           </template>
-        <bar-charts height="200px" width="100%" id="bar"/>
+          <bar-charts height="200px" width="100%" id="bar" /> </el-card
-      </el-card></el-col>
+      ></el-col>
       <el-col :xs="24" :sm="12" :lg="8">
         <el-card class="box-card">
           <template #header>
@@ -102,9 +102,6 @@
         </el-card>
       </el-col>
     </el-row>
-
-
-
   </u-container-layout>
 </template>
 <script setup lang="ts">
@@ -118,9 +115,7 @@
   import RadarCharts from './components/simple/radar.vue'
   import GraphCharts from './components/simple/graph.vue'
   import PictorialBarCharts from './components/simple/pictorialBar.vue'
-  import PictorialBar from "@/views/charts/components/simple/pictorialBar.vue";
+  import PictorialBar from '@/views/charts/components/simple/pictorialBar.vue'
-
-
 </script>
 
 <style>

src/views/chat/components/u-chartBox/chat.js

@@ -3,7 +3,7 @@ export const chatData = [
     is_self: 0,
     created_at: '2022-03-11',
     content: 'hello 你好呀!',
-        id:1
+    id: 1,
   },
   {
     is_self: 1,
@@ -11,5 +11,5 @@ export const chatData = [
     content: 'hello 你好呀!',
     id: 2,
     type: 1, // 文字
-    }
+  },
 ]

src/views/chat/components/u-chartBox/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="g-container-chat">
-    <div class="g-layout-content-center" style="width:100%;" ref="chatContentBoxs">
+    <div class="g-layout-content-center" style="width: 100%" ref="chatContentBoxs">
-      <div v-for="item,index in chatDatas" :key="item.id" style="padding-top: 15px;">
+      <div v-for="(item, index) in chatDatas" :key="item.id" style="padding-top: 15px">
         <div class="from_user_info" v-if="item.is_self === 0">
           <div class="contact-nickname">{{ item.created_at }} 林峰</div>
           <div class="receive-message-wrap">
@@ -21,7 +21,12 @@
                 <div class="text-content" v-html="item.content"></div>
               </div>
               <div class="public-show-pic" v-else-if="item.type === 2">
-                <el-image :src="item.content" :preview-src-list="[item.content]" style="max-width:200px;" :data-resid="Date.now()"/>
+                <el-image
+                  :src="item.content"
+                  :preview-src-list="[item.content]"
+                  style="max-width: 200px"
+                  :data-resid="Date.now()"
+                />
               </div>
             </div>
             <div class="avatar-show">
@@ -36,14 +41,12 @@
       @blur="contentBlur"
       ref="contenteditableInputs"
       class="g-chat-container-footer-input"
-        contenteditable=true></div>
+      contenteditable="true"
+    ></div>
     <div class="g-chat-container-footer-btn">
-      <div class="" style="margin-right:10px">
+      <div class="" style="margin-right: 10px"> Ctrl+V粘贴, Ctrl+Enter换行 </div>
-        Ctrl+V粘贴,  Ctrl+Enter换行
-      </div>
       <el-button @click="sendInfoAction">发送</el-button>
     </div>
-
   </div>
 </template>
 
@@ -52,8 +55,8 @@
   import UToolbar from '../u-toolbar/index.vue'
   import defalutAvator from '@/assets/image/avator.png'
   import { chatData } from './chat.js'
-  import {ElMessage} from "element-plus";
+  import { ElMessage } from 'element-plus'
-  import dayjs from "dayjs";
+  import dayjs from 'dayjs'
 
   const range = ref<HTMLElement | null>(null)
   const selection = ref<any>(null)
@@ -72,12 +75,14 @@
   }
 
   const keepLastIndex = (obj) => {
-    if (window.getSelection) { // ie11 10 9 ff safari
+    if (window.getSelection) {
+      // ie11 10 9 ff safari
       obj.focus() // 解决ff不获取焦点无法定位问题
       let range = window.getSelection() // 创建range
       range.selectAllChildren(obj) // range 选择obj下所有子内容
       range.collapseToEnd() // 光标移至最后
-    } else if (document.selection) { // ie10 9 8 7 6 5
+    } else if (document.selection) {
+      // ie10 9 8 7 6 5
       let range = document.selection.createRange() // 创建选择对象
       // var range = document.body.createTextRange();
       range.moveToElementText(obj) // range定位到obj
@@ -140,21 +145,21 @@
     }
   }
 
-  const sendMessageData = (content:string,type:number=1)=>{
+  const sendMessageData = (content: string, type = 1) => {
-    const day = dayjs().format('YYYY-MM-DD');
+    const day = dayjs().format('YYYY-MM-DD')
     return {
       is_self: 1,
       created_at: day,
       content,
       type,
-      id:Date.now()+Math.random()
+      id: Date.now() + Math.random(),
     }
   }
 
   const getPreviewList = () => {
     preview_src_data.value = []
     nextTick(() => {
-      chatDatas.value.forEach(item=>{
+      chatDatas.value.forEach((item) => {
         if (item.type === 2) {
           preview_src_data.value.push(item.content)
         }
@@ -189,8 +194,8 @@
       setCursor()
       return ElMessage.error('请填写发送内容')
     }
-    let reg = /<img.*?src="(.*?)".*?title="(.*?)".*?>/ig
+    let reg = /<img.*?src="(.*?)".*?title="(.*?)".*?>/gi
-    let reg1 = /<img.*?src="(.*?)".*?insert="(.*?)">/ig
+    let reg1 = /<img.*?src="(.*?)".*?insert="(.*?)">/gi
     let content = value.replace(reg, '[$2]')
 
     let data = []
@@ -226,7 +231,6 @@
       focusContentEditable()
     })
   })
-
 </script>
 
 <style lang="scss" scoped>
@@ -242,7 +246,9 @@
     border-bottom: 1px solid #ededed;
     box-sizing: border-box;
   }
-[contenteditable]:focus{outline: none;}
+  [contenteditable]:focus {
+    outline: none;
+  }
   .g-chat-container-footer-input {
     word-break: break-all;
     padding: 8px;
@@ -255,7 +261,6 @@
       padding-right: 5px;
       vertical-align: text-bottom;
     }
-
   }
   .g-chat-container-footer-btn {
     height: 50px;
@@ -326,10 +331,10 @@
       width: 372px;
       padding: 10px;
       z-index: 9;
-    border: 1px solid #D9D9D9;
+      border: 1px solid #d9d9d9;
       background-color: #fff;
       overflow: hidden;
-    box-shadow: 0 0 20px rgba(0,0,0,.2);
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
       .title-emoje {
         cursor: pointer;
         float: left;
@@ -351,7 +356,6 @@
     }
   }
 
-
   .from_user_info {
     width: 100%;
     // overflow: hidden;
@@ -434,7 +438,7 @@
     .receive-message-wrap {
       display: flex;
       justify-content: flex-end;
-    align-items: center
+      align-items: center;
     }
     .receive-message-info {
       background: #9eea6a;

src/views/chat/components/u-toolbar/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="g-layout-content-chat-util">
-
     <div class="item-left">
       <div class="emoje" title="选择表情" @click.stop="selectEmojiAction">
-        <img src="static/face/emoji-after.png" alt="" style="width:20px">
+        <img src="static/face/emoji-after.png" alt="" style="width: 20px" />
       </div>
       <div class="upload-picture" title="上传图片">
         <el-upload action multiple :show-file-list="false" :before-upload="beforeUploadAction">
@@ -11,11 +10,12 @@
         </el-upload>
       </div>
       <div class="emoje-border-wrap" v-show="isShowEmoji">
-
+        <div
-        <div class="title-emoje"
+          class="title-emoje"
           v-for="(item, index) in emojis"
           @click.stop="selectSigleEmojeAction($event, item)"
-             :key="index">
+          :key="index"
+        >
           <img :src="`static/face/${item}.png`" :title="item" />
         </div>
       </div>
@@ -25,10 +25,8 @@
 
 <script setup lang="ts">
   import { ref, defineEmits, onMounted } from 'vue'
-  import {
+  import { FolderOpened } from '@element-plus/icons-vue'
-    FolderOpened
+  import { ElMessage } from 'element-plus'
-  } from '@element-plus/icons-vue'
-  import {ElMessage} from "element-plus";
 
   import emoji from '@/utils/emojis'
   const emojis = ref<string[]>(emoji.imgs)
@@ -53,7 +51,7 @@
   const beforeUploadAction = (file, fileList) => {
     return new Promise((resolve, reject) => {
       var reader = new FileReader()
-      let reg = (/\.jpg$|\.jpeg$|\.gif$|\.png$/i)
+      let reg = /\.jpg$|\.jpeg$|\.gif$|\.png$/i
       reader.readAsDataURL(file)
       let name = file.name
       if (reg.test(name)) {
@@ -73,7 +71,6 @@
       isShowEmoji.value = false
     }
   })
-
 </script>
 
 <style lang="scss" scoped>
@@ -134,10 +131,10 @@
       width: 372px;
       padding: 10px;
       z-index: 9;
-    border: 1px solid #D9D9D9;
+      border: 1px solid #d9d9d9;
       background-color: #fff;
       overflow: hidden;
-    box-shadow: 0 0 20px rgba(0,0,0,.2);
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
       .title-emoje {
         cursor: pointer;
         float: left;

src/views/chat/index.vue

@@ -1,7 +1,9 @@
 <template>
   <u-container-layout>
     <div>
-      <div style="margin-bottom: 15px">聊天内容框，功能有发送emoji表情，上传图片，发送图片，内容滚动，发送文字</div>
+      <div style="margin-bottom: 15px"
+        >聊天内容框，功能有发送emoji表情，上传图片，发送图片，内容滚动，发送文字</div
+      >
       <u-chat-box />
     </div>
   </u-container-layout>
@@ -11,6 +13,4 @@
   import UChatBox from './components/u-chartBox/index.vue'
 </script>
 
-<style>
+<style></style>
-
-</style>

src/views/clipboard/index.vue

@@ -2,14 +2,14 @@
   <u-container-layout>
     <el-card style="margin-bottom: 20px">
       <div style="margin-bottom: 10px">输入内容，并点击复制按钮</div>
-            <el-input v-model="inputData" placeholder="请输入" style="width:400px;max-width:100%;" />
+      <el-input v-model="inputData" placeholder="请输入" style="width: 400px; max-width: 100%" />
       <el-button type="primary" @click="handleCopy(inputData, $event)">
         <el-icon style="margin-right: 6px"><document-copy /></el-icon> 复制
       </el-button>
     </el-card>
     <el-card>
       <div style="margin-bottom: 10px">复制成功后可在这粘贴测试</div>
-            <el-input v-model="testValue" placeholder="请输入" style="width:400px;max-width:100%;" />
+      <el-input v-model="testValue" placeholder="请输入" style="width: 400px; max-width: 100%" />
     </el-card>
   </u-container-layout>
 </template>

src/views/components-demo/button.vue

@@ -4,8 +4,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-        <span>基础用法
+            <span>基础用法 </span>
-      </span>
           </div>
         </template>
         <div>
@@ -40,8 +39,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-        <span>禁用状态
+            <span>禁用状态 </span>
-      </span>
           </div>
         </template>
         <div>
@@ -63,8 +61,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-        <span>文字按钮
+            <span>文字按钮 </span>
-      </span>
           </div>
         </template>
         <div>
@@ -76,8 +73,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-        <span>图标按钮
+            <span>图标按钮 </span>
-      </span>
           </div>
         </template>
         <div>
@@ -94,8 +90,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-        <span>按钮组
+            <span>按钮组 </span>
-      </span>
           </div>
         </template>
         <div>
@@ -112,8 +107,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-        <span>加载中
+            <span>加载中 </span>
-      </span>
           </div>
         </template>
         <div>
@@ -146,8 +140,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-        <span>自定义颜色
+            <span>自定义颜色 </span>
-      </span>
           </div>
         </template>
         <div>
@@ -155,25 +148,14 @@
           <el-button color="#626aef" plain class="item">Plain</el-button>
 
           <el-button color="#626aef" disabled class="item">Disabled</el-button>
-          <el-button color="#626aef" disabled plain class="item"
+          <el-button color="#626aef" disabled plain class="item">Disabled Plain</el-button>
-          >Disabled Plain</el-button
-          >
         </div>
       </el-card>
     </div>
   </u-container-layout>
-
 </template>
 <script lang="ts" setup>
-import {
+  import { Check, Delete, Edit, Message, Search, Share, Star } from '@element-plus/icons-vue'
-  Check,
-  Delete,
-  Edit,
-  Message,
-  Search,
-  Share,
-  Star
-} from '@element-plus/icons-vue'
 </script>
 <style>
   .card-header {

src/views/components-demo/checkbox.vue

@@ -4,8 +4,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-                    <span>基础用法
+            <span>基础用法 </span>
-                  </span>
           </div>
         </template>
         <div>
@@ -17,8 +16,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-                <span>禁用状态
+            <span>禁用状态 </span>
-              </span>
           </div>
         </template>
         <div>
@@ -30,8 +28,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-                    <span>多选框组
+            <span>多选框组 </span>
-                  </span>
           </div>
         </template>
         <div>
@@ -48,8 +45,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-                    <span>中间状态
+            <span>中间状态 </span>
-                  </span>
           </div>
         </template>
         <div>
@@ -59,13 +55,8 @@
             @change="handleCheckAllChange"
             >全选</el-checkbox
           >
-             <el-checkbox-group
+          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
-                 v-model="checkedCities"
+            <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
-                 @change="handleCheckedCitiesChange"
-             >
-               <el-checkbox v-for="city in cities" :key="city" :label="city">{{
-                   city
-                 }}</el-checkbox>
           </el-checkbox-group>
         </div>
       </el-card>
@@ -73,8 +64,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-                    <span>按钮样式
+            <span>按钮样式 </span>
-                  </span>
           </div>
         </template>
         <div>
@@ -89,8 +79,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-                    <span>带有边框
+            <span>带有边框 </span>
-                  </span>
           </div>
         </template>
         <div>
@@ -100,7 +89,6 @@
       </el-card>
     </div>
   </u-container-layout>
-
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue'

src/views/components-demo/datetimepicker.vue

@@ -4,24 +4,18 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-                    <span>日期和时间点
+            <span>日期和时间点 </span>
-                  </span>
           </div>
         </template>
         <div>
-             <el-date-picker
+          <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间点" />
-                 v-model="value1"
-                 type="datetime"
-                 placeholder="选择日期时间点"
-             />
         </div>
       </el-card>
 
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-                <span>日期时间格式
+            <span>日期时间格式 </span>
-              </span>
           </div>
         </template>
         <div>
@@ -37,8 +31,7 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-                    <span>日期和时间范围
+            <span>日期和时间范围 </span>
-                  </span>
           </div>
         </template>
         <div>
@@ -53,12 +46,10 @@
         </div>
       </el-card>
 
-
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-                    <span>默认的起始与结束时刻
+            <span>默认的起始与结束时刻 </span>
-                  </span>
           </div>
         </template>
         <div>
@@ -71,13 +62,8 @@
           />
         </div>
       </el-card>
-
-
-
-
     </div>
   </u-container-layout>
-
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue'
@@ -85,10 +71,7 @@
   const value4 = ref('')
   const value5 = ref('')
   const defaultTime1 = [new Date(2000, 1, 1, 12, 0, 0)]
-    const value3 = ref([
+  const value3 = ref([new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)])
-        new Date(2000, 10, 10, 10, 10),
-        new Date(2000, 10, 11, 10, 10),
-    ])
   const shortcuts = [
     {
       text: 'Today',

src/views/components-demo/flow-chart.vue

@@ -5,9 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import ZbPipeline from "@/components/pipeline/index.vue";
+  import ZbPipeline from '@/components/pipeline/index.vue'
 </script>
 
-<style>
+<style></style>
-
-</style>