样式微调

src/store/actions.ts

@@ -557,7 +557,7 @@ export default {
         params,
       })
     ).data
-    console.log(content, '案件分析 - 分类排行')
+    // console.log(content, '案件分析 - 分类排行')
     commit('SET_CASE_CLASSIFICATION_RANK', content)
   },
   async GET_MOREHAPPEN_ADDR(
@@ -577,7 +577,7 @@ export default {
         params,
       })
     ).data
-    console.log(content, '案件分析 - 多发地点')
+    // console.log(content, '案件分析 - 多发地点')
     commit('SET_MOREHAPPEN_ADDR', content)
   },
 }

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

@@ -50,8 +50,6 @@ export default defineComponent({
   name: 'CaseAnalysis',
   components: { Tabs, SubTitle, Place },
   setup() {
-    const todayCase = computed(() => store.state.todayCase)
-
     const curTab = ref('综合')
     const tabs = ref<TabsProp[]>([
       { name: '综合管理', key: '综合' },
@@ -69,10 +67,6 @@ export default defineComponent({
       [() => curTab.value, () => curOption.value],
       ([type, time]) => {
         if (!time || !type) return
-
-        console.log(type)
-        console.log(time)
-
         store.dispatch('GET_CASE_CLASSIFICATION_RANK', {
           managementType: type,
         })
@@ -103,32 +97,6 @@ export default defineComponent({
       }))
     })
 
-    // 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 },
-    // ])
-    // const placeList = ref<PlaceProp[]>([
-    //   { name: '延安东路1292弄', value: 3, type: '路段' },
-    //   { name: '延安东路1293弄', value: 5, type: '小区' },
-    //   { name: '延安东路1294弄', value: 8, type: '商业' },
-    // ])
     return {
       tabs,
       options,
@@ -167,6 +135,7 @@ export default defineComponent({
           background rgba(50, 197, 255, 0.2)
 .rank
   min-height 1rem
+  overflow hidden
   .content
     height 1rem
     overflow hidden

src/view/right/key-task.vue

 <template>
   <m-card title="重点工作">
-    <div id="cloud" class="box"></div>
-    <!-- <img src="@/assets/images/key-task.png" /> -->
+    <div v-if="showChart" id="cloud" class="box"></div>
   </m-card>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted } from 'vue'
+import { defineComponent, watch, onMounted, computed } from 'vue'
 import * as echarts from 'echarts'
+import store from '@/store'
 import 'echarts-wordcloud'
 
 export default defineComponent({
   name: 'KeyTask',
   setup() {
-    onMounted(() => init())
+    const showChart = computed(() => store.state.curTheme === 'manage')
+
+    // onMounted(() => init())
     const init = () => {
       const cloudCharts = echarts.init(document.getElementById('cloud'))
       //说明
@@ -142,6 +144,20 @@ export default defineComponent({
 
       cloudCharts.setOption(option)
     }
+
+    watch(
+      [() => showChart.value],
+      ([type]) => {
+        if (!type) return
+        setTimeout(() => {
+          init()
+        }, 1000)
+      },
+      { immediate: true }
+    )
+    return {
+      showChart,
+    }
   },
 })
 </script>
@@ -150,5 +166,7 @@ export default defineComponent({
 .box
   height 95%
   width 100%
+  box-sizing border-box
+  overflow hidden
   // background #000
 </style>

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>
@@ -140,7 +145,14 @@ export default defineComponent({
       ],
     })
 
-    const clickStreetName = (item: any): void => {
+    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
     }
@@ -203,6 +215,7 @@ export default defineComponent({
   display flex
   >div
     &:first-child
+      cursor pointer
       flex 1.7
       display flex
       flex-wrap wrap
@@ -214,6 +227,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>