构建指挥体系

package.json

@@ -13,8 +13,8 @@
     "animate.css": "^4.1.1",
     "axios": "^0.21.1",
     "countup.js": "^2.0.7",
+    "dayjs": "^1.10.4",
     "echarts": "^5.0.1",
-    "moment": "^2.24.0",
     "normalize.css": "^8.0.1",
     "qs": "^6.9.6",
     "vue": "^3.0.5",

src/App.vue

 <template>
-  <div></div>
+  <Main />
+  <m-loader v-if="showLoading" />
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
+import Main from '@/view/main.vue'
+import store from '@/store'
 
 export default defineComponent({
   name: 'App',
+  components: { Main },
+  setup() {
+    const showLoading = computed(() => store.state.showLoading)
+    return {
+      showLoading,
+    }
+  },
 })
 </script>
 
@@ -17,6 +27,12 @@ export default defineComponent({
 @font-face
   font-family Pangmenzhengdao
   src url(./assets/font/pangmenzhengdao.ttf)
+@font-face
+  font-family WeiBei
+  src url(./assets/font/JWeiBei.ttf)
+@font-face
+  font-family ZCool
+  src url(./assets/font/zcool.ttf)
 
 html, body
   background rgba(0,0,0,0.5)
@@ -29,6 +45,8 @@ html, body
   font-size 16vh
   line-height 1.5
   color #fff
+p
+  margin 0
 #app
   width 100%
   height 100%

src/components/MyComponent/MyCard/mode-2.vue

+<template>
+  <div class="card-wrapper">
+    <div class="card-title">
+      {{ title }}
+    </div>
+    <div class="card-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+
+export default defineComponent({
+  name: 'Mode2',
+  props: {
+    title: {
+      type: String as PropType<string>,
+      required: true,
+    },
+  },
+})
+</script>
+
+<style scoped lang="stylus">
+@import '../main.styl'
+.card-wrapper
+  .card-title
+    display flex
+    background url('/src/assets/images/card-mode2-header.png') center / cover no-repeat
+    color $card-title-color
+    font-size $card-title-size
+    height .2rem
+    font-weight bold
+    padding-left .2rem
+    align-items center
+    font-size .13rem
+    box-sizing border-box
+    border-bottom .01rem solid $primary-border
+  .card-content
+    display flex
+    flex-direction column
+    justify-content space-between
+    position relative
+    box-sizing border-box
+    padding .02rem .05rem
+    overflow hidden !important
+    >div
+      $full()
+</style>

src/components/MyComponent/MyCard/mode-border.vue

+<template>
+  <div class="card-wrapper">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ModeBorder',
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../main.styl'
+.card-wrapper
+  padding .05rem
+  box-sizing border-box
+  border .01rem solid $primary-border
+  background linear-gradient(to bottom, rgba(30, 193, 255, .3), transparent 5%,  transparent 95%, rgba(30, 193, 255, .3) 100%)
+  display flex
+  flex-direction column
+</style>

src/components/MyComponent/MyCard/my-card.vue

@@ -11,7 +11,9 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
 import MyAnimate from '../MyAnimate/my-animate.vue'
-import mode1 from './mode1.vue'
+import mode1 from './mode-1.vue'
+import mode2 from './mode-2.vue'
+import modeBorder from './mode-border.vue'
 import '../main.styl'
 
 export default defineComponent({
@@ -20,15 +22,17 @@ export default defineComponent({
   components: {
     MyAnimate,
     mode1,
+    mode2,
+    modeBorder,
   },
   props: {
     title: {
       type: String as PropType<string>,
-      required: true,
+      default: '',
     },
     mode: {
       type: String as PropType<string>,
-      default: '1',
+      default: '2',
     },
     enter: {
       type: String as PropType<string>,
@@ -44,6 +48,10 @@ export default defineComponent({
       switch (props.mode) {
         case '1':
           return mode1
+        case '2':
+          return mode2
+        case 'border':
+          return modeBorder
         default:
           return mode1
       }

src/components/MyComponent/MySub/my-sub.vue

+<template>
+  <div class="my-sub">
+    <span />
+    <p><slot /></p>
+    <img src="/src/assets/images/sub-dot.png" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'MySub',
+  displayName: 'm-sub',
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../main.styl'
+.my-sub
+  display flex
+  align-items center
+  >span
+    display inline-block
+    width .02rem
+    height @width
+    background $secondary-color
+    margin-right .05rem
+  >p
+    font-family $font-zcool
+    color $secondary-color
+    flex 1
+    font-size .12rem
+  >img
+    width .6rem
+</style>

src/components/MyComponent/MyTable/my-table.vue

@@ -23,18 +23,18 @@
           :key="key"
           :style="`flex:${calcWidth[i]}`"
         >
-          <p
-            v-if="key.indexOf('>') >= 0"
-            :style="`text-align:${calcAlign[i]}`"
-            v-html="transValue(item, key)"
-          />
+          <p v-if="key.indexOf('>') >= 0" :style="`text-align:${calcAlign[i]}`">
+            {{ transValue(item, key) }}
+          </p>
           <img
             v-else-if="key.indexOf('#') >= 0 && key.split('#')[1] === 'image'"
             :src="item[key.split('#')[0]]"
             :draggable="false"
             @click.stop="handleViewImage(item[key.split('#')[0]])"
           />
-          <p v-else :style="`text-align:${calcAlign[i]}`" v-html="item[key]" />
+          <p v-else :style="`text-align:${calcAlign[i]}`">
+            {{ item[key] }}
+          </p>
         </div>
       </div>
     </div>
@@ -142,15 +142,22 @@ export default defineComponent({
 .my-table
   $full()
   p
-    padding .05rem .1rem
+    padding .05rem
     margin 0
+    flex 1
+    box-sizing border-box
   .table-title
     display flex
     background $table-title-bg
     color $blue
     font-weight bold
+    box-sizing border-box
+    >div
+      box-sizing border-box
   .table-content
+    box-sizing border-box
     >div
+      box-sizing border-box
       display flex
       background $table-content-bg
       &:nth-child(odd)

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

 <template>
   <div class="my-title">
     <img src="/src/assets/images/title-bg.png" class="bg" />
-    <div class="date">{{ date }} {{ time }}</div>
+    <div class="date">
+      <span>{{ date }}</span>
+      <span>{{ time }}</span>
+    </div>
+    <div class="btn-container">
+      <div
+        v-for="btn in btns"
+        :key="btn.name"
+        :class="{ on: btn.type === curBtn }"
+        @click="curBtn = btn.type"
+      >
+        {{ btn.name }}
+      </div>
+    </div>
     <h1><slot /></h1>
   </div>
 </template>
@@ -17,6 +30,22 @@ export default defineComponent({
     const date = ref(getDate())
     const time = ref('')
     const timer = ref<number | null>(null)
+    const btns = ref([
+      {
+        name: '公共管理',
+        type: 'manage',
+      },
+      {
+        name: '公共服务',
+        type: 'service',
+      },
+      {
+        name: '公共安全',
+        type: 'safety',
+      },
+    ])
+    const curBtn = ref('manage')
+
     timer.value = setInterval(() => {
       time.value = getTime()
     })
@@ -28,6 +57,8 @@ export default defineComponent({
       date,
       time,
       timer,
+      btns,
+      curBtn,
     }
   },
 })
@@ -38,6 +69,7 @@ export default defineComponent({
 .my-title
   $full()
   $center()
+  justify-content flex-start
   position relative
   background-size cover
   background-position center
@@ -45,19 +77,38 @@ export default defineComponent({
   .date
     z-index 2
     position absolute
-    top .07rem
-    right 3%
+    right 1%
+    span
+      display block
+      text-align right
   .bg
     position absolute
     $full()
     top 0
     left 0
   h1
+    font-family $font-weibei
+    margin-left 10%
     z-index 2
     background-clip text
     -webkit-background-clip text
     -webkit-text-fill-color transparent
-    background-image linear-gradient(to bottom, #fff, #B3EBFF)
-    font-size .2rem
+    background-image linear-gradient(to bottom, #fff, #00C7FF)
+    font-size .22rem
     letter-spacing .05rem
+  .btn-container
+    z-index 2
+    display flex
+    position absolute
+    right 30%
+    >div
+      $center()
+      padding .03rem .1rem
+      box-sizing border-box
+      margin-left .1rem
+      background url('/src/assets/images/btn-bg.png') 100% / 100% no-repeat
+      cursor pointer
+      &:hover
+      &.on
+        background url('/src/assets/images/btn-bg-on.png') 100% / 100% no-repeat
 </style>

src/components/MyComponent/index.ts

@@ -18,6 +18,7 @@ import MyBar from './MyChart/my-bar.vue'
 import MyPie from './MyChart/my-pie.vue'
 import MyRadar from './MyChart/my-radar.vue'
 import MyScatter from './MyChart/my-scatter.vue'
+import MySub from './MySub/my-sub.vue'
 // import { withInstall } from './util'
 import 'normalize.css'
 
@@ -40,6 +41,7 @@ const components = [
   MyPie,
   MyRadar,
   MyScatter,
+  MySub,
 ]
 
 const install = (app: App): App => {
@@ -71,6 +73,7 @@ export {
   MyPie,
   MyRadar,
   MyScatter,
+  MySub,
 }
 
 // 默认导出 —— 使用import MyComponent from './components/MyComponent'来引入所有组件

src/components/MyComponent/main.styl

 $font-pang = Pangmenzhengdao, 'Avenir', Helvetica, Arial, sans-serif
 $font-din = DIN, 'Avenir', Helvetica, Arial, sans-serif
+$font-weibei = WeiBei, 'Avenir', Helvetica, Arial, sans-serif
+$font-zcool = ZCool, 'Avenir', Helvetica, Arial, sans-serif
 
 $full(w = 100%, h = 100%)
   width w
@@ -23,6 +25,7 @@ $primary-bg = rgba(49,94,139,.3)
 $primary-border = rgba(91,213,255,.5)
 $blue = #2F86EE
 $edge = #00f2ff
+$secondary-color = #5BD5FF
 
 $card-bg = linear-gradient(to bottom, rgba(5,71,138,.2), rgba(5,71,138,.6))
 $card-title-color = #fff

src/components/MyComponent/util.ts

 import { App, Plugin } from 'vue'
-import moment from 'moment'
-import 'moment/locale/zh-cn'
-moment.locale('zh-ch')
+import dayjs from 'dayjs'
+import ch from 'dayjs/locale/zh-cn'
+import LocalizedFormat from 'dayjs/plugin/LocalizedFormat'
+dayjs.extend(LocalizedFormat)
+dayjs.locale(ch)
 
 export const withInstall = <T>(comp: T) => {
   const c = comp as any
@@ -11,5 +13,5 @@ export const withInstall = <T>(comp: T) => {
   return comp as T & Plugin
 }
 
-export const getDate = (): string => moment().format('YYYY-MM-DD dddd')
-export const getTime = (): string => moment().format('LTS')
+export const getDate = (): string => dayjs().format('YYYY-MM-DD')
+export const getTime = (): string => dayjs().format('dddd LTS')

src/view/left/left-component.vue

+<template>
+  <m-card mode="border">
+    <m-card class="card" title="指挥体系">
+      <div class="command">
+        <div class="flag">
+          <img src="/src/assets/images/zheng.png" />
+          <img src="/src/assets/images/jing.png" />
+        </div>
+        <div class="leader">
+          <div v-for="(item, i) in leaders" :key="i">
+            <img :src="`/src/assets/images/${item.img}`" />
+            <div>
+              <p>{{ item.type }}</p>
+              <span>{{ item.name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="disposal">
+        <m-sub>处置力量</m-sub>
+        <div class="duty">
+          <div>
+            <p>值班人员</p>
+            <p>日间值班 · 08:00 ~ 18:00</p>
+          </div>
+          <span />
+          <div>
+            <p>值班人员</p>
+            <p>夜间值班 · 18:00 ~ 08:00</p>
+          </div>
+        </div>
+        <m-table
+          class="duty-table"
+          :template="[
+            '工作小组|组长|电话*1.2|常驻人数|报道制人数',
+            'group|leader|phone|number1|number2',
+          ]"
+          :data="dutyTableData"
+        />
+      </div>
+      <div class="soldier">
+        <m-sub>单兵巡查边量</m-sub>
+        <div class="btns">
+          <div v-for="btn in btns" :key="btn.name">
+            <img :src="`/src/assets/images/${btn.icon}`" />
+            {{ btn.name }}
+          </div>
+        </div>
+        <div class="list">
+          <div v-for="soldier in soldierList" :key="soldier.id">
+            <p>{{ soldier.name }}</p>
+            <p>{{ soldier.phone }}</p>
+            <span>查看点位</span>
+          </div>
+        </div>
+      </div>
+    </m-card>
+    <m-card class="card" title="党建和经济"></m-card>
+  </m-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'LeftComponent',
+  setup() {
+    const leaders = ref([
+      {
+        img: 'avatar1.png',
+        type: '指挥长',
+        name: '姓名',
+      },
+      {
+        img: 'avatar2.png',
+        type: '指挥长',
+        name: '姓名',
+      },
+      {
+        img: 'avatar1.png',
+        type: '指挥长',
+        name: '姓名',
+      },
+      {
+        img: 'avatar2.png',
+        type: '指挥长',
+        name: '姓名',
+      },
+    ])
+    const dutyTableData = ref([
+      {
+        group: '第一小组',
+        leader: '组长名',
+        phone: '1356249823',
+        number1: 5,
+        number2: 5,
+      },
+      {
+        group: '第一小组',
+        leader: '组长名',
+        phone: '1356249823',
+        number1: 5,
+        number2: 5,
+      },
+      {
+        group: '第一小组',
+        leader: '组长名',
+        phone: '1356249823',
+        number1: 5,
+        number2: 5,
+      },
+    ])
+    const btns = ref([
+      {
+        icon: 'icon1.png',
+        name: '单兵专题',
+      },
+      {
+        icon: 'icon2.png',
+        name: '排班表',
+      },
+    ])
+    const soldierList = ref([
+      {
+        id: '1',
+        name: '姓名',
+        phone: '13652103974',
+      },
+      {
+        id: '2',
+        name: '姓名',
+        phone: '13652103974',
+      },
+      {
+        id: '3',
+        name: '姓名',
+        phone: '13652103974',
+      },
+    ])
+    return {
+      leaders,
+      dutyTableData,
+      btns,
+      soldierList,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+.card
+  flex 1
+  &:first-child
+    flex 2
+.command
+  display flex
+  .flag
+    display flex
+    flex-direction column
+    justify-content space-around
+    margin-right .3rem
+    >img
+      display block
+      width .34rem
+      height @width
+      margin .05rem 0
+  .leader
+    display flex
+    flex-wrap wrap
+    >div
+      width 50%
+      display flex
+      align-items center
+      p
+        font-size .12rem
+        font-weight bold
+      img
+        width .3rem
+        height @width
+        margin-right .1rem
+      span
+        color #ccc
+.disposal
+  .duty
+    display flex
+    align-items center
+    margin-bottom .05rem
+    >span
+      width .01rem
+      height .14rem
+      margin 0 .2rem
+      background #5bd5ff
+    >div
+      flex 1
+      >p
+        &:last-child
+          color #ccc
+.soldier
+  margin .05rem 0
+  .btns
+    display flex
+    justify-content flex-end
+    >div
+      display flex
+      align-items center
+      color #47B3FF
+      margin-left .2rem
+      cursor pointer
+      transition .3s ease-in-out
+      &:hover
+        transform scale(1.1)
+        text-decoration underline
+      img
+        width .1rem
+        height @width
+        margin-right .05rem
+  .list
+    display flex
+    justify-content space-between
+    >div
+      width 30%
+      background url('/src/assets/images/border.png') 100% / 100% 100% no-repeat
+      padding .05rem .1rem
+      box-sizing border-box
+      span
+        color #47B3FF
+        cursor pointer
+</style>
+<style lang="stylus">
+$blue = #2F86EE
+$border = .01rem solid $blue
+.duty-table
+  .table-title
+    border $border
+    border-bottom none
+    >div
+      color #fff
+      background rgba(0, 118, 255, .3)
+    >div+div
+        border-left $border
+  .table-content
+    border-bottom $border
+    >div
+      border $border
+      border-bottom none
+      >div
+        background rgba(0, 118, 255, .15)
+      >div+div
+        border-left $border
+</style>

src/view/main.vue

+<template>
+  <m-grid
+    :template="['title title title', 'left . right']"
+    columns="16vw auto 49vw"
+    rows="0.4rem auto"
+    gap="0.05rem"
+  >
+    <m-title area="title">南东城运</m-title>
+    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
+      <LeftComponent area="left" />
+    </m-animate>
+    <m-animate enter="fadeInRight" leave="fadeOutRight">
+      <RightComponent area="right" />
+    </m-animate>
+  </m-grid>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import LeftComponent from './left/left-component.vue'
+import RightComponent from './right/right-component.vue'
+
+export default defineComponent({
+  name: 'Main',
+  components: { LeftComponent, RightComponent },
+})
+</script>
+
+<style lang="stylus" scoped></style>

src/view/right/right-component.vue

+<template>
+  <div></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'RightComponent',
+  setup() {},
+})
+</script>
+
+<style lang="stylus" scoped></style>

vite.config.js

@@ -14,13 +14,4 @@ export default defineConfig({
   //   base: './',
   // },
   // assetsDir: 'assets',
-  optimizeDeps: {
-    include: [
-      'moment/locale/zh-cn',
-      'echarts/core',
-      'echarts/components',
-      'echarts/charts',
-      'echarts/renderers',
-    ],
-  },
 })