merge from master & build

dist/assets/map-btn5.8f689b39.js

+import{d as e,p as a,a as r,r as t,o as l,b as o,F as s,f as n,l as d,e as k,t as u,w as i,g as c,h as y,c as f,j as v}from"./index.bd6769f9.js";var A=e({name:"Brief",props:{list:{type:Array,required:!0},color:{type:String,default:null},size:{type:String,default:"0.22rem"}}});const p=i("data-v-074669a4");a("data-v-074669a4");const z={class:"brief-container"},h={key:1},m={class:"count-group"},w=c(" / ");r();const g=p(((e,a,r,i,c,y)=>{const f=t("m-count");return l(),o("div",z,[(l(!0),o(s,null,n(e.list,(a=>(l(),o("div",{key:a.name},[a.icon?(l(),o("img",{key:0,src:a.icon,style:`width:${e.size};height:${e.size}`},null,12,["src"])):d("",!0),Array.isArray(a.value)?(l(),o("div",h,[k("div",m,[k(f,{class:"count yellow",value:a.value[0]},null,8,["value"]),w,k(f,{class:"count",value:a.value[1]},null,8,["value"])]),k("p",null,u(a.name),1)])):(l(),o("div",{key:2,class:{center:!a.icon}},[k(f,{class:"count yellow",style:{color:e.color},value:a.value},null,8,["style","value"]),k("p",null,u(a.name),1)],2))])))),128))])}));A.render=g,A.__scopeId="data-v-074669a4";var F=e({name:"Circle",props:{type:{type:String,default:"circle"},color:{type:[String,Array],default:["#0094FF","#1DF9FF"]},value:{type:Number,default:0},name:{type:String,default:""},showInfo:{type:Boolean,default:!0},rate:{type:Number,default:1.8},strokeWidth:{type:Number,default:6},gapDegree:{type:Number,default:0}},setup(e){const a=y(null),r=f((()=>Array.isArray(e.color)?{"0%":e.color[0],"100%":e.color[1]}:e.color)),t=f((()=>a.value?a.value.clientWidth/(e.rate||1.8):0));return{circleWrapperRef:a,strokeColor:r,width:t}}});const b=i("data-v-fb0eadd2");a("data-v-fb0eadd2");const N={ref:"circleWrapperRef",class:"circle-wrapper"};r();const j=b(((e,a,r,s,n,d)=>{const i=t("a-progress");return l(),o("div",N,[k(i,{width:e.width,"stroke-color":e.strokeColor,percent:e.value,type:e.type,"show-info":e.showInfo,"stroke-width":e.strokeWidth,"gap-degree":e.gapDegree},null,8,["width","stroke-color","percent","type","show-info","stroke-width","gap-degree"]),v(e.$slots,"default",{},(()=>[k("p",null,u(e.name),1)]))],512)}));F.render=j,F.__scopeId="data-v-fb0eadd2";var S="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAhFBMVEUykf8zkv8zkf8ykv8zkf8zkf8xkv80kv8zkv8zkv8zkf8ykf8zkf8ykv8zkv8ykf8ykf8zkf8ykf8zkf8ykf8ykf8zkv8ykv8zkf8zkf8zkv8zkf8zkv80kv8zkf8ykv8zkv8ykf8ukv8wkP8zkv8ykf8ykv8zkf8ykv8xk/8ykv8zkf9rRIMBAAAAK3RSTlMz18NK/Ow643ht+PWQ28xmsayllopyVz7x0reDXETWnH1RNjXh38a8Y049lTPWQgAAAgNJREFUSMftl+tysjAQhoWAgpyPogiK5357//f35Q2h2tYJUacz7Uz3T9YlD/smm4NM2IyetBmbgH2WnhBNnjSiP/j3w1M3OR0re3n23x6FWezRuwXOI/A0ndMHay/aMDPos1m5Jry2+/6h70RFHds9nmjBzBZo2gyB4ijojQY8FZqP3U1otxG0Mw6n6Bcu5Jtk0LF40GvGYDZHXsFGZ4+sIBN+jlemY3CM8XZIuqLe7AjxFeJMDU/nMsPudC1TNCjy1XCBzhhbRlezoTzhzlINQ3XI24WHGfJLNwSd8YgLp1HCoRTnQMFliAQYB3SvlfBB1nPTK5AZLTgzPFLCUHuR1V6JSAm5qPeSt7kSxtJ0eetjnoAIr4ITcGerhFveo8bmIKTmdAQtZzyq8F4lbA77ZwnaPouGRKHhlApYyoWzvjkOVsMCrfZKuKNBXPFOn8TYsdnikbUdoKx7kbuX7GXi1xZ+MQJvhxUF3E83zr/rCRGM7mdDprhzQrijcGRhSdUfYqwFa2qcYXk/w+xmKDYih8U4jJ0FmyfRTmTNDYJVnd65jV0h+ENo2NI/dLo3xtajT2Yu9O+qJrFu0cB97JZ8y1pJVnGxf/x+bi5OXrvl7rf8M6jNr5YwPdihe2bowSbdtVILPr0C13fZ2V5vwrLW+GJm+ePr/Ad/F/zSR9lLn4P/AQwwqd82rS6wAAAAAElFTkSuQmCC";export{A as _,F as a,S as b};

dist/assets/map-btn5.b72d491e.css

