几个弹窗

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

@@ -6,6 +6,8 @@
         <m-count v-if="addition.value" class="count" :value="addition.value" />
         <span v-if="addition.unit">{{ addition.unit }}</span>
       </div>
+      <img class="tri" src="@/assets/images/modal-head-tri.png" />
+      <img class="flag" :src="flag" />
     </div>
     <div class="card-content">
       <slot />
@@ -15,6 +17,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
+import flag from '@/assets/images/card-model2-flag.png'
 
 export interface AdditionProp {
   name?: string
@@ -33,6 +36,11 @@ export default defineComponent({
       default: null,
     },
   },
+  setup() {
+    return {
+      flag,
+    }
+  },
 })
 </script>
 
@@ -42,7 +50,9 @@ export default defineComponent({
   $full()
   .card-title
     display flex
-    background url('@/assets/images/card-mode2-header.png') center / cover no-repeat
+    // background url('@/assets/images/card-mode2-header.png') center / cover no-repeat
+    background linear-gradient(to bottom, transparent, rgba(0,148,255,.3))
+    position relative
     color $card-title-color
     font-size $card-title-size
     height .2rem
@@ -52,6 +62,14 @@ export default defineComponent({
     font-size .13rem
     box-sizing border-box
     border-bottom .01rem solid $primary-border
+    .tri
+      position absolute
+      left 0
+      width .2rem
+    .flag
+      position absolute
+      height 100%
+      right .05rem
     .addition
       display flex
       align-items center

src/components/MyComponent/MyDrawer/my-drawer.vue

@@ -53,10 +53,11 @@ export default defineComponent({
 @import '../main.styl'
 .my-drawer
   background url('@/assets/images/drawer-bg.png') 100% / 100% 100% no-repeat
+  background-color $table-title-bg
   position fixed
   top .45rem
   right .05rem
-  bottom .05rem
+  bottom @right
   z-index 9999
   padding .15rem .25rem
   $blur()

src/components/MyComponent/MyForm/my-form.vue

 <template>
-  <div />
+  <div class="my-form" :style="{ fontSize: `${size}rem` }">
+    <a-row v-for="(row, rowIndex) in layout" :key="rowIndex" class="row">
+      <a-col
+        v-for="(col, key) in row"
+        :key="key"
+        class="col"
+        :span="col.width"
+        :offset="col.offset || 0"
+      >
+        <div
+          :style="`text-align: ${
+            col.align || 'right'
+          }; width:${labelWidth}rem;`"
+        >
+          {{ col.label }}：
+        </div>
+        <template v-if="col.type == 'img'">
+          <img
+            v-for="img in model[key] && model[key].split(',')"
+            :key="img"
+            :src="img"
+            @click="handleView(img)"
+          />
+        </template>
+        <div v-else class="content">
+          {{ col.format ? col.format(model[key]) : model[key] || ' ' }}
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+  <MyModal v-model="showImg" title="图片">
+    <img v-if="showImg" style="max-height: 45vh; width: 100%" :src="curImg" />
+  </MyModal>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, PropType, ref } from 'vue'
+import MyModal from '../MyModal/my-modal.vue'
+
+interface ModelProp {
+  [key: string]: any
+}
+
+interface LayoutItemProp {
+  label: string | number
+  width: number
+  offset?: number
+  align?: 'left' | 'center' | 'right'
+  type?: 'img'
+  format?: (arg: any) => any
+}
+export interface LayoutProp {
+  [key: string]: LayoutItemProp
+}
 
 export default defineComponent({
   name: 'MyForm',
   displayName: 'm-form',
+  components: {
+    MyModal,
+  },
+  props: {
+    size: {
+      type: Number as PropType<number>,
+      default: 0.1,
+    },
+    labelWidth: {
+      type: Number as PropType<number>,
+      default: 1,
+    },
+    layout: {
+      type: Array as PropType<LayoutProp[]>,
+      required: true,
+    },
+    model: {
+      type: Object as PropType<ModelProp>,
+      default() {
+        return {}
+      },
+    },
+  },
+  setup() {
+    const showImg = ref(false)
+    const curImg = ref(null)
+    const handleView = (img: any) => {
+      curImg.value = img
+      showImg.value = true
+    }
+    return {
+      showImg,
+      curImg,
+      handleView,
+    }
+  },
 })
 </script>
 
-<style lang="stylus" scoped></style>
+<style lang="stylus" scoped>
+.my-form
+  .row
+    line-height 2
+    &:nth-child(odd)
+      background rgba(51,145,255,.2)
+  .col
+    display flex
+    align-items center
+    padding 0 .05rem
+    .content
+      flex 1
+    img
+      width 19%
+      height .5rem
+      margin .05rem .03rem .05rem 0
+      cursor pointer
+</style>

src/components/MyComponent/util.ts

@@ -5,7 +5,7 @@ import LocalizedFormat from 'dayjs/plugin/LocalizedFormat'
 dayjs.extend(LocalizedFormat)
 dayjs.locale(ch)
 
-export const withInstall = <T>(comp: T) => {
+export const withInstall = <T>(comp: T): T & Plugin => {
   const c = comp as any
   c.install = function (app: App) {
     app.component(c.displayName || c.name, comp)
@@ -15,3 +15,24 @@ export const withInstall = <T>(comp: T) => {
 
 export const getDate = (): string => dayjs().format('YYYY-MM-DD')
 export const getTime = (): string => dayjs().format('dddd LTS')
+
+export const toRGB = (c: string, opacity = 1): string => {
+  let color = c.toLowerCase()
+  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+  if (!color || !reg.test(color)) {
+    console.error('toRGB转换的颜色需要是十六进制颜色值')
+    return color
+  }
+  if (color.length === 4) {
+    let newColor = '#'
+    for (let i = 1; i < 4; i++) {
+      newColor += color.slice(i, i + 1).concat(color.slice(i, i + 1))
+    }
+    color = newColor
+  }
+  const result = []
+  for (let i = 1; i < 7; i += 2) {
+    result.push(parseInt(`0x${color.slice(i, i + 2)}`))
+  }
+  return `rgba(${result.join(',')}, ${opacity})`
+}

src/main.ts

 import { createApp } from 'vue'
 import App from './App.vue'
 import MyComponent from '@/components/MyComponent'
-import { Progress, Select, Input } from 'ant-design-vue'
+import { Progress, Select, Input, Row, Col } from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 import './assets/style/reset.styl'
 
@@ -10,4 +10,6 @@ createApp(App)
   .use(Progress)
   .use(Select)
   .use(Input)
+  .use(Row)
+  .use(Col)
   .mount('#app')

src/view/components/tabs.vue

@@ -72,6 +72,7 @@ export default defineComponent({
     >div
       flex-direction row
       align-items center
+      max-width .8rem
       &.on
       &:hover
         background url('@/assets/images/tab-on2.png') 100% / 100% 100% no-repeat

src/view/drawers/case-drawer.vue

+<template>
+  <div class="case-drawer">
+    <m-card title="房屋档案">
+      <SubTitle>小区信息</SubTitle>
+      <m-form
+        :layout="formLayout"
+        :model="formData"
+        :size="0.08"
+        :label-width="1.1"
+      />
+      <SubTitle>物业信息</SubTitle>
+      <m-form
+        :layout="formLayout"
+        :model="formData"
+        :size="0.08"
+        :label-width="1.1"
+      />
+    </m-card>
+    <m-card title="案件详情">
+      <div class="sum">
+        <p>黄浦区重庆北路216弄2~66号重新校区15号605室</p>
+        <span>案件分类</span> <span>综合</span>
+      </div>
+      <div v-for="item in details" :key="item.title" class="step">
+        <p class="title">
+          <img src="@/assets/images/dot.png" /> {{ item.title }}
+        </p>
+        <div class="content">
+          <p class="sub">{{ item.sub }}</p>
+          <p>{{ item.content }}</p>
+          <template v-if="item.imgs">
+            <img v-for="(img, i) in item.imgs" :key="i" :src="img" />
+          </template>
+        </div>
+      </div>
+    </m-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import SubTitle from '../components/sub-title.vue'
+import detail1 from '@/assets/images/case-detail1.png'
+import detail2 from '@/assets/images/case-detail2.png'
+
+export default defineComponent({
+  name: 'CaseDrawer',
+  components: { SubTitle },
+  setup() {
+    const formLayout = ref([
+      {
+        name: {
+          label: '小区名称',
+          width: 24,
+        },
+      },
+      {
+        address: {
+          label: '小区地址',
+          width: 24,
+        },
+      },
+      {
+        belong: {
+          label: '所属居委会',
+          width: 24,
+        },
+      },
+      {
+        buildingNum: {
+          label: '总门牌幢数',
+          width: 24,
+        },
+      },
+      {
+        roomNum: {
+          label: '总户数',
+          width: 24,
+        },
+      },
+      {
+        buidlingArea: {
+          label: '总建筑面积',
+          width: 24,
+        },
+      },
+      {
+        area: {
+          label: '占地面积',
+          width: 24,
+        },
+      },
+      {
+        rang: {
+          label: '小区四至范围',
+          width: 24,
+        },
+      },
+      {
+        excludeRang: {
+          label: '小区四至范围不包括',
+          width: 24,
+        },
+      },
+    ])
+    const formData = ref({
+      name: '测试文字',
+      address: '测试文字',
+      belong: '测试文字',
+      buildingNum: '测试文字',
+      roomNum: '测试文字',
+      buidlingArea: '测试文字',
+      area: '测试文字',
+      rang: '测试文字',
+      excludeRang: '测试文字',
+    })
+    const details = ref([
+      {
+        title: '发现 · 举报人',
+        sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
+        content:
+          '案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
+        imgs: [detail1, detail2],
+      },
+      {
+        title: '立案 · 举报人',
+        sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
+        content:
+          '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
+        imgs: [detail1, detail2],
+      },
+      {
+        title: '派遣 · 举报人',
+        sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
+        content:
+          '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
+      },
+      {
+        title: '处置 · 举报人',
+        sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
+        content:
+          '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
+        imgs: [detail1, detail2],
+      },
+    ])
+    return {
+      formLayout,
+      formData,
+      details,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.case-drawer
+  display flex
+  justify-content space-between
+  >div
+    width 35%
+    &:last-child
+      width 64%
+  .sum
+    border-bottom .01rem solid $primary-border
+    padding-bottom .1rem
+    span
+      display inline-block
+      font-size .08rem
+      padding 0 .03rem
+      border .01rem solid orange
+      border-radius .02rem
+      margin-right .03rem
+      color orange
+      &:last-child
+        color gold
+        border-color gold
+  .step
+    margin-top .05rem
+    p
+      &.title
+        font-size .12rem
+        display flex
+        align-items center
+        color $secondary-color
+        font-weight bold
+        >img
+          width .14rem
+          margin-right .05rem
+      &.sub
+        color #aaa
+        font-size .09rem
+        border-bottom .01rem solid $primary-border
+    .content
+      padding-left .15rem
+      border-left .01rem solid $secondary-color
+      margin-left .05rem
+      >img
+        width 1rem
+        margin-right .05rem
+</style>

src/view/drawers/population-drawer.vue

+<template>
+  <div class="population-drawer">
+    <m-card title="相关案件">
+      <div
+        v-for="(item, i) in caseList"
+        :key="i"
+        class="case-item"
+        :class="{ done: item.status === 1 }"
+      >
+        <div>
+          <p>
+            <span>{{ item.type }}</span>
+            {{ item.address }}
+          </p>
+          <p>{{ item.date }}</p>
+        </div>
+        <div>{{ item.content }}</div>
+        <div v-if="item.status === 1" class="flag">已结案</div>
+        <div v-else class="flag">处置中</div>
+      </div>
+    </m-card>
+    <m-card title="人口详情">
+      <Tabs class="tabs" :list="tabs" horizontal />
+      <SubTitle>基本信息</SubTitle>
+      <m-form :layout="layout1" :model="data1" :label-width="1.1" />
+      <SubTitle>房主信息</SubTitle>
+      <m-form :layout="layout2" :model="data2" :label-width="1.1" />
+      <Tabs class="tabs" :list="tabs2" horizontal />
+      <m-form :layout="layout3" :model="data3" :label-width="1.1" />
+    </m-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import Tabs, { TabsProp } from '../components/tabs.vue'
+import SubTitle from '../components/sub-title.vue'
+
+export default defineComponent({
+  name: 'PopulationDrawer',
+  components: { Tabs, SubTitle },
+  setup() {
+    const caseList = ref([
+      {
+        address: 'XX区XX路XX弄XX号',
+        date: '2021-01-23 ~ 2021-01-24',
+        type: '案件分类',
+        status: 1,
+        content:
+          '案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
+      },
+      {
+        address: 'XX区XX路XX弄XX号',
+        date: '2021-01-23 ~ 2021-01-24',
+        type: '案件分类',
+        status: 0,
+        content:
+          '案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
+      },
+      {
+        address: 'XX区XX路XX弄XX号',
+        date: '2021-01-23 ~ 2021-01-24',
+        type: '案件分类',
+        status: 0,
+        content:
+          '案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
+      },
+    ])
+    const tabs = ref<TabsProp[]>([
+      {
+        key: 'person',
+        name: '实住人',
+      },
+      {
+        key: 'house',
+        name: '房屋信息',
+      },
+    ])
+    const tabs2 = ref<TabsProp[]>([
+      {
+        key: 'community',
+        name: '小区信息',
+      },
+      {
+        key: 'room',
+        name: '门牌户室',
+      },
+      {
+        key: 'property',
+        name: '物业信息',
+      },
+      {
+        key: 'committee',
+        name: '业委会',
+      },
+      {
+        key: 'device',
+        name: '设施设备',
+      },
+      {
+        key: 'public',
+        name: '公共设施',
+      },
+    ])
+    const layout1 = ref([
+      {
+        community: {
+          label: '所属小区',
+          width: 12,
+        },
+        building: {
+          label: '门牌幢',
+          width: 12,
+        },
+      },
+      {
+        communityType: {
+          label: '小区类型',
+          width: 12,
+        },
+        roomNo: {
+          label: '室号',
+          width: 12,
+        },
+      },
+      {
+        company: {
+          label: '物业公司',
+          width: 12,
+        },
+        manager: {
+          label: '物业经理',
+          width: 12,
+        },
+      },
+      {
+        manageOffice: {
+          label: '管理处',
+          width: 12,
+        },
+        hasElev: {
+          label: '有无电梯',
+          width: 12,
+        },
+      },
+      {
+        yewei: {
+          label: '业委会',
+          width: 12,
+        },
+        juwei: {
+          label: '居委会',
+          width: 12,
+        },
+      },
+    ])
+    const data1 = ref({
+      community: '测试文字',
+      building: '测试文字',
+      communityType: '测试文字',
+      roomNo: '测试文字',
+      company: '测试文字',
+      manager: '测试文字',
+      manageOffice: '测试文字',
+      hasElev: '测试文字',
+      yewei: '测试文字',
+      juwei: '测试文字',
+    })
+    const layout2 = ref([
+      {
+        name: {
+          label: '姓名',
+          width: 12,
+        },
+        phone: {
+          label: '手机号码',
+          width: 12,
+        },
+      },
+      {
+        household: {
+          label: '户籍',
+          width: 12,
+        },
+      },
+    ])
+    const data2 = ref({
+      name: '暂无',
+      phone: '暂无',
+      household: '暂无',
+    })
+    const layout3 = ref([
+      {
+        name: {
+          label: '小区名称',
+          width: 24,
+        },
+      },
+      {
+        address: {
+          label: '小区地址',
+          width: 12,
+        },
+        belong: {
+          label: '所属居委会',
+          width: 12,
+        },
+      },
+      {
+        buildingNum: {
+          label: '总门牌幢数',
+          width: 12,
+        },
+        roomNum: {
+          label: '总户数',
+          width: 12,
+        },
+      },
+      {
+        buidlingArea: {
+          label: '总建筑面积',
+          width: 12,
+        },
+        area: {
+          label: '占地面积',
+          width: 12,
+        },
+      },
+      {
+        rang: {
+          label: '小区四至范围',
+          width: 12,
+        },
+        excludeRang: {
+          label: '小区四至范围不包括',
+          width: 12,
+        },
+      },
+    ])
+    const data3 = ref({
+      name: '测试文字',
+      address: '测试文字',
+      belong: '测试文字',
+      buildingNum: '测试文字',
+      roomNum: '测试文字',
+      buidlingArea: '测试文字',
+      area: '测试文字',
+      rang: '测试文字',
+      excludeRang: '测试文字',
+    })
+    return {
+      caseList,
+      tabs,
+      tabs2,
+      layout1,
+      data1,
+      layout2,
+      data2,
+      layout3,
+      data3,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+$border = .01rem solid rgba(91,213,255,.3)
+
+.population-drawer
+  display flex
+  justify-content space-between
+  >div
+    width 35%
+    &:last-child
+      width 64%
+  .tabs
+    margin .1rem 0
+  .case-item
+    position relative
+    border $border
+    border-left .02rem solid $secondary-color
+    margin .1rem 0
+    padding .05rem .1rem
+    overflow hidden
+    background rgba(51,145,255,.1)
+    &.done
+      border-left-color #27C5A2
+      .flag
+        background #27C5A2
+    >div
+      &:nth-of-type(1)
+        border-bottom $border
+        padding-bottom .05rem
+        margin-bottom .05rem
+        p
+          span
+            display inline-block
+            color orange
+            border .01rem solid orange
+            border-radius .02rem
+            margin-right .1rem
+            padding 0 .03rem
+            font-size .08rem
+          &:last-child
+            color #aaa
+            font-size .08rem
+            margin-top .05rem
+    .flag
+      background $secondary-color
+      position absolute
+      top -0.08rem
+      right -0.28rem
+      transform rotate(45deg)
+      height .4rem
+      width .8rem
+      display flex
+      align-items flex-end
+      justify-content center
+      font-weight bold
+      padding-bottom .02rem
+</style>

src/view/main.vue

@@ -5,7 +5,7 @@
     rows="0.4rem auto"
     gap="0.05rem"
   >
-    <m-title area="title">南东城运</m-title>
+    <m-title area="title" @click="showDrawer = true">南东城运</m-title>
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
       <Command v-show="'street' === curViewType && !fullScreen" area="left" />
     </m-animate>
@@ -38,7 +38,10 @@
     </m-animate>
     <ViewSelector />
     <MapBtns @full="fullScreen = $event" />
-    <m-drawer v-model="showDrawer"> test </m-drawer>
+    <m-drawer v-model="showDrawer">
+      <!-- <CaseDrawer /> -->
+      <PopulationDrawer />
+    </m-drawer>
   </m-grid>
 </template>
 
@@ -52,6 +55,8 @@ import PublicService from './right/public-service.vue'
 import PublicSafety from './right/public-safety.vue'
 import ViewSelector from './components/view-selector.vue'
 import MapBtns from './components/map-btns.vue'
+import CaseDrawer from './drawers/case-drawer.vue'
+import PopulationDrawer from './drawers/population-drawer.vue'
 import store from '@/store'
 
 export default defineComponent({
@@ -65,6 +70,8 @@ export default defineComponent({
     PublicSafety,
     ViewSelector,
     MapBtns,
+    CaseDrawer,
+    PopulationDrawer,
   },
   setup() {
     const curViewType = computed(() => store.state.curView.type)