公共安全- 饼图完成

package.json

@@ -16,6 +16,7 @@
     "countup.js": "^2.0.7",
     "dayjs": "^1.10.4",
     "echarts": "^5.0.1",
+    "echarts-wordcloud": "^2.0.0",
     "normalize.css": "^8.0.1",
     "qs": "^6.9.6",
     "vue": "^3.0.5",

src/ajax/axios.ts

@@ -11,7 +11,7 @@ Axios.interceptors.request.use(
   (config) => {
     // 添加token
     config.headers.Authorization =
-      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMCIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4NDE3MTQ0LCJqdGkiOiIxOTZhNGE1ZS0yNzI3LTQ5ZTctOWIxOC02Y2U4OTAzNTQ2YWIiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTg0MDk5NDQyNjd9.S2L88SbCklTArdG7jFPRw3xZ_xTNSk0r2fqI3ta92w23pFgi3aXazc-AQsno2lNF67eCT7K1KbXrqRa0-jHCT4iLyETPyzDj072QwgB06YzPtb1CqsYZLSAZUO8GH_MUB6Gqxp9Z2jLHJDDyfQF2EaWAaPtONbXxf_0Nsgq_pJDAJG84LSL8j8RyFZJ1ZtYRoCkyVGZvq06AeLTmZdwSqt1k8LKkFWsi9XTL_WVaQsvkZs4oJM7nZokvO70ISSIq7EUNLDUstFtMWwyrv6dnhsa2fkagoDkd4CGInGh3d35E5hXHsR_SD8zMfqzrzdgHzonf58mVhyvzQViNPQfKsw'
+      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE4NDkzNTMwLCJqdGkiOiI4ZjlmZTI2MS1iYWRiLTQyMTQtODBkZi04YzA4ZDBmMWI2NTQiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTg0ODYzMzAwNzB9.g1F_LLv9aVbAUFBXiO3olTRCDN1PRHhlrj8CyBQLQBn-_nnyQ8aJ15HN1o0hzLMFUMDFU7FsT5hVtE7ECg-CTqTRsqpHauUiXb0F8XE-9xdRqRMN9tXGubzqj9VWBI5kLPlujrZZy1Isk_USxxuDlJAapL1rHm37NGM4wILMJGwIQEjiKAAjS10wGXip0rS60dvw7s3vbD5PTg7wB6aYzsVR9RgCo3W7Wkk2d5Y-ZtPj-y9mf8b2q5ABbDB0YmQPl9EoLrETa-X_Cwial4ZOqaCAxIJoZI5IacqmKYKlmUna1QuxPv0KxE9kNGtB9iEpYGGVyxnAspCNQOhcgKx63A'
     return config
   },
   (error) => {

src/store/actions.ts

@@ -218,7 +218,7 @@ export default {
     const { content } = (
       await ajax.get({ url: api.GET_PUBLICSAFE_OUTHOUSEWALL })
     ).data
-    // console.log(content)
+    // console.log(content, '房屋外立面')
     commit('SET_PUBLICSAFE_OUTHOUSEWALL', content)
   },
   // 公共服务 - 重点关注楼宇
@@ -240,7 +240,7 @@ export default {
     const { content } = (
       await ajax.get({ url: api.GET_PUBLICSAFE_PIEDATA })
     ).data
-    // console.log(content)
+    console.log(content, 'pie')
     commit('SET_PUBLICSAFE_PIEDATA', content)
   },
   // 左侧公共 - 指挥体系

src/view/right/key-task.vue

 <template>
   <m-card title="重点工作">
+    <!-- <div id="cloud" class="box"></div> -->
     <img src="@/assets/images/key-task.png" />
   </m-card>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import * as echarts from 'echarts'
+import 'echarts-wordcloud'
 
 export default defineComponent({
   name: 'KeyTask',
+  setup() {
+    console.log(echarts)
+    setTimeout(() => {
+      init()
+      console.log(document.getElementById('cloud'))
+    }, 1000)
+
+    const init = () => {
+      const cloudCharts = echarts.init(document.getElementById('cloud'))
+      //说明
+      //项目需要echarts-wordcloud.min.js
+      /*      itemStyle: {
+                    normal: {
+                        opacity: .2 //自己项目中这里可以设置0全透明，然后可以写一个div背景加载一个美化过的云图片，重合放在这个图表下面。
+                    }
+                },*/
+      //1、自己项目中上面的属性设置0全透明。
+      //2、然后在页面上写一个div样式背景，加载一个美化过的云图片。
+      //3、重合放在这个图表下面。-----绝对定位浮动等等方式
+      //4、最后的效果就是进来时头像效果。
+      //必须是全黑背景，echarts-wordcloud按背景渲染必须是黑色背景图
+      //必须是全黑背景，echarts-wordcloud按背景渲染必须是黑色背景图
+      const symbolUrl = ''
+      const colorList = [
+        '#3a96f5',
+        '#5faaf7',
+        '#78bafe',
+        '#1563f2',
+        '#add2f8',
+        '#e24bf4',
+        '#1acaff',
+        '#ffde00',
+        '#89fda5',
+      ]
+      const presents = [
+        '明厨亮灶',
+        '民宿群租',
+        '垃圾分类',
+        '小型工程纳管',
+        '非机动车停放',
+        '马桶改造',
+        '电梯加装',
+        '居改非',
+        '无证无照整治',
+      ]
+
+      const data = []
+      for (var i = 0; i < presents.length; ++i) {
+        data.push({
+          name: presents[i],
+          value: (presents.length - i) * 20,
+        })
+      }
+      for (var i = 10; i < presents.length; ++i) {
+        const cnt = Math.floor(Math.random() * 10)
+        for (let j = 0; j < cnt; ++j) {
+          data.push({
+            name: presents[i],
+            value: Math.random() * 10,
+          })
+        }
+      }
+      // const maskImage = new Image()
+      // maskImage.src = symbolUrl
+      const option = {
+        backgroundColor: '#0A2E5D',
+        tooltip: {
+          show: true,
+        },
+        grid: {
+          left: 0,
+          bottom: 0,
+          top: 0,
+          right: 0,
+        },
+        xAxis: {
+          type: 'category',
+          show: false,
+        },
+        yAxis: {
+          max: 100,
+          show: false,
+        },
+        series: [
+          {
+            zlevel: -1,
+            type: 'pictorialBar',
+            name: 'pictorial',
+            silent: true,
+            symbol: 'image://' + symbolUrl, //按背景渲染云词
+            symbolSize: ['45.2%', '35.2%'],
+            symbolPosition: 'center',
+            barWidth: '100%',
+            barMaxWidth: '100%',
+            itemStyle: {
+              normal: {
+                opacity: 0, //自己项目中这里可以设置0全透明，然后可以写一个div背景加载一个美化过的云图片，重合放在这个图表下面。
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+          {
+            type: 'wordCloud',
+            sizeRange: [15, 15],
+            rotationRange: [0, 0],
+            maskImage: cloudCharts,
+            textPadding: 0,
+            gridSize: 24, //用于标记画布可用性的网格大小（以像素为单位）//字距越大，字距越大。
+            width: '45%',
+            height: '35%',
+            left: 'center',
+            top: 'center',
+            drawOutOfBound: false,
+            textStyle: {
+              normal: {
+                fontFamily: 'sans-serif',
+                color: function () {
+                  const index = Math.floor(Math.random() * colorList.length)
+                  return colorList[index]
+                },
+              },
+            },
+            data: data,
+          },
+        ],
+      }
+
+      cloudCharts.setOption(option)
+    }
+  },
 })
 </script>
 
 <style lang="stylus" scoped>
-img
+.box
   height 95%
-  width auto
-  margin auto
+  width 100%
+  border 1px solid red
+  background #000
 </style>

src/view/right/police.vue

@@ -141,7 +141,7 @@ export default defineComponent({
     })
 
     const clickStreetName = (item: any): void => {
-      searchModal.value = true
+      searchModal.value = !searchModal.value
       streetData.value = item
     }
     // const houseSum = ref<SummaryProp[]>([

src/view/right/public-safety.vue

@@ -46,7 +46,11 @@
                 <m-pie class="chart2" :dataset="pieData2" :option="pieOption" />
               </div>
               <div class="legend">
-                <div v-for="(item, i) in pieData2.source" :key="item.name">
+                <div
+                  v-for="(item, i) in pieData2.source"
+                  :key="item.name"
+                  style="width: 70%"
+                >
                   <p>
                     <span :style="{ background: pieOption.color[i][0] }" />
                     {{ item.name }}
@@ -58,7 +62,11 @@
               </div>
             </div>
             <div class="legendBottom">
-              <div v-for="(item, i) in pieData1.source" :key="item.name">
+              <div
+                v-for="(item, i) in pieData1.source"
+                :key="item.name"
+                @click="changePie2(item)"
+              >
                 <p>
                   <span :style="{ background: pieOption.color[i][0] }" />
                   <m-count class="count" :value="item.value" />
@@ -104,7 +112,7 @@
       v-model="searchModal"
       enter="fadeInRight"
       leave="fadeOutRight"
-      offset="55%"
+      offset="65%"
       width="40%"
       title="重点关注楼宇清单"
     >
@@ -158,18 +166,106 @@ export default defineComponent({
       { name: '隐患点数', value: 0 },
       { name: '危险点数', value: 0 },
     ])
+
+    const secPieKey = ref('外立面附加设施隐患点') // 默认展示的第二饼图类型
     watch(
+      // 监听年份切花更改检查楼数  隐患点数 危险点数
       [() => outHouseWall.value, () => year.value],
       ([data, year]) => {
         if (data.length === 0) return
-        const { checkNum = 0, hiddenPoint = 0, dangerPoint = 0 } = data.find(
-          (e: any) => e.year === year
-        )
+        const {
+          checkNum = 0,
+          hiddenPoint = 0,
+          dangerPoint = 0,
+          outerWallDangerPoint = 0,
+          outerWallFacilityDangerPoint = 0,
+          outerWallFacilityHiddenPoint = 0,
+          outerWallHiddenPoint = 0,
+        } = data.find((e: any) => e.year === year)
         houseSum.value = [
           { name: '检查楼数', value: checkNum },
           { name: '隐患点数', value: hiddenPoint },
           { name: '危险点数', value: dangerPoint },
         ]
+        pieData1.value = {
+          dimensions: [
+            { name: 'name', displayName: '类型' },
+            { name: 'value', displayName: '数量' },
+          ],
+          source: [
+            {
+              name: '外墙面层隐患点',
+              value: outerWallHiddenPoint,
+            },
+            {
+              name: '外墙面层危险点',
+              value: outerWallDangerPoint,
+            },
+            {
+              name: '外立面附加设施隐患点',
+              value: outerWallFacilityHiddenPoint,
+            },
+            {
+              name: '外立面附加设施危险点',
+              value: outerWallFacilityDangerPoint,
+            },
+          ],
+        }
+      },
+      { immediate: true }
+    )
+    watch(
+      [() => pieData.value, () => year.value, () => secPieKey.value],
+      ([data, year, secPieKey]) => {
+        if (data.length === 0) return
+        console.log(data, year)
+        const arr: any = []
+        data.forEach((item: any) => {
+          if (item.year == year) {
+            arr.push(item)
+          }
+        })
+        let secPieKeyName = ''
+        switch (secPieKey) {
+          case '外墙面层隐患点':
+            secPieKeyName = 'outerWallHiddenPoint'
+            break
+          case '外墙面层危险点':
+            secPieKeyName = 'outerWallDangerPoint'
+            break
+          case '外立面附加设施隐患点':
+            secPieKeyName = 'outerWallFacilityHiddenPoint'
+            break
+          case '外立面附加设施危险点':
+            secPieKeyName = 'outerWallFacilityDangerPoint'
+            break
+
+          default:
+            break
+        }
+
+        const first = arr.find(
+          (e: any) => e.workstationName == '第一综合网格工作站（武胜路）'
+        )[secPieKeyName]
+        const second = arr.find(
+          (e: any) => e.workstationName == '第二综合网格工作站（厦门路）'
+        )[secPieKeyName]
+        const third = arr.find(
+          (e: any) => e.workstationName == '第三综合网格工作站（牯林路）'
+        )[secPieKeyName]
+
+        // // 将第二张饼图的数据更新
+        pieData2.value = {
+          dimensions: [
+            { name: 'name', displayName: secPieKey },
+            { name: 'value', displayName: '数量' },
+          ],
+          source: [
+            { name: '第一工作站', value: first || 0 },
+            { name: '第二工作站', value: second || 0 },
+            { name: '第三工作站', value: third || 0 },
+          ],
+        }
       },
       { immediate: true }
     )
@@ -177,6 +273,11 @@ export default defineComponent({
     const changeYear = (value: string) => {
       year.value = value
     }
+    //切换第二饼图展示的类别
+    const changePie2 = (item: any) => {
+      secPieKey.value = item.name
+      // console.log(secPieKey.value)
+    }
 
     const list = computed(() => {
       return [
@@ -211,41 +312,39 @@ export default defineComponent({
       { name: '楼宇名称', value: 4, danger: 1 },
       { name: '楼宇名称', value: 4, danger: 1 },
     ])
-    const pieData1 = computed(() => {
-      return {
+    const pieData1 = ref({
       dimensions: [
         { name: 'name', displayName: '类型' },
         { name: 'value', displayName: '数量' },
       ],
       source: [
         {
-            //   name: '外立面附加设施危险点',
-            //   value: outHouseWall.value.outerWallFacilityDangerPoint,
-            // },
-            // {
-            //   name: '外立面附加设施隐患点',
-            //   value: outHouseWall.value.outerWallFacilityHiddenPoint,
-            // },
-            // {
-            //   name: '外墙面层隐患点',
-            //   value: outHouseWall.value.outerWallHiddenPoint,
-            // },
-            // {
-            //   name: '外墙面层危险点',
-            //   value: outHouseWall.value.outerWallDangerPoint,
+          name: '外立面附加设施危险点',
+          value: 1,
+        },
+        {
+          name: '外立面附加设施隐患点',
+          value: 1,
+        },
+        {
+          name: '外墙面层隐患点',
+          value: 1,
+        },
+        {
+          name: '外墙面层危险点',
+          value: 1,
         },
       ],
-      }
     })
     const pieData2 = ref({
       dimensions: [
-        { name: 'name', displayName: '类型' },
+        { name: 'name', displayName: secPieKey.value },
         { name: 'value', displayName: '数量' },
       ],
       source: [
-        { name: '第一工作站', value: 30 },
-        { name: '第二工作站', value: 40 },
-        { name: '第三工作站', value: 48 },
+        { name: '第一工作站', value: 1 },
+        { name: '第二工作站', value: 1 },
+        { name: '第三工作站', value: 1 },
       ],
     })
     const pieOption = ref({
@@ -284,6 +383,7 @@ export default defineComponent({
       buildings,
       outHouseWall,
       pieData,
+      changePie2,
     }
   },
 })