+.brief-container[data-v-074669a4]{display:flex;align-items:center;white-space:nowrap}.brief-container .count[data-v-074669a4]{font-size:.11rem}.brief-container .count.yellow[data-v-074669a4]{font-size:.13rem;color:#ffd400}.brief-container>div[data-v-074669a4]{display:flex;align-items:center;flex:1;margin-left:.05rem}.brief-container>div>img[data-v-074669a4]{margin-right:.05rem}.brief-container>div>div[data-v-074669a4]{font-weight:700}.brief-container>div>div p[data-v-074669a4]{color:#ccc}.brief-container>div>div.center[data-v-074669a4]{text-align:center}.circle-wrapper[data-v-fb0eadd2]{width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}.circle-wrapper>p[data-v-fb0eadd2]{margin-top:.1rem;font-size:.12rem;font-weight:700}
\ No newline at end of file

dist/index.html

@@ -3,23 +3,20 @@
 
 <head>
   <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.ico" />
+  <link rel="icon" href="./favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>南京东路街道</title>
-  <script src="./SMap.min.js"></script>
-  <script src="./Plugins.min.js"></script>
-  <script src="./hls.js"></script>
-  <script type="module" crossorigin src="./assets/index.9d3e04cb.js"></script>
-  <link rel="modulepreload" href="./assets/vendor.fb6b006a.js">
-  <link rel="stylesheet" href="./assets/index.097e7037.css">
+<script type="module" crossorigin src="./assets/index.bd6769f9.js"></script>
+  <link rel="modulepreload" href="./assets/vendor.3a6a5816.js">
+  <link rel="stylesheet" href="./assets/index.21162620.css">
 </head>
 
 <body>
   <div id="app"></div>
-  <!-- <script src="/SMap.min.js"></script>
-  <script src="/Plugins.min.js"></script>
-  <script src="/hls.js"></script> -->
-
+  <script src="./SMap.min.js"></script>
+  <script src="./Plugins.min.js"></script>
+  <script src="./hls.js"></script>
+  
 </body>
 
 </html>
\ No newline at end of file

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",

paths.json

+[
+  {
+    "name": "第一工作站",
+    "path": [
+      [-448.329953822261, -293.460812442785],
+      [-431.7521211874291, -671.2658974800385],
+      [-424.4347237401342, -721.1895650357069],
+      [-398.89824688593046, -803.6322429418965],
+      [-365.2547551197802, -867.1158334507442],
+      [-392.5813071687177, -874.8011678318296],
+      [-403.0902474574316, -1077.6749785273678],
+      [-353.7288206095779, -1071.1265279304666],
+      [-235.53838240578477, -1022.8565095154296],
+      [-110.56798272540209, -1153.1351229372399],
+      [-93.69249324525651, -1138.2894877772196],
+      [-68.09400454827903, -1119.6983373136686],
+      [108.32141989715319, -1078.5720831861604],
+      [162.94558513506695, -1051.8780519335146],
+      [319.4097326987787, -1005.952081175323],
+      [764.5059353911838, -763.8371763725968],
+      [632.5075268631167, -531.321704831237],
+      [456.02595645205906, -245.14531867638112],
+      [265.6661356282508, 118.08284918620457],
+      [171.38332987513922, 95.29556402830092],
+      [107.25481620144524, 61.96213147601915],
+      [43.56451955001853, 9.376088803933783],
+      [6.621997748308331, -34.25957789448293],
+      [-61.673711759777404, 39.489039654835494],
+      [-84.91161630850314, 43.66450373493032],
+      [-117.17844516507756, 35.95023049388385],
+      [-268.3674519701745, -19.099749397742613],
+      [-336.6383567411507, -44.7065063404232],
+      [-412.38375562778185, -44.284825809562136],
+      [-452.45167430528585, -55.794223828358156],
+      [-462.21647248071554, -56.90216875258136],
+      [-480.70426987297697, -84.93978993199039],
+      [-448.329953822261, -293.460812442785]
+    ]
+  },
+  {
+    "name": "第二工作站",
+    "path": [
+      [62.564369398678764, 740.5887328698475],
+      [137.63177213765096, 581.9293660719472],
+      [265.9218724678516, 118.00636791345084],
+      [633.5446129216658, -540.7909132227782],
+      [1009.9399620665309, -314.1334937621058],
+      [1093.7138275309285, -280.9447555096293],
+      [964.1008078882224, 10.568783246614885],
+      [884.0476529902461, -20.486747614446926],
+      [826.2691520165776, 82.29581472151119],
+      [899.6994421063242, 120.57779232713301],
+      [826.2278107880617, 251.71216917922004],
+      [705.7015931731263, 615.2007867814553],
+      [689.5206363320461, 675.2447870777893],
+      [684.3364462761659, 756.2487902316288],
+      [534.3504692208784, 845.4714296144077],
+      [483.33539323239313, 867.770888275825],
+      [418.098934634476, 876.5269604754694],
+      [339.3025530833796, 879.3795052430589],
+      [278.7872627819655, 867.1094286195723],
+      [216.4694949172632, 843.7681709995571],
+      [158.20316744710817, 810.0089237935626],
+      [69.50142754362844, 745.9134831026813],
+      [62.564369398678764, 740.5887328698475],
+    ]
+  },
+  {
+    "name": "第三工作站",
+    "path": [
+      [-827.6197677404292, 863.6615701613555],
+      [-708.507420140734, 529.087007783064],
+      [-544.6473267955473, 184.59055056098282],
+      [-523.8857618349174, 124.25716166503844],
+      [-451.3484422811116, -294.9842367135918],
+      [-152.79862643148, -277.8524316166481],
+      [-122.5120424208119, -268.7160201146585],
+      [-84.99074341988057, -211.12768879216264],
+      [-63.923253368233645, -138.51595502702844],
+      [-34.306397259521646, -87.17841745611986],
+      [38.478969665379054, 8.683623226294912],
+      [107.08887251018473, 60.05423378001592],
+      [158.0543390244511, 92.77168202741245],
+      [264.45839297839234, 119.5525298599415],
+      [171.40755583505143, 467.1165062378942],
+      [134.7709591243579, 587.717138064158],
+      [81.23406819640945, 702.8193864978215],
+      [60.116968670543656, 737.5046772225696],
+      [-52.52134254357884, 666.753298740646],
+      [-117.37746183915078, 641.493808117498],
+      [-151.4095611533494, 632.9609785518389],
+      [-186.334631003489, 628.7524414889315],
+      [-237.86233822557006, 637.5911961456075],
+      [-301.7758775109821, 657.7822521527194],
+      [-467.37230245383194, 765.9722471785428],
+      [-527.2261330989933, 795.6221762700677],
+      [-676.0132145273228, 855.6165670921827],
+      [-733.4857904099746, 866.563724403164],
+      [-791.5950212117696, 868.8044189887198],
+      [-827.6197677404292, 863.6615701613555],
+    ]
+  }
+]
\ No newline at end of file

src/App.vue

 <template>
   <router-view :key="$route.fullPath" />
-  <m-loader v-if="showLoading" />
+  <m-loader v-show="showLoading" />
 </template>
 
 <script lang="ts">

src/ajax/api.ts

@@ -39,6 +39,8 @@ export default {
   GET_COMMUNITY_FACILITY: '/service-special-nandong/communityRelations', // 小区设施
   GET_ISSUE_LIST: '/service-special-nandong/management/factors', // 管理要素列表
   GET_COMBINE_LIST: '/service-special-nandong/league/linkage', // 联勤联动列表
+  /** 报警发短信 */
+  POST_ALARM: '/service-alarm-nandong/public/alarm',
 
   /** 工作站 */
   GET_STATION: '/service-special-nandong/workstations', // 工作站信息
@@ -48,4 +50,16 @@ export default {
   GET_DUTY_EVENTS: '/service-special-nandong/compair/getRanking/cmt', // 勤务分析 - 居委事件数量
   GET_DUTY_PLACES: '/service-special-nandong/compair/getRanking/addr', // 勤务分析 - 多发地点
   GET_DUTY_RANKING: '/service-special-nandong/compair/getRanking/all', // 勤务分析 - 排行
+
+  /** 公共管理 */
+  GET_YOUSUBIDA_RANK: '/service-special-nandong/compair/willReach', // 有诉必答-占比
+  GET_YOUSUBIDA_CLASSIFICATION_RANK:
+    '/service-special-nandong/compair/willReach/ranking', // 有诉必答-分类排行
+  GET_URGENTCASE: '/service-special-nandong/compairs', //  有诉必答-紧急案件
+  GET_TODAYCASE: '/service-special-nandong/compair/willTouch', //  有求必应-今日案件数
+  GET_STAGECASE: '/service-special-nandong/compair/willTouch/status', // 有求必应-各阶段案件数
+  GET_WORKSTATION: '/service-special-nandong/compair/willTouch/workStation', // 有求必应-工作站分类
+  GET_TRACKEVENT: '/service-special-nandong/compairs', // 有求必应-事件跟踪
+  GET_CASE_CLASSIFICATION_RANK: '/service-special-nandong/compair/analysis', // 案件分析-分类排行
+  GET_MOREHAPPEN_ADDR: '/service-special-nandong/compair/analysis/addr', // 案件分析-多发地点
 }

src/ajax/axios.ts

@@ -64,6 +64,7 @@ interface RequestOptions {
     | 'application/json;charset=UTF-8'
     | 'application/x-www-form-urlencoded;charset=UTF-8'
   showLoading?: boolean
+  headers?: { [key: string]: string }
 }
 
 /**
@@ -80,6 +81,7 @@ const ajax = ({
   params = {},
   contentType = 'application/json;charset=UTF-8',
   showLoading = true,
+  headers = {},
 }: RequestOptions) => {
   if (!url || typeof url != 'string') {
     throw new Error('接口URL不正确')
@@ -94,6 +96,7 @@ const ajax = ({
       'Access-Control-Allow-Headers':
         'Authorization,Origin, X-Requested-With, Content-Type, Accept',
       'Access-Control-Allow-Methods': '*',
+      ...headers,
     },
   }
   if (method === 'GET') {

src/components/MyComponent/MyChart/my-pie.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, onMounted, watchEffect } from 'vue'
+import { defineComponent, PropType, onMounted, watchEffect, watch } from 'vue'
 import { use } from 'echarts/core'
 import { PieChart } from 'echarts/charts'
 use([PieChart])
@@ -23,7 +23,8 @@ export default defineComponent({
       default: null,
     },
   },
-  setup(props) {
+  emits: ['init'],
+  setup(props, ctx) {
     const defaultOption: PieOption = {
       backgroundColor: 'transparent',
       tooltip: {
@@ -54,8 +55,14 @@ export default defineComponent({
       defaultOption,
       defaultSeriesItem
     )
-    onMounted(() => initChart(props.dataset, props.option))
-    watchEffect(() => initChart(props.dataset, props.option))
+    onMounted(() => {
+      const instance: any = initChart(props.dataset, props.option)
+      instance && ctx.emit('init', instance)
+    })
+    watchEffect(() => {
+      const instance: any = initChart(props.dataset, props.option)
+      instance && ctx.emit('init', instance)
+    })
     return {
       chartRef,
     }

src/components/MyComponent/MyChart/useChartGenerate.ts

@@ -202,7 +202,10 @@ const useChartGenerate = <T>(
    * @param dataset 数据集
    * @param option 自定义图表配置
    */
-  const initChart = (dataset: DatasetComponentOption, option?: ECOption) => {
+  const initChart = (
+    dataset: DatasetComponentOption,
+    option?: ECOption
+  ): any => {
     if (!myChart.value) return
     const config =
       (defaultSeriesItem as any).type === 'radar'
@@ -214,6 +217,7 @@ const useChartGenerate = <T>(
         : defaultConfig(defaultOption, defaultSeriesItem, dataset)
     mergeOptions(config, option)
     myChart.value.setOption(transLinearColorOption(config), true)
+    return myChart.value
   }
 
   return { chartRef, initChart }

src/components/MyComponent/MyCount/my-count.vue

@@ -53,6 +53,9 @@ export default defineComponent({
       duration: +props.speed,
     }
     onMounted(() => {
+      if (isNaN(endValue.value)) {
+        endValue.value = 0
+      }
       const countUp = new CountUp(
         countRef.value as HTMLElement,
         endValue.value,

src/components/MyComponent/MyLoader/my-loader.vue

 <template>
-  <teleport to="#MyLoader">
-    <div class="my-loader-mask" :style="`background:${background}`">
-      <div class="my-loader">
-        <div class="outer" />
-        <div class="middle" />
-        <div class="inner" />
-      </div>
-      <slot />
+  <!-- <teleport to="#MyLoader"> -->
+  <div class="my-loader-mask" :style="`background:${background}`">
+    <div class="my-loader">
+      <div class="outer" />
+      <div class="middle" />
+      <div class="inner" />
     </div>
-  </teleport>
+    <slot />
+  </div>
+  <!-- </teleport> -->
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
-import useDOMCreate from '@/hooks/useDOMCreate'
+// import useDOMCreate from '@/hooks/useDOMCreate'
 export default defineComponent({
   name: 'MyLoader',
   displayName: 'm-loader',
@@ -23,9 +23,9 @@ export default defineComponent({
       default: 'rgba(0,0,0,0.3)',
     },
   },
-  setup() {
-    useDOMCreate('MyLoader')
-  },
+  // setup() {
+  //   useDOMCreate('MyLoader')
+  // },
 })
 </script>
 

src/components/MyComponent/MyMap/my-map.vue

@@ -3,7 +3,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, PropType } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, PropType } from 'vue'
+import store from '@/store'
 declare const SMap: any
 declare const Plugins: any
 
@@ -27,29 +28,35 @@ export default defineComponent({
   },
   emits: ['complete', 'event'],
   setup(props, ctx) {
+    const curMapType = computed(() => store.state.curMapType)
     let map: any = null
-    onMounted(async () => {
-      await nextTick()
-      initMap()
-    })
-    function initMap() {
+    // onMounted(async () => {
+    //   await nextTick()
+    //   initMap()
+    // })
+    function initMap(config?: any) {
       map = new SMap.Map('MapContainer', {
         viewMode: '3D',
-        center: [1141.75319496382872, -480.0854532701907],
+        center: [1019.614669, 54.167243],
+        // center: [-135.98002789627407, -722.1597065437004],
         zooms: [5, 10],
         zoom: 7,
         pitch: 45,
         mapStyle: 'smap://styles/dark',
         showBuildingBlock: true,
+        ...config,
         ...props.config,
       }).on(SMap.MapEvent.maploaded, () => {
-        // map.enableMouseEvent(false)
-        setBuildingBlock()
+        map.enableMouseEvent(false)
+        // setBuildingBlock()
         ctx.emit('complete', map)
         addListener()
-        // hideCommunity()
+        hideCommunity()
       })
     }
+    function layer(name: string) {
+      return map.getLayer(name)
+    }
     function setBuildingBlock(val = false) {
       map.getLayer('model_white_zw').visible = val // 整个街道图层名
       map.getLayer('model_white_zhenxing2').visible = val // 振兴小区名
@@ -69,7 +76,7 @@ export default defineComponent({
     function setFilter(arr: unknown[], key = 'sect_id') {
       if (arr.length === 0) return
       const valid = arr.map((val) => {
-        return `${key} like '${val}'`
+        return `${key} = '${val}'`
       })
       map.setFilter('wg_gis_xq_point', valid.join(' or '))
       map.setFilter('wg_gis_mpz', valid.join(' or '))
@@ -78,9 +85,8 @@ export default defineComponent({
     function addListener() {
       // 触发地图点击事件
       map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
-        const { x, y } = eventParamter.mapPoint
-        console.log(map.getZoom())
-        console.log([x, y])
+        // const { x, y } = eventParamter.mapPoint
+        console.log(map.getZoom(), map.getCenter())
         view.hitTest(eventParamter).then((res: any) => {
           if (res.results && res.results.length > 0) {
             ctx.emit(
@@ -102,7 +108,11 @@ export default defineComponent({
         console.error('传入的坐标点不能为空')
         return
       }
-      map.setZoomAndCenter(zoom, [+x, +y, 0])
+      console.log('focus', x, y)
+
+      curMapType.value === '3D'
+        ? map.setZoomAndCenter(zoom, [+x, +y, 0])
+        : map.setZoomAndCenter(zoom, [+x, +y])
     }
 
     // 添加边界
@@ -129,6 +139,25 @@ export default defineComponent({
     function rotate(deg: number) {
       map.setRotation(deg)
     }
+    function cameraTo({
+      center = [0, 0],
+      heading = 180,
+      tilt = 45,
+    }: {
+      center: number[]
+      heading: number
+      tilt: number
+    }) {
+      // map.setPitch(60)
+      // map.setCenter(0, 0, 0)
+      // map.setRotation(180)
+
+      map.view.goTo({
+        // center,
+        heading,
+        tilt,
+      })
+    }
     // 将数据转换为符合地图的点数组
     function getMapPoints({
       data = [],
@@ -158,14 +187,11 @@ export default defineComponent({
             item.communityMiny || item.Y || item.y || item.gpsy,
             item.communityMinz || item.Z || item.z || item.gpsz || 0,
           ],
-          label: null,
-        }
-        if (labelKey) {
-          result.label = new SMap.Label({
-            text: (item[labelKey] || item[key]) + '',
+          label: new SMap.Label({
+            text: labelKey ? (item[labelKey] || item[key]) + '' : '',
             size,
             color,
-          })
+          }),
         }
         return new SMap.Marker(result)
       })
@@ -181,6 +207,7 @@ export default defineComponent({
     }: PointProp) {
       if (!map) return
       const points = getMapPoints({ data, key, labelKey, icon, size, color })
+      console.log(points)
       map.add(points)
       return points
     }
@@ -191,14 +218,43 @@ export default defineComponent({
       map.remove(points)
     }
 
+    // 添加线状覆盖物
+    function addPolyLine({
+      paths,
+      attributes = {},
+      strokeColor = 'rgba(51,145,255,.6)',
+      width = 2,
+    }: {
+      paths: any[]
+      attributes: any
+      strokeColor: string
+      width: number
+    }) {
+      const polyline = new SMap.Polyline({
+        path: paths.map((item: any) => new SMap.LngLat(item[0], item[1])),
+        attributes,
+        cap: 'square',
+        strokeColor,
+        style: 'solid',
+        lineJoin: 'round',
+        width,
+      })
+      map.add(polyline)
+      return polyline
+    }
+
     return {
+      initMap,
       focus,
+      layer,
       setBuildingBlock,
       hideCommunity,
       showCommunity,
       addBoundary,
       rotate,
+      cameraTo,
       addPoint,
+      addPolyLine,
       remove,
       setFilter,
     }

src/components/MyComponent/MyWave/my-wave.vue

@@ -8,8 +8,16 @@
       boxShadow: `0 0 .08rem 0 ${color} inset`,
     }"
   >
-    <div class="before" :style="{ top: `${percent}%`, background: color }" />
-    <div class="after" :style="{ top: `${percent}%`, background: color }" />
+    <div
+      v-if="value"
+      class="before"
+      :style="{ top: `${percent}%`, background: color }"
+    />
+    <div
+      v-if="value"
+      class="after"
+      :style="{ top: `${percent}%`, background: color }"
+    />
     <slot>
       <p><m-count :value="value" /> %</p>
     </slot>

src/components/MyComponent/main.styl

@@ -24,6 +24,7 @@ $primary-color = #47B3FF
 $secondary-color = #5BD5FF
 $primary-bg = rgba(49,94,139,.3)
 $primary-border = rgba(91,213,255,.5)
+$red = #CB1B45
 $blue = #2F86EE
 $yellow = #ffd400
 $green = #4F953B

src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import MyComponent from '@/components/MyComponent'
 import router from '@/router'
-import { Progress, Select, Input } from 'ant-design-vue'
+import { Progress, Select, Input, Tooltip, Checkbox } from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 import './assets/style/reset.styl'
 
@@ -12,4 +12,6 @@ createApp(App)
   .use(Progress)
   .use(Select)
   .use(Input)
+  .use(Tooltip)
+  .use(Checkbox)
   .mount('#app')

src/router/routes.ts

-import Main from '@/view/main.vue'
-import CommunityView from '@/view/community.vue'
+const Main = () => import('@/view/main.vue')
+const CommunityView = () => import('@/view/community.vue')
 
 export default [
   { name: 'main', path: '/', component: Main },

src/store/actions.ts

@@ -8,7 +8,7 @@ export default {
   initData({ dispatch }: { dispatch: Dispatch }): void {
     dispatch('getPropertySummary')
     dispatch('getCaseList')
-    // dispatch('GET_PUBLICSAFE_ECONOMIC')
+    // dispatch('GET_TODAYCASE')
   },
   // 物业三架马车数据 （缺交叉任职数）
   async getPropertySummary({ commit }: { commit: Commit }): Promise<void> {
@@ -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)
   },
   // 左侧公共 - 指挥体系
@@ -321,7 +321,7 @@ export default {
     const { content } = (
       await ajax.get({
         url: api.GET_COMBINE_LIST,
-        params: { bigscreenCommunityId: id },
+        params: { bigscreenCommunityId: id, pageSize: 1000 },
       })
     ).data
     commit('SET_COMBINE_DATA', content)
@@ -415,4 +415,169 @@ export default {
     ).data
     commit('SET_DUTY_RANKING', content)
   },
+  /** 公共管理 */
+  async GET_YOUSUBIDA_RANK({ commit }: { commit: Commit }): Promise<void> {
+    // 有诉必答 - 占比
+    const { content } = (await ajax.get({ url: api.GET_YOUSUBIDA_RANK })).data
+    // console.log(content, '有诉必答 - 占比')
+    commit('SET_YOUSUBIDA_RANK', content)
+  },
+  async GET_YOUSUBIDA_CLASSIFICATION_RANK(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    managementType: string
+  ): Promise<void> {
+    // 有诉必答 - 分类排行
+    const { content } = (
+      await ajax.get({
+        url: api.GET_YOUSUBIDA_CLASSIFICATION_RANK,
+        params: { managementType: managementType },
+      })
+    ).data
+    // console.log(content, '有诉必答 - 分类排行')
+    commit('SET_YOUSUBIDA_CLASSIFICATION_RANK', content)
+  },
+  async GET_URGENTCASE(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 有诉必答 - 紧急案件
+    const { content } = (
+      await ajax.get({
+        url: api.GET_URGENTCASE,
+        params,
+      })
+    ).data
+    // console.log(content, '有诉必答 - 紧急案件')
+    commit('SET_URGENTCASE', content)
+  },
+  async GET_TODAYCASE(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 有求必应 - 今日案件数
+    const { content } = (
+      await ajax.get({
+        url: api.GET_TODAYCASE,
+        params,
+      })
+    ).data
+    // console.log(content, '有求必应 - 今日案件数')
+    commit('SET_TODAYCASE', content)
+  },
+  async GET_STAGECASE(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 有求必应 - 各阶段案件数
+    const { content } = (
+      await ajax.get({
+        url: api.GET_STAGECASE,
+        params,
+      })
+    ).data
+    // console.log(content, '有求必应 - 各阶段案件数')
+    commit('SET_STAGECASE', content)
+  },
+  async GET_WORKSTATION(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 有求必应 - 工作站分类
+    const { content } = (
+      await ajax.get({
+        url: api.GET_WORKSTATION,
+        params,
+      })
+    ).data
+    // console.log(content, '有求必应 - 工作站分类')
+    commit('SET_WORKSTATION', content)
+  },
+  async GET_TRACKEVENT(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 有求必应 - 事件跟踪
+    const { content } = (
+      await ajax.get({
+        url: api.GET_TRACKEVENT,
+        params,
+      })
+    ).data
+    // console.log(content, '有求必应 - 事件跟踪')
+    commit('SET_TRACKEVENT', content)
+  },
+  async GET_CASE_CLASSIFICATION_RANK(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 案件分析 - 分类排行
+    const { content } = (
+      await ajax.get({
+        url: api.GET_CASE_CLASSIFICATION_RANK,
+        params,
+      })
+    ).data
+    // console.log(content, '案件分析 - 分类排行')
+    commit('SET_CASE_CLASSIFICATION_RANK', content)
+  },
+  async GET_MOREHAPPEN_ADDR(
+    {
+      commit,
+    }: {
+      commit: Commit
+    },
+    params: {
+      [key: string]: string
+    }
+  ): Promise<void> {
+    // 案件分析 - 多发地点
+    const { content } = (
+      await ajax.get({
+        url: api.GET_MOREHAPPEN_ADDR,
+        params,
+      })
+    ).data
+    // console.log(content, '案件分析 - 多发地点')
+    commit('SET_MOREHAPPEN_ADDR', content)
+  },
 }

src/store/index.ts

@@ -45,6 +45,14 @@ export interface DutySumProp {
   communityNum: number //小区管理数量
 }
 
+export interface YousubidaRankProp {
+  comprehensiveNum: 0 //综合数量
+  comprehensiveDispatchNum: 0 //综合派遣数量
+  streetNum: 0 //街道数量
+  streetDispatchNum: 0 //街道派遣数量
+  communityDispatchNum: 0 //小区数量
+  communityNum: 0 //小区派遣数量
+}
 export interface DutyDataProp {
   week: { [key: string]: unknown }[]
   month: { [key: string]: unknown }[]
@@ -55,13 +63,19 @@ export interface DutyDataProp {
 export interface GlobalStateProps {
   showLoading: boolean
   curView: ViewType
+  curMapType: string
+  readonly zhenxing: any
+  readonly weihai: any
+  readonly workArea1: any
+  readonly workArea2: any
+  readonly workArea3: any
   readonly viewOptions: ViewType[]
   readonly communityOptions: ViewType[]
   curTheme: ThemeType
   propertySummary: { [key: string]: number }
   caseList: unknown[]
-  pubulicSafeGateSenteryShehuiwuye: { [key: string]: number }
-  pubulicSafeGateSenteryZhiguangongfang: { [key: string]: number }
+  pubulicSafeGateSenteryShehuiwuye: { [key: string]: number }[]
+  pubulicSafeGateSenteryZhiguangongfang: { [key: string]: number }[]
   pubulicSafeMap: unknown[]
   pubulicSafeTruePeople: { [key: string]: number }
   pubulicSafeHouse: { [key: string]: any }
@@ -91,7 +105,19 @@ export interface GlobalStateProps {
   dutyEvents: Partial<DutyDataProp>
   dutyPlaces: Partial<DutyDataProp>
   dutyRanking: Partial<DutyDataProp>
+
+  /** 公共管理 */
+  yousubidaRank: Partial<YousubidaRankProp>
+  classificationRank: any[]
+  urgentCase: any[]
+  todayCase: { [key: string]: number }
+  stageCase: { [key: string]: number }
+  workstationKind: { [key: string]: number }
+  trackEvent: any[]
+  analysisRank: Partial<DutyDataProp>
+  moreHappenAddr: Partial<DutyDataProp>
 }
+
 export default createStore<GlobalStateProps>({
   state,
   mutations,

src/store/mutations.ts

@@ -7,12 +7,16 @@ import {
   CombineProp,
   DutySumProp,
   DutyDataProp,
+  YousubidaRankProp,
 } from './index'
 
 export default {
   SET_LOADING(state: GlobalStateProps, val: boolean): void {
     state.showLoading = val
   },
+  SET_MAP_TYPE(state: GlobalStateProps, val: string): void {
+    state.curMapType = val
+  },
   SET_CURRENT_VIEW(state: GlobalStateProps, val: ViewType): void {
     state.curView = val
   },
@@ -181,4 +185,56 @@ export default {
   SET_DUTY_RANKING(state: GlobalStateProps, data: DutyDataProp): void {
     state.dutyRanking = data
   },
+  /** 公共管理 */
+  // 有诉必答-占比
+  SET_YOUSUBIDA_RANK(state: GlobalStateProps, data: YousubidaRankProp): void {
+    state.yousubidaRank = data
+  },
+  // 有诉必答-分类排行
+  SET_YOUSUBIDA_CLASSIFICATION_RANK(
+    state: GlobalStateProps,
+    data: unknown[]
+  ): void {
+    state.classificationRank = data
+  },
+  // 有诉必答-紧急案件
+  SET_URGENTCASE(state: GlobalStateProps, data: unknown[]): void {
+    state.urgentCase = data
+  },
+  // 有求必应-今日案件数
+  SET_TODAYCASE(
+    state: GlobalStateProps,
+    data: { [key: string]: number }
+  ): void {
+    state.todayCase = data
+  },
+  // 有求必应-各阶段案件数
+  SET_STAGECASE(
+    state: GlobalStateProps,
+    data: { [key: string]: number }
+  ): void {
+    state.stageCase = data
+  },
+  // 有求必应-工作站分类
+  SET_WORKSTATION(
+    state: GlobalStateProps,
+    data: { [key: string]: number }
+  ): void {
+    state.workstationKind = data
+  },
+  // 有求必应-事件跟踪
+  SET_TRACKEVENT(state: GlobalStateProps, data: unknown[]): void {
+    state.trackEvent = data
+  },
+  // 有求必应-分类排行
+  SET_CASE_CLASSIFICATION_RANK(
+    state: GlobalStateProps,
+    data: DutyDataProp
+  ): void {
+    state.analysisRank = data
+  },
+  // 有求必应-多发地点
+  SET_MOREHAPPEN_ADDR(state: GlobalStateProps, data: DutyDataProp): void {
+    state.moreHappenAddr = data
+  },
 }

src/store/state.ts

@@ -2,6 +2,7 @@ import { GlobalStateProps } from './index'
 
 export default {
   showLoading: false,
+  curMapType: '2D',
   curView: { name: '南京东路街道', type: 'street' },
   viewOptions: [
     { name: '南京东路街道', type: 'street' },
@@ -14,11 +15,169 @@ export default {
     { name: '威海路62弄', type: '527635870583459841' },
   ],
   curTheme: 'manage',
+  zhenxing: {
+    paths: [
+      [-394.9643478722986, -682.7008812875049],
+      [-392.71331797961386, -676.0304740664822],
+      [-388.88512021905166, -669.9078381232936],
+      [-381.1708469780052, -664.8890129814765],
+      [-326.4453957302277, -658.5038602372127],
+      [-304.60275764390985, -657.5571461042011],
+      [-225.16351998939285, -654.7707473022369],
+      [-219.35507738292432, -655.8352839365185],
+      [-214.4437394352484, -657.6770356668969],
+      [-209.1231233252662, -662.528428833225],
+      [-206.0307994322851, -666.8341177831445],
+      [-153.432354391645, -823.1866440298637],
+      [-153.70313943842342, -829.8508500666092],
+      [-155.41259923755138, -834.0573200680908],
+      [-159.34001594655143, -838.5593798534603],
+      [-164.15006788436364, -840.605770664992],
+      [-322.5944602939818, -861.0696787803082],
+      [-330.93505314704254, -859.6227357822555],
+      [-337.9630619947269, -851.2986794206012],
+      [-368.02640337140963, -789.8986868289493],
+      [-382.76455133728894, -745.7689924497688],
+      [-394.9147383980797, -686.646901549337],
+      [-394.9643478722986, -682.7008812875049],
+    ],
+  },
+  weihai: {
+    paths: [
+      [-195.08054152916526, -563.6474449384453],
+      [-162.7258625619948, -623.3421118538208],
+      [-133.68985071392945, -603.4838527362609],
+      [-168.5456740063052, -546.0991269642052],
+      [-195.08054152916526, -563.6474449384453],
+    ],
+  },
+  workArea1: {
+    workStation: {
+      name: '第一',
+      address: '武胜路481号',
+      x: -136.67,
+      y: -660.07,
+    },
+    id: '01001',
+    center: [361.095476, -559.449126],
+    paths: [
+      [-448.329953822261, -293.460812442785],
+      [-431.7521211874291, -671.2658974800385],
+      [-424.4347237401342, -721.1895650357069],
+      [-398.89824688593046, -803.6322429418965],
+      [-365.2547551197802, -867.1158334507442],
+      [-392.5813071687177, -874.8011678318296],
+      [-403.0902474574316, -1077.6749785273678],
+      [-353.7288206095779, -1071.1265279304666],
+      [-235.53838240578477, -1022.8565095154296],
+      [-110.56798272540209, -1153.1351229372399],
+      [-93.69249324525651, -1138.2894877772196],
+      [-68.09400454827903, -1119.6983373136686],
+      [108.32141989715319, -1078.5720831861604],
+      [162.94558513506695, -1051.8780519335146],
+      [319.4097326987787, -1005.952081175323],
+      [764.5059353911838, -763.8371763725968],
+      [632.5075268631167, -531.321704831237],
+      [456.02595645205906, -245.14531867638112],
+      [265.6661356282508, 118.08284918620457],
+      [171.38332987513922, 95.29556402830092],
+      [107.25481620144524, 61.96213147601915],
+      [43.56451955001853, 9.376088803933783],
+      [6.621997748308331, -34.25957789448293],
+      [-61.673711759777404, 39.489039654835494],
+      [-84.91161630850314, 43.66450373493032],
+      [-117.17844516507756, 35.95023049388385],
+      [-268.3674519701745, -19.099749397742613],
+      [-336.6383567411507, -44.7065063404232],
+      [-412.38375562778185, -44.284825809562136],
+      [-452.45167430528585, -55.794223828358156],
+      [-462.21647248071554, -56.90216875258136],
+      [-480.70426987297697, -84.93978993199039],
+      [-448.329953822261, -293.460812442785],
+    ],
+  },
+  workArea2: {
+    workStation: {
+      name: '第二',
+      address: '',
+      x: 382.4793321452691,
+      y: 678.9654976442117,
+    },
+    id: '01002',
+    center: [1291.532466, 175.263969],
+    paths: [
+      [62.564369398678764, 740.5887328698475],
+      [137.63177213765096, 581.9293660719472],
+      [265.9218724678516, 118.00636791345084],
+      [633.5446129216658, -540.7909132227782],
+      [1009.9399620665309, -314.1334937621058],
+      [1093.7138275309285, -280.9447555096293],
+      [964.1008078882224, 10.568783246614885],
+      [884.0476529902461, -20.486747614446926],
+      [826.2691520165776, 82.29581472151119],
+      [899.6994421063242, 120.57779232713301],
+      [826.2278107880617, 251.71216917922004],
+      [705.7015931731263, 615.2007867814553],
+      [689.5206363320461, 675.2447870777893],
+      [684.3364462761659, 756.2487902316288],
+      [534.3504692208784, 845.4714296144077],
+      [483.33539323239313, 867.770888275825],
+      [418.098934634476, 876.5269604754694],
+      [339.3025530833796, 879.3795052430589],
+      [278.7872627819655, 867.1094286195723],
+      [216.4694949172632, 843.7681709995571],
+      [158.20316744710817, 810.0089237935626],
+      [69.50142754362844, 745.9134831026813],
+      [62.564369398678764, 740.5887328698475],
+    ],
+  },
+  workArea3: {
+    workStation: {
+      name: '第三',
+      address: '',
+      x: -57.84609277641425,
+      y: 261.561716873108,
+    },
+    center: [609.931363, 342.166777],
+    id: '01003',
+    paths: [
+      [-827.6197677404292, 863.6615701613555],
+      [-708.507420140734, 529.087007783064],
+      [-544.6473267955473, 184.59055056098282],
+      [-523.8857618349174, 124.25716166503844],
+      [-451.3484422811116, -294.9842367135918],
+      [-152.79862643148, -277.8524316166481],
+      [-122.5120424208119, -268.7160201146585],
+      [-84.99074341988057, -211.12768879216264],
+      [-63.923253368233645, -138.51595502702844],
+      [-34.306397259521646, -87.17841745611986],
+      [38.478969665379054, 8.683623226294912],
+      [107.08887251018473, 60.05423378001592],
+      [158.0543390244511, 92.77168202741245],
+      [264.45839297839234, 119.5525298599415],
+      [171.40755583505143, 467.1165062378942],
+      [134.7709591243579, 587.717138064158],
+      [81.23406819640945, 702.8193864978215],
+      [60.116968670543656, 737.5046772225696],
+      [-52.52134254357884, 666.753298740646],
+      [-117.37746183915078, 641.493808117498],
+      [-151.4095611533494, 632.9609785518389],
+      [-186.334631003489, 628.7524414889315],
+      [-237.86233822557006, 637.5911961456075],
+      [-301.7758775109821, 657.7822521527194],
+      [-467.37230245383194, 765.9722471785428],
+      [-527.2261330989933, 795.6221762700677],
+      [-676.0132145273228, 855.6165670921827],
+      [-733.4857904099746, 866.563724403164],
+      [-791.5950212117696, 868.8044189887198],
+      [-827.6197677404292, 863.6615701613555],
+    ],
+  },
   propertySummary: {},
   caseList: [],
   stationInfo: {},
-  pubulicSafeGateSenteryShehuiwuye: {},
-  pubulicSafeGateSenteryZhiguangongfang: {},
+  pubulicSafeGateSenteryShehuiwuye: [],
+  pubulicSafeGateSenteryZhiguangongfang: [],
   pubulicSafeMap: [],
   pubulicSafeTruePeople: {},
   pubulicSafeHouse: {},
@@ -43,4 +202,13 @@ export default {
   dutyEvents: { day: [], week: [], month: [] },
   dutyPlaces: { day: [], week: [], month: [] },
   dutyRanking: { day: [], week: [], month: [] },
+  yousubidaRank: {},
+  classificationRank: [],
+  urgentCase: [],
+  todayCase: {},
+  stageCase: {},
+  workstationKind: {},
+  trackEvent: [],
+  analysisRank: { day: [], week: [], month: [] },
+  moreHappenAddr: { day: [], week: [], month: [] },
 } as GlobalStateProps

src/view/community/community-photo.vue

@@ -24,6 +24,7 @@ import photo2 from '@/assets/images/community2.png'
 import photo3 from '@/assets/images/community3.png'
 import { ajax } from '@/ajax'
 import VideoComponent from '../components/video-component.vue'
+import video from '@/assets/images/video.mp4'
 
 export default defineComponent({
   name: 'CommunityPhoto',
@@ -32,34 +33,37 @@ export default defineComponent({
     const showModal = ref(false)
     const src = ref<string | null>(null)
     const handleClick = async (id: string) => {
-      const [{ remark2 }] = (
-        await ajax.get({
-          url: `http://10.39.25.33:81/njdl/imp/pc/njdl/equipment/getEquipmentVideoById?id=${id}`,
-        })
-      ).data
-      src.value = remark2
+      // if (!id) return
+      // const [{ remark2 }] = (
+      //   await ajax.get({
+      //     url: `http://10.39.25.33:81/njdl/imp/pc/njdl/equipment/getEquipmentVideoById?id=${id}`,
+      //   })
+      // ).data
+      // src.value = remark2
+      src.value =
+        'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5KNmAWXGgAfLx1DPNngc885.mp4'
       showModal.value = true
     }
     return {
       list: [
-        // { name: '重庆北路205号入口', photo: photo1 },
-        // { name: '重庆北路205号道路', photo: photo2 },
-        // { name: '重庆北路205号电梯', photo: photo3 },
-        {
-          name: '威海路163',
-          photo: photo1,
-          id: '05e1a5f24a224d66955ba2d22d6f64d3',
-        },
-        {
-          name: '威海路167',
-          photo: photo2,
-          id: 'fc82739cb3354262850c715aa9098c83',
-        },
-        {
-          name: '成都北路140',
-          photo: photo3,
-          id: '3c23b0ecd6bb4d73842617010a84cbcf',
-        },
+        { name: '重庆北路205号入口', photo: photo1 },
+        { name: '重庆北路205号道路', photo: photo2 },
+        { name: '重庆北路205号电梯', photo: photo3 },
+        // {
+        //   name: '威海路163',
+        //   photo: photo1,
+        //   id: '05e1a5f24a224d66955ba2d22d6f64d3',
+        // },
+        // {
+        //   name: '威海路167',
+        //   photo: photo2,
+        //   id: 'fc82739cb3354262850c715aa9098c83',
+        // },
+        // {
+        //   name: '成都北路140',
+        //   photo: photo3,
+        //   id: '3c23b0ecd6bb4d73842617010a84cbcf',
+        // },
       ],
       handleClick,
       showModal,

src/view/community/left-section.vue

@@ -45,14 +45,16 @@
           :style="`border-left-color: ${getColor(item.classification)}`"
         >
           <div>
-            <img :src="getIcon(item.relationName)" />
-            <p>{{ item.sectName }}</p>
-          </div>
-          <div class="type">
-            <span>{{ item.relationName }}</span>
-            <span>{{ item.classification }}</span>
+            <div>
+              <img :src="getIcon(item.relationName)" />
+              <p>{{ item.sectName }}</p>
+            </div>
+            <div class="type">
+              <span>{{ item.relationName }}</span>
+              <span>{{ item.classification }}</span>
+            </div>
+            <i :style="`background:${getColor(item.classification)}`" />
           </div>
-          <i :style="`background:${getColor(item.classification)}`" />
         </div>
       </div>
       <div v-show="memberList.length > 0" class="industry">
@@ -146,9 +148,9 @@ export default defineComponent({
     )
     const getColor = (type: string): string => {
       switch (type) {
-        case '门岗':
+        case '摄像头':
           return '#826AFA'
-        case '为老':
+        case '为老设施':
           return '#FF6161'
         case '小区设施':
           return '#8ED617'
@@ -159,7 +161,7 @@ export default defineComponent({
     const getIcon = (type: string): string => {
       if (!type) return type2
       if (type.indexOf('集合') >= 0) return type3
-      if (type.indexOf('助餐') >= 0) return type6
+      if (type.indexOf('餐') >= 0) return type6
       if (type.indexOf('助浴') >= 0) return type7
       if (type.indexOf('充电') >= 0) return type1
       if (type.indexOf('车棚') >= 0) return type5
@@ -184,7 +186,7 @@ export default defineComponent({
       addrList.value = (
         await ajax.get({
           url: api.GET_COMMUNITY_FACILITY,
-          params: { sectId: id },
+          params: { sectId: id, pageSize: 1000 },
         })
       ).data.content.filter((item: any) => item.classification != '微更新')
       memberList.value =
@@ -193,7 +195,7 @@ export default defineComponent({
           (buildingList.value.find(
             (b: any) => b.sectId === curBuilding.value
           ) as any)
-        ).icMember || []
+        ).icMember.sort((a: any, b: any) => +a.dirDuty - +b.dirDuty) || []
     }
     return {
       healthVal,
@@ -289,38 +291,23 @@ export default defineComponent({
         opacity .2
         box-shadow 0 0 .05rem .02rem $edge
 .address
-  display flex
-  flex-wrap wrap
-  flex 1
+  // display flex
+  // flex-wrap wrap
+  height 3rem
+  overflow-y auto
   >div
-    display flex
-    flex-direction column
-    justify-content space-around
-    width 48.2%
+    display inline-block
+    width 48%
+    height .6rem
+    margin-bottom .06rem
+    margin-right @margin-bottom
+    overflow hidden
     padding .03rem .05rem
     box-sizing border-box
     position relative
-    margin-bottom .06rem
-    margin-right @margin-bottom
     background rgba(33,58,89,.2)
     border .01rem solid rgba(91,213,255,.1)
     border-left .02rem solid transparent
-    overflow hidden
-    height .6rem
-    >div
-      display flex
-      align-items center
-      p
-        color #aaa
-        flex 1
-      img
-        width .15rem
-        height @width
-        margin-right .1rem
-    .type
-      display flex
-      justify-content space-between
-      font-size .08rem
     i
       position absolute
       right -0.1rem
@@ -329,6 +316,26 @@ export default defineComponent({
       height .2rem
       transform rotate(45deg)
       opacity .4
+    >div
+      display flex
+      width 100%
+      height 100%
+      flex-direction column
+      justify-content space-around
+      >div
+        display flex
+        align-items center
+        p
+          color #aaa
+          flex 1
+        img
+          width .15rem
+          height @width
+          margin-right .1rem
+      .type
+        display flex
+        justify-content space-between
+        font-size .08rem
 .industry
   .title
     display flex

src/view/community/manage-issue.vue

@@ -18,7 +18,7 @@
           :value="item.value"
           type="dashboard"
           :show-info="false"
-          :color="[getColor(item.value), '#FF0C0C']"
+          :color="[getColor(item.value), '#F76B1C']"
           :rate="1.2"
           :stroke-width="8"
           :gap-degree="100"
@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import { ChartTypes } from '@/components/MyComponent'
 import Circle from '../components/circle.vue'
 import store from '@/store'
@@ -121,11 +121,11 @@ export default defineComponent({
       },
     })
     const issues = ref([
-      { name: '绿化面积㎡', value: 658 },
-      { name: '监控点位', value: 28 },
-      { name: '垃圾箱房', value: 15 },
-      { name: '非机动车位', value: 150 },
-      { name: '物业服务人员', value: 168 },
+      { name: '充电桩', value: 3 },
+      { name: '监控点位', value: 30 },
+      { name: '垃圾箱房', value: 5 },
+      { name: '停车棚', value: 3 },
+      { name: '物业公司', value: 4 },
     ])
     return {
       counts,

src/view/components/brief.vue

@@ -58,10 +58,11 @@ export default defineComponent({
 .brief-container
   display flex
   align-items center
+  white-space nowrap
   .count
-    font-size .12rem
+    font-size .11rem
     &.yellow
-      font-size .14rem
+      font-size .13rem
       color $yellow
   >div
     display flex

src/view/components/map-btns.vue

 <template>
   <div class="map-btns" :class="{ full: fullScreen }">
-    <img
-      v-for="btn in btns"
-      :key="btn.key"
-      :src="btn.icon"
-      draggable="false"
-      @click="handleClick(btn.key)"
-    />
+    <!-- <a-checkbox-group :option="options" @change="handleChange" /> -->
+    <template v-for="btn in btns">
+      <a-tooltip v-if="btn.key === 'home'" :key="btn.key" placement="right">
+        <img :key="btn.key" :src="btn.icon" draggable="false" />
+        <template v-if="options.length > 0" #title>
+          <div class="btns-tip">
+            <a-checkbox-group
+              v-model:value="checkboxValues"
+              :options="options"
+              @change="handleChange"
+            />
+          </div>
+        </template>
+      </a-tooltip>
+      <img
+        v-else
+        :key="btn.key"
+        :src="btn.icon"
+        draggable="false"
+        @click="handleClick(btn.key)"
+      />
+    </template>
   </div>
   <m-modal v-model="searchModal" title="搜索">
     <div id="modal-search-bar">
@@ -45,31 +60,46 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import btn1 from '@/assets/images/map-btn1.png'
 import btn2 from '@/assets/images/map-btn2.png'
 import btn3 from '@/assets/images/map-btn3.png'
 import btn4 from '@/assets/images/map-btn4.png'
 import btn5 from '@/assets/images/map-btn5.png'
 import btn6 from '@/assets/images/map-btn6.png'
+import d2 from '@/assets/images/2d.png'
+import d3 from '@/assets/images/3d.png'
 import store from '@/store'
 
 export default defineComponent({
   name: 'MapBtns',
-  emits: ['full'],
+  emits: ['full', 'change'],
   setup(_, ctx) {
-    const btns = ref([
-      { key: 'search', icon: btn1 },
-      { key: 'full', icon: btn2 },
-      { key: '', icon: btn3 },
-      { key: '', icon: btn4 },
-      { key: '', icon: btn5 },
-      { key: '', icon: btn6 },
-    ])
+    const btns = computed(() => {
+      const mapType =
+        store.state.curMapType === '2D'
+          ? { key: '3D', icon: d3 }
+          : { key: '2D', icon: d2 }
+      const list = [
+        { key: 'search', icon: btn1 },
+        { key: 'full', icon: btn2 },
+        { key: 'home', icon: btn3 },
+        { key: '', icon: btn4 },
+        { key: '', icon: btn5 },
+        // { key: '', icon: btn6 },
+      ]
+      return [mapType, ...list]
+    })
     const fullScreen = ref(false)
     const searchModal = ref(false)
     const handleClick = (key: string) => {
       switch (key) {
+        case '3D':
+          store.commit('SET_MAP_TYPE', key)
+          break
+        case '2D':
+          store.commit('SET_MAP_TYPE', key)
+          break
         case 'full':
           fullScreen.value = !fullScreen.value
           ctx.emit('full', fullScreen.value)
@@ -84,6 +114,27 @@ export default defineComponent({
     const searchType = ref('case')
     const searchKey = ref('')
     const caseList = computed(() => store.state.caseList)
+    const options = computed(() => {
+      if (store.state.curView.type === 'street') {
+        return [
+          { label: '第一工作站', value: 'workArea1' },
+          { label: '第二工作站', value: 'workArea2' },
+          { label: '第三工作站', value: 'workArea3' },
+          { label: '振兴小区', value: 'zhenxing' },
+          { label: '威海路62弄', value: 'weihai' },
+        ]
+      }
+      return []
+    })
+    const checkboxValues = ref([])
+    const handleChange = (e: any) => {
+      ctx.emit('change', e)
+      checkboxValues.value = e
+    }
+    watch(
+      [() => store.state.curView.type, () => store.state.curMapType],
+      () => (checkboxValues.value = [])
+    )
     return {
       btns,
       fullScreen,
@@ -92,6 +143,9 @@ export default defineComponent({
       searchType,
       searchKey,
       caseList,
+      options,
+      checkboxValues,
+      handleChange,
     }
   },
 })
@@ -102,7 +156,11 @@ export default defineComponent({
 
 $border = .01rem solid rgba(91,213,255,.3)
 $bg = rgba(6,34,67,.4)
-
+.btns-tip *
+  color #fff !important
+  font-size .1rem
+  .ant-checkbox-group-item
+    display block
 #modal-search-bar
   width 100%
   position relative

src/view/components/video-component.vue

 <template>
   <div class="video-component">
     <video
-      v-if="isVideo"
+      v-if="isM3U8"
       ref="videoRef"
       class="video"
       autoplay="autoplay"
@@ -9,6 +9,9 @@
     >
       您的浏览器不支持播放此视频。
     </video>
+    <video v-else-if="isMP4" class="video" autoplay="autoplay" controls>
+      <source :src="videoSrc" type="video/mp4" />
+    </video>
     <iframe v-else class="video" :src="videoSrc" frameborder="0" />
   </div>
 </template>
@@ -34,9 +37,12 @@ export default defineComponent({
   },
   setup(props) {
     const videoRef = ref<any | null>(null)
-    const isVideo = computed(
+    const isM3U8 = computed(
       () => props.videoSrc && props.videoSrc.indexOf('m3u8') >= 0
     )
+    const isMP4 = computed(
+      () => props.videoSrc && props.videoSrc.indexOf('mp4') >= 0
+    )
     const init = () => {
       if (!videoRef.value) return
 
@@ -55,12 +61,14 @@ export default defineComponent({
       }
     }
     onMounted(async () => {
+      if (!isM3U8.value) return
       await nextTick()
       init()
     })
     return {
       videoRef,
-      isVideo,
+      isM3U8,
+      isMP4,
     }
   },
 })

src/view/hooks/useSwitchMap.ts

+import { ref, watch, computed } from 'vue'
+import { ajax, api } from '@/ajax'
+import store from '@/store'
+
+export default function useSwitchMap(map: any) {
+  const curMapType = computed(() => store.state.curMapType)
+  const curViewType = computed(() => store.state.curView.type)
+  watch(
+    () => curMapType.value,
+    (type) => {
+      if (!map.value) return
+      map.value.initMap({ viewMode: type })
+    },
+    { immediate: true }
+  )
+  watch(
+    () => curViewType.value,
+    (type) => {
+      setPoints(type)
+      if (areaLines.value && areaLines.value.length > 0) {
+        map.value.remove(areaLines.value)
+      }
+      if (curMapType.value === '2D') return
+      store.commit('SET_MAP_TYPE', '2D')
+    }
+  )
+
+  // 根据条件显示小区点
+  function setPoints(type: string) {
+    switch (type) {
+      case 'work1':
+        showPoints({ gridId: store.state.workArea1.id })
+        map.value.focus(...store.state.workArea1.center, 7.660867453405492)
+        break
+      case 'work2':
+        showPoints({ gridId: store.state.workArea2.id })
+        map.value.focus(...store.state.workArea2.center, 7)
+        break
+      case 'work3':
+        showPoints({ gridId: store.state.workArea3.id })
+        map.value.focus(...store.state.workArea3.center, 7)
+        break
+      case 'street':
+        showPoints()
+        map.value.focus(990.973466, 10.295931, 7)
+        // map.value.focus(1019.614669, 54.167243, 6.5)
+        break
+      default:
+        break
+    }
+  }
+  async function showPoints(params = {}) {
+    const { content } = (
+      await ajax.get({ url: api.GET_COMMUNITY_IDS, params })
+    ).data
+    map.value.setFilter(content)
+    map.value.showCommunity()
+  }
+
+  const handleMapComplete = async () => {
+    map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
+    setPoints(curViewType.value)
+    if (curMapType.value === '3D') {
+      if (curViewType.value === 'work1') {
+        map.value.layer('model_white_zw').visible = false
+        map.value.layer('model_white_dyjd').visible = true // 第一街道名
+      } else {
+        map.value.layer('model_white_zw').visible = true
+        map.value.layer('model_white_dyjd').visible = false
+      }
+    }
+  }
+
+  // 工作站勾边
+  const areaLines = ref([])
+  const selectArea = (e: any) => {
+    map.value.remove(areaLines.value)
+    areaLines.value = e.map(
+      (
+        name:
+          | 'workArea1'
+          | 'workArea2'
+          | 'workArea3'
+          | 'zhenxing'
+          | 'weihai'
+          | null
+      ) => {
+        if (!name) return
+        let color = '#FF6161'
+        if (name.indexOf('workArea') >= 0) {
+          color = '#FFCE34'
+        }
+        return map.value.addPolyLine({
+          paths: store.state[name].paths,
+          strokeColor: color,
+        })
+      }
+    )
+  }
+  return {
+    handleMapComplete,
+    selectArea,
+  }
+}

src/view/main.vue

@@ -5,7 +5,7 @@
     rows="0.4rem auto"
     gap="0.05rem"
   >
-    <m-title area="title" @click="showDrawer = false">南东城运</m-title>
+    <m-title area="title">南东城运</m-title>
     <m-map ref="map" @complete="handleMapComplete" />
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
       <Command v-show="'street' === curViewType && !fullScreen" area="left" />
@@ -38,7 +38,7 @@
       />
     </m-animate>
     <ViewSelector />
-    <MapBtns @full="fullScreen = $event" />
+    <MapBtns @change="selectArea" @full="fullScreen = $event" />
     <m-drawer v-model="showDrawer">
       <CaseDrawer />
       <!-- <PopulationDrawer /> -->
@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
+import { computed, defineComponent, onMounted, ref, nextTick } from 'vue'
 import ManageBasic from './left/manage-basic.vue'
 import Command from './left/command.vue'
 import PublicWork from './right/public-work.vue'
@@ -59,6 +59,7 @@ import MapBtns from './components/map-btns.vue'
 import CaseDrawer from './drawers/case-drawer.vue'
 import PopulationDrawer from './drawers/population-drawer.vue'
 import store from '@/store'
+import useSwitchMap from './hooks/useSwitchMap'
 
 export default defineComponent({
   name: 'Main',
@@ -75,7 +76,6 @@ export default defineComponent({
     PopulationDrawer,
   },
   setup() {
-    // store.commit('SET_CURRENT_VIEW', { name: '南京东路街道', type: 'street' })
     store.dispatch('initData')
     const curViewType = computed(() => store.state.curView.type)
     const curTheme = computed(() => store.state.curTheme)
@@ -96,41 +96,20 @@ export default defineComponent({
     const fullScreen = ref(false)
     const showDrawer = ref(false)
     const map = ref<any>(null)
-    const mapInstance = ref<any>(null)
-
-    // watch(
-    //   () => curViewType.value,
-    //   (val) => {
-    //     if (!val || !mapInstance.value) return
-    //     if (val === 'work1') {
-    //       mapInstance.value.getLayer('model_white_dyjd').visible = true // 第一街道名
-    //       mapInstance.value.getLayer('model_white_dyjd').opacity = 0.8
-    //       mapInstance.value.getLayer('model_white_zw').visible = false
-    //     } else {
-    //       mapInstance.value.getLayer('model_white_zw').visible = true
-    //       mapInstance.value.getLayer('model_white_zw').opacity = 0.8
-    //     }
-    //   },
-    //   { immediate: true }
-    // )
-
-    const handleMapComplete = (instance: any) => {
-      instance.getLayer('model_white_dyjd').visible = true
-      instance.getLayer('model_white_dyjd').opacity = 0.8
-      // instance.getLayer('model_white_zw').visible = true
-      // instance.getLayer('model_white_zw').opacity = 0.8
-      map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
-      mapInstance.value = instance
-    }
+    onMounted(async () => {
+      await nextTick()
+      map.value.initMap({ viewMode: '2D' })
+    })
+    const { handleMapComplete, selectArea } = useSwitchMap(map)
     return {
       map,
-      mapInstance,
       curViewType,
       curTheme,
       streetComponentList,
       fullScreen,
       showDrawer,
       handleMapComplete,
+      selectArea,
     }
   },
 })

src/view/right/business-entry.vue

 <template>
   <!-- <m-card title="业务入口"> -->
-  <m-card title="重点工作">
+  <m-card title="业务入口">
     <div class="content">
       <div
         v-for="entry in entrys"

src/view/right/case-analysis.vue

@@ -2,29 +2,32 @@
   <m-card title="案件分析">
     <div class="nav">
       <div>
-        <Tabs :list="tabs" horizontal />
+        <Tabs :list="tabs" horizontal @select="curTab = $event" />
       </div>
       <div>
         <span
           v-for="option in options"
-          :key="option"
-          :class="{ on: curOption === option }"
-          @click="curOption = option"
+          :key="option.key"
+          :class="{ on: curOption === option.key }"
+          @click="curOption = option.key"
         >
-          {{ option }}
+          {{ option.name }}
         </span>
       </div>
     </div>
     <div class="rank">
       <SubTitle>分类排行</SubTitle>
-      <div class="content">
-        <m-progress
-          v-for="rank in rankList"
-          :key="rank.name"
-          :value="rank.value"
-          :msg="rank"
-        />
+      <div v-if="rankList.length > 0" class="content">
+        <m-scroll :length="rankList.length" :limit="4">
+          <m-progress
+            v-for="rank in rankList"
+            :key="rank.name"
+            :value="rank.rate"
+            :msg="rank"
+          />
+        </m-scroll>
       </div>
+      <m-empty v-else />
     </div>
     <div class="place">
       <SubTitle>多发地点</SubTitle>
@@ -38,44 +41,66 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, computed, watch } from 'vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
 import SubTitle from '../components/sub-title.vue'
 import Place, { PlaceProp } from '../components/place.vue'
-
+import store from '@/store'
 export default defineComponent({
   name: 'CaseAnalysis',
   components: { Tabs, SubTitle, Place },
   setup() {
+    const curTab = ref('综合')
     const tabs = ref<TabsProp[]>([
-      {
-        key: 'all',
-        name: '综合管理',
-      },
-      {
-        key: 'street',
-        name: '街面管理',
-      },
-      {
-        key: 'community',
-        name: '小区管理',
-      },
-    ])
-    const options = ref(['日', '周', '月'])
-    const curOption = ref('月')
-    const rankList = ref([
-      { name: '分类1', value: 50 },
-      { name: '分类2', value: 31 },
-      { name: '分类3', value: 15 },
+      { name: '综合管理', key: '综合' },
+      { name: '街面管理', key: '街面' },
+      { name: '小区管理', key: '小区' },
     ])
-    const placeList = ref<PlaceProp[]>([
-      { name: '延安东路1292弄', value: 3, type: '路段' },
-      { name: '延安东路1293弄', value: 5, type: '小区' },
-      { name: '延安东路1294弄', value: 8, type: '商业' },
+    const options = ref([
+      { name: '日', key: 'day' },
+      { name: '周', key: 'week' },
+      { name: '月', key: 'month' },
     ])
+    const curOption = ref('month')
+
+    watch(
+      [() => curTab.value, () => curOption.value],
+      ([type, time]) => {
+        if (!time || !type) return
+        store.dispatch('GET_CASE_CLASSIFICATION_RANK', {
+          managementType: type,
+        })
+        store.dispatch('GET_MOREHAPPEN_ADDR', {
+          managementType: type,
+        })
+      },
+      { immediate: true }
+    )
+
+    const rankList = computed(() => {
+      const data = store.state.analysisRank[curOption.value] || []
+      const total = data.reduce((acc, cur) => acc + cur.num, 0)
+      return data.map((item: any) => ({
+        name: item.businsessType || item.businessType,
+        rate: +Math.ceil((item.num / total) * 100).toFixed(0),
+        value: item.num,
+        unit: '件',
+      }))
+    })
+
+    const placeList = computed(() => {
+      const data = store.state.moreHappenAddr[curOption.value] || []
+      return data.map((item: any) => ({
+        name: item.address,
+        value: item.num,
+        type: '路段',
+      }))
+    })
+
     return {
       tabs,
       options,
+      curTab,
       curOption,
       rankList,
       placeList,
@@ -91,7 +116,7 @@ export default defineComponent({
   display flex
   align-items center
   justify-content space-between
-  margin .05rem 0
+  margin 0.05rem 0
   >div
     width 75%
     &:last-child
@@ -99,20 +124,22 @@ export default defineComponent({
       display flex
       >span
         $center()
-        width .22rem
+        width 0.22rem
         height @width
         color $primary-border
-        border .01rem solid @color
+        border 0.01rem solid @color
         cursor pointer
-        &:hover
-        &.on
+        &:hover, &.on
           color $secondary-color
           border-color @color
-          background rgba(50,197,255,.2)
+          background rgba(50, 197, 255, 0.2)
 .rank
-  flex 1
+  overflow hidden
+  .content
+    height 1rem
+    overflow hidden
 .place
-  margin .05rem 0
+  margin 0.05rem 0
   .content
     display flex
     justify-content space-between

src/view/right/duty.vue

@@ -87,6 +87,7 @@ export default defineComponent({
         store.dispatch('getDutyList', {
           gridId: id,
           managementType: type,
+          pageSize: 100,
         })
       },
       { immediate: true }

src/view/right/police.vue

@@ -24,8 +24,13 @@
       <m-sub>平安地图</m-sub>
       <div class="safe-map">
         <div>
-          <p v-for="item in safeMap" :key="item.cmtName">
-            <span @click="clickStreetName(item)">{{ item.cmtName }}</span>
+          <p
+            v-for="(item, index) in safeMap"
+            :key="item.cmtName"
+            :class="`${item.light ? 'show' : ''}`"
+            @click="clickStreetName(item, index)"
+          >
+            <span>{{ item.cmtName }}</span>
             <m-count class="count" :value="item.score" />
           </p>
         </div>
@@ -41,6 +46,7 @@
       enter="fadeInUp"
       leave="fadeOutDown"
       translate-y="84%"
+      :mask-closable="false"
       :title="`${streetData.cmtName}2021年1季度得分`"
     >
       <div>
@@ -140,8 +146,15 @@ export default defineComponent({
       ],
     })
 
-    const clickStreetName = (item: any): void => {
-      searchModal.value = true
+    const clickStreetName = (item: any, index: number): void => {
+      console.log(item, index)
+      console.log(safeMap.value)
+      console.log(safeMap.value[index])
+      safeMap.value.forEach((item, index) => {
+        safeMap.value[index].light = false
+      })
+      safeMap.value[index].light = true
+      searchModal.value = !searchModal.value
       streetData.value = item
     }
     // const houseSum = ref<SummaryProp[]>([
@@ -203,6 +216,7 @@ export default defineComponent({
   display flex
   >div
     &:first-child
+      cursor pointer
       flex 1.7
       display flex
       flex-wrap wrap
@@ -214,6 +228,11 @@ export default defineComponent({
         .count
           margin-left 0.08rem
           font-size 0.12rem
+      .show
+        span
+          color #FFD400
+        .count
+          color #FFD400
     &:last-child
       $center()
       flex 1

src/view/right/public-manage.vue

@@ -30,7 +30,6 @@ export default defineComponent({
 
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
-
 .public-manage
   $full()
   display flex
@@ -43,5 +42,5 @@ export default defineComponent({
     .second-child
       height 2rem
     .third-child
-      height .8rem
+      height 0.8rem
 </style>

src/view/right/public-safety.vue

@@ -41,12 +41,21 @@
           <div class="chartBox">
             <div v-if="showChart" class="drawCharts">
               <div>
-                <m-pie class="chart1" :dataset="pieData1" :option="pieOption" />
+                <m-pie
+                  class="chart1"
+                  :dataset="pieData1"
+                  :option="pieOption"
+                  @init="handleInit"
+                />
                 <span class="line"></span>
                 <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 +67,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, i)"
+              >
                 <p>
                   <span :style="{ background: pieOption.color[i][0] }" />
                   <m-count class="count" :value="item.value" />
@@ -104,9 +117,10 @@
       v-model="searchModal"
       enter="fadeInRight"
       leave="fadeOutRight"
-      offset="55%"
+      offset="65%"
       width="40%"
       title="重点关注楼宇清单"
+      :mask-closable="false"
     >
       <div>
         <m-table
@@ -158,25 +172,41 @@ export default defineComponent({
       { name: '隐患点数', value: 0 },
       { name: '危险点数', value: 0 },
     ])
-    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
-        )
-        houseSum.value = [
-          { name: '检查楼数', value: checkNum },
-          { name: '隐患点数', value: hiddenPoint },
-          { name: '危险点数', value: dangerPoint },
-        ]
-      },
-      { immediate: true }
-    )
+
+    const secPieKey = ref('外立面附加设施隐患点') // 默认展示的第二饼图类型
+    const pieData1 = ref({
+      dimensions: [
+        { name: 'name', displayName: '类型' },
+        { name: 'value', displayName: '数量' },
+      ],
+      source: [
+        {
+          name: '外立面附加设施危险点',
+          value: 1,
+        },
+        {
+          name: '外立面附加设施隐患点',
+          value: 1,
+        },
+        {
+          name: '外墙面层隐患点',
+          value: 1,
+        },
+        {
+          name: '外墙面层危险点',
+          value: 1,
+        },
+      ],
+    })
+
     //切换年份
     const changeYear = (value: string) => {
       year.value = value
     }
+    //切换第二饼图展示的类别
+    const changePie2 = (item: any, i: number) => {
+      secPieKey.value = item.name
+    }
 
     const list = computed(() => {
       return [
@@ -211,41 +241,16 @@ export default defineComponent({
       { name: '楼宇名称', value: 4, danger: 1 },
       { name: '楼宇名称', value: 4, danger: 1 },
     ])
-    const pieData1 = computed(() => {
-      return {
-        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,
-          },
-        ],
-      }
-    })
+
     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({
@@ -267,6 +272,114 @@ export default defineComponent({
         },
       ],
     })
+    const handleInit = (instance: any) => {
+      instance.on('click', (e: any) => {
+        console.log('click~~~~~', e)
+        secPieKey.value = e.name
+      })
+    }
+
+    watch(
+      // 监听年份切花更改检查楼数  隐患点数 危险点数
+      [() => outHouseWall.value, () => year.value],
+      ([data, year]) => {
+        if (data.length === 0) return
+        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 }
+    )
 
     return {
       list,
@@ -284,6 +397,8 @@ export default defineComponent({
       buildings,
       outHouseWall,
       pieData,
+      changePie2,
+      handleInit,
     }
   },
 })
@@ -343,7 +458,7 @@ export default defineComponent({
       display flex
       flex-direction column
       .drawCharts
-        height 60%
+        height 67%
         display flex
         >div
           display flex
@@ -387,17 +502,17 @@ export default defineComponent({
         flex-direction row
         justify-content space-around
         text-align left
-        height 40%
+        height 30%
         >div
           width 25%
           display flex
           flex-direction column
           justify-content space-between
-          align-items center
+          // align-items center
           >span
             width 70%
           >p
-            flex 1
+            // flex 1
             white-space nowrap
             width 100%
             padding-left 0.06rem
@@ -448,6 +563,9 @@ export default defineComponent({
             justify-content space-around
             flex-direction row
             font-size 0.06rem
+            .count
+              color #fff
+              padding-left 0.03rem
             >span
               display flex
               flex-direction row

tsconfig.json

@@ -17,5 +17,5 @@
     }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "public"]
 }