Skip to content

E
east-nanjing-new
Commit c9b42986 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

street complete

parent 28df0440
Hide whitespace changes
Inline Side-by-side
Showing with 785 additions and 36 deletions
src/components/MyComponent/MyCard/mode-2.vue
View file @ c9b42986
...@@ -2,6 +2,10 @@ ...@@ -2,6 +2,10 @@
<div class="card-wrapper"> <div class="card-wrapper">
<div class="card-title"> <div class="card-title">
{{ title }} {{ title }}
<div v-if="addition" class="addition">
<m-count v-if="addition.value" class="count" :value="addition.value" />
<span v-if="addition.unit">{{ addition.unit }}</span>
</div>
</div> </div>
<div class="card-content"> <div class="card-content">
<slot /> <slot />
...@@ -12,6 +16,11 @@ ...@@ -12,6 +16,11 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from 'vue' import { defineComponent, PropType } from 'vue'
export interface AdditionProp {
name?: string
value?: number
unit?: string
}
export default defineComponent({ export default defineComponent({
name: 'Mode2', name: 'Mode2',
props: { props: {
...@@ -19,6 +28,10 @@ export default defineComponent({ ...@@ -19,6 +28,10 @@ export default defineComponent({
type: String as PropType<string>, type: String as PropType<string>,
required: true, required: true,
}, },
addition: {
type: Object as PropType<AdditionProp>,
default: null,
},
}, },
}) })
</script> </script>
...@@ -39,6 +52,19 @@ export default defineComponent({ ...@@ -39,6 +52,19 @@ export default defineComponent({
font-size .13rem font-size .13rem
box-sizing border-box box-sizing border-box
border-bottom .01rem solid $primary-border border-bottom .01rem solid $primary-border
.addition
display flex
align-items center
margin-left .1rem
.count
color $yellow
font-size .15rem
font-family $font-pang
padding-bottom .03rem
span
color #aaa
font-size .08rem
margin-left .05rem
.card-content .card-content
display flex display flex
flex-direction column flex-direction column
......
src/components/MyComponent/MyCard/my-card.vue
View file @ c9b42986
<template> <template>
<MyAnimate :enter="enter" :leave="leave"> <MyAnimate :enter="enter" :leave="leave">
<div class="my-card"> <div class="my-card">
<component :is="card" :title="title"> <component :is="card" :title="title" v-bind="$attrs">
<slot /> <slot />
</component> </component>
</div> </div>
......
src/components/MyComponent/MyChart/my-line.vue
View file @ c9b42986
...@@ -16,6 +16,7 @@ import { ...@@ -16,6 +16,7 @@ import {
GridComponentOption, GridComponentOption,
LegendComponent, LegendComponent,
LegendComponentOption, LegendComponentOption,
DataZoomComponent,
} from 'echarts/components' } from 'echarts/components'
import { import {
LineChart, LineChart,
...@@ -30,6 +31,7 @@ echarts.use([ ...@@ -30,6 +31,7 @@ echarts.use([
TooltipComponent, TooltipComponent,
GridComponent, GridComponent,
LegendComponent, LegendComponent,
DataZoomComponent,
LineChart, LineChart,
BarChart, BarChart,
SVGRenderer, SVGRenderer,
......
src/components/MyComponent/MyChart/my-radar.vue
View file @ c9b42986
...@@ -73,7 +73,7 @@ export default defineComponent({ ...@@ -73,7 +73,7 @@ export default defineComponent({
containLabel: true, containLabel: true,
}, },
radar: { radar: {
name: { axisName: {
show: false, show: false,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
...@@ -127,7 +127,7 @@ export default defineComponent({ ...@@ -127,7 +127,7 @@ export default defineComponent({
initChart(props.dataset, props.option) initChart(props.dataset, props.option)
}) })
watchEffect(() => { watchEffect(() => {
;(defaultOption as any).radar.indicator = (defaultOption as any).radar.indicator =
props.dataset && props.dataset &&
props.dataset.dimensions && props.dataset.dimensions &&
props.dataset.dimensions.map((d) => ({ props.dataset.dimensions.map((d) => ({
......
src/components/MyComponent/MySub/my-sub.vue
View file @ c9b42986
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType, ref } from 'vue' import { defineComponent, PropType, ref } from 'vue'
interface AdditionProp { export interface AdditionProp {
name?: string name?: string
value?: number value?: number
unit?: string unit?: string
...@@ -87,7 +87,7 @@ export default defineComponent({ ...@@ -87,7 +87,7 @@ export default defineComponent({
font-family $font-zcool font-family $font-zcool
color $secondary-color color $secondary-color
flex 1 flex 1
font-size .12rem font-size .13rem
>span >span
display inline-block display inline-block
width .02rem width .02rem
......
src/components/MyComponent/MyTitle/my-title.vue
View file @ c9b42986
...@@ -94,7 +94,7 @@ export default defineComponent({ ...@@ -94,7 +94,7 @@ export default defineComponent({
left 0 left 0
h1 h1
font-family $font-weibei font-family $font-weibei
margin-left 10% margin 0 0 0 10%
z-index 2 z-index 2
background-clip text background-clip text
-webkit-background-clip text -webkit-background-clip text
......
src/view/components/brief.vue
View file @ c9b42986
...@@ -11,7 +11,11 @@ ...@@ -11,7 +11,11 @@
<p>{{ item.name }}</p> <p>{{ item.name }}</p>
</div> </div>
<div v-else :class="{ center: !item.icon }"> <div v-else :class="{ center: !item.icon }">
<m-count class="count yellow" :value="item.value" /> <m-count
class="count yellow"
:style="{ color: color }"
:value="item.value"
/>
<p>{{ item.name }}</p> <p>{{ item.name }}</p>
</div> </div>
</div> </div>
...@@ -33,6 +37,10 @@ export default defineComponent({ ...@@ -33,6 +37,10 @@ export default defineComponent({
type: Array as PropType<BriefProp[]>, type: Array as PropType<BriefProp[]>,
required: true, required: true,
}, },
color: {
type: String as PropType<string>,
default: null,
},
}, },
}) })
</script> </script>
......
src/view/components/summary.vue
View file @ c9b42986
<template> <template>
<div class="summary-container"> <div class="summary-container" :class="{ 'two-child': twoChild }">
<div v-for="item in list" :key="item.name"> <div v-for="item in list" :key="item.name">
<p> <p>
<m-count class="count" :value="item.value" /> <m-count class="count" :value="item.value" />
...@@ -25,6 +25,10 @@ export default defineComponent({ ...@@ -25,6 +25,10 @@ export default defineComponent({
type: Array as PropType<SummaryProp[]>, type: Array as PropType<SummaryProp[]>,
required: true, required: true,
}, },
twoChild: {
type: Boolean as PropType<boolean>,
default: false,
},
}, },
}) })
</script> </script>
...@@ -38,6 +42,8 @@ export default defineComponent({ ...@@ -38,6 +42,8 @@ export default defineComponent({
display flex display flex
align-items center align-items center
justify-content space-around justify-content space-around
&.two-child
background url('@/assets/images/msg-wrapper2.png') 100% / 100% 100% no-repeat
>div >div
text-align center text-align center
margin-left -0.1rem margin-left -0.1rem
......
src/view/main.vue
View file @ c9b42986
...@@ -15,6 +15,9 @@ ...@@ -15,6 +15,9 @@
<m-animate enter="fadeInRight" leave="fadeOutRight"> <m-animate enter="fadeInRight" leave="fadeOutRight">
<PublicService v-show="curTheme === 'service'" area="right" /> <PublicService v-show="curTheme === 'service'" area="right" />
</m-animate> </m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight">
<PublicSafety v-show="curTheme === 'safety'" area="right" />
</m-animate>
<!-- <PublicService area="right" /> --> <!-- <PublicService area="right" /> -->
</m-grid> </m-grid>
</template> </template>
...@@ -24,11 +27,12 @@ import { computed, defineComponent } from 'vue' ...@@ -24,11 +27,12 @@ import { computed, defineComponent } from 'vue'
import LeftComponent from './left/left-component.vue' import LeftComponent from './left/left-component.vue'
import PublicManage from './right/public-manage.vue' import PublicManage from './right/public-manage.vue'
import PublicService from './right/public-service.vue' import PublicService from './right/public-service.vue'
import PublicSafety from './right/public-safety.vue'
import store from '@/store' import store from '@/store'
export default defineComponent({ export default defineComponent({
name: 'Main', name: 'Main',
components: { LeftComponent, PublicManage, PublicService }, components: { LeftComponent, PublicManage, PublicService, PublicSafety },
setup() { setup() {
const curTheme = computed(() => store.state.curTheme) const curTheme = computed(() => store.state.curTheme)
return { return {
......
src/view/right/beauty-street.vue
View file @ c9b42986
...@@ -80,13 +80,9 @@ export default defineComponent({ ...@@ -80,13 +80,9 @@ export default defineComponent({
{ {
type: 'bar', type: 'bar',
barWidth: '30%', barWidth: '30%',
itemStyle: { label: {
normal: { show: true, //开启显示
label: { position: 'top', //在上方显示
show: true, //开启显示
position: 'top', //在上方显示
},
},
}, },
}, },
], ],
......
src/view/right/company.vue 0 → 100644
View file @ c9b42986
<template>
<m-card title="实有单位" :addition="{ value: 10203, unit: '家' }">
<div class="sum">
<div v-for="item in sum" :key="item.name">
<m-count class="count" :value="item.value" />
<p>
{{ item.name }}
<img v-if="item.icon" :src="`@/assets/images/${item.icon}`" />
</p>
</div>
</div>
<div class="content">
<div class="chart">
<m-pie :dataset="pieData" :option="pieOption" />
</div>
<div class="legend">
<div v-for="(item, i) in pieData.source" :key="item.name">
<p>
<span :style="{ background: pieOption.color[i][0] }" />
{{ item.name }}
</p>
<p>
<m-count class="count" :value="item.value" />
<span class="unit">家</span>
</p>
</div>
</div>
</div>
</m-card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'Company',
setup() {
const sum = ref([
{ name: '本街道注册', value: 6741 },
{ name: '境外注册', value: 1658, icon: 'icon1.png' },
{ name: '境内注册', value: 1804, icon: 'icon1.png' },
])
const pieData = ref({
dimensions: [
{ name: 'name', displayName: '类型' },
{ name: 'value', displayName: '数量' },
],
source: [
{ name: '事业单位', value: 4591 },
{ name: '企业单位', value: 4591 },
{ name: '机关团体', value: 1020 },
{ name: '其他', value: 899 },
],
})
const pieOption = ref({
color: [
['#F76B1C', '#FAD961'],
['#429321', '#B4EC51'],
['#3023AE', '#C86DD7'],
['#51B7EC', '#212F93'],
],
legend: { show: false },
series: [
{
type: 'pie',
radius: [0, '90%'],
center: ['50%', '50%'],
label: {
show: false,
},
},
],
})
return {
sum,
pieData,
pieOption,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.sum
display flex
align-items center
margin .05rem 0
>div
flex 1
text-align center
position relative
&+div
&:before
content '|'
position absolute
left 0
top 50%
color $blue
transform translateY(-50%)
.count
font-size .12rem
p
color #ccc
font-size .09rem
text-indent .1rem
img
width .1rem
height @width
margin-left .02rem
.content
flex 1
display flex
>div
height 100%
.chart
width 40%
.legend
width 60%
display flex
flex-direction column
justify-content space-around
padding 0 .1rem
>div
display flex
justify-content space-between
align-items center
>p
&:first-child
span
width .06rem
height @width
display inline-block
margin-right @width
border-radius 50%
&:last-child
.count
font-size .12rem
.unit
font-size .08rem
color #aaa
margin-left .03rem
</style>
src/view/right/complain.vue
View file @ c9b42986
...@@ -134,7 +134,7 @@ export default defineComponent({ ...@@ -134,7 +134,7 @@ export default defineComponent({
color: ['#FF9D27'], color: ['#FF9D27'],
legend: { show: false }, legend: { show: false },
radar: { radar: {
name: { axisName: {
// show: false, // show: false,
color: 'transparent', color: 'transparent',
}, },
......
src/view/right/demand.vue
View file @ c9b42986
...@@ -180,17 +180,14 @@ export default defineComponent({ ...@@ -180,17 +180,14 @@ export default defineComponent({
return { return {
type: 'pie', type: 'pie',
name: item.name, name: item.name,
clockWise: false, //顺时加载 clockwise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [rate, rate], radius: [rate, rate],
label: {
show: false,
},
itemStyle: { itemStyle: {
normal: { borderWidth,
label: { borderColor: item.color,
show: false,
},
borderWidth,
borderColor: item.color,
},
}, },
data: [ data: [
item, item,
...@@ -198,15 +195,13 @@ export default defineComponent({ ...@@ -198,15 +195,13 @@ export default defineComponent({
value: 100 - item.value, value: 100 - item.value,
name: '', name: '',
tooltip: { show: false }, tooltip: { show: false },
label: {
show: false,
},
itemStyle: { itemStyle: {
normal: { color: 'transparent',
label: { borderColor: item.color,
show: false, opacity: 0.1,
},
color: 'transparent',
borderColor: item.color,
opacity: 0.1,
},
}, },
}, },
], ],
......
src/view/right/ecology.vue 0 → 100644
View file @ c9b42986
<template>
<m-card title="生态">
<div class="detail">
<img src="@/assets/images/ecology.png" />
<div v-for="item in ecologyList" :key="item.name">
<m-count class="count" :value="item.value" />
<p>{{ item.name }}</p>
</div>
</div>
<div class="sum">
<div v-for="item in sumList" :key="item.name">
<img :src="`@/assets/images/${item.icon}`" />
<div>
<m-count class="count" :value="item.value" />
<p>{{ item.name }}</p>
</div>
</div>
</div>
<div>
<m-sub>商业综合体</m-sub>
<div class="business photos">
<img
v-for="photo in businessPhotos"
:key="photo"
:src="`@/assets/images/${photo}`"
/>
</div>
</div>
<div>
<m-sub>历史文化场馆</m-sub>
<div class="history photos">
<img
v-for="photo in historyPhotos"
:key="photo"
:src="`@/assets/images/${photo}`"
/>
</div>
</div>
</m-card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'Ecology',
setup() {
const ecologyList = ref([
{ name: '衣', value: 853 },
{ name: '行', value: 1276 },
{ name: '食', value: 1276 },
{ name: '住', value: 853 },
])
const sumList = ref([
{ name: '为老设施', value: 853, icon: 'img1.png' },
{ name: '便民商店', value: 1276, icon: 'img2.png' },
{ name: '便利店', value: 285, icon: 'img3.png' },
{ name: '电话亭', value: 853, icon: 'img4.png' },
{ name: '餐车', value: 1276, icon: 'img5.png' },
{ name: '街面废物箱', value: 285, icon: 'img6.png' },
{ name: '公厕', value: 200, icon: 'img7.png' },
{ name: '垃圾箱房', value: 1957, icon: 'img8.png' },
])
const businessPhotos = ref(['photo1.png', 'photo2.png'])
const historyPhotos = ref(['photo3.png', 'photo4.png', 'photo5.png'])
return {
ecologyList,
sumList,
businessPhotos,
historyPhotos,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.detail
width 100%
height 1.2rem
position relative
>img
width 36%
position absolute
top 0
right 0
bottom 0
left 0
margin auto
>div
$center()
position absolute
width 32%
height 45%
background rgba(49,94,139, .4)
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
&:nth-of-type(2)
top 0
right 0
&:nth-of-type(3)
bottom .05rem
left 0
&:nth-of-type(4)
bottom .05rem
right 0
.count
font-size .12rem
color $yellow
.sum
display flex
flex-wrap wrap
>div
display flex
align-items center
width 33.3%
margin .05rem 0
img
width .26rem
height @width
margin 0 .1rem 0 .05rem
.count
font-size .12rem
p
color #ccc
.photos
display flex
justify-content space-between
>img
width 30%
&.business
>img
width 48%
</style>
src/view/right/house.vue 0 → 100644
View file @ c9b42986
<template>
<m-card title="实有房屋" :addition="{ value: 18980, unit: '幢' }">
<div>
<m-sub :addition="{ value: 11883, unit: '幢' }">居住房屋</m-sub>
<Brief :list="summary" color="#fff" />
<div class="bar-txt">
<p>
<span>2000年前房屋</span>
<m-count class="count" :value="5616" />
<span class="unit">幢</span>
</p>
<img src="@/assets/images/location.png" />
</div>
<m-progress :value="80" :height="0.1" />
<div class="house-types">
<div v-for="item in houseTypes" :key="item.name">
<m-wave-ball :value="item.percent" size=".34rem" />
<div>
<m-count class="count" :value="item.value" />
<p>{{ item.name }}</p>
</div>
</div>
</div>
</div>
<div>
<m-sub :addition="{ value: 7097, unit: '幢' }">非居房屋</m-sub>
<Brief :list="houseSum" color="#fff" />
</div>
</m-card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
export default defineComponent({
name: 'House',
components: { Brief },
setup() {
const summary = ref<BriefProp[]>([
{ name: '小区数', value: 65465, icon: 'icon18.png' },
{ name: '物业公司', value: 1648, icon: 'icon19.png' },
{ name: '业委会', value: 56462, icon: 'icon20.png' },
])
const houseTypes = ref([
{
name: '商品房',
value: 7128,
percent: 60,
},
{
name: '直管公房',
value: 3564,
percent: 30,
},
{
name: '保障房及其他',
value: 1188,
percent: 15,
},
])
const houseSum = ref<BriefProp[]>([
{ name: '门面房', value: 1658, icon: 'icon7.png' },
{ name: '商办', value: 3564, icon: 'icon21.png' },
{ name: '商业综合体', value: 1875, icon: 'icon22.png' },
])
return {
summary,
houseTypes,
houseSum,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.bar-txt
display flex
align-items center
justify-content space-between
padding 0 .03rem
margin .05rem 0 .02rem
color #eee
.count
color $secondary-color
font-size .14rem
margin-left .15rem
.unit
color #aaa
font-size .08rem
margin-left .05rem
img
width .1rem
height @width
.house-types
display flex
justify-content space-between
align-items center
margin-top .1rem
>div
display flex
align-items center
>div
margin-left .05rem
.count
font-size .12rem
font-weight bold
p
color #ccc
</style>
src/view/right/police.vue 0 → 100644
View file @ c9b42986
<template>
<m-card title="110非警情">
<div>
<m-sub :addition="{ value: 3, unit: '近30mins' }">最新发现</m-sub>
<Brief :list="sumList" />
<div v-if="showChart" class="chart">
<m-line :dataset="lineData" :option="lineOption" />
</div>
</div>
<div>
<m-sub>门岗值守分布</m-sub>
<div class="gate">
<p>直管公房</p>
<Summary :list="houseSum" />
</div>
<div class="gate">
<p>社会物业</p>
<Summary :list="houseSum" />
</div>
</div>
<div>
<m-sub>平安地图</m-sub>
<div class="safe-map">
<div>
<p v-for="item in mapList" :key="item.name">
<span>{{ item.name }}</span>
<m-count class="count" :value="item.value" />
</p>
</div>
<div>
<img src="@/assets/images/map.png" />
</div>
</div>
</div>
</m-card>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import Summary, { SummaryProp } from '../components/summary.vue'
import store from '@/store'
export default defineComponent({
name: 'Police',
components: { Brief, Summary },
setup() {
const showChart = computed(() => store.state.curTheme === 'safety')
const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const sumList = ref<BriefProp[]>([
{ name: '今日发现', value: 157, icon: 'icon15.png' },
{ name: '今日处置中', value: 64, icon: 'icon16.png' },
{ name: '今日结案', value: 37, icon: 'icon17.png' },
])
const lineData = ref({
dimensions: [
{ name: 'time', displayName: '时间' },
{ name: 'work1', displayName: '第1工作站' },
{ name: 'work2', displayName: '第2工作站' },
{ name: 'work3', displayName: '第3工作站' },
],
source: [
{ time: '01:00', work1: 100, work2: 200, work3: 300 },
{ time: '02:00', work1: 110, work2: 210, work3: 320 },
{ time: '03:00', work1: 120, work2: 230, work3: 340 },
{ time: '04:00', work1: 130, work2: 240, work3: 360 },
{ time: '05:00', work1: 140, work2: 250, work3: 380 },
{ time: '06:00', work1: 150, work2: 260, work3: 390 },
{ time: '07:00', work1: 150, work2: 260, work3: 390 },
{ time: '08:00', work1: 100, work2: 200, work3: 300 },
{ time: '09:00', work1: 110, work2: 210, work3: 320 },
{ time: '10:00', work1: 120, work2: 230, work3: 340 },
{ time: '11:00', work1: 130, work2: 240, work3: 360 },
{ time: '12:00', work1: 140, work2: 250, work3: 380 },
{ time: '13:00', work1: 150, work2: 260, work3: 390 },
{ time: '14:00', work1: 150, work2: 260, work3: 390 },
],
})
const lineOption = ref({
color: ['#9B88F9', '#4F953B', '#FFCE34'],
legend: {
right: '1%',
itemWidth: fontSize.value,
itemHeight: fontSize.value * 0.8,
},
grid: {
left: '2%',
right: '5%',
bottom: '15%',
top: '20%',
containLabel: true,
},
dataZoom: [
{
start: 0,
end: 30,
minSpan: 10,
bottom: '5%',
height: fontSize.value * 1.2,
},
],
})
const houseSum = ref<SummaryProp[]>([
{ name: '出入口', value: 165 },
{ name: '已封闭', value: 165 },
{ name: '有门岗处', value: 165 },
{ name: '值守处', value: 165 },
])
const mapList = ref([
{ name: '龙泉', value: 92 },
{ name: '厦门', value: 90 },
{ name: '牛庄', value: 90 },
{ name: '贵州', value: 92 },
{ name: '长江', value: 92 },
{ name: '云中', value: 92 },
{ name: '小花园', value: 92 },
{ name: '平望', value: 92 },
{ name: '振兴', value: 90 },
{ name: '新昌', value: 90 },
{ name: '江阴', value: 90 },
{ name: '顺天村', value: 92 },
{ name: '新桥', value: 92 },
{ name: '三德', value: 90 },
{ name: '福海', value: 92 },
{ name: '福瑞', value: 90 },
{ name: '承兴', value: 92 },
{ name: '定兴', value: 92 },
])
return {
sumList,
lineData,
lineOption,
showChart,
houseSum,
mapList,
}
},
})
</script>
<style lang="stylus" scoped>
@import ('../../components/MyComponent/main.styl')
.chart
width 100%
height 1.4rem
margin .1rem 0
.gate
margin-bottom .1rem
p
margin-bottom .05rem
.safe-map
display flex
>div
&:first-child
flex 1.7
display flex
flex-wrap wrap
>p
width 33.3%
margin-bottom .04rem
span
color #ccc
.count
margin-left .08rem
font-size .12rem
&:last-child
$center()
flex 1
background url('@/assets/images/border3.png') 100% / 100% 100% no-repeat
>img
width 80%
</style>
src/view/right/population.vue 0 → 100644
View file @ c9b42986
<template>
<m-card title="实有人口" :addition="{ value: 76618, unit: '人' }">
<Brief :list="summary" />
<div class="content">
<div v-for="item in population" :key="item.name">
<m-count class="count" :value="item.value" />
<div>
<span>{{ item.name }}</span>
<img src="@/assets/images/location.png" />
</div>
</div>
</div>
</m-card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
export default defineComponent({
name: 'Population',
components: { Brief },
setup() {
const summary = ref<BriefProp[]>([
{ name: '本市户籍', value: 18733, icon: 'in.png' },
{ name: '境外流入', value: 28833, icon: 'out.png' },
{ name: '境内流入', value: 29052, icon: 'china.png' },
])
const population = ref([
{ name: '老龄人口', value: 35648 },
{ name: '低保人口', value: 65315 },
{ name: '残障人士', value: 2657 },
])
return {
summary,
population,
}
},
})
</script>
<style lang="stylus" scoped>
.content
display flex
justify-content space-between
>div
width 32%
background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
padding .05rem .15rem
.count
font-size .12rem
>div
display flex
align-items center
justify-content space-between
width 100%
span
font-size .09rem
color #ccc
img
width .1rem
height @width
</style>
src/view/right/public-safety.vue 0 → 100644
View file @ c9b42986
<template>
<div class="public-service">
<m-card mode="border">
<Police />
</m-card>
<m-card mode="border">
<div class="population"><Population /></div>
<div class="house"><House /></div>
<div class="company"><Company /></div>
</m-card>
<m-card mode="border">
<m-card title="应急物资储备">
<Brief
:list="[
{ name: '防汛防台', value: 65 },
{ name: '防寒抗冻', value: 35 },
{ name: '疫情控制', value: 43 },
{ name: '应急抢险', value: 43 },
]"
/>
</m-card>
<m-card title="“两牢”人员">
<Summary
:list="[
{ name: '总人员', value: 120 },
{ name: '劳改人员', value: 20 },
{ name: '劳教人员', value: 100 },
]"
two-child
/>
</m-card>
<m-card title="房屋外立面"></m-card>
</m-card>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Police from './police.vue'
import Population from './population.vue'
import House from './house.vue'
import Company from './company.vue'
import Brief from '../components/brief.vue'
import Summary from '../components/summary.vue'
export default defineComponent({
name: 'PublicSafety',
components: { Police, Population, House, Company, Brief, Summary },
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.public-service
$full()
display flex
justify-content space-between
>div
height 100%
width 33%
.population
flex 1
.house
flex 2
.company
flex 1.2
</style>
src/view/right/public-service.vue
View file @ c9b42986
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
<m-card mode="border"> <m-card mode="border">
<Old /> <Old />
</m-card> </m-card>
<m-card mode="border"> </m-card> <m-card mode="border">
<Ecology />
</m-card>
</div> </div>
</template> </template>
...@@ -16,10 +18,11 @@ import { defineComponent } from 'vue' ...@@ -16,10 +18,11 @@ import { defineComponent } from 'vue'
import BeautyStreet from './beauty-street.vue' import BeautyStreet from './beauty-street.vue'
import BeautyHome from './beauty-home.vue' import BeautyHome from './beauty-home.vue'
import Old from './old.vue' import Old from './old.vue'
import Ecology from './ecology.vue'
export default defineComponent({ export default defineComponent({
name: 'PublicService', name: 'PublicService',
components: { BeautyStreet, BeautyHome, Old }, components: { BeautyStreet, BeautyHome, Old, Ecology },
}) })
</script> </script>
......
vetur.config.js
View file @ c9b42986
...@@ -84,6 +84,18 @@ module.exports = { ...@@ -84,6 +84,18 @@ module.exports = {
name: 'm-title', name: 'm-title',
path: './src/components/MyComponent/MyTitle/my-title.vue', path: './src/components/MyComponent/MyTitle/my-title.vue',
}, },
{
name: 'm-progress',
path: './src/components/MyComponent/MyProgress/my-progress.vue',
},
{
name: 'm-wave-ball',
path: './src/components/MyComponent/MyWaveBall/my-wave-ball.vue',
},
{
name: 'm-sub',
path: './src/components/MyComponent/MySub/my-sub.vue',
},
], ],
}, },
], ],
......
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