Skip to content

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

work station view complete

parent 7dfdfdcc
Show whitespace changes
Inline Side-by-side
Showing with 856 additions and 58 deletions
src/components/MyComponent/main.styl
View file @ 8f63fa10
...@@ -40,3 +40,6 @@ $table-content-hover-color = $primary-color ...@@ -40,3 +40,6 @@ $table-content-hover-color = $primary-color
$table-content-hover-bg = $primary-bg $table-content-hover-bg = $primary-bg
$font-color = #70A7E0 $font-color = #70A7E0
$table-bg(opacity = 0.3)
rgba(0, 118, 255, opacity )
\ No newline at end of file
src/view/left/command.vue
View file @ 8f63fa10
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
<div v-for="(item, i) in leaders" :key="i"> <div v-for="(item, i) in leaders" :key="i">
<img :src="`@/assets/images/${item.img}`" /> <img :src="`@/assets/images/${item.img}`" />
<div> <div>
<p>{{ item.type }}</p> <p>{{ item.name }}</p>
<span>{{ item.name }}</span> <span>{{ item.type }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -29,14 +29,22 @@ ...@@ -29,14 +29,22 @@
<p>夜间值班 · 18:00 ~ 08:00</p> <p>夜间值班 · 18:00 ~ 08:00</p>
</div> </div>
</div> </div>
<m-table <div class="table">
class="duty-table" <div>
:template="[ <p>工作小组</p>
'工作小组|组长|电话*1.2|常驻人数|报道制人数', <p>组长</p>
'group|leader|phone|number1|number2', <p>电话</p>
]" <p>常驻人数</p>
:data="dutyTableData" <p>报道制人数</p>
/> </div>
<div v-for="(item, i) in dutyTableData" :key="i">
<p>{{ item.group }}</p>
<p>{{ item.leader }}</p>
<p>{{ item.phone }}</p>
<p>{{ item.number1 }}</p>
<p>{{ item.number2 }}</p>
</div>
</div>
</div> </div>
<div class="soldier"> <div class="soldier">
<m-sub>单兵巡查边量</m-sub> <m-sub>单兵巡查边量</m-sub>
...@@ -260,6 +268,7 @@ export default defineComponent({ ...@@ -260,6 +268,7 @@ export default defineComponent({
.leader .leader
display flex display flex
flex-wrap wrap flex-wrap wrap
flex 1
>div >div
width 50% width 50%
display flex display flex
...@@ -334,26 +343,26 @@ export default defineComponent({ ...@@ -334,26 +343,26 @@ export default defineComponent({
display flex display flex
>div >div
flex 1 flex 1
</style> .table
<style lang="stylus"> border .01rem solid $blue
$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 >div
border $border display flex
border-bottom none background $table-bg(.15)
>div &:first-child
background rgba(0, 118, 255, .15) background $table-bg()
>div+div &+div
border-left $border border-top inherit
p
flex 1
line-height 2
padding 0 .05rem
overflow hidden
text-overflow ellipsis
white-space nowrap
&+p
border-left .01rem solid $blue
&:nth-of-type(3)
flex 1.4
&:last-child
flex 1.1
</style> </style>
src/view/left/manage-basic.vue
View file @ 8f63fa10
<template> <template>
<m-card mode="border"> <m-card mode="border">
<m-card title="管理基数"></m-card> <m-card class="card" title="管理基数">
<m-card title="指挥体系"></m-card> <div class="basic">
<m-card title="网格力量"></m-card> <div v-for="item in basicList" :key="item.name">
<p>
<img :src="`@/assets/images/${item.icon}`" />
{{ item.name }}
</p>
<p>
<m-count class="count" :value="item.value" />
<span>{{ item.unit }}</span>
</p>
</div>
</div>
</m-card>
<m-card class="card" title="指挥体系">
<div class="command">
<div class="flag">
<img src="@/assets/images/wangge.png" />
<img src="@/assets/images/jingzhang.png" />
</div>
<div class="leader">
<div v-for="(item, i) in leaders" :key="i">
<img :src="`@/assets/images/${item.img}`" />
<div>
<p>{{ item.name }}</p>
<span>{{ item.type }}</span>
</div>
</div>
</div>
</div>
</m-card>
<m-card class="card" title="网格力量">
<div class="table">
<div>
<p>部门</p>
<p>人员</p>
</div>
<div v-for="(item, i) in gridList" :key="i">
<p>{{ item.department }}</p>
<p>{{ item.persons }}</p>
</div>
</div>
</m-card>
</m-card> </m-card>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue' import { defineComponent, ref } from 'vue'
export default defineComponent({ export default defineComponent({
name: 'ManageBasic', name: 'ManageBasic',
setup() {}, setup() {
const basicList = ref([
{ name: '总面积', value: 241359, unit: '㎡', icon: 'pic1.png' },
{ name: '总户数', value: 341359, unit: '户', icon: 'pic2.png' },
{ name: '总人口', value: 965334, unit: '人', icon: 'pic3.png' },
{ name: '总单位', value: 5334, unit: '家', icon: 'pic4.png' },
])
const leaders = ref([
{
img: 'avatar1.png',
name: '姓名',
type: '网格长',
},
{
img: 'avatar2.png',
name: '姓名',
type: '副网格长',
},
{
img: 'avatar1.png',
name: '姓名',
type: '警长',
},
])
const gridList = ref([
{ department: '派出所', persons: '朱洪元副所长、于冰警长、警力25人' },
{ department: '市场所', persons: '王绍良、陈蕾、张敏' },
{ department: '城管中队', persons: '尤懿副队长、城管队员8人' },
{ department: '城运中心', persons: '许俊' },
{ department: '建管中心', persons: '张沁园、车姝敏、杨姝敏' },
{ department: '党建联络员', persons: '方雅婷、秦雯、郭强' },
{ department: '服务企业人员', persons: '蓝俊' },
])
return {
basicList,
leaders,
gridList,
}
},
}) })
</script> </script>
<style lang="stylus" scoped></style> <style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.card
flex 1.8
&:nth-of-type(2)
flex 1
.basic
$full()
display flex
flex-direction column
justify-content space-around
padding .05rem 0
>div
display flex
align-items center
justify-content space-between
height 22%
background linear-gradient(to right, rgba(30,251,255,.2), transparent)
border-left .02rem solid $secondary-color
padding 0 .2rem
img
width .26rem
height @width
margin-right .1rem
.count
color $yellow
font-size .14rem
font-family $font-pang
margin-right .05rem
span
color #aaa
font-size .09rem
.command
display flex
.flag
display flex
flex-direction column
justify-content space-around
margin 0 .3rem 0 .05rem
>img
display block
width .36rem
height @width
margin .04rem 0
.leader
flex 1
display flex
flex-wrap wrap
>div
width 50%
display flex
align-items center
p
font-size .11rem
font-weight bold
img
width .28rem
height @width
margin-right .1rem
span
color #ccc
.table
border .01rem solid $blue
>div
display flex
background $table-bg(.15)
&:first-child
background $table-bg()
&+div
border-top inherit
p
flex 1
line-height 2
padding 0 .05rem
overflow hidden
text-overflow ellipsis
white-space nowrap
&+p
border-left .01rem solid $blue
&:first-child
flex 0.4
</style>
src/view/right/beauty-home.vue
View file @ 8f63fa10
...@@ -8,8 +8,14 @@ ...@@ -8,8 +8,14 @@
</div> </div>
</div> </div>
<Brief :list="situation" /> <Brief :list="situation" />
<div v-if="curViewType !== 'street'" class="sum-card work-station">
<div v-for="item in workStationProjects" :key="item.name">
<m-count class="count" :value="item.value" />
<p>{{ item.name }}</p>
</div>
</div>
<m-sub :addition="{ value: 33, unit: '幢' }">电梯加装（排摸）</m-sub> <m-sub :addition="{ value: 33, unit: '幢' }">电梯加装（排摸）</m-sub>
<div class="elev"> <div v-if="curViewType === 'street'" class="sum-card">
<div v-for="item in elevList" :key="item.name"> <div v-for="item in elevList" :key="item.name">
<m-count class="count" :value="item.value" /> <m-count class="count" :value="item.value" />
<p>{{ item.name }}</p> <p>{{ item.name }}</p>
...@@ -22,13 +28,15 @@ ...@@ -22,13 +28,15 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue' import { computed, defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue' import Brief, { BriefProp } from '../components/brief.vue'
import store from '@/store'
export default defineComponent({ export default defineComponent({
name: 'BeautyHome', name: 'BeautyHome',
components: { Brief }, components: { Brief },
setup() { setup() {
const curViewType = computed(() => store.state.curView.type)
const summary = ref([ const summary = ref([
{ name: '2020年', value: 26 }, { name: '2020年', value: 26 },
{ name: '2019年', value: 24 }, { name: '2019年', value: 24 },
...@@ -53,11 +61,20 @@ export default defineComponent({ ...@@ -53,11 +61,20 @@ export default defineComponent({
{ name: '已完成改造', value: 26, icon: 'icon13.png' }, { name: '已完成改造', value: 26, icon: 'icon13.png' },
{ name: '应改造', value: 64, icon: 'icon14.png' }, { name: '应改造', value: 64, icon: 'icon14.png' },
]) ])
const workStationProjects = ref([
{ name: '架空线梳理', value: 16 },
{ name: '店招店牌美化', value: 26 },
{ name: '绿化整治', value: 15 },
{ name: '外立面整治', value: 8 },
{ name: '公共设置', value: 8 },
])
return { return {
curViewType,
summary, summary,
situation, situation,
elevList, elevList,
toiletSituation, toiletSituation,
workStationProjects,
} }
}, },
}) })
...@@ -79,9 +96,13 @@ export default defineComponent({ ...@@ -79,9 +96,13 @@ export default defineComponent({
p p
font-size .09rem font-size .09rem
color $font-color color $font-color
.elev .sum-card
display flex display flex
flex-wrap wrap flex-wrap wrap
&.work-station
margin .05rem 0
>div
width 20%
>div >div
width 25% width 25%
text-align center text-align center
...@@ -91,9 +112,10 @@ export default defineComponent({ ...@@ -91,9 +112,10 @@ export default defineComponent({
font-weight bold font-weight bold
p p
color #ccc color #ccc
font-size .09rem
&:after &:after
content '|' content '|'
color $primary-border color $secondary-color
position absolute position absolute
top 50% top 50%
right 0 right 0
......
src/view/right/analysis.vue → src/view/right/case-analysis.vue
View file @ 8f63fa10
...@@ -44,7 +44,7 @@ import SubTitle from '../components/sub-title.vue' ...@@ -44,7 +44,7 @@ import SubTitle from '../components/sub-title.vue'
import Place, { PlaceProp } from '../components/place.vue' import Place, { PlaceProp } from '../components/place.vue'
export default defineComponent({ export default defineComponent({
name: 'Analysis', name: 'CaseAnalysis',
components: { Tabs, SubTitle, Place }, components: { Tabs, SubTitle, Place },
setup() { setup() {
const tabs = ref<TabsProp[]>([ const tabs = ref<TabsProp[]>([
...@@ -93,7 +93,7 @@ export default defineComponent({ ...@@ -93,7 +93,7 @@ export default defineComponent({
justify-content space-between justify-content space-between
margin .05rem 0 margin .05rem 0
>div >div
width 70% width 75%
&:last-child &:last-child
width 20% width 20%
display flex display flex
...@@ -117,5 +117,5 @@ export default defineComponent({ ...@@ -117,5 +117,5 @@ export default defineComponent({
display flex display flex
justify-content space-between justify-content space-between
>div >div
width 30% width 32%
</style> </style>
src/view/right/complain.vue
View file @ 8f63fa10
...@@ -13,12 +13,12 @@ ...@@ -13,12 +13,12 @@
<Tabs :list="tabList" /> <Tabs :list="tabList" />
<div class="content"> <div class="content">
<SubTitle>响应度</SubTitle> <SubTitle>响应度</SubTitle>
<div class="chart"> <div v-if="showChart" class="chart">
<m-line :dataset="responseChartData" :option="chartOption" /> <m-line :dataset="responseChartData" :option="chartOption" />
</div> </div>
<SubTitle>分类排行</SubTitle> <SubTitle>分类排行</SubTitle>
<div class="chart wrapper"> <div class="chart wrapper">
<div> <div v-if="showChart">
<m-radar :dataset="classChartData" :option="chartOption2" /> <m-radar :dataset="classChartData" :option="chartOption2" />
</div> </div>
<div> <div>
...@@ -50,12 +50,14 @@ import { defineComponent, ref, computed } from 'vue' ...@@ -50,12 +50,14 @@ import { defineComponent, ref, computed } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue' import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTitle from '../components/sub-title.vue' import SubTitle from '../components/sub-title.vue'
import { ECOption } from '@/components/MyComponent/MyChart/my-line.vue' import { ECOption } from '@/components/MyComponent/MyChart/my-line.vue'
import store from '@/store'
export default defineComponent({ export default defineComponent({
name: 'Complain', name: 'Complain',
components: { Tabs, SubTitle }, components: { Tabs, SubTitle },
setup() { setup() {
const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100)) const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const showChart = computed(() => store.state.curTheme === 'manage')
const summary = ref([ const summary = ref([
{ {
name: '街面管理', name: '街面管理',
...@@ -164,6 +166,7 @@ export default defineComponent({ ...@@ -164,6 +166,7 @@ export default defineComponent({
}) })
return { return {
summary, summary,
showChart,
tabList, tabList,
responseChartData, responseChartData,
chartOption, chartOption,
......
src/view/right/convenient.vue 0 → 100644
View file @ 8f63fa10
<template>
<m-card title="便民设施">
<div>
<m-sub>为老服务</m-sub>
<div class="old">
<div>
<div v-for="item in forOld.slice(0, 4)" :key="item.name">
<m-count class="count" :value="item.value" />
<p>{{ item.name }}</p>
</div>
</div>
<div>
<div v-for="item in forOld.slice(4)" :key="item.name">
<m-count class="count" :value="item.value" />
<p>{{ item.name }}</p>
</div>
</div>
</div>
</div>
<div class="live">
<m-sub>生活便利</m-sub>
<Brief :list="forLive" />
</div>
</m-card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
export default defineComponent({
name: 'Convenient',
components: { Brief },
setup() {
const forOld = ref([
{ name: '综合为老服务', value: 26 },
{ name: '长者照护之家', value: 64 },
{ name: '睦邻中心', value: 331 },
{ name: '日托所', value: 157 },
{ name: '洗衣房', value: 91 },
{ name: '敬老院', value: 53 },
{ name: '老年活动室', value: 38 },
{ name: '助餐点', value: 87 },
{ name: '助浴点', value: 68 },
])
const forLive = ref<BriefProp[]>([
{ name: '菜场', value: 26, icon: 'icon23.png' },
{ name: '街面废物箱', value: 64, icon: 'icon24.png' },
{ name: '公厕', value: 18, icon: 'icon25.png' },
{ name: '电话亭', value: 12, icon: 'icon26.png' },
])
return {
forOld,
forLive,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.old
>div
display flex
align-items center
justify-content space-between
margin .1rem 0
&:first-child
>div
width 23%
&:last-child
>div
width 18%
>div
padding .1rem 0
$center()
flex-direction column
background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
.count
font-size .13rem
p
color #ccc
.live
margin-bottom .1rem
</style>
src/view/right/demand.vue
View file @ 8f63fa10
...@@ -18,11 +18,11 @@ ...@@ -18,11 +18,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="chart"> <div v-if="showChart" class="chart">
<m-bar :dataset="barData" :option="barOption" /> <m-bar :dataset="barData" :option="barOption" />
</div> </div>
<div class="chart wrapper"> <div class="chart wrapper">
<div> <div v-if="showChart">
<m-pie :option="pieOption" /> <m-pie :option="pieOption" />
</div> </div>
<div> <div>
...@@ -56,12 +56,14 @@ ...@@ -56,12 +56,14 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref } from 'vue' import { computed, defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue' import Brief, { BriefProp } from '../components/brief.vue'
import store from '@/store'
export default defineComponent({ export default defineComponent({
name: 'Demand', name: 'Demand',
components: { Brief }, components: { Brief },
setup() { setup() {
const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100)) const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const showChart = computed(() => store.state.curTheme === 'manage')
const summary = ref<BriefProp[]>([ const summary = ref<BriefProp[]>([
{ {
name: '综合管理', name: '综合管理',
...@@ -249,6 +251,7 @@ export default defineComponent({ ...@@ -249,6 +251,7 @@ export default defineComponent({
} }
return { return {
summary, summary,
showChart,
process, process,
barData, barData,
barOption, barOption,
......
src/view/right/duty-analysis.vue 0 → 100644
View file @ 8f63fa10
<template>
<m-card title="勤务分析">
<div class="nav">
<div>
<Tabs :list="tabs" horizontal />
</div>
<div>
<span
v-for="option in options"
:key="option"
:class="{ on: curOption === option }"
@click="curOption = option"
>
{{ option }}
</span>
</div>
</div>
<div>
<SubTitle>事件类型</SubTitle>
<div class="duty-type">
<div v-if="showChart" 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] }" />
{{ item.name }}
</p>
<p>
{{ ((item.value / total) * 100).toFixed(0) }}%
<m-count :value="item.value" />人
</p>
</div>
</div>
</div>
</div>
<div>
<SubTitle>居委事件数量</SubTitle>
<div v-if="showChart" class="chart">
<m-bar :dataset="barData" :option="barOption" />
</div>
</div>
<div class="rank">
<SubTitle>分类排行</SubTitle>
<div class="content">
<m-progress
v-for="rank in rankList"
:key="rank.name"
:value="rank.value"
:msg="rank"
/>
</div>
</div>
<div class="place">
<SubTitle>多发地点</SubTitle>
<div class="content">
<div v-for="item in placeList" :key="item.name">
<Place :data="item" />
</div>
</div>
</div>
</m-card>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTitle from '../components/sub-title.vue'
import Place, { PlaceProp } from '../components/place.vue'
import store from '@/store'
export default defineComponent({
name: 'DutyAnalysis',
components: { Tabs, SubTitle, Place },
setup() {
const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const showChart = computed(() => store.state.curView.type !== 'street')
const tabs = ref<TabsProp[]>([
{
key: 'all',
name: '综合管理',
},
{
key: 'street',
name: '街面管理',
},
{
key: 'community',
name: '小区管理',
},
])
const options = ref(['日', '周', '月'])
const curOption = ref('月')
const rankList = ref([
{ name: '分类1', value: 50 },
{ name: '分类2', value: 31 },
{ name: '分类3', value: 15 },
])
const placeList = ref<PlaceProp[]>([
{ name: '延安东路1292弄', value: 3, type: '路段' },
{ name: '延安东路1293弄', value: 5, type: '小区' },
{ name: '延安东路1294弄', value: 8, type: '商业' },
])
const barData = ref({
dimensions: [
{ name: 'name', displayName: '居委' },
{ name: 'data1', displayName: '类型1' },
{ name: 'data2', displayName: '类型2' },
{ name: 'data3', displayName: '类型3' },
{ name: 'data4', displayName: '类型4' },
{ name: 'data5', displayName: '类型5' },
],
source: [
{
name: '均乐',
data1: 100,
data2: 100,
data3: 100,
data4: 50,
data5: 50,
},
{
name: '振兴',
data1: 110,
data2: 110,
data3: 120,
data4: 10,
data5: 20,
},
{
name: '顺天村',
data1: 120,
data2: 130,
data3: 140,
data4: 30,
data5: 40,
},
{
name: '江阴',
data1: 130,
data2: 140,
data3: 160,
data4: 40,
data5: 60,
},
{
name: '新昌',
data1: 140,
data2: 150,
data3: 180,
data4: 50,
data5: 80,
},
{
name: '长江',
data1: 150,
data2: 160,
data3: 190,
data4: 60,
data5: 90,
},
{
name: '定兴',
data1: 150,
data2: 160,
data3: 190,
data4: 60,
data5: 90,
},
{
name: '三德',
data1: 150,
data2: 160,
data3: 190,
data4: 60,
data5: 90,
},
],
})
const barOption = ref({
color: ['#5BD5FF', '#6EB629', '#FFCE34', '#FF9D27', '#826AFA'],
legend: {
right: '2%',
itemWidth: fontSize.value * 0.6,
itemHeight: fontSize.value * 0.8,
},
series: [
{
type: 'bar',
barWidth: '18%',
itemStyle: { borderRadius: 8 },
barGap: 0,
stack: '总量',
},
{
type: 'bar',
barWidth: '18%',
itemStyle: { borderRadius: 8 },
barGap: 0,
stack: '总量',
},
{
type: 'bar',
barWidth: '18%',
itemStyle: { borderRadius: 8 },
barGap: 0,
stack: '总量',
},
],
})
const pieData = ref({
dimensions: [
{ name: 'name', displayName: '类型名称' },
{ name: 'value', displayName: '数量' },
],
source: [
{ name: '事件类型1', value: 2939 },
{ name: '事件类型2', value: 4261 },
{ name: '事件类型3', value: 2204 },
{ name: '事件类型4', value: 2086 },
{ name: '事件类型5', value: 1910 },
],
})
const total = pieData.value.source.reduce((acc, cur) => acc + cur.value, 0)
const pieOption = ref({
color: ['#00BFFF', '#FFCE34', '#826AFA', '#589C20', '#F47C1F'],
legend: { show: false },
series: {
type: 'pie',
radius: [0, '90%'],
center: ['40%', '50%'],
label: {
show: false,
},
},
})
return {
showChart,
total,
tabs,
options,
curOption,
rankList,
placeList,
barData,
barOption,
pieData,
pieOption,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.nav
width 100%
display flex
align-items center
justify-content space-between
margin .03rem 0
>div
width 75%
&:last-child
width 20%
display flex
>span
$center()
width .22rem
height @width
color $primary-border
border .01rem solid @color
cursor pointer
&:hover
&.on
color $secondary-color
border-color @color
background rgba(50,197,255,.2)
.rank
flex 1
.place
.content
display flex
justify-content space-between
>div
width 32%
.chart
width 100%
height 1rem
.duty-type
width 100%
height .6rem
display flex
.chart
width 25%
height 100%
.legend
display flex
flex-wrap wrap
align-items center
flex 1
font-size .09rem
>div
width 33.3%
p
span
width .06rem
height @width
display inline-block
margin-right .04rem
border-radius 50%
&:last-child
font-size .08rem
margin-left .08rem
</style>
src/view/right/duty.vue 0 → 100644
View file @ 8f63fa10
<template>
<m-card title="勤务">
<Brief class="brief" :list="summary" />
<Tabs class="tabs" :list="tabs" horizontal />
<div class="details">
<m-scroll :limit="4" :length="caseList.length" :step="1.1" mode="2">
<div v-for="(item, i) in caseList" :key="i" class="detail">
<div class="title">
<p>{{ item.name }}</p>
<span />
<p>{{ item.type }}</p>
</div>
<div class="msg">
<p>{{ item.address }}</p>
<p>{{ item.date }}</p>
</div>
<m-step :steps="steps" :current="item.cur" />
</div>
</m-scroll>
</div>
</m-card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import Tabs, { TabsProp } from '../components/tabs.vue'
export default defineComponent({
name: 'Duty',
components: { Brief, Tabs },
setup() {
const summary = ref<BriefProp[]>([
{
name: '综合管理',
value: [36, 468],
icon: 'icon6.png',
},
{
name: '街面管理',
value: [64, 261],
icon: 'icon7.png',
},
{
name: '小区管理',
value: [57, 154],
icon: 'icon8.png',
},
])
const tabs = ref<TabsProp[]>([
{ name: '综合管理', key: 'all' },
{ name: '街面管理', key: 'street' },
{ name: '小区管理', key: 'community' },
])
const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
const caseList = ref([
{
name: '均乐小区',
type: '电梯困人',
address: '上海市黄浦区延安东路1292弄6~40号',
date: '2020-02-13 13:23:08',
cur: 5,
},
{
name: '均乐小区',
type: '电梯困人',
address: '上海市黄浦区延安东路1292弄6~40号',
date: '2020-02-13 13:23:08',
cur: 4,
},
{
name: '均乐小区',
type: '电梯困人',
address: '上海市黄浦区延安东路1292弄6~40号',
date: '2020-02-13 13:23:08',
cur: 3,
},
{
name: '均乐小区',
type: '电梯困人',
address: '上海市黄浦区延安东路1292弄6~40号',
date: '2020-02-13 13:23:08',
cur: 2,
},
])
return {
summary,
tabs,
caseList,
steps,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.details
height 3.6rem
overflow hidden
.detail
display flex
flex-direction column
justify-content space-between
padding .1rem
background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
height 1rem
margin-bottom .1rem
box-sizing border-box
.title
display flex
align-items center
p
font-size .12rem
&:last-child
color $edge
font-size .1rem
span
display block
height .01rem
background $blue
flex 1
margin 0 .1rem
.msg
$center()
justify-content space-between
color $blue
font-size .08rem
</style>
src/view/right/neighbor-entry.vue 0 → 100644
View file @ 8f63fa10
<template>
<m-card title="商居睦邻会">
<div class="content">
<div>入口名称</div>
</div>
</m-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'NeighborEntry',
})
</script>
<style lang="stylus" scoped>
.content
width 100%
height 100%
display flex
align-items center
justify-content space-around
>div
width 50%
min-height 70%
background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
display flex
align-items center
justify-content center
font-size .12rem
font-weight bold
</style>
src/view/right/old.vue
View file @ 8f63fa10
...@@ -215,13 +215,13 @@ export default defineComponent({ ...@@ -215,13 +215,13 @@ export default defineComponent({
border-left inherit border-left inherit
p p
font-size .11rem font-size .11rem
background rgba(0, 118, 255, .15) background $table-bg(0.15)
line-height 2 line-height 2
&+p &+p
border-top .01rem solid $font-color border-top .01rem solid $font-color
&:nth-of-type(1) &:nth-of-type(1)
font-size .1rem font-size .1rem
background rgba(0, 118, 255, .3) background $table-bg()
&:nth-of-type(2) &:nth-of-type(2)
color $yellow color $yellow
&:nth-of-type(3) &:nth-of-type(3)
......
src/view/right/public-manage.vue
View file @ 8f63fa10
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<Demand /> <Demand />
</m-card> </m-card>
<m-card mode="border"> <m-card mode="border">
<div class="first-child"><Analysis /></div> <div class="first-child"><CaseAnalysis /></div>
<div class="second-child"><KeyTask /></div> <div class="second-child"><KeyTask /></div>
<div class="third-child"><BussinessEntry /></div> <div class="third-child"><BussinessEntry /></div>
</m-card> </m-card>
...@@ -18,13 +18,13 @@ ...@@ -18,13 +18,13 @@
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
import Complain from './complain.vue' import Complain from './complain.vue'
import Demand from './demand.vue' import Demand from './demand.vue'
import Analysis from './analysis.vue' import CaseAnalysis from './case-analysis.vue'
import KeyTask from './key-task.vue' import KeyTask from './key-task.vue'
import BussinessEntry from './business-entry.vue' import BussinessEntry from './business-entry.vue'
export default defineComponent({ export default defineComponent({
name: 'PublicMange', name: 'PublicMange',
components: { Complain, Demand, Analysis, KeyTask, BussinessEntry }, components: { Complain, Demand, CaseAnalysis, KeyTask, BussinessEntry },
}) })
</script> </script>
......
src/view/right/public-work.vue
View file @ 8f63fa10
<template> <template>
<div class="public-work"> <div class="public-work">
<m-card mode="border"></m-card> <m-card mode="border">
<m-card mode="border"></m-card> <div class="convnient"><Convenient /></div>
<m-card mode="border"></m-card> <div class="beauty"><BeautyHome /></div>
</m-card>
<m-card mode="border">
<div class="duty"><Duty /></div>
<div class="neighbor"><NeighborEntry /></div>
</m-card>
<m-card mode="border">
<div class="analysis"><DutyAnalysis /></div>
<div class="task"><KeyTask /></div>
</m-card>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
import Convenient from './convenient.vue'
import BeautyHome from './beauty-home.vue'
import Duty from './duty.vue'
import NeighborEntry from './neighbor-entry.vue'
import DutyAnalysis from './duty-analysis.vue'
import KeyTask from './key-task.vue'
export default defineComponent({ export default defineComponent({
name: 'PublicWork', name: 'PublicWork',
components: {
Convenient,
BeautyHome,
NeighborEntry,
Duty,
DutyAnalysis,
KeyTask,
},
setup() {}, setup() {},
}) })
</script> </script>
...@@ -25,4 +48,14 @@ export default defineComponent({ ...@@ -25,4 +48,14 @@ export default defineComponent({
>div >div
height 100% height 100%
width 33% width 33%
.convenient
.beauty
.duty
.analysis
flex 1
.task
height 1rem
.neighbor
height .8rem
</style> </style>
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