街道、工作站切换全局配置

src/components/MyComponent/MyAnimate/my-animate.vue

@@ -4,6 +4,7 @@
     class="animate__animated"
     :enter-active-class="`animate__${enter}`"
     :leave-active-class="`animate__${leave}`"
+    :style="`animation-duration: ${duration}ms`"
   >
     <slot />
   </transition>
@@ -24,6 +25,11 @@ export default defineComponent({
       type: String as PropType<string>,
       required: true,
     },
+    /** 动画执行时间 */
+    duration: {
+      type: Number as PropType<number>,
+      default: 500,
+    },
   },
 })
 </script>

src/components/MyComponent/MyTitle/my-title.vue

@@ -5,7 +5,7 @@
       <span>{{ date }}</span>
       <span>{{ time }}</span>
     </div>
-    <div class="btn-container">
+    <div v-if="curView.type === 'street'" class="btn-container">
       <div
         v-for="btn in btns"
         :key="btn.name"
@@ -15,12 +15,12 @@
         {{ btn.name }}
       </div>
     </div>
-    <h1><slot /></h1>
+    <h1><slot />{{ curView.name.includes('工作站') ? curView.name : '' }}</h1>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeUnmount, ref } from 'vue'
+import { defineComponent, onBeforeUnmount, ref, computed } from 'vue'
 import { getDate, getTime } from '../util'
 import store from '@/store'
 
@@ -45,10 +45,10 @@ export default defineComponent({
         type: 'safety',
       },
     ])
-    const curBtn = ref('manage')
+    const curBtn = computed(() => store.state.curTheme)
+    const curView = computed(() => store.state.curView)
     const handleThemeSelect = (type: string) => {
       if (curBtn.value === type) return
-      curBtn.value = type
       store.commit('SET_CURRENT_THEME', type)
     }
     timer.value = setInterval(() => {
@@ -64,6 +64,7 @@ export default defineComponent({
       timer,
       btns,
       curBtn,
+      curView,
       handleThemeSelect,
     }
   },
@@ -107,6 +108,7 @@ export default defineComponent({
     display flex
     position absolute
     right 30%
+    color #ccc
     >div
       $center()
       padding .03rem .1rem
@@ -116,5 +118,6 @@ export default defineComponent({
       cursor pointer
       &:hover
       &.on
+        color #fff
         background url('@/assets/images/btn-bg-on.png') 100% / 100% no-repeat
 </style>

src/store/index.ts

@@ -4,8 +4,14 @@ import mutations from './mutations'
 import actions from './actions'
 
 export type ThemeType = 'manage' | 'service' | 'safety'
+export interface ViewType {
+  name: string
+  type: 'street' | 'work1' | 'work2' | 'work3'
+}
 export interface GlobalStateProps {
   showLoading: boolean
+  curView: ViewType
+  readonly viewOptions: ViewType[]
   curTheme: ThemeType
 }
 export default createStore<GlobalStateProps>({

src/store/mutations.ts

-import { GlobalStateProps, ThemeType } from './index'
+import { GlobalStateProps, ThemeType, ViewType } from './index'
 
 export default {
   SET_LOADING(state: GlobalStateProps, val: boolean): void {
     state.showLoading = val
   },
+  SET_CURRENT_VIEW(state: GlobalStateProps, val: ViewType): void {
+    state.curView = val
+  },
   SET_CURRENT_THEME(state: GlobalStateProps, val: ThemeType): void {
     state.curTheme = val
   },

src/store/state.ts

 import { GlobalStateProps } from './index'
 export default {
   showLoading: false,
+  curView: { name: '南京东路街道', type: 'street' },
+  viewOptions: [
+    { name: '南京东路街道', type: 'street' },
+    { name: '第一工作站', type: 'work1' },
+    { name: '第二工作站', type: 'work2' },
+    { name: '第三工作站', type: 'work3' },
+  ],
   curTheme: 'manage',
 } as GlobalStateProps

src/view/components/view-selector.vue

+<template>
+  <div id="view-selector" class="view-selector">
+    <a-select
+      :value="curViewType"
+      dropdown-class-name="view-selector-drop-down"
+      @select="handleChange"
+    >
+      <a-select-option
+        v-for="option in options"
+        :key="option.type"
+        :value="option.type"
+      >
+        {{ option.name }}
+      </a-select-option>
+    </a-select>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import store from '@/store'
+
+export default defineComponent({
+  name: 'ViewSelector',
+  setup() {
+    const curViewType = computed(() => store.state.curView.type)
+    const options = computed(() => store.state.viewOptions)
+    const handleChange = (type: string) => {
+      store.commit(
+        'SET_CURRENT_VIEW',
+        options.value.find((option) => type === option.type)
+      )
+    }
+    return {
+      curViewType,
+      options,
+      handleChange,
+    }
+  },
+})
+</script>
+
+<style lang="stylus">
+@import '../../components/MyComponent/main.styl'
+
+$bg = rgba(13, 39, 76, .7)
+$size = .1rem
+$height = .26rem
+
+#view-selector.view-selector
+  position fixed
+  top .45rem
+  left calc(16vw + .1rem)
+  z-index 99
+  .ant-select
+    background $bg
+    min-width .9rem
+    .ant-select-selector
+      min-width .9rem
+      border-top none
+      border-left none
+      border-right none
+      height $height
+      .ant-select-selection-item
+        font-size $size
+        line-height $height
+        text-align center
+        color #fff
+        font-weight bold
+    .ant-select-arrow
+      font-size $size * 0.8
+.view-selector-drop-down
+  &.ant-select-dropdown
+    background $bg
+    font-size $size
+    .ant-select-item
+      font-size $size
+      line-height $height / 2
+    .ant-select-item-option-selected:not(.ant-select-item-option-disabled)
+      background $bg
+      font-size $size
+</style>

src/view/left/left-component.vue → src/view/left/command.vue

@@ -83,9 +83,8 @@ import Brief, { BriefProp } from '../components/brief.vue'
 import Cricle from '../components/circle.vue'
 
 export default defineComponent({
-  name: 'LeftComponent',
+  name: 'Command',
   components: { Tabs, SubTitle, Summary, Brief, Cricle },
-
   setup() {
     const leaders = ref([
       {

src/view/left/manage-basic.vue

+<template>
+  <m-card mode="border">
+    <m-card title="管理基数"></m-card>
+    <m-card title="指挥体系"></m-card>
+    <m-card title="网格力量"></m-card>
+  </m-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ManageBasic',
+  setup() {},
+})
+</script>
+
+<style lang="stylus" scoped></style>

src/view/main.vue

@@ -7,36 +7,74 @@
   >
     <m-title area="title">南东城运</m-title>
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
-      <LeftComponent area="left" />
+      <Command v-show="'street' === curViewType" area="left" />
     </m-animate>
-    <m-animate enter="fadeInRight" leave="fadeOutRight">
-      <PublicManage v-show="curTheme === 'manage'" area="right" />
+    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
+      <ManageBasic v-show="'street' !== curViewType" area="left" />
     </m-animate>
-    <m-animate enter="fadeInRight" leave="fadeOutRight">
-      <PublicService v-show="curTheme === 'service'" area="right" />
+
+    <m-animate
+      v-for="part in streetComponentList"
+      :key="part.name"
+      enter="fadeInRight"
+      leave="fadeOutRight"
+    >
+      <component
+        :is="part.component"
+        v-show="'street' === curViewType && curTheme === part.name"
+        area="right"
+      />
     </m-animate>
     <m-animate enter="fadeInRight" leave="fadeOutRight">
-      <PublicSafety v-show="curTheme === 'safety'" area="right" />
+      <PublicWork v-show="'street' !== curViewType" area="right" />
     </m-animate>
-    <!-- <PublicService area="right" /> -->
+    <ViewSelector />
   </m-grid>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import LeftComponent from './left/left-component.vue'
+import ManageBasic from './left/manage-basic.vue'
+import Command from './left/command.vue'
+import PublicWork from './right/public-work.vue'
 import PublicManage from './right/public-manage.vue'
 import PublicService from './right/public-service.vue'
 import PublicSafety from './right/public-safety.vue'
+import ViewSelector from './components/view-selector.vue'
 import store from '@/store'
 
 export default defineComponent({
   name: 'Main',
-  components: { LeftComponent, PublicManage, PublicService, PublicSafety },
+  components: {
+    ManageBasic,
+    Command,
+    PublicWork,
+    PublicManage,
+    PublicService,
+    PublicSafety,
+    ViewSelector,
+  },
   setup() {
+    const curViewType = computed(() => store.state.curView.type)
     const curTheme = computed(() => store.state.curTheme)
+    const streetComponentList = computed(() => [
+      {
+        name: 'manage',
+        component: PublicManage,
+      },
+      {
+        name: 'service',
+        component: PublicService,
+      },
+      {
+        name: 'safety',
+        component: PublicSafety,
+      },
+    ])
     return {
+      curViewType,
       curTheme,
+      streetComponentList,
     }
   },
 })

src/view/right/company.vue

@@ -10,7 +10,7 @@
       </div>
     </div>
     <div class="content">
-      <div class="chart">
+      <div v-if="showChart" class="chart">
         <m-pie :dataset="pieData" :option="pieOption" />
       </div>
       <div class="legend">
@@ -30,11 +30,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
-
+import { defineComponent, ref, computed } from 'vue'
+import store from '@/store'
 export default defineComponent({
   name: 'Company',
   setup() {
+    const showChart = computed(() => store.state.curTheme === 'safety')
     const sum = ref([
       { name: '本街道注册', value: 6741 },
       { name: '境外注册', value: 1658, icon: 'icon1.png' },
@@ -72,6 +73,7 @@ export default defineComponent({
       ],
     })
     return {
+      showChart,
       sum,
       pieData,
       pieOption,

src/view/right/ecology.vue

@@ -96,7 +96,6 @@ export default defineComponent({
     border .04rem solid rgba(0,0,0,.25)
     text-align center
     flex-direction column
-    font-size .08rem
     &:nth-of-type(1)
       top 0
       left 0

src/view/right/old.vue

@@ -12,7 +12,7 @@
     <div>
       <m-sub>年龄分布</m-sub>
       <div class="distribute">
-        <div class="chart">
+        <div v-if="showChart" class="chart">
           <m-pie :dataset="pieData" :option="pieOption" />
         </div>
         <div class="legend">
@@ -111,7 +111,7 @@ export default defineComponent({
         type: 'pie',
         roseType: 'radius',
         radius: ['10%', '90%'],
-        center: ['50%', '55%'],
+        center: ['50%', '50%'],
         label: {
           show: false,
         },
@@ -191,6 +191,7 @@ export default defineComponent({
   .legend
     display flex
     flex-wrap wrap
+    align-items center
     flex 1
     >div
       width 50%

src/view/right/public-work.vue

+<template>
+  <div class="public-work">
+    <m-card mode="border"></m-card>
+    <m-card mode="border"></m-card>
+    <m-card mode="border"></m-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'PublicWork',
+  setup() {},
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.public-work
+  $full()
+  display flex
+  justify-content space-between
+  >div
+    height 100%
+    width 33%
+</style>