Merge branch 'master' of http://git.omniview.pro/yaominguo/east-nanjing-new into dist

src/App.vue

@@ -33,7 +33,7 @@ export default defineComponent({
   src url(./assets/font/zcool.ttf)
 
 html, body
-  background rgba(0,0,0,0.5)
+  background #001220
   font-family DIN, Avenir, Helvetica, Arial, sans-serif
   -webkit-font-smoothing antialiased
   -moz-osx-font-smoothing grayscale

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

 <template>
-  <div id="MapContainer" />
+  <div id="MapContainer" :style="`width:${width}`" />
 </template>
 
 <script lang="ts">
@@ -25,6 +25,10 @@ export default defineComponent({
       type: Object as PropType<{ [key: string]: unknown }>,
       default: null,
     },
+    width: {
+      type: String as PropType<string>,
+      default: '67vw',
+    },
   },
   emits: ['complete', 'event'],
   setup(props, ctx) {
@@ -39,21 +43,24 @@ export default defineComponent({
         viewMode: '3D',
         center: [1019.614669, 54.167243],
         // center: [-135.98002789627407, -722.1597065437004],
-        zooms: [5, 10],
-        zoom: 7,
+        zooms: [8, 12],
+        zoom: 8,
         pitch: 45,
         mapStyle: 'smap://styles/dark',
         showBuildingBlock: true,
         ...config,
         ...props.config,
       }).on(SMap.MapEvent.maploaded, () => {
-        map.enableMouseEvent(false)
+        setMouseEvent(false)
         // setBuildingBlock()
         ctx.emit('complete', map)
         addListener()
         hideCommunity()
       })
     }
+    function setMouseEvent(val: boolean) {
+      map.enableMouseEvent(val)
+    }
     function layer(name: string) {
       return map.getLayer(name)
     }
@@ -109,13 +116,16 @@ export default defineComponent({
         console.error('传入的坐标点不能为空')
         return
       }
-      console.log('focus', x, y)
-
       curMapType.value === '3D'
         ? map.setZoomAndCenter(zoom, [+x, +y, 0])
         : map.setZoomAndCenter(zoom, [+x, +y])
     }
 
+    function zoom(type: string) {
+      if (type === 'in') map.zoomIn()
+      else map.zoomOut()
+    }
+
     // 添加边界
     function addBoundary({
       name = '',
@@ -247,6 +257,8 @@ export default defineComponent({
     return {
       initMap,
       focus,
+      zoom,
+      setMouseEvent,
       layer,
       setBuildingBlock,
       hideCommunity,
@@ -266,7 +278,6 @@ export default defineComponent({
 <style lang="stylus" scoped>
 #MapContainer
   position fixed
-  width 100%
   height 100vh
   top 0
   left 0

src/store/actions.ts

@@ -532,6 +532,7 @@ export default {
     ).data
     // console.log(content, '有求必应 - 工作站分类')
     commit('SET_WORKSTATION', content)
+    commit('SET_WORKSTATION_PIEDATA', content[0].statistical)
   },
   async GET_TRACKEVENT(
     {

src/store/index.ts

@@ -65,6 +65,7 @@ export interface GlobalStateProps {
   curView: ViewType
   curMapType: string
   showCommunityPoints: boolean
+  mapDragable: boolean
   readonly zhenxing: any
   readonly weihai: any
   readonly workArea1: any
@@ -114,7 +115,8 @@ export interface GlobalStateProps {
   urgentCase: any[]
   todayCase: { [key: string]: number }
   stageCase: { [key: string]: number }
-  workstationKind: { [key: string]: number }
+  workstationKind: any[]
+  workstationKindPiEData: { [key: string]: number }
   trackEvent: any[]
   analysisRank: Partial<DutyDataProp>
   moreHappenAddr: Partial<DutyDataProp>

src/store/mutations.ts

@@ -26,6 +26,9 @@ export default {
   SET_SHOW_COMMUNITY_POINTS(state: GlobalStateProps, val: boolean): void {
     state.showCommunityPoints = val
   },
+  SET_MAP_DRAGABLE(state: GlobalStateProps, val: boolean): void {
+    state.mapDragable = val
+  },
   SET_PROPERTY_SUMMARY(
     state: GlobalStateProps,
     val: { [key: string]: number }
@@ -222,11 +225,14 @@ export default {
     state.stageCase = data
   },
   // 有求必应-工作站分类
-  SET_WORKSTATION(
+  SET_WORKSTATION(state: GlobalStateProps, data: any[]): void {
+    state.workstationKind = data
+  },
+  SET_WORKSTATION_PIEDATA(
     state: GlobalStateProps,
     data: { [key: string]: number }
   ): void {
-    state.workstationKind = data
+    state.workstationKindPiEData = data
   },
   // 有求必应-事件跟踪
   SET_TRACKEVENT(state: GlobalStateProps, data: unknown[]): void {

src/store/state.ts

@@ -5,6 +5,7 @@ export default {
   curMapType: '2D',
   curView: { name: '南京东路街道', type: 'street' },
   showCommunityPoints: false,
+  mapDragable: false,
   viewOptions: [
     { name: '南京东路街道', type: 'street' },
     { name: '第一工作站', type: 'work1', id: '01001' },
@@ -60,7 +61,7 @@ export default {
       y: -660.07,
     },
     id: '01001',
-    center: [361.095476, -559.449126],
+    center: [57.65912693980181, -545.9925561181099],
     paths: [
       [-448.329953822261, -293.460812442785],
       [-431.7521211874291, -671.2658974800385],
@@ -105,7 +106,7 @@ export default {
       y: 678.9654976442117,
     },
     id: '01002',
-    center: [1291.532466, 175.263969],
+    center: [494.2089963530598, 170.15832727829968],
     paths: [
       [62.564369398678764, 740.5887328698475],
       [137.63177213765096, 581.9293660719472],
@@ -140,7 +141,7 @@ export default {
       x: -57.84609277641425,
       y: 261.561716873108,
     },
-    center: [609.931363, 342.166777],
+    center: [59.44810057514178, 386.009149840996],
     id: '01003',
     paths: [
       [-827.6197677404292, 863.6615701613555],
@@ -214,7 +215,8 @@ export default {
   urgentCase: [],
   todayCase: {},
   stageCase: {},
-  workstationKind: {},
+  workstationKind: [],
+  workstationKindPiEData: {},
   trackEvent: [],
   analysisRank: { day: [], week: [], month: [] },
   moreHappenAddr: { day: [], week: [], month: [] },

src/view/community.vue

@@ -12,8 +12,7 @@
     <m-map
       ref="map"
       :config="{
-        center: [-75.5563452697323, -718.3061904627932],
-        zoom: 8,
+        zoom: 10,
       }"
       @complete="handleComplete"
       @event="handleMapClick"
@@ -37,19 +36,55 @@
     <SiteSelector />
     <div class="operates">
       <a-tooltip placement="left">
-        <img src="@/assets/images/map-btn5.png" @click="rotateAngle" />
+        <img
+          draggable="false"
+          src="@/assets/images/map-btn5.png"
+          @click="rotateAngle"
+        />
         <template #title>旋转90度</template>
       </a-tooltip>
       <a-tooltip placement="left">
-        <img src="@/assets/images/map-btn4.png" @click="showMonitor = true" />
+        <img
+          draggable="false"
+          src="@/assets/images/map-btn4.png"
+          @click="showMonitor = true"
+        />
         <template #title>电瓶车入梯报警</template>
       </a-tooltip>
       <a-tooltip placement="left">
-        <img src="@/assets/images/map-btn6.png" @click="showCommunityPoints" />
+        <img
+          draggable="false"
+          src="@/assets/images/map-btn6.png"
+          @click="showCommunityPoints"
+        />
         <template #title>
           {{ isCommunityPointsShowNow ? '隐藏' : '显示' }}小区点
         </template>
       </a-tooltip>
+      <a-tooltip placement="left">
+        <img
+          draggable="false"
+          src="@/assets/images/zoom-in.png"
+          @click="zoomMap('in')"
+        />
+        <template #title> 放大地图 </template>
+      </a-tooltip>
+      <a-tooltip placement="left">
+        <img
+          draggable="false"
+          src="@/assets/images/zoom-out.png"
+          @click="zoomMap('out')"
+        />
+        <template #title> 缩小地图 </template>
+      </a-tooltip>
+      <a-tooltip placement="left">
+        <img
+          draggable="false"
+          src="@/assets/images/map-btn8.png"
+          @click="setMapDrag"
+        />
+        <template #title> 开启/关闭地图拖拽 </template>
+      </a-tooltip>
     </div>
     <m-modal
       v-model="showMonitor"
@@ -68,11 +103,27 @@
           <p class="title">[ {{ drawerInfo.relationName }} ]</p>
           <div v-if="drawerInfo.afterPhoto">
             <p>整改后</p>
-            <img :src="drawerInfo.afterPhoto" />
+            <img
+              :src="
+                drawerInfo.afterPhoto.replace(
+                  'http://zhongbang.omniview.pro/' ||
+                    'https://zhongbang.omniview.pro/',
+                  prefix
+                )
+              "
+            />
           </div>
           <div v-if="drawerInfo.beforPhoto">
             <p>整改前</p>
-            <img :src="drawerInfo.beforPhoto" />
+            <img
+              :src="
+                drawerInfo.beforPhoto.replace(
+                  'http://zhongbang.omniview.pro/' ||
+                    'https://zhongbang.omniview.pro/',
+                  prefix
+                )
+              "
+            />
           </div>
         </div>
       </m-card>
@@ -104,6 +155,7 @@ export default defineComponent({
   name: 'Main',
   components: { LeftSection, RightSection, SiteSelector, VideoComponent },
   setup() {
+    const prefix = computed(() => api.SOURCE_URL)
     const rotation = ref(0)
     const rotateAngle = () => {
       rotation.value += 90
@@ -168,25 +220,19 @@ export default defineComponent({
       if (!curId.value) return
       const result: any = {
         '527635870583459840': {
-          zoom: 9.7608,
+          zoom: 11,
           layer: () =>
             (map.value.layer('model_white_zhenxing2').visible = true),
-          '0': [-135.98002789627407, -722.1597065437004],
-          '90': [-261.131359, -858.028878],
-          '180': [-404.248674, -746.05425],
-          '270': [-276.2336, -653.842881],
+          center: [-275.8968464073082, -748.2824253933684],
         },
         '527635870583459841': {
-          zoom: 10,
+          zoom: 11,
           layer: () => (map.value.layer('model_white_WEIHAI33').visible = true),
-          '0': [-38.73075358777865, -569.7527629458657],
-          '90': [-136.813679, -682.12363],
-          '180': [-275.05377, -587.065673],
-          '270': [-187.394221, -483.549497],
+          center: [-177.8293302195628, -588.2622422909122],
         },
       }
       const cur = result[curId.value as string]
-      map.value.focus(...cur[rotation.value], cur.zoom)
+      map.value.focus(...cur.center, cur.zoom)
       return cur
     }
     const showDrawer = ref(false)
@@ -315,7 +361,16 @@ export default defineComponent({
         message.success('短信发送成功！')
       }
     }
+    const zoomMap = (type: string) => {
+      map.value.zoom(type)
+    }
+    const dragAble = ref(false)
+    const setMapDrag = () => {
+      dragAble.value = !dragAble.value
+      map.value.setMouseEvent(dragAble.value)
+    }
     return {
+      prefix,
       rotation,
       rotateAngle,
       loading,
@@ -333,6 +388,8 @@ export default defineComponent({
       handleAlarm,
       isCommunityPointsShowNow,
       showCommunityPoints,
+      zoomMap,
+      setMapDrag,
     }
   },
 })

src/view/community/community-photo.vue

@@ -5,7 +5,10 @@
       :key="item.name"
       :style="`background:url(${
         item.photo &&
-        item.photo.replace('http://zhongbang.omniview.pro/', prefix)
+        item.photo.replace(
+          'http://zhongbang.omniview.pro/' || 'https://zhongbang.omniview.pro/',
+          prefix
+        )
       }) 100% / 100% 100% no-repeat`"
       @click="handleClick(item.video)"
     >
@@ -58,26 +61,26 @@ export default defineComponent({
       if (curId.value === '527635870583459840') {
         // 振兴小区
         return [
-          {
-            name: '重庆北路177弄64号',
-            photo:
-              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AQCAEc3pAASC2UqtXWs052.jpg',
-            video:
-              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AVyAanZkApsdVDHEGc0527.mp4',
-          },
           {
             name: '重庆北路后门',
             photo:
               'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AXyAIUKZAAIFC2qNmKI384.jpg',
             video:
-              'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9AaCAPxQuAJBKkDzXu6A359.mp4',
+              'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9PlmAH8-oAEmHxWhriqw954.mov',
           },
           {
             name: '大沽路大门',
             photo:
               'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AYmAT-A1AAMElShNriM149.jpg',
             video:
-              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AbiAQSm8AFcZgGM-DsE721.mp4',
+              'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9QE6AckoPAEM3swvgmFQ182.mov',
+          },
+          {
+            name: '重庆北路177弄64号',
+            photo:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AQCAEc3pAASC2UqtXWs052.jpg',
+            video:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AVyAanZkApsdVDHEGc0527.mp4',
           },
         ]
       }
@@ -87,21 +90,21 @@ export default defineComponent({
           photo:
             'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB5GdOAW6qQAAvNhxSqO-g179.jpg',
           video:
-            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB8_neAFTSLAfLx1EXkWbg945.mp4',
+            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9OkmAFxVMAS7MAmRH2Xc004.mp4',
         },
         {
           name: '62弄朝东',
           photo:
-            'https://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5Kj-AX3OMAAwPqHZi_Kg064.jpg',
+            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5Kj-AX3OMAAwPqHZi_Kg064.jpg',
           video:
-            'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9AKeAStEUAYtR_B1xies646.mp4',
+            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9QIiAaz9fAS3gvWsrxYQ927.mp4',
         },
         {
           name: '62弄朝南',
           photo:
             'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB5KrOAVcluAAnbZjB7fNA165.jpg',
           video:
-            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5KrSAB6piAV39_CAFs0Y956.mp4',
+            'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9P1mALYigATKoQQw6Y8k841.mp4',
         },
       ]
     })

src/view/community/left-section.vue

@@ -232,14 +232,14 @@ export default defineComponent({
 
 .info
   display flex
-  height .8rem
+  height .9rem
   margin .05rem 0
   >div
     flex 1
     color #ccc
     text-align justify
     &:first-child
-      flex .56
+      flex 0.8
       $center()
       background url('@/assets/images/border3.png') 50% 50% / 100% 100% no-repeat
       margin-right .1rem

src/view/components/map-btns.vue

@@ -14,13 +14,10 @@
           </div>
         </template>
       </a-tooltip>
-      <img
-        v-else
-        :key="btn.key"
-        :src="btn.icon"
-        draggable="false"
-        @click="handleClick(btn.key)"
-      />
+      <a-tooltip v-else :key="btn.key" placement="right">
+        <img :src="btn.icon" draggable="false" @click="handleClick(btn.key)" />
+        <template #title>{{ btn.title }}</template>
+      </a-tooltip>
     </template>
   </div>
   <m-modal v-model="searchModal" title="搜索" width="30%" offset="-70%">
@@ -68,24 +65,30 @@ 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 btn7 from '@/assets/images/map-btn7.png'
+import btn8 from '@/assets/images/map-btn8.png'
 import d2 from '@/assets/images/2d.png'
 import d3 from '@/assets/images/3d.png'
+import zoomIn from '@/assets/images/zoom-in.png'
+import zoomOut from '@/assets/images/zoom-out.png'
 import store from '@/store'
 
 export default defineComponent({
   name: 'MapBtns',
-  emits: ['full', 'change'],
+  emits: ['full', 'change', 'zoom'],
   setup(_, ctx) {
     const btns = computed(() => {
       const mapType =
         store.state.curMapType === '2D'
-          ? { key: '3D', icon: d3 }
-          : { key: '2D', icon: d2 }
+          ? { key: '3D', icon: d3, title: '开启3D地图' }
+          : { key: '2D', icon: d2, title: '开启2D地图' }
       const list = [
         // { key: 'search', icon: btn1 },
-        { key: 'full', icon: btn2 },
-        { key: 'points', icon: btn6 },
+        { key: 'in', icon: zoomIn, title: '放大地图' },
+        { key: 'out', icon: zoomOut, title: '缩小地图' },
+        { key: 'full', icon: btn2, title: '全屏' },
+        { key: 'points', icon: btn6, title: '显示/隐藏小区点' },
         { key: 'polyline', icon: btn7 },
+        { key: 'dragable', icon: btn8, title: '开启/关闭拖拽功能' },
         // { key: '', icon: btn4 },
         // { key: '', icon: btn5 },
         // { key: '', icon: btn6 },
@@ -109,12 +112,18 @@ export default defineComponent({
         case 'search':
           searchModal.value = true
           break
+        case 'in':
+        case 'out':
+          ctx.emit('zoom', key)
+          break
         case 'points':
           store.commit(
             'SET_SHOW_COMMUNITY_POINTS',
             !store.state.showCommunityPoints
           )
           break
+        case 'dragable':
+          store.commit('SET_MAP_DRAGABLE', !store.state.mapDragable)
         default:
           break
       }
@@ -294,7 +303,7 @@ $bg = rgba(6,34,67,.4)
   transition left .3s ease
   &.full
     left .05rem
-  >img
+  img
     display block
     width .2rem
     height @width

src/view/components/video-component.vue

@@ -41,7 +41,10 @@ export default defineComponent({
       () => props.videoSrc && props.videoSrc.indexOf('m3u8') >= 0
     )
     const isMP4 = computed(
-      () => props.videoSrc && props.videoSrc.indexOf('mp4') >= 0
+      () =>
+        props.videoSrc &&
+        (props.videoSrc.indexOf('mp4') >= 0 ||
+          props.videoSrc.indexOf('mov') >= 0)
     )
     const init = () => {
       if (!videoRef.value) return

src/view/hooks/useSwitchMap.ts

@@ -13,6 +13,12 @@ export default function useSwitchMap(map: any) {
     },
     { immediate: true }
   )
+  watch(
+    () => store.state.mapDragable,
+    (val) => {
+      map.value.setMouseEvent(val)
+    }
+  )
   watch(
     () => store.state.showCommunityPoints,
     (val) => {
@@ -38,20 +44,19 @@ export default function useSwitchMap(map: any) {
     switch (type) {
       case 'work1':
         show && showPoints({ gridId: store.state.workArea1.id })
-        map.value.focus(...store.state.workArea1.center, 7.660867453405492)
+        map.value.focus(...store.state.workArea1.center, 8)
         break
       case 'work2':
         show && showPoints({ gridId: store.state.workArea2.id })
-        map.value.focus(...store.state.workArea2.center, 7)
+        map.value.focus(...store.state.workArea2.center, 8)
         break
       case 'work3':
         show && showPoints({ gridId: store.state.workArea3.id })
-        map.value.focus(...store.state.workArea3.center, 7)
+        map.value.focus(...store.state.workArea3.center, 8)
         break
       case 'street':
         show && showPoints()
-        map.value.focus(990.973466, 10.295931, 7)
-        // map.value.focus(1019.614669, 54.167243, 6.5)
+        map.value.focus(207.9006154792994, 71.67111885454233, 8)
         break
       default:
         break
@@ -105,8 +110,12 @@ export default function useSwitchMap(map: any) {
       }
     )
   }
+  const handleZoom = (type: string) => {
+    map.value.zoom(type)
+  }
   return {
     handleMapComplete,
     selectArea,
+    handleZoom,
   }
 }

src/view/main.vue

@@ -6,7 +6,7 @@
     gap="0.05rem"
   >
     <m-title area="title">南东城运</m-title>
-    <m-map ref="map" @complete="handleMapComplete" />
+    <m-map ref="map" width="71vw" @complete="handleMapComplete" />
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
       <Command v-show="'street' === curViewType && !fullScreen" area="left" />
     </m-animate>
@@ -38,7 +38,11 @@
       />
     </m-animate>
     <ViewSelector />
-    <MapBtns @change="selectArea" @full="fullScreen = $event" />
+    <MapBtns
+      @change="selectArea"
+      @full="fullScreen = $event"
+      @zoom="handleZoom"
+    />
     <m-drawer v-model="showDrawer">
       <CaseDrawer />
       <!-- <PopulationDrawer /> -->
@@ -100,7 +104,7 @@ export default defineComponent({
       await nextTick()
       map.value.initMap({ viewMode: '2D' })
     })
-    const { handleMapComplete, selectArea } = useSwitchMap(map)
+    const { handleMapComplete, selectArea, handleZoom } = useSwitchMap(map)
     return {
       map,
       curViewType,
@@ -110,6 +114,7 @@ export default defineComponent({
       showDrawer,
       handleMapComplete,
       selectArea,
+      handleZoom,
     }
   },
 })

src/view/right/case-analysis.vue

 <template>
-  <m-card title="案件分析">
+  <m-card title="案件分析" class="box">
     <div class="nav">
       <div>
         <Tabs :list="tabs" horizontal @select="curTab = $event" />
@@ -111,38 +111,42 @@ export default defineComponent({
 
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
-.nav
-  width 100%
-  display flex
-  align-items center
-  justify-content space-between
-  margin 0.05rem 0
-  >div
-    width 75%
-    &:last-child
-      width 20%
-      display flex
-      >span
-        $center()
-        width 0.22rem
-        height @width
-        color $primary-border
-        border 0.01rem solid @color
-        cursor pointer
-        &:hover, &.on
-          color $secondary-color
-          border-color @color
-          background rgba(50, 197, 255, 0.2)
-.rank
+.box
   overflow hidden
-  .content
-    height 1rem
+  .nav
+    width 100%
     overflow hidden
-.place
-  margin 0.05rem 0
-  .content
     display flex
+    align-items center
     justify-content space-between
+    margin-top 0.05rem
     >div
-      width 32%
+      width 75%
+      &:last-child
+        width 20%
+        display flex
+        >span
+          $center()
+          width 0.22rem
+          height @width
+          color $primary-border
+          border 0.01rem solid @color
+          cursor pointer
+          &:hover, &.on
+            color $secondary-color
+            border-color @color
+            background rgba(50, 197, 255, 0.2)
+  .rank
+    overflow hidden
+    // height 1rem
+    .content
+      height 1.2rem
+      overflow hidden
+  .place
+    overflow hidden
+    .content
+      display flex
+      justify-content space-between
+      >div
+        width 32%
 </style>

src/view/right/complain.vue

@@ -254,87 +254,87 @@ export default defineComponent({
 .box
   flex-direction column
   display flex
-  height 97%
-.summary
-  height 5%
-  display flex
-  justify-content space-between
-  align-items center
-  margin-top 0.1rem
-  margin-bottom 0.1rem
-  >div
+  height 95%
+  overflow hidden
+  .summary
+    height 5%
     display flex
+    justify-content space-between
     align-items center
+    margin-top 0.1rem
+    margin-bottom 0.1rem
     >div
-      margin-left 0.05rem
-      .count
-        font-size 0.12rem
-        font-weight bold
-      p
-        color #ccc
-.manage
-  flex 1
-  display flex
-  // height 60%
-  // margin-bottom .05rem
-  .content
-    flex 1
-    padding-left 0.1rem
-    .chart
-      width 100%
-      height 44%
-      &.wrapper
-        display flex
-        >div
-          width 50%
-          height 100%
-          &:last-child
-            $center()
-            flex-direction column
-            p
-              display flex
-              align-items center
-              width 100%
-              i
-                display inline-block
-                width 0.06rem
-                height @width
-                border-radius 50%
-                margin-right 0.1rem
-                background #826AFA
-              &:nth-of-type(2) > i
-                background #E02020
-              &:nth-of-type(3) > i
-                background #F7B500
-              &:nth-of-type(4) > i
-                background #6DD400
-              &:nth-of-type(5) > i
-                background #32C5FF
-              span
-                flex 4
-                &:last-child
-                  flex 1
-.emergency
-  height 1.2rem
-  overflow hidden
-  // overflow hidden
-  .detail
+      display flex
+      align-items center
+      >div
+        margin-left 0.05rem
+        .count
+          font-size 0.12rem
+          font-weight bold
+        p
+          color #ccc
+  .manage
     display flex
-    flex-direction column
-    padding 0.1rem
-    background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
-    margin-bottom 0.05rem
-    height 0.95rem
-    box-sizing border-box
-    >div
+    height 70%
+    // margin-bottom .05rem
+    .content
       flex 1
-      &:first-child
-        border-bottom 0.01rem solid $primary-border
-        padding-bottom 0.05rem
-        margin-bottom @padding-bottom
-      span
-        color #ccc
-      p
-        font-size 0.12rem
-        font-weight bold
+      padding-left 0.1rem
+      .chart
+        width 100%
+        height 44%
+        &.wrapper
+          display flex
+          >div
+            width 50%
+            height 100%
+            &:last-child
+              $center()
+              flex-direction column
+              p
+                display flex
+                align-items center
+                width 100%
+                i
+                  display inline-block
+                  width 0.06rem
+                  height @width
+                  border-radius 50%
+                  margin-right 0.1rem
+                  background #826AFA
+                &:nth-of-type(2) > i
+                  background #E02020
+                &:nth-of-type(3) > i
+                  background #F7B500
+                &:nth-of-type(4) > i
+                  background #6DD400
+                &:nth-of-type(5) > i
+                  background #32C5FF
+                span
+                  flex 4
+                  &:last-child
+                    flex 1
+  .emergency
+    height 1.2rem
+    overflow hidden
+    // overflow hidden
+    .detail
+      display flex
+      flex-direction column
+      padding 0.1rem
+      background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
+      margin-bottom 0.05rem
+      height 0.95rem
+      box-sizing border-box
+      >div
+        flex 1
+        &:first-child
+          border-bottom 0.01rem solid $primary-border
+          padding-bottom 0.05rem
+          margin-bottom @padding-bottom
+        span
+          color #ccc
+        p
+          font-size 0.12rem
+          font-weight bold
 </style>

src/view/right/demand.vue

@@ -25,12 +25,14 @@
       </div>
       <div class="chart wrapper">
         <div v-if="showChart">
-          <m-pie :option="pieOption" />
+          <m-pie :option="pieOption" :dataset="pieData" />
         </div>
         <div>
           <p v-for="item in pieData" :key="item.name">
             <span :style="{ background: item.color }" />
-            {{ item.name }}： {{ item.value }}% &nbsp;&nbsp;{{ item.num }}
+            {{ item.name }}： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
+              item.value
+            }}% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.num }}
           </p>
         </div>
       </div>
@@ -56,7 +58,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent, watch, ref } from 'vue'
 import Brief, { BriefProp } from '../components/brief.vue'
 import store from '@/store'
 import icon6 from '@/assets/images/icon6.png'
@@ -81,10 +83,8 @@ export default defineComponent({
     const todayCase = computed(() => store.state.todayCase)
     const stageCase = computed(() => store.state.stageCase)
     const workstationKind = computed(() => store.state.workstationKind)
+    const pieDatamodel = computed(() => store.state.workstationKindPiEData)
     const trackEvent = computed(() => store.state.trackEvent)
-
-    // console.log(moment(new Date()).format('YYYY-MM-DD'))
-
     const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
     const showChart = computed(() => store.state.curTheme === 'manage')
     const summary = computed(() => {
@@ -203,109 +203,88 @@ export default defineComponent({
       })),
     })
     const pieData = computed(() => {
-      if (workstationKind.value[0]) {
-        return [
-          {
-            name: '第一工作站',
-            value:
-              (
-                (workstationKind.value[0].statistical.oneDisposalNum /
-                  workstationKind.value[0].statistical.oneNum) *
+      return [
+        {
+          name: '第一工作站',
+          value:
+            parseInt(
+              (pieDatamodel.value.oneDisposalNum / pieDatamodel.value.oneNum) *
                 100
-              ).toFixed(0) || 0,
-            num: workstationKind.value[0].statistical.oneDisposalNum || 0,
-            color: '#47B3FF',
-          },
-          {
-            name: '第二工作站',
-            value:
-              (
-                (workstationKind.value[0].statistical.twoDisposalNum /
-                  workstationKind.value[0].statistical.twoNum) *
+            ) || 0,
+          num: pieDatamodel.value.oneNum,
+          color: '#47B3FF',
+        },
+        {
+          name: '第二工作站',
+          value:
+            parseInt(
+              (pieDatamodel.value.twoDisposalNum / pieDatamodel.value.twoNum) *
                 100
-              ).toFixed(0) || 0,
-            num: workstationKind.value[0].statistical.twoDisposalNum || 0,
-            color: '#FF9D27',
-          },
-          {
-            name: '第三工作站',
-            value:
-              (
-                (workstationKind.value[0].statistical.threeDisposalNum /
-                  workstationKind.value[0].statistical.threeNum) *
+            ) || 0,
+          num: pieDatamodel.value.twoNum,
+          color: '#FF9D27',
+        },
+        {
+          name: '第三工作站',
+          value:
+            parseInt(
+              (pieDatamodel.value.threeDisposalNum /
+                pieDatamodel.value.threeNum) *
                 100
-              ).toFixed(0) || 0,
-            num: workstationKind.value[0].statistical.threeDisposalNum || 0,
-            color: '#6EB629',
-          },
-        ]
-      } else {
-        return [
-          {
-            name: '第一工作站',
-            value: 0,
-            num: 0,
-            color: '#47B3FF',
-          },
-          {
-            name: '第二工作站',
-            value: 0,
-            num: 0,
-            color: '#FF9D27',
+            ) || 0,
+          num: pieDatamodel.value.threeNum,
+          color: '#6EB629',
+        },
+      ]
+    })
+    const pieSeries = computed(() => {
+      return pieData.value.map((item, i) => {
+        const rate =
+          Math.round((pieData.value.length - i) * fontSize.value) + 10
+        const borderWidth = fontSize.value * 0.6
+        return {
+          type: 'pie',
+          name: item.name,
+          clockwise: false, //顺时加载
+          radius: [rate, rate],
+          label: {
+            show: false,
           },
-          {
-            name: '第三工作站',
-            value: 0,
-            num: 0,
-            color: '#6EB629',
+          itemStyle: {
+            borderWidth,
+            borderColor: item.color,
           },
-        ]
-      }
-    })
-    const pieSeries = pieData.value.map((item, i) => {
-      const rate = Math.round((pieData.value.length - i) * fontSize.value) + 10
-      const borderWidth = fontSize.value * 0.6
-      return {
-        type: 'pie',
-        name: item.name,
-        clockwise: false, //顺时加载
-        radius: [rate, rate],
-        label: {
-          show: false,
-        },
-        itemStyle: {
-          borderWidth,
-          borderColor: item.color,
-        },
-        data: [
-          item,
-          {
-            value: 100 - item.value,
-            name: '',
-            tooltip: { show: false },
-            label: {
-              show: false,
+          data: [
+            item,
+            {
+              value: 100 - item.value,
+              name: '',
+              tooltip: { show: false },
+              label: {
+                show: false,
+              },
+              itemStyle: {
+                color: 'transparent',
+                borderColor: item.color,
+                opacity: 0.1,
+              },
             },
-            itemStyle: {
-              color: 'transparent',
-              borderColor: item.color,
-              opacity: 0.1,
-            },
-          },
-        ],
-      }
+          ],
+        }
+      })
     })
-    const pieOption = ref({
+    const pieOption = computed(() => ({
       legend: {
         show: false,
       },
-      series: pieSeries,
-    })
+      series: pieSeries.value,
+    }))
     const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
 
     const searchCase = (key: string) => {
       console.log('searck key: ', key)
     }
+
     return {
       summary,
       showChart,
@@ -319,6 +298,7 @@ export default defineComponent({
       searchCase,
       todayCase,
       trackEvent,
+      workstationKind,
     }
   },
 })
@@ -338,65 +318,69 @@ $arrow-style()
   bottom 0
   margin auto
   transform translate(-90%, 0)
-.process
-  margin-top 0.1rem
-  position relative
-  >img
-    position absolute
-    width 0.2rem
-    height @width
-    right 13.3%
-    top 0
-    bottom 0
-    margin auto
-    transform rotate(90deg)
-  >div
-    display flex
-    align-items center
-    justify-content space-around
-    margin-bottom 0.15rem
-    &:nth-of-type(1)
-      div+div
-        &::before
-          $arrow-style()
-    &:nth-of-type(2)
-      div+div
-        &::before
-          $arrow-style()
-          transform translate(-90%, 0) rotate(180deg)
-    >div
-      background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
-      width 28%
-      padding 0.05rem 0
-      text-align center
-      font-weight bold
-      position relative
-      .count
-        font-size 0.12rem
-      p
-        color #ccc
-.chart
-  width 100%
-  height 1.1rem
-  &.wrapper
-    display flex
+.today-case
+  .process
+    margin-top 0.1rem
+    position relative
+    >img
+      position absolute
+      width 0.2rem
+      height @width
+      right 13.3%
+      top 0
+      bottom 0
+      margin auto
+      transform rotate(90deg)
     >div
-      width 50%
-      height 100%
-      font-weight bold
-      &:last-child
-        $center()
-        flex-direction column
+      display flex
+      align-items center
+      justify-content space-around
+      margin-bottom 0.15rem
+      &:nth-of-type(1)
+        div+div
+          &::before
+            $arrow-style()
+      &:nth-of-type(2)
+        div+div
+          &::before
+            $arrow-style()
+            transform translate(-90%, 0) rotate(180deg)
+      >div
+        background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
+        width 28%
+        padding 0.05rem 0
+        text-align center
+        font-weight bold
+        position relative
+        .count
+          font-size 0.12rem
         p
-          display flex
-          align-items center
-          margin-bottom 0.05rem
-          span
-            display inline-block
-            width 0.06rem
-            height @width
-            border-radius 50%
-            margin-right 0.1rem
+          color #ccc
+  .chart
+    width 100%
+    height 1.1rem
+    &.wrapper
+      display flex
+      >div
+        width 50%
+        height 100%
+        font-weight bold
+        // border 1px solid red
+        &:last-child
+          $center()
+          flex-direction column
+          p
+            display flex
+            width 100%
+            align-items center
+            // border 1px solid red
+            margin-bottom 0.05rem
+            span
+              display inline-block
+              width 0.06rem
+              height @width
+              border-radius 50%
+              margin-right 0.1rem
 .case-follow
   height 1.2rem
   overflow hidden

src/view/right/key-task.vue

 <template>
-  <m-card title="重点工作">
-    <div v-if="showChart" id="cloud" class="box"></div>
+  <m-card title="重点工作" class="box">
+    <div v-if="showChart" id="cloud" class=""></div>
   </m-card>
 </template>
 
@@ -76,7 +76,7 @@ export default defineComponent({
       const maskImage = new Image()
       maskImage.src = symbolUrl
       const option = {
-        backgroundColor: 'rgba(0,0,0,0.1)',
+        backgroundColor: '#000',
         tooltip: {
           show: true,
         },
@@ -101,14 +101,13 @@ export default defineComponent({
             name: 'pictorial',
             silent: true,
             symbol: 'image://' + symbolUrl, //按背景渲染云词
-            symbolSize: ['165%', '180%'],
+            symbolSize: ['100%', '100%'],
             symbolPosition: 'center',
             barWidth: '100%',
             barMaxWidth: '100%',
             itemStyle: {
-              normal: {
-                opacity: 0.2, //自己项目中这里可以设置0全透明，然后可以写一个div背景加载一个美化过的云图片，重合放在这个图表下面。
-              },
+              opacity: 0.2, //自己项目中这里可以设置0全透明，然后可以写一个div背景加载一个美化过的云图片，重合放在这个图表下面。
+              border: '1px solid red',
             },
             data: [
               {
@@ -118,30 +117,28 @@ export default defineComponent({
           },
           {
             type: 'wordCloud',
-            sizeRange: [19, 23],
-            rotationRange: [0, 10],
+            sizeRange: [20, 22],
+            rotationRange: [0, 0],
             maskImage: maskImage,
-            textPadding: 30,
-            gridSize: 20, //用于标记画布可用性的网格大小（以像素为单位）//字距越大，字距越大。
-            width: '90%',
-            height: '90%',
-            left: 'center',
-            top: 'center',
+            textPadding: 0,
+            gridSize: 39, //用于标记画布可用性的网格大小（以像素为单位）//字距越大，字距越大。
+            width: '100%',
+            height: '100%',
+            left: '0',
+            top: '0',
             drawOutOfBound: false,
             textStyle: {
-              normal: {
-                fontFamily: 'sans-serif',
-                color: function () {
-                  const index = Math.floor(Math.random() * colorList.length)
-                  return colorList[index]
-                },
+              // fontFamily: 'sans-serif',
+              fontWeight: 600,
+              color: function () {
+                const index = Math.floor(Math.random() * colorList.length)
+                return colorList[index]
               },
             },
             data: data,
           },
         ],
       }
-
       cloudCharts.setOption(option)
     }
 
@@ -151,7 +148,7 @@ export default defineComponent({
         if (!type) return
         setTimeout(() => {
           init()
-        }, 1000)
+        }, 1900)
       },
       { immediate: true }
     )
@@ -164,9 +161,11 @@ export default defineComponent({
 
 <style lang="stylus" scoped>
 .box
-  height 95%
+  height 2rem
   width 100%
   box-sizing border-box
   overflow hidden
-  // background #000
+  #cloud
+    height 2rem
+    width 100%
 </style>

src/view/right/public-manage.vue

@@ -39,8 +39,10 @@ export default defineComponent({
     width 33%
     .first-child
       flex 1
+      // height 50%
     .second-child
       height 2rem
+      // height 32%
     .third-child
       height 0.8rem
 </style>