update

package-lock.json

@@ -4097,7 +4097,7 @@
         },
         "ansi-styles": {
           "version": "4.3.0",
-          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "optional": true,
@@ -4121,7 +4121,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
           "optional": true,
@@ -4131,14 +4131,14 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true,
           "optional": true
         },
         "cosmiconfig": {
           "version": "6.0.0",
-          "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
           "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
           "dev": true,
           "optional": true,
@@ -4152,7 +4152,7 @@
         },
         "deepmerge": {
           "version": "4.2.2",
-          "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.2.2.tgz",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
           "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
           "dev": true,
           "optional": true
@@ -4180,7 +4180,7 @@
         },
         "fork-ts-checker-webpack-plugin-v5": {
           "version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
-          "resolved": "https://registry.npmmirror.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
+          "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
           "integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
           "dev": true,
           "optional": true,
@@ -4200,7 +4200,7 @@
           "dependencies": {
             "chalk": {
               "version": "4.1.2",
-              "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
               "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
               "dev": true,
               "optional": true,
@@ -4211,7 +4211,7 @@
             },
             "lru-cache": {
               "version": "6.0.0",
-              "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
+              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
               "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
               "dev": true,
               "optional": true,
@@ -4221,7 +4221,7 @@
             },
             "semver": {
               "version": "7.3.7",
-              "resolved": "https://registry.npmmirror.com/semver/-/semver-7.3.7.tgz",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
               "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
               "dev": true,
               "optional": true,
@@ -4233,7 +4233,7 @@
         },
         "fs-extra": {
           "version": "9.1.0",
-          "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-9.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
           "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
           "dev": true,
           "optional": true,
@@ -4246,14 +4246,14 @@
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true,
           "optional": true
         },
         "import-fresh": {
           "version": "3.3.0",
-          "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
           "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
           "dev": true,
           "optional": true,
@@ -4264,7 +4264,7 @@
         },
         "jsonfile": {
           "version": "6.1.0",
-          "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
           "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
           "dev": true,
           "optional": true,
@@ -4335,7 +4335,7 @@
         },
         "path-type": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/path-type/-/path-type-4.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
           "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
           "dev": true,
           "optional": true
@@ -4363,7 +4363,7 @@
         },
         "resolve-from": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
           "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
           "dev": true,
           "optional": true
@@ -4385,7 +4385,7 @@
         },
         "supports-color": {
           "version": "7.2.0",
-          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "optional": true,
@@ -4395,14 +4395,14 @@
         },
         "universalify": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
           "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
           "dev": true,
           "optional": true
         },
         "yallist": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
           "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
           "dev": true,
           "optional": true
@@ -9280,6 +9280,11 @@
       "resolved": "https://registry.npmjs.org/echarts-liquidfill/-/echarts-liquidfill-2.0.6.tgz",
       "integrity": "sha512-p+AH0O9/BtwXMQQyhjJbMZo+GwRAgWG/DCyK5r27PQzpS0UWrgXu57MyEFc0A8Ub3sRuqEu08BuxwHICBkSWSQ=="
     },
