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

24befe38 · 郭铭瑶 · 7a57ba19 · 48531bfb · 24befe38 · 24befe38
Commit 24befe38 authored Apr 19, 2021 by 郭铭瑶 🤘
24 changed files
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/App.vue
+++ b/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

--- a/src/assets/images/map-btn8.png
+++ b/src/assets/images/map-btn8.png
--- a/src/assets/images/weihailu.png
+++ b/src/assets/images/weihailu.png
--- a/src/assets/images/zoom-in.png
+++ b/src/assets/images/zoom-in.png
--- a/src/assets/images/zoom-out.png
+++ b/src/assets/images/zoom-out.png
--- a/src/components/MyComponent/MyMap/my-map.vue
+++ b/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

--- a/src/store/actions.ts
+++ b/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(
    {

--- a/src/store/index.ts
+++ b/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>

--- a/src/store/mutations.ts
+++ b/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 {

--- a/src/store/state.ts
+++ b/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: [] },

--- a/src/view/community.vue
+++ b/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,
    }
  },
 })

--- a/src/view/community/community-photo.vue
+++ b/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',
        },
      ]
    })

--- a/src/view/community/left-section.vue
+++ b/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

--- a/src/view/components/map-btns.vue
+++ b/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

--- a/src/view/components/video-component.vue
+++ b/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

--- a/src/view/hooks/useSwitchMap.ts
+++ b/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,
  }
 }
--- a/src/view/main.vue
+++ b/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,
    }
  },
 })

--- a/src/view/right/case-analysis.vue
+++ b/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,12 +111,15 @@ export default defineComponent({

 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
-.nav
+.box
+  overflow hidden
+  .nav
    width 100%
+    overflow hidden
    display flex
    align-items center
    justify-content space-between
-  margin 0.05rem 0
+    margin-top 0.05rem
    >div
      width 75%
      &:last-child
@@ -133,13 +136,14 @@ export default defineComponent({
            color $secondary-color
            border-color @color
            background rgba(50, 197, 255, 0.2)
-.rank
+  .rank
    overflow hidden
+    // height 1rem
    .content
-    height 1rem
+      height 1.2rem
+      overflow hidden
+  .place
    overflow hidden
-.place
-  margin 0.05rem 0
    .content
      display flex
      justify-content space-between

--- a/src/view/right/complain.vue
+++ b/src/view/right/complain.vue
@@ -254,8 +254,9 @@ export default defineComponent({
 .box
  flex-direction column
  display flex
-  height 97%
-.summary
+  height 95%
+  overflow hidden
+  .summary
    height 5%
    display flex
    justify-content space-between
@@ -272,10 +273,9 @@ export default defineComponent({
          font-weight bold
        p
          color #ccc
-.manage
-  flex 1
+  .manage
    display flex
-  // height 60%
+    height 70%
    // margin-bottom .05rem
    .content
      flex 1
@@ -314,7 +314,7 @@ export default defineComponent({
                  flex 4
                  &:last-child
                    flex 1
-.emergency
+  .emergency
    height 1.2rem
    overflow hidden
    // overflow hidden

--- a/src/view/right/demand.vue
+++ b/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,67 +203,44 @@ export default defineComponent({
      })),
    })
    const pieData = computed(() => {
-      if (workstationKind.value[0]) {
      return [
        {
          name: '第一工作站',
          value:
-              (
-                (workstationKind.value[0].statistical.oneDisposalNum /
-                  workstationKind.value[0].statistical.oneNum) *
+            parseInt(
+              (pieDatamodel.value.oneDisposalNum / pieDatamodel.value.oneNum) *
                100
-              ).toFixed(0) || 0,
-            num: workstationKind.value[0].statistical.oneDisposalNum || 0,
+            ) || 0,
+          num: pieDatamodel.value.oneNum,
          color: '#47B3FF',
        },
        {
          name: '第二工作站',
          value:
-              (
-                (workstationKind.value[0].statistical.twoDisposalNum /
-                  workstationKind.value[0].statistical.twoNum) *
+            parseInt(
+              (pieDatamodel.value.twoDisposalNum / pieDatamodel.value.twoNum) *
                100
-              ).toFixed(0) || 0,
-            num: workstationKind.value[0].statistical.twoDisposalNum || 0,
+            ) || 0,
+          num: pieDatamodel.value.twoNum,
          color: '#FF9D27',
        },
        {
          name: '第三工作站',
          value:
-              (
-                (workstationKind.value[0].statistical.threeDisposalNum /
-                  workstationKind.value[0].statistical.threeNum) *
+            parseInt(
+              (pieDatamodel.value.threeDisposalNum /
+                pieDatamodel.value.threeNum) *
                100
-              ).toFixed(0) || 0,
-            num: workstationKind.value[0].statistical.threeDisposalNum || 0,
+            ) || 0,
+          num: pieDatamodel.value.threeNum,
          color: '#6EB629',
        },
      ]
-      } else {
-        return [
-          {
-            name: '第一工作站',
-            value: 0,
-            num: 0,
-            color: '#47B3FF',
-          },
-          {
-            name: '第二工作站',
-            value: 0,
-            num: 0,
-            color: '#FF9D27',
-          },
-          {
-            name: '第三工作站',
-            value: 0,
-            num: 0,
-            color: '#6EB629',
-          },
-        ]
-      }
    })
-    const pieSeries = pieData.value.map((item, i) => {
-      const rate = Math.round((pieData.value.length - i) * fontSize.value) + 10
+    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',
@@ -295,17 +272,19 @@ export default defineComponent({
          ],
        }
      })
-    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,7 +318,8 @@ $arrow-style()
  bottom 0
  margin auto
  transform translate(-90%, 0)
-.process
+.today-case
+  .process
    margin-top 0.1rem
    position relative
    >img
@@ -375,7 +356,7 @@ $arrow-style()
          font-size 0.12rem
        p
          color #ccc
-.chart
+  .chart
    width 100%
    height 1.1rem
    &.wrapper
@@ -384,12 +365,15 @@ $arrow-style()
        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

--- a/src/view/right/key-task.vue
+++ b/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背景加载一个美化过的云图片，重合放在这个图表下面。
-              },
+              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',
+              // 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>
--- a/src/view/right/public-manage.vue
+++ b/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>
--- a/weihailu.png
+++ b/weihailu.png