Skip to content

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

工作站改版完成（勤务分析待接口修改后处理）

parent c366afda
Show whitespace changes
Inline Side-by-side
Showing with 793 additions and 345 deletions
src/assets/style/reset.styl
View file @ 64a1cdfa
......@@ -5,7 +5,7 @@ $color-main = #5BD5FF
.ant-progress-circle
.ant-progress-text
color #fff
font-size 0.2rem
font-size 0.12rem
font-weight bold
.ant-select
z-index 99
......
src/components/MyComponent/MyCard/mode-3.vue
View file @ 64a1cdfa
<template>
<div class="card-wrapper" :class="{ 'no-bg': noBg }">
<div class="card-wrapper">
<div class="card-title">
<p>
{{ title }}
</p>
<img class="tri" src="@/assets/images/modal-head-tri.png" />
<img class="tri" src="@/assets/images/modal-head-tri.png" />
</div>
<div class="card-content">
<span class="border" />
<span class="border" />
<slot />
</div>
</div>
......@@ -15,18 +13,25 @@
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import flag from '@/assets/images/card-model2-flag.png'
export interface AdditionProp {
name?: string
value?: number
unit?: string
}
export default defineComponent({
name: 'Mode1',
name: 'Mode3',
props: {
title: {
type: String as PropType<string>,
required: true,
},
noBg: {
type: Boolean as PropType<boolean>,
default: false,
},
setup() {
return {
flag,
}
},
})
</script>
......@@ -34,49 +39,36 @@ export default defineComponent({
<style scoped lang="stylus">
@import '../main.styl'
.card-wrapper
&.no-bg
.card-title
margin-bottom 0
.card-content
background transparent
$full()
.card-title
display flex
align-items center
background linear-gradient(to right, rgba(59,85,102,.8), transparent)
background linear-gradient(to bottom, transparent, rgba(0,148,255,.3))
position relative
border-bottom .01rem solid rgba(105,110,114,.15)
margin-bottom .05rem
&:before
content ''
display block
position absolute
left 0
width .02rem
height 60%
background #FADB71
>p
color $card-title-color
color #D0EBEC
font-family $font-zcool
font-size $card-title-size
font-weight bold
margin 0
margin-left .1rem
.card-content
position relative
height .2rem
padding-left .2rem
align-items center
font-size .13rem
box-sizing border-box
background rgba(105,110,114,.15)
padding .05rem .08rem
&.no-bg
background transparent
>.border
display block
border-bottom .01rem solid $primary-border
.tri
position absolute
top 0
left 0
bottom 0
width .01rem
width .2rem
&:nth-of-type(2)
left auto
right 0
transform rotate(180deg)
.card-content
display flex
flex-direction column
justify-content space-around
position relative
box-sizing border-box
padding .02rem .05rem
overflow hidden !important
>div
$full()
</style>
src/components/MyComponent/MyCard/mode-4.vue 0 → 100644
View file @ 64a1cdfa
<template>
<div class="card-wrapper" :class="{ 'no-bg': noBg }">
<div class="card-title">
<p>
{{ title }}
</p>
</div>
<div class="card-content">
<span class="border" />
<span class="border" />
<slot />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
export default defineComponent({
name: 'Mode4',
props: {
title: {
type: String as PropType<string>,
required: true,
},
noBg: {
type: Boolean as PropType<boolean>,
default: true,
},
},
})
</script>
<style scoped lang="stylus">
@import '../main.styl'
.card-wrapper
&.no-bg
.card-title
margin-bottom 0
.card-content
background transparent
.card-title
display flex
align-items center
background linear-gradient(to right, rgba(59,85,102,.8), transparent)
position relative
border-bottom .01rem solid rgba(105,110,114,.15)
margin-bottom .05rem
&:before
content ''
display block
position absolute
left 0
width .02rem
height 60%
background #FADB71
>p
color $card-title-color
font-size $card-title-size
font-weight bold
margin 0
margin-left .1rem
.card-content
position relative
box-sizing border-box
background rgba(105,110,114,.15)
padding .05rem .08rem
&.no-bg
background transparent
>.border
display block
position absolute
top 0
left 0
bottom 0
width .01rem
&:nth-of-type(2)
left auto
right 0
>div
$full()
</style>
src/components/MyComponent/MyCard/my-card.vue
View file @ 64a1cdfa
......@@ -14,11 +14,12 @@ import MyAnimate from '../MyAnimate/my-animate.vue'
import mode1 from './mode-1.vue'
import mode2 from './mode-2.vue'
import mode3 from './mode-3.vue'
import mode4 from './mode-4.vue'
import modeBorder from './mode-border.vue'
import modeBorder2 from './mode-border2.vue'
import '../main.styl'
type ModeType = '1' | '2' | '3' | 'border' | 'border2'
type ModeType = '1' | '2' | '3' | '4' | 'border' | 'border2'
export default defineComponent({
name: 'MyCard',
......@@ -56,6 +57,8 @@ export default defineComponent({
return mode2
case '3':
return mode3
case '4':
return mode4
case 'border':
return modeBorder
case 'border2':
......
src/components/MyComponent/MyChart/my-bar.vue
View file @ 64a1cdfa
......@@ -41,8 +41,7 @@ export default defineComponent({
top: '20%',
containLabel: true,
},
xAxis: [
{
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
......@@ -53,9 +52,7 @@ export default defineComponent({
},
},
},
],
yAxis: [
{
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
......@@ -63,7 +60,6 @@ export default defineComponent({
},
},
},
],
}
const defaultSeriesItem = {
type: 'bar',
......
src/components/MyComponent/MyProgress/my-progress.vue
View file @ 64a1cdfa
......@@ -2,7 +2,7 @@
<div class="my-progress">
<div v-if="msg" class="msg">
<p v-if="msg.name">{{ msg.name }}</p>
<p v-if="msg.value">
<p v-if="msg.value" :style="{ color: msg.color }">
<MonitorCount :value="msg.value" />
<span v-if="msg.unit">{{ msg.unit }}</span>
</p>
......@@ -22,6 +22,7 @@ export interface ProgressProps {
name?: string
value?: number
unit?: string
color?: string
}
export default defineComponent({
name: 'MyProgress',
......
src/components/MyComponent/MySub/my-sub2.vue 0 → 100644
View file @ 64a1cdfa
<template>
<div class="my-sub">
<div class="title">
<span />
<p><slot /></p>
<div v-if="addition" class="addition">
<MyCount v-if="addition.value" class="count" :value="addition.value" />
<span v-if="addition.unit">{{ addition.unit }}</span>
</div>
<input
v-if="searchAble"
v-model="inputValue"
:class="{ open: isOpened }"
class="search-bar"
type="text"
@keypress.enter="handleSearch"
/>
<img
v-if="searchAble"
class="search-btn"
src="@/assets/images/search.png"
draggable="false"
@click.prevent="handleOpenSearchBar"
/>
</div>
<!-- <img src="@/assets/images/sub-dot.png" draggable="false" /> -->
<span class="dot" />
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import MyCount from '../MyCount/my-count.vue'
export interface AdditionProp {
name?: string
value?: number
unit?: string
}
export default defineComponent({
name: 'MySub2',
displayName: 'm-sub2',
components: { MyCount },
props: {
addition: {
type: Object as PropType<AdditionProp>,
default: null,
},
searchAble: {
type: Boolean as PropType<boolean>,
default: false,
},
},
emits: ['search'],
setup(props, ctx) {
const isOpened = ref(false)
const inputValue = ref('')
const handleSearch = () => {
ctx.emit('search', inputValue.value.trim())
}
const handleOpenSearchBar = () => {
if (!isOpened.value) {
isOpened.value = true
} else {
if (inputValue.value) {
handleSearch()
} else {
isOpened.value = false
}
}
}
return {
isOpened,
inputValue,
handleSearch,
handleOpenSearchBar,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../main.styl'
.my-sub
display flex
align-items center
border-bottom .01rem solid rgba(105,110,114,.5)
margin-bottom .03rem
>.title
display flex
align-items center
font-family $font-zcool
// color $secondary-color
flex 1
font-size .12rem
.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
.search-bar
display block
width 0
height .16rem
background rgba(0,0,0,0.1)
border-radius .02rem
outline none
margin 0 .05rem
padding 0
box-sizing border-box
font-family $font-din
font-size .1rem
transition all .3s ease-in-out
opacity 0
&.open
width 1rem
padding .02rem .05rem
border .01rem solid $blue
opacity 1
.search-btn
width .14rem
height @width
cursor pointer
transition transform .3s ease-in-out
&:hover
transform scale(1.3) rotate(360deg)
// >img
// width .6rem
>.dot
display inline-block
width 0
height @width
border .05rem solid transparent
border-right-color #FFB560
</style>
src/components/MyComponent/MyTitle/my-title.vue
View file @ 64a1cdfa
<template>
<div class="my-title">
<img src="@/assets/images/title-bg.png" class="bg" />
<div class="my-title" :class="{ 'work-station': inWorkStation }">
<div class="date">
<span>{{ date }}</span>
<span>{{ time }}</span>
......@@ -47,6 +46,9 @@ export default defineComponent({
])
const curBtn = computed(() => store.state.curTheme)
const curView = computed(() => store.state.curView)
const inWorkStation = computed(
() => store.state.curView.type.indexOf('work') >= 0
)
const handleThemeSelect = (type: string) => {
if (curBtn.value === type) return
store.commit('SET_CURRENT_THEME', type)
......@@ -59,6 +61,7 @@ export default defineComponent({
timer.value = null
})
return {
inWorkStation,
date,
time,
timer,
......@@ -78,10 +81,13 @@ export default defineComponent({
$center()
justify-content flex-start
position relative
background-size cover
background-position center
background url('@/assets/images/title-bg.png') center / cover no-repeat
font-weight bold
z-index 1
&.work-station
background url('@/assets/images/title-bg2.png') center / cover no-repeat
h1
margin 0.4% 0 0 2%
.date
z-index 2
position absolute
......@@ -89,11 +95,6 @@ export default defineComponent({
span
display block
text-align right
.bg
position absolute
$full()
top 0
left 0
h1
font-family $font-weibei
margin 0 0 0 10%
......
src/components/MyComponent/index.ts
View file @ 64a1cdfa
......@@ -19,6 +19,7 @@ import MyPie from './MyChart/my-pie.vue'
import MyRadar from './MyChart/my-radar.vue'
import MyScatter from './MyChart/my-scatter.vue'
import MySub from './MySub/my-sub.vue'
import MySub2 from './MySub/my-sub2.vue'
import MyWave from './MyWave/my-wave.vue'
import MyProgress from './MyProgress/my-progress.vue'
import MyDrawer from './MyDrawer/my-drawer.vue'
......@@ -46,6 +47,7 @@ const components = [
MyRadar,
MyScatter,
MySub,
MySub2,
MyWave,
MyProgress,
MyDrawer,
......@@ -81,6 +83,7 @@ export {
MyRadar,
MyScatter,
MySub,
MySub2,
MyWave,
MyProgress,
MyDrawer,
......
src/components/MyComponent/main.styl
View file @ 64a1cdfa
......@@ -29,6 +29,7 @@ $blue = #2F86EE
$yellow = #ffd400
$green = #4F953B
$edge = #00f2ff
$orange = #F7933E
$card-bg = linear-gradient(to bottom, rgba(5,71,138,.2), rgba(5,71,138,.6))
$card-title-color = #fff
......
src/view/components/brief.vue
View file @ 64a1cdfa
<template>
<div class="brief-container">
<div class="brief-container" :class="{ vertical: align === 'vertical' }">
<div v-for="item in list" :key="item.name">
<img
v-if="item.icon"
......@@ -8,7 +8,11 @@
/>
<div v-if="Array.isArray(item.value)">
<div class="count-group">
<m-count class="count yellow" :value="item.value[0]" />
<m-count
class="count yellow"
:value="item.value[0]"
:style="{ color: color }"
/>
/
<m-count class="count" :value="item.value[1]" />
</div>
......@@ -49,6 +53,10 @@ export default defineComponent({
type: String as PropType<string>,
default: '0.22rem',
},
align: {
type: String as PropType<'vertical' | 'horizontal'>,
default: 'horizontal',
},
},
})
</script>
......@@ -64,6 +72,8 @@ export default defineComponent({
&.yellow
font-size .13rem
color $yellow
&.vertical
display inline-block
>div
display flex
align-items center
......
src/view/components/circle.vue
View file @ 64a1cdfa
<template>
<div ref="circleWrapperRef" class="circle-wrapper">
<a-progress
class-name="circle-progress"
:width="width"
:stroke-color="strokeColor"
:percent="value"
......@@ -8,6 +9,7 @@
:show-info="showInfo"
:stroke-width="strokeWidth"
:gap-degree="gapDegree"
trail-color="rgba(255,255,255,0.1)"
/>
<slot>
<p>{{ name }}</p>
......
src/view/left/manage-basic.vue
View file @ 64a1cdfa
<template>
<m-card mode="border2">
<m-card class="card" mode="3" title="管理基数">
<m-card class="card" mode="4" title="管理基数">
<div class="basic">
<div v-for="item in basicList" :key="item.name">
<p>{{ item.name }}</p>
......@@ -16,7 +16,7 @@
<img src="@/assets/images/manage-basic.png" />
</div>
</m-card>
<m-card class="card" mode="2" no-bg title="指挥体系">
<m-card class="card" mode="4" title="指挥体系">
<div class="command">
<div class="flag">
<img src="@/assets/images/wangge.png" />
......@@ -33,7 +33,7 @@
</div>
</div>
</m-card>
<m-card class="card" mode="2" no-bg title="网格力量">
<m-card class="card" mode="4" title="网格力量">
<div class="table">
<div v-for="(item, i) in gridList" :key="i">
<p>{{ item.department }}</p>
......
src/view/right/beauty-home-in-station.vue 0 → 100644
View file @ 64a1cdfa
<template>
<m-card title="美丽家园" mode="4">
<m-sub2>项目实施情况</m-sub2>
<div class="summary">
<div v-for="item in summary" :key="item.name">
<m-count class="count" :value="item.value" />
<p>{{ item.name }}</p>
</div>
</div>
<div class="detail">
<Brief :list="situation" align="vertical" color="#fff" />
<div v-if="curViewType !== 'street'" class="chart">
<m-bar :dataset="barData" :option="chartOption" />
</div>
</div>
<m-sub2 :addition="{ value: 33, unit: '幢' }">电梯加装（排摸）</m-sub2>
<div v-if="curViewType === 'street'" class="sum-card">
<div v-for="item in elevList" :key="item.name">
<m-count class="count" :value="item.value" />
<p>{{ item.name }}</p>
</div>
</div>
<m-sub2>马桶改造</m-sub2>
<Brief :list="toiletSituation" color="#fff" />
<m-progress
:value="80"
:color="['rgba(253,211,116,.15)', '#F7933E']"
:msg="{ value: 80, unit: '%', name: '改造进度', color: '#fff' }"
/>
</m-card>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import store from '@/store'
import icon31 from '@/assets/images/icon31.png'
import icon32 from '@/assets/images/icon32.png'
import icon33 from '@/assets/images/icon33.png'
import icon34 from '@/assets/images/icon34.png'
import icon35 from '@/assets/images/icon35.png'
import icon36 from '@/assets/images/icon36.png'
export default defineComponent({
name: 'BeautyHomeInStation',
components: { Brief },
setup() {
const curViewType = computed(() => store.state.curView.type)
const summary = ref([
{ name: '2020年', value: 26 },
{ name: '2019年', value: 24 },
{ name: '2018年', value: 18 },
])
const situation = ref<BriefProp[]>([
{ name: '小区微更新', value: 26, icon: icon31 },
{ name: '门岗规范化', value: 12, icon: icon32 },
{ name: '充电桩', value: 64, icon: icon33 },
{ name: '雨污混接', value: 18, icon: icon34 },
])
const elevList = ref([
{ name: '振兴', value: 9 },
{ name: '福海', value: 5 },
{ name: '江阴', value: 7 },
{ name: '定兴', value: 1 },
{ name: '新昌', value: 5 },
{ name: '小花园', value: 5 },
{ name: '顺天村', value: 1 },
])
const toiletSituation = ref<BriefProp[]>([
{ name: '已完成改造', value: 26, icon: icon35 },
{ name: '应改造', value: 64, icon: icon36 },
])
const workStationProjects = ref([
{ name: '架空线梳理', value: 16 },
{ name: '店招店牌美化', value: 26 },
{ name: '绿化整治', value: 15 },
{ name: '外立面整治', value: 8 },
{ name: '公共设置', value: 8 },
])
const barData = {
dimensions: [
{ name: 'name', displayName: '类型' },
{ name: 'value', displayName: '' },
],
source: [
{ name: '架空线梳理', value: 16 },
{ name: '店招店牌美化', value: 26 },
{ name: '绿化整治', value: 15 },
{ name: '外立面整治', value: 8 },
{ name: '公共设置', value: 8 },
],
}
const chartOption = {
color: [['#F7943C', '#FF6C2E']],
legend: { show: false },
series: [
{
type: 'bar',
barWidth: '20%',
},
],
xAxis: {
axisLabel: {
formatter: (value: string) => {
const i = Math.ceil(value.length / 2) || 0
return value.slice(0, i) + '\n' + value.slice(i)
},
},
},
}
return {
curViewType,
summary,
situation,
elevList,
toiletSituation,
workStationProjects,
barData,
chartOption,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.summary
width 100%
display flex
justify-content space-around
>div
display flex
justify-content space-around
align-items flex-end
width 20%
.count
font-size .14rem
font-weight bold
color #FF6C2E
p
font-size .09rem
.sum-card
display flex
flex-wrap wrap
&.work-station
margin .05rem 0
>div
width 20%
>div
width 25%
text-align center
position relative
.count
font-size .12rem
font-weight bold
p
color #ccc
font-size .09rem
&:after
content '|'
color $secondary-color
position absolute
top 50%
right 0
transform translateY(-50%)
.detail
display flex
.chart
flex 1
</style>
src/view/right/business-entry.vue
View file @ 64a1cdfa
<template>
<!-- <m-card title="业务入口"> -->
<m-card title="业务入口">
<m-card title="业务入口" :mode="mode">
<div class="content">
<div
v-for="entry in entrys"
......@@ -14,11 +13,17 @@
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import { defineComponent, computed, PropType } from 'vue'
import { useRouter } from 'vue-router'
import store from '@/store'
export default defineComponent({
name: 'BussinessEntry',
props: {
mode: {
type: String as PropType<string>,
default: 'mode2',
},
},
setup() {
const entrys = computed(() => store.state.communityOptions)
const router = useRouter()
......
src/view/right/convenient.vue
View file @ 64a1cdfa
<template>
<m-card mode="3" title="便民设施">
<m-card mode="4" title="便民设施">
<div>
<m-sub>为老服务</m-sub>
<m-sub2>为老服务</m-sub2>
<div class="old">
<div>
<div v-for="item in forOld.slice(0, 4)" :key="item.name">
<m-count class="count" :value="item.value" />
<div v-for="item in forOld" :key="item.name">
<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" />
<m-sub2>生活便利</m-sub2>
<Brief :list="forLive" color="#fff" />
</div>
</m-card>
</template>
......@@ -27,10 +19,10 @@
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import icon23 from '@/assets/images/icon23.png'
import icon24 from '@/assets/images/icon24.png'
import icon25 from '@/assets/images/icon25.png'
import icon26 from '@/assets/images/icon26.png'
import icon27 from '@/assets/images/icon27.png'
import icon28 from '@/assets/images/icon28.png'
import icon29 from '@/assets/images/icon29.png'
import icon30 from '@/assets/images/icon30.png'
export default defineComponent({
name: 'Convenient',
......@@ -48,10 +40,10 @@ export default defineComponent({
{ name: '助浴点', value: 68 },
])
const forLive = ref<BriefProp[]>([
{ name: '菜场', value: 26, icon: icon23 },
{ name: '街面废物箱', value: 64, icon: icon24 },
{ name: '公厕', value: 18, icon: icon25 },
{ name: '电话亭', value: 12, icon: icon26 },
{ name: '菜场', value: 26, icon: icon27 },
{ name: '街面废物箱', value: 64, icon: icon28 },
{ name: '公厕', value: 18, icon: icon29 },
{ name: '电话亭', value: 12, icon: icon30 },
])
return {
forOld,
......@@ -65,26 +57,21 @@ export default defineComponent({
@import '../../components/MyComponent/main.styl'
.old
>div
display flex
align-items center
flex-wrap wrap
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
width 49%
display flex
justify-content space-between
align-items center
padding 0 .1rem
background rgba(70,83,97,.4)
box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
border-radius .03rem
margin-bottom .04rem
.count
font-size .13rem
p
color #ccc
.live
margin-bottom .1rem
</style>
src/view/right/duty-analysis.vue
View file @ 64a1cdfa
<template>
<m-card title="勤务分析" mode="3">
<m-card title="勤务分析" mode="4">
<m-sub2>事件类型</m-sub2>
<div class="nav">
<div>
<Tabs :list="tabs" horizontal @select="curTab = $event" />
</div>
<div>
<span
v-for="option in options"
......@@ -16,9 +14,20 @@
</div>
</div>
<div>
<SubTitle>事件类型</SubTitle>
<div class="duty-type">
<div v-if="showChart && pieData.source.length > 0" class="chart">
<div v-if="showChart" class="duty-type">
<div v-for="item in mock" :key="item.name">
<div class="circle">
<Circle
class="circle-item"
:value="item.rate"
:stroke-width="8"
:color="['#F7933E', 'rgba(253,211,116,.9)']"
:rate="2.4"
/>
</div>
<p>{{ item.name }}</p>
</div>
<!-- <div v-if="showChart && pieData.source.length > 0" class="chart">
<m-pie :dataset="pieData" :option="pieOption" />
</div>
<m-empty v-else />
......@@ -33,35 +42,40 @@
<m-count :value="item.value" />件
</p>
</div>
</div> -->
</div>
</div>
</div>
<div class="bar-chart">
<SubTitle>居委事件数量</SubTitle>
<div v-if="showChart && barOption.series.length > 0" class="chart">
<m-bar :dataset="barData" :option="barOption" />
</div>
<m-empty v-else />
</div>
<div class="rank">
<SubTitle>分类排行</SubTitle>
<m-sub2>分类排行</m-sub2>
<div v-if="rankList.length > 0" class="content">
<m-scroll :length="rankList.length" :limit="4">
<m-scroll :length="rankList.length" :limit="3">
<m-progress
v-for="rank in rankList"
:key="rank.name"
:value="rank.rate"
:msg="rank"
:color="['#FF692D', '#F7973D']"
/>
</m-scroll>
</div>
<m-empty v-else />
</div>
<div class="bar-chart">
<m-sub2>居委事件数量</m-sub2>
<div v-if="showChart && barOption.series.length > 0" class="chart">
<m-bar :dataset="barData" :option="barOption" />
</div>
<m-empty v-else />
</div>
<div class="place">
<SubTitle>多发地点</SubTitle>
<m-sub2>多发地点</m-sub2>
<div v-if="placeList.length > 0" class="content">
<div v-for="item in placeList" :key="item.name">
<Place :data="item" />
<p>{{ item.name }}</p>
<div>
<span>{{ item.type }}</span>
<m-count class="count" :value="item.value" />
</div>
</div>
</div>
<m-empty v-else />
......@@ -71,23 +85,15 @@
<script lang="ts">
import { computed, defineComponent, ref, watch } 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'
import Circle from '../components/circle.vue'
export default defineComponent({
name: 'DutyAnalysis',
components: { Tabs, SubTitle, Place },
components: { Circle },
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.curView.type !== 'street')
const curTab = ref('综合')
const tabs = ref<TabsProp[]>([
{ name: '综合管理', key: '综合' },
{ name: '街面管理', key: '街面' },
{ name: '小区管理', key: '小区' },
])
const options = ref([
{ name: '日', key: 'day' },
{ name: '周', key: 'week' },
......@@ -95,24 +101,24 @@ export default defineComponent({
])
const curOption = ref('month')
watch(
[() => curTab.value, () => store.state.curView.id],
([type, id]) => {
() => store.state.curView.id,
(id) => {
if (!id) return
store.dispatch('getDutyRank', {
gridId: id,
managementType: type,
managementType: '综合',
})
store.dispatch('getDutyEvents', {
gridId: id,
managementType: type,
managementType: '综合',
})
store.dispatch('getDutyPlaces', {
gridId: id,
managementType: type,
managementType: '综合',
})
store.dispatch('getDutyRanking', {
gridId: id,
managementType: type,
managementType: '综合',
})
},
{ immediate: true }
......@@ -126,6 +132,7 @@ export default defineComponent({
rate: +Math.ceil((item.num / total) * 100).toFixed(0),
value: item.num,
unit: '件',
color: '#fff',
}))
})
const placeList = computed(() => {
......@@ -174,23 +181,22 @@ export default defineComponent({
}
})
const barOption = computed(() => ({
color: ['#5BD5FF', '#6EB629', '#FFCE34', '#FF9D27', '#826AFA'],
// color: ['#5BD5FF', '#6EB629', '#FFCE34', '#FF9D27', '#826AFA'],
color: [['#FF692D', 'rgba(253,211,116,.5)']],
legend: {
right: '2%',
left: '10%',
top: '-2%',
itemWidth: fontSize.value * 0.6,
itemHeight: fontSize.value * 0.6,
// right: '2%',
// left: '10%',
// top: '-2%',
// itemWidth: fontSize.value * 0.6,
// itemHeight: fontSize.value * 0.6,
show: false,
},
grid: { top: '25%', right: '2%' },
grid: { top: '5%', right: '2%' },
series: [
...new Array(barData.value.dimensions.length - 1 || 0).keys(),
].map(() => ({
type: 'bar',
barWidth: '10%',
itemStyle: { borderRadius: 8 },
barGap: 0,
stack: '总量',
type: 'pictorialBar',
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
})),
}))
......@@ -226,10 +232,16 @@ export default defineComponent({
],
})
return {
mock: [
{ name: '事件类型1', value: 3110, rate: 62 },
{ name: '事件类型2', value: 3110, rate: 62 },
{ name: '事件类型3', value: 3110, rate: 62 },
{ name: '事件类型4', value: 3110, rate: 62 },
{ name: '事件类型5', value: 3110, rate: 62 },
{ name: '事件类型6', value: 3110, rate: 62 },
],
showChart,
total,
curTab,
tabs,
options,
curOption,
rankList,
......@@ -249,8 +261,7 @@ export default defineComponent({
width 100%
display flex
align-items center
justify-content space-between
margin .03rem 0
justify-content flex-end
>div
width 75%
&:last-child
......@@ -258,57 +269,65 @@ export default defineComponent({
display flex
>span
$center()
width .22rem
height @width
width .4rem
height .12rem
margin-left .04rem
color $primary-border
border .01rem solid @color
cursor pointer
font-size .08rem
background rgba(50,197,255,.2)
&:hover
&.on
color $secondary-color
border-color @color
background rgba(50,197,255,.2)
color #fff
background $secondary-color
.rank
min-height 1rem
margin-top .3rem
.content
height 1rem
height .6rem
overflow hidden
.place
margin-top .1rem
.content
display flex
justify-content space-between
>div
width 32%
height .6rem
background url('@/assets/images/place-bg.png') center / cover no-repeat
padding .05rem
>div
display flex
justify-content space-between
align-items center
margin-top .05rem
span
color #77bff9
border .01rem solid @color
background rgba(119, 191, 249, 0.2)
font-size .08rem
padding 0 .05rem
.count
font-size .14rem
.bar-chart
height 1.6rem
height 1rem
.chart
width 100%
height 90%
.duty-type
width 100%
height .8rem
display flex
.chart
width 25%
height 100%
.legend
height 1.2rem
display flex
flex-wrap wrap
align-items center
flex 1
font-size .09rem
>div
min-width 32%
margin-left .03rem
p
span
width .06rem
height @width
display inline-block
margin-right .04rem
border-radius 50%
&:last-child
font-size .08rem
margin-left .08rem
width 33.3%
text-align center
.circle
width 100%
height 80%
background-image url('@/assets/images/circle-bg.png')
background-repeat no-repeat
background-size 50%
background-position 49% 0%
.circle-item
padding-top 0.04rem
</style>
src/view/right/duty.vue
View file @ 64a1cdfa
<template>
<m-card title="勤务" mode="3">
<Brief class="brief" :list="summary" />
<Tabs class="tabs" :list="tabs" horizontal @select="curTab = $event" />
<m-card title="勤务" mode="4">
<Brief class="brief" :list="summary" color="#F7933E" />
<m-sub2>综合管理</m-sub2>
<div class="details">
<m-scroll
v-if="caseList.length > 0"
:limit="4"
:length="caseList.length"
:step="1.1"
:step="0.88"
mode="2"
>
<div v-for="item in caseList" :key="item.id" class="detail">
......@@ -35,15 +35,11 @@
<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import Brief from '../components/brief.vue'
import Tabs, { TabsProp } from '../components/tabs.vue'
import store from '@/store'
import icon6 from '@/assets/images/icon6.png'
import icon7 from '@/assets/images/icon7.png'
import icon8 from '@/assets/images/icon8.png'
export default defineComponent({
name: 'Duty',
components: { Brief, Tabs },
components: { Brief },
setup() {
const summary = computed(() => {
const {
......@@ -58,35 +54,25 @@ export default defineComponent({
{
name: '综合管理',
value: [comprehensiveEndNum, comprehensiveNum],
icon: icon6,
},
{
name: '街面管理',
value: [streetEndNum, streetNum],
icon: icon7,
},
{
name: '小区管理',
value: [communityEndNum, communityNum],
icon: icon8,
},
]
})
const curTab = ref('综合')
const tabs = ref<TabsProp[]>([
{ name: '综合管理', key: '综合' },
{ name: '街面管理', key: '街面' },
{ name: '小区管理', key: '小区' },
])
const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
const caseList = computed(() => store.state.dutyList)
watch(
[() => curTab.value, () => store.state.curView.id],
([type, id]) => {
() => store.state.curView.id,
(id) => {
if (!id) return
store.dispatch('getDutyList', {
gridId: id,
managementType: type,
pageSize: 100,
})
},
......@@ -94,8 +80,6 @@ export default defineComponent({
)
return {
summary,
curTab,
tabs,
caseList,
steps,
}
......@@ -107,34 +91,33 @@ export default defineComponent({
@import '../../components/MyComponent/main.styl'
.details
height 3.6rem
height 3.52rem
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
padding .05rem
height .84rem
margin-top .04rem
box-sizing border-box
background rgba(70,83,97,.4)
box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
border-radius .03rem
.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
display block
border-bottom .01rem dashed $blue
margin 0 .1rem
.msg
$center()
justify-content space-between
color $blue
font-size .08rem
</style>
src/view/right/key-task.vue
View file @ 64a1cdfa
<template>
<m-card title="重点工作" class="box">
<div v-if="showChart" id="cloud" class=""></div>
<m-card title="重点工作" class="box" :mode="mode">
<div v-if="show" ref="cloudRef" class="cloud" :style="`height:${height}`" />
</m-card>
</template>
<script lang="ts">
import { defineComponent, watch, onMounted, computed } from 'vue'
import {
defineComponent,
watch,
computed,
ref,
onMounted,
PropType,
nextTick,
onBeforeUnmount,
} from 'vue'
import * as echarts from 'echarts'
import store from '@/store'
import 'echarts-wordcloud'
// import echarts3 from './echart3'
// import './echarts-wordcloud'
export default defineComponent({
name: 'KeyTask',
setup() {
const showChart = computed(() => store.state.curTheme === 'manage')
// onMounted(() => init())
const init = () => {
const getHeight = () => {
const height = document.documentElement.clientHeight
document.documentElement.style.fontsize = height * 0.16 + 'px'
// console.log((height * 0.16) / 10 + 'px')
return (height * 0.16) / 10
}
//首次加载是计算
const height = getHeight()
// console.log(height)
//添加监听，窗口发生变化时计算
window.addEventListener('resize', init)
window.addEventListener('orientationchange', init)
const myChart = echarts.init(document.getElementById('cloud'))
const colorList = [
props: {
mode: {
type: String as PropType<string>,
default: '2',
},
height: {
type: String as PropType<string>,
default: '2rem',
},
color: {
type: Array as PropType<string[]>,
default: () => {
return [
'#3a96f5',
'#5faaf7',
'#78bafe',
......@@ -45,7 +43,12 @@ export default defineComponent({
'#ffde00',
'#89fda5',
]
const keywords = [
},
},
data: {
type: Array as PropType<{ name: string; value: number }[]>,
default: () => {
return [
{ name: '明厨亮灶', value: 100 },
{ name: '民宿群租', value: 100 },
{ name: '垃圾分类', value: 100 },
......@@ -57,63 +60,81 @@ export default defineComponent({
{ name: '无证无照整治', value: 100 },
{ name: '楼道堆物', value: 100 },
]
},
},
show: {
type: Boolean as PropType<boolean>,
default: false,
},
bg: {
type: String as PropType<string>,
default: '#000',
},
},
setup(props) {
const cloudRef = ref<HTMLElement | null>(null)
const sizeRate = computed(() => Math.floor((screen.height * 1.6) / 100))
onMounted(() => {
window.addEventListener('resize', init)
window.addEventListener('orientationchange', init)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', init)
window.removeEventListener('orientationchange', init)
})
const init = () => {
if (!cloudRef.value) return
const myChart = echarts.init(cloudRef.value)
const option = {
tooltip: {
show: true,
show: false,
},
backgroundColor: '#000',
backgroundColor: props.bg,
series: [
{
type: 'wordCloud',
sizeRange: [height, height * 2],
sizeRange: [sizeRate.value, sizeRate.value * 2],
rotationRange: [0, 0],
rotationStep: 45,
gridSize: height,
gridSize: sizeRate.value,
shape: 'pentagon',
width: '90%',
height: '95%',
width: '100%',
height: '100%',
textStyle: {
color: function () {
const index = Math.floor(Math.random() * colorList.length)
return colorList[index]
const index = Math.floor(Math.random() * props.color.length)
return props.color[index]
},
fontWeight: 550,
},
data: keywords,
data: props.data,
},
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
window.addEventListener('resize', function () {
myChart.resize()
})
}
watch(
[() => showChart.value],
([type]) => {
() => props.show,
async (type) => {
if (!type) return
setTimeout(() => {
await nextTick()
init()
}, 1900)
},
{ immediate: true }
)
return {
showChart,
cloudRef,
}
},
})
</script>
<style lang="stylus" scoped>
.box
height 2rem
.cloud
width 100%
box-sizing border-box
overflow hidden
#cloud
height 100%
width 100%
</style>
src/view/right/public-manage.vue
View file @ 64a1cdfa
......@@ -8,23 +8,28 @@
</m-card>
<m-card mode="border">
<div class="first-child"><CaseAnalysis /></div>
<div class="second-child"><KeyTask /></div>
<div class="second-child"><KeyTask :show="showKeyTask" /></div>
<div class="third-child"><BussinessEntry /></div>
</m-card>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { defineComponent, computed } from 'vue'
import Complain from './complain.vue'
import Demand from './demand.vue'
import CaseAnalysis from './case-analysis.vue'
import KeyTask from './key-task.vue'
import BussinessEntry from './business-entry.vue'
import store from '@/store'
export default defineComponent({
name: 'PublicMange',
components: { Complain, Demand, CaseAnalysis, KeyTask, BussinessEntry },
setup() {
const showKeyTask = computed(() => store.state.curTheme === 'manage')
return { showKeyTask }
},
})
</script>
......
src/view/right/public-work.vue
View file @ 64a1cdfa
......@@ -2,39 +2,63 @@
<div class="public-work">
<m-card mode="border2">
<div class="convnient"><Convenient /></div>
<div class="beauty"><BeautyHome /></div>
<div class="beauty"><BeautyHomeInStation /></div>
</m-card>
<m-card mode="border2">
<div class="duty"><Duty /></div>
<div class="neighbor"><BussinessEntry /></div>
<div class="task">
<KeyTask
mode="4"
:show="showTask"
:color="taskColor"
height="1rem"
:bg="null"
/>
</div>
</m-card>
<m-card mode="border2">
<div class="analysis"><DutyAnalysis /></div>
<!-- <div class="task"><KeyTask /></div> -->
<div class="entry"><BussinessEntry mode="4" /></div>
</m-card>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { computed, defineComponent } from 'vue'
import Convenient from './convenient.vue'
import BeautyHome from './beauty-home.vue'
import BeautyHomeInStation from './beauty-home-in-station.vue'
import Duty from './duty.vue'
// import NeighborEntry from './neighbor-entry.vue'
import BussinessEntry from './business-entry.vue'
import DutyAnalysis from './duty-analysis.vue'
// import KeyTask from './key-task.vue'
import KeyTask from './key-task.vue'
import BussinessEntry from './business-entry.vue'
import store from '@/store'
export default defineComponent({
name: 'PublicWork',
components: {
Convenient,
BeautyHome,
// NeighborEntry,
BussinessEntry,
BeautyHomeInStation,
Duty,
DutyAnalysis,
// KeyTask,
KeyTask,
BussinessEntry,
},
setup() {
const showTask = computed(() => store.state.curView.type !== 'street')
return {
showTask,
taskColor: [
'#fff',
'#fff',
'#fff',
'#fff',
'#fff',
'#fff',
'#fff',
'#fff',
'#fff',
],
}
},
})
</script>
......@@ -42,26 +66,22 @@ export default defineComponent({
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl';
.public-work {
$full();
display: flex;
justify-content: space-between;
>div {
height: 100%;
width: 33%;
}
}
.convenient, .beauty, .duty, .analysis {
flex: 1;
}
.public-work
$full()
display flex
justify-content space-between
.task {
height: 1rem;
}
>div
height 100%
width 33%
.neighbor {
height: 0.8rem;
}
// .convenient,
// .beauty,
// .duty,
// .analysis
// flex: 1
.entry
.task
flex 1
// height 1.28rem
</style>
vetur.config.js
View file @ 64a1cdfa
......@@ -96,6 +96,10 @@ module.exports = {
name: 'm-sub',
path: './src/components/MyComponent/MySub/my-sub.vue',
},
{
name: 'm-sub2',
path: './src/components/MyComponent/MySub/my-sub2.vue',
},
{
name: 'm-drawer',
path: './src/components/MyComponent/MyDrawer/my-drawer.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