+    "echarts-wordcloud": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/echarts-wordcloud/-/echarts-wordcloud-2.0.0.tgz",
+      "integrity": "sha512-K7l6pTklqdW7ZWzT/1CS0KhBSINr/cd7c5N1fVMzZMwLQHEwT7x+nivK7g5hkVh7WNcAv4Dn6/ZS5zMKRozC1g=="
+    },
     "editorconfig": {
       "version": "0.15.3",
       "resolved": "https://registry.npm.taobao.org/editorconfig/download/editorconfig-0.15.3.tgz",

package.json

@@ -20,6 +20,7 @@
     "echarts": "^5.2.0",
     "echarts-gl": "^2.0.8",
     "echarts-liquidfill": "^2.0.6",
+    "echarts-wordcloud": "^2.0.0",
     "element-ui": "^2.15.7",
     "hls.js": "^1.1.5",
     "html2canvas": "^1.0.0-rc.7",

src/views/groupPage/components/BarChart/ComTriangleBarChart.vue

@@ -90,7 +90,6 @@ export default {
       let opt = {
         index: 0
       }
-      let color = ['#A71A2B']
       data = data.sort((a, b) => {
         return b.value - a.value
       })
@@ -207,9 +206,7 @@ export default {
               color: '#fff',
               show: true,
               position: ['-40px', '-2px'],
-              textStyle: {
-                fontSize: fontSize(14)
-              },
+              fontSize: fontSize(14),
               formatter: function (a, b) {
                 return a.name
               }

src/views/groupPage/components/GaugeChart/percentGaugeChart.vue

@@ -256,9 +256,9 @@ export default {
       this.creatChart(option, this.$refs.chart)
     },
     creatChart(option, ref) {
-      let chart = echarts.init(ref) //this.$refs.chart
-      chart.resize()
-      chart.setOption(option, {
+      this.myChart = echarts.init(ref) //this.$refs.chart
+      this.myChart.resize()
+      this.myChart.setOption(option, {
         notMerge: true
       })
     }

src/views/groupPage/components/OthersChart/ComDynamicRingChart.vue

@@ -41,7 +41,8 @@ export default {
     },
     initialChart() {
       let angle = 0 //角度，用来做简单的动画效果的
-      let chart = echarts.init(this.$refs.chart) //this.$refs.chart
+      let that = this
+      that.myChart = echarts.init(this.$refs.chart) //this.$refs.chart
       let value = 80
       this.timerId = null
       let option = {
@@ -276,41 +277,37 @@ export default {
             z: 0,
             zlevel: 0,
             label: {
-              normal: {
-                position: 'center'
-              }
+              position: 'center'
             },
             data: [
               {
                 value: value,
                 name: '',
                 itemStyle: {
-                  normal: {
-                    color: {
-                      // 完成的圆环的颜色
-                      colorStops: [
-                        {
-                          offset: 0,
-                          color: '#A098FC' // 0% 处的颜色
-                        },
-                        {
-                          offset: 0.3,
-                          color: '#4386FA' // 0% 处的颜色
-                        },
-                        {
-                          offset: 0.6,
-                          color: '#4FADFD' // 0% 处的颜色
-                        },
-                        {
-                          offset: 0.8,
-                          color: '#0CD3DB' // 100% 处的颜色
-                        },
-                        {
-                          offset: 1,
-                          color: '#646CF9' // 100% 处的颜色
-                        }
-                      ]
-                    }
+                  color: {
+                    // 完成的圆环的颜色
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: '#A098FC' // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.3,
+                        color: '#4386FA' // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.6,
+                        color: '#4FADFD' // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.8,
+                        color: '#0CD3DB' // 100% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: '#646CF9' // 100% 处的颜色
+                      }
+                    ]
                   }
                 }
               },
@@ -318,14 +315,10 @@ export default {
                 value: 100 - value,
                 name: '',
                 label: {
-                  normal: {
-                    show: false
-                  }
+                  show: false
                 },
                 itemStyle: {
-                  normal: {
-                    color: '#173164'
-                  }
+                  color: '#173164'
                 }
               }
             ]
@@ -340,29 +333,25 @@ export default {
             z: 0,
             zlevel: 0,
             label: {
-              normal: {
-                position: 'center'
-              }
+              position: 'center'
             },
             data: [
               {
                 value: value,
                 name: '',
                 itemStyle: {
-                  normal: {
-                    color: {
-                      // 完成的圆环的颜色
-                      colorStops: [
-                        {
-                          offset: 0,
-                          color: '#00EDF3' // 0% 处的颜色
-                        },
-                        {
-                          offset: 1,
-                          color: '#646CF9' // 100% 处的颜色
-                        }
-                      ]
-                    }
+                  color: {
+                    // 完成的圆环的颜色
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: '#00EDF3' // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: '#646CF9' // 100% 处的颜色
+                      }
+                    ]
                   }
                 }
               },
@@ -370,14 +359,10 @@ export default {
                 value: 100 - value,
                 name: '',
                 label: {
-                  normal: {
-                    show: false
-                  }
+                  show: false
                 },
                 itemStyle: {
-                  normal: {
-                    color: '#173164'
-                  }
+                  color: '#173164'
                 }
               }
             ]
@@ -397,7 +382,7 @@ export default {
 
       function draw() {
         angle = angle + 3
-        chart.setOption(option, true)
+        that.myChart.setOption(option, true)
       }
       if (this.timerId) {
         clearInterval(this.timerId)
@@ -412,6 +397,8 @@ export default {
     if (this.timerId) {
       clearInterval(this.timerId)
     }
+    window.removeEventListener('resize', this.onResize)
+    this.destroyChart()
   }
 }
 </script>

src/views/groupPage/components/OthersChart/ComRadarChart.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="chart" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { fontSize } from '@/views/groupPage/util'
+export default {
+  name: 'ComRadarChart', //设计施工综合图表
+  props: {
+    chartData: {
+      default: () => {
+        return [20, 12, 17, 18, 10]
+      }
+    },
+    title: {}
+  },
+  data() {
+    return { myChart: null, symbol: 0 }
+  },
+  watch: {
+    chartData(val) {
+      this.$nextTick(() => {
+        this.initialChart()
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initialChart()
+    })
+    //图表大小自适应
+    window.addEventListener('resize', this.onResize)
+  },
+  methods: {
+    destroyChart() {
+      if (this.myChart != null) {
+        this.myChart.dispose()
+        this.myChart = null
+      }
+    },
+    onResize() {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    },
+    initialChart() {
+      var that = this
+      var indicator = [
+        {
+          text: '合同',
+          max: 30
+        },
+        {
+          text: '进度',
+          max: 30
+        },
+        {
+          text: '安全',
+          max: 30
+        },
+        {
+          text: '监测',
+          max: 30
+        },
+        {
+          text: '质量',
+          max: 30
+        }
+      ]
+      var dataArr = [
+        {
+          name: '数量',
+          symbolSize: 6,
+          symbol: 'circle',
+          itemStyle: {
+            color: '#FFFFFF',
+            borderWidth: 1,
+            borderColor: '#1DDCFF',
+            shadowColor: '#1DDCFF',
+            shadowBlur: 30
+          },
+          lineStyle: {
+            color: '#1DDCFF',
+            shadowColor: '#1DDCFF',
+            shadowBlur: 30
+          },
+          areaStyle: {
+            // 单项区域填充样式
+            color: {
+              type: 'linear',
+              x: 0, //右
+              y: 0, //下
+              x2: 1, //左
+              y2: 1, //上
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#1DDCFF'
+                },
+                {
+                  offset: 0.5,
+                  color: 'rgba(0,0,0,0)'
+                },
+                {
+                  offset: 1,
+                  color: '#1DDCFF'
+                }
+              ],
+              globalCoord: false
+            },
+            opacity: 1 // 区域透明度
+          },
+          value: this.chartData
+        }
+      ]
+      let option = {
+        color: ['#1DDCFF'],
+        tooltip: {
+          borderWidth: 0,
+          textStyle: {
+            color: '#fff'
+          },
+          backgroundColor: 'rgba(50,50,50,0.7)',
+          confine: true
+        },
+        radar: {
+          radius: '55%',
+          center: ['50%', '55%'],
+          axisName: {
+            color: '#fff',
+            fontSize: fontSize(14),
+            formatter: function (name) {
+              let res = name + that.chartData[that.symbol] + '个'
+              that.symbol++
+              return res
+            }
+          },
+          indicator: indicator,
+          splitArea: {
+            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+            show: true,
+            areaStyle: {
+              // 分隔区域的样式设置。
+              color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
+            }
+          },
+          axisLine: {
+            //指向外圈文本的分隔线样式
+            lineStyle: {
+              color: 'rgba(60,172,247,0.2)'
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(60,172,247,0.2)', // 分隔线颜色
+              width: 1 // 分隔线线宽
+            }
+          }
+        },
+        series: [
+          {
+            type: 'radar',
+            data: dataArr
+          }
+        ]
+      }
+      this.creatChart(option, this.$refs.chart)
+    },
+    creatChart(option, ref) {
+      this.myChart = echarts.init(ref) //this.$refs.chart
+      this.myChart.resize()
+      this.myChart.setOption(option, {
+        notMerge: true
+      })
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResize)
+    this.destroyChart()
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.chart {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/views/groupPage/components/OthersChart/ComWordCloudChart.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="chart" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import 'echarts-wordcloud'
+import { fontSize } from '@/views/groupPage/util'
+export default {
+  name: 'ComWordCloudChart', //热词云图
+  props: {
+    chartData: {},
+    title: {}
+  },
+  data() {
+    return { myChart: null }
+  },
+  watch: {
+    chartData(val) {
+      this.$nextTick(() => {
+        this.initialChart()
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initialChart()
+    })
+    //图表大小自适应
+    window.addEventListener('resize', this.onResize)
+  },
+  methods: {
+    destroyChart() {
+      if (this.myChart != null) {
+        this.myChart.dispose()
+        this.myChart = null
+      }
+    },
+    onResize() {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    },
+    initialChart() {
+      var maskImage = new Image()
+      let that = this
+      let option = {
+        tooltip: {
+          borderWidth: 0,
+          textStyle: {
+            color: '#fff'
+          },
+          backgroundColor: 'rgba(50,50,50,0.7)',
+          confine: true
+        },
+        graphic: {
+          type: 'image',
+          right: 'center',
+          bottom: 'middle',
+          z: 0,
+          bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
+          style: {
+            image: maskImage
+          }
+        },
+        series: [
+          {
+            type: 'wordCloud',
+            sizeRange: [12, 20], //词云的文字字号范围，默认是[12, 60]
+            rotationRange: [0, 0],
+            gridSize: 5, //词云中每个词的间距。
+            shape: 'pentagon', //词云的形状 pentagon五边形
+            width: '100%',
+            maskImage: maskImage,
+            drawOutOfBound: false,
+            layoutAnimation: true,
+            keepAspect: true,
+            textStyle: {
+              fontWeight: 'bold',
+              color: function () {
+                return (
+                  'rgb(' +
+                  [
+                    Math.round(Math.random() * 200) + 50,
+                    Math.round(Math.random() * 150),
+                    Math.round(Math.random() * 50) + 50
+                  ].join(',') +
+                  ')'
+                )
+              }
+            },
+            emphasis: {
+              textStyle: {
+                color: '#528'
+              }
+            },
+            data: [
+              {
+                name: '智能安全脱落',
+                value: 150
+              },
+              {
+                name: '工程进度滞后',
+                value: 13
+              },
+              {
+                name: 'AI视频异常',
+                value: 124
+              },
+              {
+                name: '人员闯入',
+                value: 231
+              },
+              {
+                name: '工程进度滞后',
+                value: 345
+              },
+              {
+                name: 'PM2.5超标',
+                value: 53
+              },
+              {
+                name: 'PM10超标',
+                value: 534
+              },
+              {
+                name: '噪声超标',
+                value: 342
+              },
+              {
+                name: '智能安全脱落',
+                value: 150
+              },
+              {
+                name: '工程进度滞后',
+                value: 13
+              },
+              {
+                name: 'AI视频异常',
+                value: 124
+              },
+              {
+                name: '人员闯入',
+                value: 231
+              },
+              {
+                name: '工程进度滞后',
+                value: 345
+              },
+              {
+                name: 'PM2.5超标',
+                value: 53
+              },
+              {
+                name: 'PM10超标',
+                value: 534
+              },
+              {
+                name: '噪声超标',
+                value: 342
+              }
+            ]
+          }
+        ]
+      }
+      maskImage.onload = function () {
+        option.series[0].maskImage
+        that.creatChart(option, that.$refs.chart)
+      }
+      maskImage.src = require('@/views/groupPage/images/模块图标/智慧预警/词云图.png')
+    },
+    creatChart(option, ref) {
+      this.myChart = echarts.init(ref) //this.$refs.chart
+      this.myChart.resize()
+      this.myChart.setOption(option, {
+        notMerge: true
+      })
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResize)
+    this.destroyChart()
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.chart {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/views/groupPage/components/PieChart/ComProgressPercentChart.vue

@@ -8,8 +8,13 @@ import { fontSize } from '@/views/groupPage/util'
 export default {
   name: 'ComProgressPercentChart', //进度圆角饼图
   props: {
-    chartData: {},
-    type: {}
+    value: { type: Number, default: 23 },
+    color: {
+      type: Array,
+      default: () => {
+        return ['#0976FE', '#02D4F3']
+      }
+    }
   },
   data() {
     return { myChart: null }
@@ -40,18 +45,12 @@ export default {
     },
     initialChart() {
       let color = new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-        { offset: 0, color: '#0976FE' },
-        { offset: 1, color: '#02D4F3' }
+        { offset: 0, color: this.color[0] },
+        { offset: 1, color: this.color[1] }
       ])
-      if (this.type == 'security') {
-        color = new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-          { offset: 0, color: '#F3E86D' },
-          { offset: 1, color: '#03E1E4' }
-        ])
-      }
       let option = {
         title: {
-          text: '23%',
+          text: this.value + '%',
           textStyle: {
             color: '#eee',
             fontSize: fontSize(14)
@@ -110,7 +109,7 @@ export default {
             type: 'bar',
             data: [
               {
-                value: 23,
+                value: this.value,
                 itemStyle: {
                   color
                 }

src/views/groupPage/districtPageModules/statisticalAnalysis/securityModule/StatisticalRisk.vue

@@ -15,7 +15,7 @@
       <div class="content-info">
         <!---->
         <div class="riskPercent">
-          <div class="chartContent"><ComProgressPercentChart :type="'security'" /></div>
+          <div class="chartContent"><ComProgressPercentChart :color="['#F3E86D', '#03E1E4']" /></div>
           <div class="staContent">
             <div class="sta-item">
               <div class="sta-value">12个</div>

src/views/groupPage/districtPageModules/wisdomWarning/FocusOnWarning.vue

@@ -22,7 +22,13 @@
                 <div class="txt-title">报警</div>
               </div>
             </div>
-            <div class="ws-item"><ComDynamicRingChart /></div>
+            <div class="ws-item radar">
+              <img :src="require('@/views/groupPage/images/模块图标/智慧预警/radar.png')" />
+              <div class="txt">
+                <div class="txt-value early-value">9个</div>
+                <div class="txt-title early-title">预警</div>
+              </div>
+            </div>
             <div class="ws-item">
               <div class="pic"><img :src="require('@/views/groupPage/images/模块图标/智慧预警/推测.png')" /></div>
               <div class="txt">
@@ -141,6 +147,8 @@ export default class FocusOnWarning extends Vue {}
         grid-template-columns: repeat(3, 1fr);
         .ws-item {
           @include contentCenter();
+          height: 100%;
+          width: 100%;
           justify-content: flex-start;
           background: #062239;
         }
@@ -154,6 +162,7 @@ export default class FocusOnWarning extends Vue {}
           }
         }
         .txt {
+          z-index: 10;
           font-family: Source Han Sans CN;
           color: #ffffff;
           height: 0.3125rem /* 60/192 */;
@@ -169,6 +178,51 @@ export default class FocusOnWarning extends Vue {}
             font-size: 0.072917rem /* 14/192 */;
             font-weight: 400;
           }
+          .early-value {
+            color: #ffffff;
+            font-size: 0.125rem /* 24/192 */;
+            font-family: Source Han Sans CN-HEAVY;
+            background: linear-gradient(0deg, #03e8d5 0%, #ffea77 100%);
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
+          .early-title {
+            font-size: 0.083333rem /* 16/192 */;
+            font-weight: 500;
+            font-family: Source Han Sans CN-MEDIUM;
+          }
+        }
+        .radar {
+          justify-content: center;
+          flex-flow: column;
+          position: relative;
+          img {
+            position: absolute;
+            height: 0.645833rem /* 124/192 */;
+            width: 0.645833rem /* 124/192 */;
+          }
+        }
+        .radar::after {
+          content: ' ';
+          display: block;
+          background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #35fff5 100%);
+          width: 0.333333rem /* 64/192 */;
+          height: 0.333333rem /* 64/192 */;
+          position: absolute;
+          top: -0.015625rem /* 3/192 */;
+          left: 0.015625rem /* 3/192 */;
+          animation: radar-beam 4s infinite;
+          animation-timing-function: linear;
+          transform-origin: bottom right;
+          border-radius: 100% 0 0 0;
+        }
+        @keyframes radar-beam {
+          0% {
+            transform: rotate(0deg);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
         }
       }
     }

src/views/groupPage/districtPageModules/wisdomWarning/StatisticOfWI.vue

@@ -12,16 +12,50 @@
           <span class="site-info">预警指标统计</span>
         </div>
       </div>
-      <div class="content-info"></div>
+      <div class="content-info">
+        <div class="percentChartContent">
+          <div class="pc-item" v-for="item of pcList" :key="item.title">
+            <div class="pc-chart"><ComProgressPercentChart :color="item.color" /></div>
+            <div class="pc-title">{{ item.title + item.value + '个' }}</div>
+          </div>
+        </div>
+        <div class="radarChartContent">
+          <div class="rc-chart">
+            <ComRadarChart />
+          </div>
+          <div class="rc-switch">
+            <div
+              class="switch-item"
+              v-for="(item, index) of ['重点关注', '一般关注']"
+              :key="index"
+              @click="current = item"
+              :class="{ 'active-item': current == item }"
+            >
+              <div class="wrap" :class="{ active: current == item }">
+                {{ item }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </transition>
 </template>
 
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import ComProgressPercentChart from '@/views/groupPage/components/PieChart/ComProgressPercentChart.vue'
+import ComRadarChart from '@/views/groupPage/components/OthersChart/ComRadarChart.vue'
 //预警指标统计
-@Component({ name: 'StatisticOfWI' })
-export default class StatisticOfWI extends Vue {}
+@Component({ name: 'StatisticOfWI', components: { ComProgressPercentChart, ComRadarChart } })
+export default class StatisticOfWI extends Vue {
+  current = '重点关注'
+  pcList: Array<any> = [
+    { title: '指标总数', value: 120, color: ['#F5ED72', '#02C1A4'] },
+    { title: '报警指标', value: 70, color: ['#FFA16D', '#F02828'] },
+    { title: '推测指标', value: 50, color: ['#02D4F3', '#0976FE'] }
+  ]
+}
 </script>
 
 <style lang="scss" scoped>
@@ -77,5 +111,78 @@ export default class StatisticOfWI extends Vue {}
     font-family: Source Han Sans CN;
     background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0.02) 100%);
   }
+  .percentChartContent {
+    margin-top: 0.104167rem /* 20/192 */;
+    height: 0.65625rem /* 126/192 */;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.057292rem /* 11/192 */;
+    .pc-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+      flex-flow: column;
+      background: #062239;
+      .pc-chart {
+        height: calc(100% - 0.229167rem /* 44/192 */);
+        width: 100%;
+      }
+      .pc-title {
+        height: 0.072917rem /* 14/192 */;
+        font-size: 0.072917rem /* 14/192 */;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #0ea7ff;
+      }
+    }
+  }
+  .radarChartContent {
+    height: calc(100% - 0.760417rem /* 146/192 */);
+    width: 100%;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    .rc-chart {
+      width: 100%;
+      height: calc(100% - 0.260417rem /* 50/192 */);
+    }
+    .rc-switch {
+      margin-top: 0.052083rem /* 10/192 */;
+      height: 0.15625rem /* 30/192 */;
+      width: 0.833333rem /* 160/192 */;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 1px solid #3cacf7;
+      .switch-item {
+        height: 100%;
+        width: 0.416667rem /* 80/192 */;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 0.072917rem /* 14/192 */;
+        font-weight: 400;
+        color: #84bde5;
+        cursor: pointer;
+      }
+      .wrap {
+        height: 55%;
+        width: 88%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .active-item {
+        background: #1ddcff;
+      }
+      .active {
+        background: #072034;
+        box-shadow: 0 0 8px 6px #072034;
+        border-radius: 1px;
+        color: #ffffff;
+      }
+    }
+  }
 }
 </style>

src/views/groupPage/districtPageModules/wisdomWarning/TodayWarningList.vue

@@ -12,19 +12,100 @@
           <span class="site-info">今日预警列表</span>
         </div>
       </div>
-      <div class="content-info"></div>
+      <div class="content-info">
+        <!---->
+        <div class="categoryPecent">
+          <div class="arrow-left"><i class="el-icon-caret-left"></i></div>
+          <div class="categoryContent">
+            <div class="categoryItem" :class="'activeItem'">
+              <div class="categoryValue"><span>12个</span></div>
+              <div class="categoryName">重点关注</div>
+            </div>
+            <div class="categoryItem">
+              <div class="categoryValue"><span>6个</span></div>
+              <div class="categoryName">工程隐患</div>
+            </div>
+            <div class="categoryItem">
+              <div class="categoryValue"><span>22个</span></div>
+              <div class="categoryName">工程安全</div>
+            </div>
+          </div>
+          <div class="arrow-right"><i class="el-icon-caret-right"></i></div>
+        </div>
+        <!---->
+        <div class="categoryNumber">
+          <div class="cn-item" v-for="item of cnList" :key="item.title">
+            <div class="cn-icon"><img :src="item.imgUrl" /></div>
+            <div class="cn-text">
+              <div class="cnt-val">{{ item.val }}个</div>
+              <div class="cnt-title">{{ item.title }}</div>
+            </div>
+          </div>
+        </div>
+        <!---->
+        <div class="focusDetails">
+          <div class="title">
+            <div class="icon"></div>
+            <span class="item-name">重点关注详情</span>
+          </div>
+          <div class="focusDetailsContent">
+            <div class="fdc-item" v-for="(item, index) of fcdList" :key="index">
+              <div class="fdc-icon"><img :src="item.img" /></div>
+              <div class="fdc-text">实际进度较计划进度严重“滞后”</div>
+            </div>
+          </div>
+        </div>
+        <!---->
+        <div class="warningWord">
+          <div class="title">
+            <div class="icon"></div>
+            <span class="item-name">预警词云图</span>
+          </div>
+          <div class="warningWordChart">
+            <ComWordCloudChart />
+          </div>
+        </div>
+      </div>
     </div>
   </transition>
 </template>
 
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import ComWordCloudChart from '@/views/groupPage/components/OthersChart/ComWordCloudChart.vue'
+const iconList = {
+  进度: require('@/views/groupPage/images/模块图标/智慧预警/进度.png'),
+  质量: require('@/views/groupPage/images/模块图标/智慧预警/质量.png'),
+  安全: require('@/views/groupPage/images/模块图标/智慧预警/安全.png'),
+  监测: require('@/views/groupPage/images/模块图标/智慧预警/监测.png')
+}
 //今日预警列表
 @Component({
   name: 'TodayWarningList',
-  components: {}
+  components: { ComWordCloudChart }
 })
-export default class TodayWarningList extends Vue {}
+export default class TodayWarningList extends Vue {
+  cnList = [
+    { imgUrl: iconList['进度'], title: '进度', val: 6 },
+    { imgUrl: iconList['质量'], title: '质量', val: 3 },
+    { imgUrl: iconList['安全'], title: '安全', val: 2 },
+    { imgUrl: iconList['监测'], title: '监测', val: 1 }
+  ]
+  fcdList = [
+    { type: '进度', img: iconList['进度'] },
+    { type: '进度', img: iconList['进度'] },
+    { type: '进度', img: iconList['进度'] },
+    { type: '进度', img: iconList['进度'] },
+    { type: '进度', img: iconList['进度'] },
+    { type: '进度', img: iconList['进度'] },
+    { type: '质量', img: iconList['质量'] },
+    { type: '质量', img: iconList['质量'] },
+    { type: '质量', img: iconList['质量'] },
+    { type: '安全', img: iconList['安全'] },
+    { type: '安全', img: iconList['安全'] },
+    { type: '监测', img: iconList['监测'] }
+  ]
+}
 </script>
 
 <style lang='scss' scoped>
@@ -81,6 +162,176 @@ export default class TodayWarningList extends Vue {}
     display: inline-block;
     font-family: Source Han Sans CN;
     background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0.02) 100%);
+    @mixin positionCenter() {
+      display: flex;
+      align-items: center;
+    }
+    .title {
+      width: 100%;
+      display: flex;
+      .icon {
+        height: 0.072917rem /* 14/192 */;
+        width: 0.078125rem /* 15/192 */;
+        margin-right: 0.046875rem /* 9/192 */;
+        background: url('~@/views/groupPage/images/三角.png') no-repeat center center;
+        background-size: 100% 100%;
+      }
+      .item-name {
+        font-family: Source Han Sans CN;
+        color: #0ea7ff;
+        font-size: 0.072917rem /* 14/192 */;
+        font-weight: 500;
+      }
+    }
+    .categoryPecent {
+      margin-top: 0.083333rem /* 16/192 */;
+      width: 100%;
+      height: 0.364583rem /* 70/192 */;
+      @include positionCenter();
+      justify-content: space-between;
+      .arrow-left,
+      .arrow-right {
+        height: 100%;
+        width: 0.15625rem /* 30/192 */;
+        @include positionCenter();
+        justify-content: center;
+        background: #062239;
+        color: #2ba7ff;
+        font-size: 0.09375rem /* 18/192 */;
+        cursor: pointer;
+      }
+      .categoryContent {
+        height: 100%;
+        width: calc(100% - 0.416667rem /* 80/192 */);
+        @include positionCenter();
+        justify-content: space-between;
+        .categoryItem {
+          height: 100%;
+          width: 0.520833rem /* 100/192 */;
+          background: #062239;
+          display: flex;
+          flex-flow: column;
+          justify-content: center;
+          .categoryValue,
+          .categoryName {
+            @include positionCenter();
+            justify-content: center;
+            flex: 1;
+          }
+          .categoryValue {
+            span {
+              display: inline-block;
+              font-size: 0.083333rem /* 16/192 */;
+              font-weight: bold;
+              color: #ffffff;
+            }
+          }
+          .categoryName {
+            font-size: 0.072917rem /* 14/192 */;
+            font-weight: 400;
+            color: #84bde5;
+          }
+        }
+        .activeItem {
+          border-bottom: 3px solid;
+          border-image: linear-gradient(90deg, #00cdec, #f7de51) 30 30;
+          .categoryValue {
+            span {
+              color: #ffffff;
+              background: linear-gradient(0deg, #11f7ff 0%, #ffe76e 100%);
+              background-clip: text;
+              -webkit-text-fill-color: transparent;
+            }
+          }
+        }
+      }
+    }
+    .categoryNumber {
+      width: 100%;
+      height: 0.46875rem /* 90/192 */;
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      .cn-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .cn-icon {
+          width: 0.286458rem /* 55/192 */;
+          height: 0.364583rem /* 70/192 */;
+          img {
+            height: 100%;
+            width: 100%;
+            object-fit: contain;
+          }
+        }
+        .cn-text {
+          height: 0.171875rem /* 33/192 */;
+          display: flex;
+          flex-flow: column;
+          justify-content: space-evenly;
+          align-items: center;
+          font-size: 0.072917rem /* 14/192 */;
+          color: #ffffff;
+          .cnt-val {
+            font-family: Source Han Sans CN-HEAVY;
+            font-weight: bold;
+          }
+          .cnt-title {
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+          }
+        }
+      }
+    }
+    .focusDetails {
+      height: calc(100% - 2.6875rem /* 516/192 */);
+      width: 100%;
+      position: relative;
+      .focusDetailsContent {
+        margin-top: 0.104167rem /* 20/192 */;
+        height: calc(100% - 0.177083rem /* 34/192 */);
+        overflow: auto;
+        .fdc-item {
+          @include positionCenter();
+          .fdc-icon {
+            height: 0.15625rem /* 30/192 */;
+            width: 0.15625rem /* 30/192 */;
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: contain;
+            }
+          }
+          .fdc-text {
+            font-size: 0.072917rem /* 14/192 */;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            color: #feffff;
+            line-height: 0.114583rem /* 22/192 */;
+          }
+        }
+      }
+    }
+    .focusDetails::after {
+      content: '';
+      height: 0.005208rem /* 1/192 */;
+      width: 90%;
+      position: absolute;
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 231, 233, 0.24);
+    }
+    .warningWord {
+      margin-top: 0.052083rem /* 10/192 */;
+      height: 1.71875rem /* 330/192 */;
+      width: 100%;
+      .warningWordChart {
+        width: 100%;
+        height: calc(100% - 0.072917rem /* 14/192 */);
+      }
+    }
   }
 }
 </style>