Skip to content

J
jingan-wisdom
Commit cd909b8c authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

分割&抽离组件

parent b66cb5f4
Show whitespace changes
Inline Side-by-side
Showing with 5715 additions and 838 deletions
src/ajax/axios.ts
View file @ cd909b8c
...@@ -15,7 +15,7 @@ Axios.interceptors.request.use( ...@@ -15,7 +15,7 @@ Axios.interceptors.request.use(
}, },
(error) => { (error) => {
return Promise.reject(error) return Promise.reject(error)
} },
) )
Axios.interceptors.response.use( Axios.interceptors.response.use(
...@@ -29,7 +29,7 @@ Axios.interceptors.response.use( ...@@ -29,7 +29,7 @@ Axios.interceptors.response.use(
(error) => { (error) => {
store.commit('SET_LOADING', false) store.commit('SET_LOADING', false)
return Promise.reject(error) return Promise.reject(error)
} },
) )
interface ParamsProp { interface ParamsProp {
......
src/hooks/useComponent.ts
View file @ cd909b8c
import { ref, computed } from 'vue' import { ref } from 'vue'
import list, { components as componentObj } from '@/utils/component-list' import componentList, { tabs } from '@/utils/component-list'
import useConfig, { Config } from './useConfig' import useConfig, { Config } from './useConfig'
export default function useComponent() { export default function useComponent() {
...@@ -26,15 +26,14 @@ export default function useComponent() { ...@@ -26,15 +26,14 @@ export default function useComponent() {
// 取消组件 // 取消组件
delete components.value?.[i] delete components.value?.[i]
} }
const componentList = computed(() => list) // key值-组件 对照表
return { return {
components, components,
componentList, componentList, // key-组件 对照表
showComponentModal, showComponentModal,
openComponentModal, openComponentModal,
onSelectComponent, onSelectComponent,
onCancelComponent, onCancelComponent,
componentObj, tabs,
} }
} }
src/utils/component-lib.esm.js 0 → 100644
View file @ cd909b8c
This source diff could not be displayed because it is too large. You can view the blob instead.
src/utils/component-list.js 0 → 100644
View file @ cd909b8c
// import * as vue from 'vue'
// import fetchComponents from 'http://127.0.0.1:8081/component-lib.min.js'
// const { A001, A002, A003, A004, A005, A006, A007, A008, A009 } =
// fetchComponents(vue)('http://127.0.0.1:8082')
import {
A001,
A002,
A003,
A004,
A005,
A006,
A007,
A008,
A009,
} from './component-lib.esm' // 未正式上生产暂时先如此代替
export default {
A001,
A002,
A003,
A004,
A005,
A006,
A007,
A008,
A009,
}
export const tabs = {
物业: [
'A001',
'A002',
'A003',
'A004',
'A005',
'A006',
'A007',
'A008',
'A009',
],
市场: [],
修缮: [],
保障: [],
}
src/utils/component-list.ts deleted 100644 → 0
View file @ b66cb5f4
import Property from '@/view/components/property.vue' // 物业
import PropertyFeatures from '@/view/components/property-features.vue' // 物业体征
import PartyLead from '@/view/components/party-lead.vue' // 党建引领
import PublicEarning from '@/view/components/public-earning.vue' // 公共收益
import Bid from '@/view/components/bid.vue' // 招投标
import IndustrySupervision from '@/view/components/industry-supervision.vue' // 行业监管
// import * as vue from 'vue'
// import fetchComponents from 'http://127.0.0.1:8080/com.min.js'
// fetchComponents(vue)
// const { ComSample } = window._components
export default {
w1: Property,
w2: PropertyFeatures,
w3: PartyLead,
w4: PublicEarning,
w5: Bid,
w6: IndustrySupervision,
}
export const components = {
物业: ['w1', 'w2', 'w3', 'w4', 'w5', 'w6'],
市场: [],
修缮: [],
保障: [],
}
src/view/components/bid.vue deleted 100644 → 0
View file @ b66cb5f4
<template>
<m-card title="招投标">
<div class="sum">
<div>
<m-sub>公开招投标数</m-sub>
<span>招标中 <m-count class="count" :value="31" /></span>
<span>已完成 <m-count class="count" :value="24" /></span>
</div>
<div>
<m-sub>邀请招标</m-sub>
<span>招标中 <m-count class="count" :value="31" /></span>
<span>已完成 <m-count class="count" :value="24" /></span>
</div>
</div>
<div class="rate">
<Circle
class="circle"
color="#F7B500"
rail-color="#0091FF"
:value="30"
:show-info="false"
/>
<div class="des">
<p>
前期物业招标
<m-count class="count" style="color: #f7b500" :value="120" />
</p>
<p>
业主大会公开招标
<m-count class="count" style="color: #0091ff" :value="350" />
</p>
</div>
</div>
</m-card>
</template>
<script lang="ts" setup>
import Circle from './circle.vue'
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.sum
display flex
>div
flex 1
margin 0 .05rem
.count
font-size .14rem
margin-left .04rem
color #fff
font-weight bold
span
margin 0 .04rem
color #ccc
&:last-child
float right
.rate
display flex
margin-top .05rem
padding-left .1rem
.circle
width 24%
.des
flex 1
display flex
flex-direction column
justify-content center
margin-left .3rem
.count
font-size .14rem
margin-left .1rem
</style>
src/view/components/brief.vue deleted 100644 → 0
View file @ b66cb5f4
<template>
<div class="brief-container" :class="{ vertical: align === 'vertical' }">
<div v-for="item in list" :key="item.name">
<img
v-if="item.icon"
:src="item.icon"
:style="`width:${size};height:${size}`"
/>
<div v-if="Array.isArray(item.value)">
<div class="count-group">
<m-count
class="count orange-count"
:value="item.value[0]"
:style="{ color: color }"
/>
/
<m-count class="count" :value="item.value[1]" />
</div>
<p>{{ item.name }}</p>
</div>
<div v-else :class="{ center: !item.icon }">
<m-count class="count" :style="{ color: color }" :value="item.value" />
<p>{{ item.name }}</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
export interface BriefProp {
name: string
value: number | number[]
icon?: any
}
export default defineComponent({
name: 'Brief',
props: {
list: {
type: Array as PropType<BriefProp[]>,
required: true,
},
color: {
type: String as PropType<string>,
default: null,
},
size: {
type: String as PropType<string>,
default: '0.22rem',
},
align: {
type: String as PropType<'vertical' | 'horizontal'>,
default: 'horizontal',
},
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.brief-container
display flex
align-items center
white-space nowrap
flex-wrap wrap
.count
font-family $font-barlow
font-size .14rem
&.vertical
display inline-block
>div
display flex
align-items center
width 33%
>img
margin-right .05rem
>div
font-weight bold
p
color #ccc
&.center
text-align center
</style>
src/view/components/circle.vue deleted 100644 → 0
View file @ b66cb5f4
<template>
<div class="circle">
<n-progress
class="circle-item"
type="circle"
:percentage="+value"
:color="color"
:border-radius="radius"
:fill-border-radius="radius"
:stroke-width="+strokeWidth"
indicator-text-color="#fff"
:show-indicator="showInfo"
:rail-color="railColor"
>
<slot />
</n-progress>
</div>
</template>
<script lang="ts" setup>
import { NProgress } from 'naive-ui'
import { PropType } from 'vue'
defineProps({
color: {
type: [String, Array] as PropType<string | string[]>,
default: '#F7933E',
},
railColor: {
type: [String, Array] as PropType<string | string[]>,
default: 'rgba(255,255,255,0.1)',
},
value: {
type: Number as PropType<number>,
default: 0,
},
radius: {
type: Number as PropType<number>,
default: 0,
},
strokeWidth: {
type: Number as PropType<number>,
default: 8,
},
showInfo: {
type: Boolean as PropType<boolean>,
default: true,
},
})
</script>
<style lang="stylus" scoped>
.circle
width 100%
height 100%
background-image url('@/assets/images/circle-bg.png')
background-repeat no-repeat
background-size 100% 100%
background-position center
padding .05rem
box-sizing border-box
.circle-item
width 100%
height 100%
</style>
src/view/components/component-modal.vue
View file @ cd909b8c
...@@ -62,17 +62,17 @@ watch( ...@@ -62,17 +62,17 @@ watch(
} }
}, },
) )
const { componentList, componentObj } = useComponent() const { componentList, tabs } = useComponent()
const curTab = ref('1') const curTab = ref('1')
const tabs = [ const tabList = [
{ name: '物业', key: '1', list: componentObj['物业'] }, { name: '物业', key: '1', list: tabs['物业'] },
{ name: '市场', key: '2', list: componentObj['市场'] }, { name: '市场', key: '2', list: tabs['市场'] },
{ name: '修缮', key: '3', list: componentObj['修缮'] }, { name: '修缮', key: '3', list: tabs['修缮'] },
{ name: '保障', key: '4', list: componentObj['保障'] }, { name: '保障', key: '4', list: tabs['保障'] },
] ]
const componentKeys = computed( const componentKeys = computed(
() => tabs.find((e) => e.key === curTab.value)?.list || [], () => tabList.find((e) => e.key === curTab.value)?.list || [],
) )
const curComponent = ref('') const curComponent = ref('')
const onSelect = (key: string) => { const onSelect = (key: string) => {
...@@ -98,8 +98,18 @@ const onSelect = (key: string) => { ...@@ -98,8 +98,18 @@ const onSelect = (key: string) => {
cursor pointer cursor pointer
border .01rem solid transparent border .01rem solid transparent
margin-bottom .05rem margin-bottom .05rem
transition border .2s ease-in-out
&:after
content ''
display block
position absolute
top 0
bottom 0
left 0
right 0
background rgba(0,0,0,.1)
&:hover &:hover
border .01rem solid $primary-border border .01rem solid #4270B3
&.checked &.checked
&:before &:before
z-index 9 z-index 9
......
src/view/components/industry-supervision.vue deleted 100644 → 0
View file @ b66cb5f4
<template>
<m-card title="行业监管">
<div class="summary">
<div class="rate">
<div>
<div>
<span>
<m-count class="count orange-count" :value="31" />/<m-count
:value="50"
/>
</span>
<p>督查</p>
</div>
<div>
<span> <m-count class="count orange-count" :value="31" />% </span>
<p>整改率</p>
</div>
</div>
<div>
<div>
<span> <m-count class="count" :value="90" />% </span>
<p>日查</p>
</div>
<div>
<span> <m-count class="count" :value="82" />% </span>
<p>双周查</p>
</div>
<div>
<span> <m-count class="count" :value="76" />% </span>
<p>月查</p>
</div>
</div>
</div>
<div class="month">
<p>房办月查完成情况</p>
<div>
<span v-for="(_, i) in new Array(12)" :key="i">
{{ i + 1 }}
</span>
</div>
</div>
</div>
<m-sub>重大事件清单</m-sub>
<div class="content">
<div class="title">
<p>小区名称</p>
<span class="line" />
<span>上报主题</span>
</div>
<div class="info">
<div>
<span>事件类型</span>
<p>事件类型</p>
</div>
<div>
<span>人员伤亡</span>
<p>0人</p>
</div>
<div>
<span>财产损失</span>
<p>0元</p>
</div>
</div>
</div>
</m-card>
</template>
<script lang="ts" setup></script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.summary
display flex
.rate
width 45%
>div
>div
display inline-block
width 33.3%
.count
font-size .14rem
color #fff
span,
p
font-size .09rem
color #ccc
.month
flex 1
$box()
padding .05rem .1rem
display flex
flex-direction column
margin .04rem 0
>div
margin-top .04rem
flex 1
display grid
grid-template-columns 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-rows 1fr 1fr
grid-gap .04rem
span
$center()
border-radius .02rem
background $green
.content
$box()
padding .04rem .1rem
margin-bottom .04rem
.title
display flex
align-items center
.line
flex 1
height 0
border-bottom .01rem dashed $blue
margin 0 .05rem
.info
display flex
>div
flex 1
span
color #ccc
font-size .08rem
</style>
src/view/components/party-lead.vue deleted 100644 → 0
View file @ b66cb5f4
<template>
<m-card title="党建引领">
<div class="sum">
<div v-for="item in summary" :key="item.name" class="rate">
<Circle :value="item.value">
<div class="content">
<m-count :value="item.value" />
<p>{{ item.name }}</p>
</div>
</Circle>
</div>
<div class="cross">
<p><m-count class="count" :value="5" /> 个</p>
<span>交叉任职数</span>
</div>
</div>
<div class="chart">
<m-bar
v-if="barData.source.length > 0"
:dataset="barData"
:option="barOption"
/>
<m-empty v-else />
</div>
</m-card>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import Circle from './circle.vue'
const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const summary = [
{ name: '居委会', value: 10 },
{ name: '业委会', value: 10 },
{ name: '物业企业', value: 20 },
]
const barData = {
dimensions: [
{ name: 'street', displayName: '街道' },
{ name: 'partyNum', displayName: '党小组数量' },
{ name: 'data1', displayName: '居委会' },
{ name: 'data2', displayName: '业委会' },
{ name: 'data3', displayName: '物业企业' },
],
source: [
{ street: '街道1', partyNum: 60, data1: 20, data2: 20, data3: 20 },
{ street: '街道2', partyNum: 90, data1: 20, data2: 30, data3: 40 },
{ street: '街道3', partyNum: 130, data1: 30, data2: 40, data3: 60 },
{ street: '街道4', partyNum: 120, data1: 40, data2: 50, data3: 30 },
{ street: '街道5', partyNum: 120, data1: 50, data2: 60, data3: 10 },
{ street: '街道6', partyNum: 140, data1: 50, data2: 60, data3: 30 },
{ street: '街道7', partyNum: 130, data1: 50, data2: 60, data3: 20 },
{ street: '街道8', partyNum: 110, data1: 20, data2: 60, data3: 30 },
],
}
const barOption = {
color: ['#785CDD', '#77BFF9', '#EDB872', '#64C29D'],
legend: {
right: '2%',
itemWidth: fontSize.value * 0.6,
itemHeight: fontSize.value * 0.8,
},
yAxis: {
minInterval: 1,
},
xAxis: [
{
type: 'category',
axisLabel: {
interval: 0,
},
},
],
series: [
{
type: 'bar',
barWidth: '18%',
itemStyle: {
borderRadius: 8,
},
barGap: 0,
},
...[1, 2, 3].map(() => ({
type: 'bar',
barWidth: '18%',
itemStyle: {
borderRadius: 8,
},
barGap: 0,
stack: '总量',
})),
],
}
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.content
text-align center
white-space nowrap
.sum
display flex
>div
flex 1
&.rate
box-sizing border-box
padding .06rem
&.cross
flex 1.4
margin .08rem .05rem
$box()
$center()
flex-direction column
.count
color $orange
font-size .12rem
.chart
width 100%
height 1.1rem
</style>
src/view/components/property-features.vue deleted 100644 → 0
View file @ b66cb5f4
<template>
<m-card title="物业体征">
<m-sub :addition="{ value: 1674, unit: '个小区' }"> 住宅房屋 </m-sub>
<Brief :list="summary" />
<m-sub :addition="{ value: 1264, unit: '个' }"> 物业企业 </m-sub>
<m-sub :addition="{ value: 1015, unit: '个' }"> 业委会 </m-sub>
<m-sub :addition="{ value: 1684, unit: '万元' }"> 维修资金 </m-sub>
<Summary title="续筹分布" :list="list" :avatar="avatar1" />
</m-card>
</template>
<script lang="ts">
export default {
name: 'PropertyFeatures',
}
</script>
<script lang="ts" setup>
import icon4 from '@/assets/images/icon4.png'
import icon5 from '@/assets/images/icon5.png'
import icon1 from '@/assets/images/icon1.png'
import icon6 from '@/assets/images/icon6.png'
import icon7 from '@/assets/images/icon7.png'
import icon8 from '@/assets/images/icon8.png'
import avatar1 from '@/assets/images/avatar1.png'
import Brief from './brief.vue'
import Summary from './summary.vue'
const summary = [
{ icon: icon4, name: '商品房', value: 904 },
{ icon: icon5, name: '公房', value: 400 },
{ icon: icon1, name: '私房/农房', value: 130 },
{ icon: icon6, name: '商住混合', value: 82 },
{ icon: icon7, name: '军产', value: 12 },
{ icon: icon8, name: '保障房', value: 46 },
]
const list = [
{ name: '分户', value: 47520 },
{ name: '门牌', value: 3960 },
{ name: '小区', value: 45 },
]
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
</style>
src/view/components/property.vue deleted 100644 → 0
View file @ b66cb5f4
<template>
<m-card title="物业">
<Brief :list="summary" />
<div class="wrapper">
<div class="left">
<m-progress
v-for="item in list"
:key="item.name"
:value="item.value"
:msg="{
name: item.name,
value: item.value,
unit: '%',
color: '#fff',
}"
:color="['rgb(36,59,86)', '#F4923E']"
/>
</div>
<div class="right">
<p>整改执行</p>
<div>
<div>
<p class="count"><m-count :value="63" /></p>
<p>已开</p>
</div>
|
<div>
<p class="count"><m-count :value="76" />%</p>
<p>完成率</p>
</div>
</div>
</div>
</div>
</m-card>
</template>
<script lang="ts">
export default {
name: 'Property',
}
</script>
<script lang="ts" setup>
import icon1 from '@/assets/images/icon1.png'
import icon2 from '@/assets/images/icon2.png'
import icon3 from '@/assets/images/icon3.png'
import Brief from './brief.vue'
const summary = [
{ icon: icon1, name: '小区', value: 904 },
{ icon: icon2, name: '业委会', value: 400 },
{ icon: icon3, name: '物业服务企业', value: 130 },
]
const list = [
{ name: '房办月查', value: 79 },
{ name: '物企双周查', value: 83 },
{ name: '物业日查', value: 100 },
]
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.wrapper
display flex
padding-bottom .05rem
.left
flex 1.8
.right
flex 1
$box()
margin .06rem .06rem 0 .1rem
padding .06rem .1rem
>div
display flex
align-items center
margin-top .1rem
>div
flex 1
text-align center
.count
font-size .12rem
color $yellow
font-family $font-din
font-weight bold
>p
color #ccc
</style>
src/view/components/public-earning.vue deleted 100644 → 0
View file @ b66cb5f4
<template>
<m-card title="公共收益">
<m-sub :addition="{ value: 6000, unit: '元' }"> 存量总额 </m-sub>
<div class="wrapper">
<div>
<p>收入（季度）</p>
<div>
<div>
<p class="count"><m-count :value="100" /><span>元</span></p>
<p>总额</p>
</div>
|
<div>
<p class="count"><m-count :value="180" /><span>个</span></p>
<p>小区</p>
</div>
</div>
</div>
<div>
<p>支出（季度）</p>
<div>
<div>
<p class="count"><m-count :value="169" /><span>元</span></p>
<p>总额</p>
</div>
|
<div>
<p class="count"><m-count :value="156" /><span>个</span></p>
<p>小区</p>
</div>
</div>
</div>
</div>
<m-sub :addition="{ value: 1684, unit: '万元' }">维修资金总额</m-sub>
</m-card>
</template>
<script lang="ts" setup></script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.wrapper
display flex
justify-content space-between
margin .05rem 0
>div
width 48%
$box()
padding .06rem .1rem
>div
display flex
align-items center
margin-top .05rem
>div
flex 1
text-align center
.count
font-size .14rem
color $yellow
font-family $font-din
font-weight bold
>span
color #ccc
font-size .09rem
font-weight normal
>p
color #ccc
</style>
src/view/components/summary.vue deleted 100644 → 0
View file @ b66cb5f4
<template>
<div class="summary">
<p v-if="title">{{ title }}</p>
<div
class="summary-container"
:class="{ 'over-two': list.length > 3, 'click-able': clickAble }"
@click="handleClick"
>
<div v-for="(item, i) in list" :key="item.name">
<p>
<img v-if="avatar && i === 0" :src="avatar" />
<m-count class="count orange-count" :value="item.value" />
<span class="unit">{{ item.unit }}</span>
</p>
<p>{{ item.name }}</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
export interface SummaryProp {
name: string
value: number
unit?: string
}
export default defineComponent({
name: 'Summary',
props: {
title: {
type: String as PropType<string>,
default: '',
},
list: {
type: Array as PropType<SummaryProp[]>,
required: true,
},
avatar: {
type: String as PropType<string>,
default: null,
},
clickAble: {
type: Boolean as PropType<boolean>,
default: false,
},
},
emits: ['select'],
setup(props, ctx) {
const handleClick = () => {
if (props.clickAble) {
ctx.emit('select')
}
}
return { handleClick }
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
$create-border()
content ''
display block
height 40%
width .01rem
background #aaa
position absolute
top 0
bottom 0
margin auto 0
left -100%
.summary
width 100%
min-height .4rem
$card-bg2()
padding .06rem 0
>p
margin-left .1rem
font-weight bold
.summary-container
display flex
align-items center
justify-content space-around
box-sizing border-box
&.click-able
cursor pointer
&:hover
background rgba(70,83,97,0.5)
box-shadow none
&.over-two
>div
&:nth-last-child(2)
&:before
$create-border()
>div
text-align center
position relative
&:first-child
padding-left .5rem
&:last-child
&:before
$create-border()
p
.count
font-family $font-barlow
font-size .12rem
margin-right .01rem
color $orange
.unit
color #aaa
font-size .09rem
&:last-child
font-weight bold
color #ccc
>img
position absolute
left 0
top 0
bottom 0
margin auto 0
width .26rem
</style>
src/view/main.vue
View file @ cd909b8c
...@@ -4,8 +4,9 @@ ...@@ -4,8 +4,9 @@
area="title" area="title"
@click.prevent.stop="save" @click.prevent.stop="save"
@touch="showLayoutModal = true" @touch="showLayoutModal = true"
>静安智慧房管</m-title
> >
静安智慧房管
</m-title>
<m-grid <m-grid
v-if="layout.boxNum > 0" v-if="layout.boxNum > 0"
:template="layout.template" :template="layout.template"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment