党建大屏
This commit is contained in:
@@ -403,7 +403,7 @@
|
|||||||
value: '0'
|
value: '0'
|
||||||
}],
|
}],
|
||||||
images: [],
|
images: [],
|
||||||
summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5', 'summary7', 'summary8', 'summary9', 'summary10'],
|
summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5', 'summary7', 'summary8', 'summary9', 'summary10', 'summary11'],
|
||||||
borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5']
|
borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5']
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -138,6 +138,7 @@
|
|||||||
<ai-map :markers="data[data.dataType]" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId" map-style="amap://styles/e51987628aee5206d4c9ca8c6e98b4f7"/>
|
<ai-map :markers="data[data.dataType]" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId" map-style="amap://styles/e51987628aee5206d4c9ca8c6e98b4f7"/>
|
||||||
<ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"></ai-monitor>
|
<ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"></ai-monitor>
|
||||||
<video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"></video>
|
<video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"></video>
|
||||||
|
<AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="data.type === 'AiDvPartyOrg'"></AiDvPartyOrg>
|
||||||
</ai-dv-panel>
|
</ai-dv-panel>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -543,6 +543,39 @@ const components = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: '党组织',
|
||||||
|
type: 'partyOrg',
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
type: 'partyOrg',
|
||||||
|
label: '党组织',
|
||||||
|
width: 840,
|
||||||
|
height: 800,
|
||||||
|
zIndex: 1,
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
dataX: '',
|
||||||
|
dataY: [],
|
||||||
|
title: '党组织',
|
||||||
|
border: 'border3',
|
||||||
|
sourceDataId: '',
|
||||||
|
dataType: 'staticData',
|
||||||
|
staticData: [
|
||||||
|
{
|
||||||
|
key: '个人服务办理',
|
||||||
|
value: 247
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '同比上月',
|
||||||
|
value: 247
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dynamicData: [],
|
||||||
|
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: '边框',
|
label: '边框',
|
||||||
type: 'panel',
|
type: 'panel',
|
||||||
|
|||||||
32
project/dvui/components/AiDvPartyOrg/AiDvPartyOrg.vue
Normal file
32
project/dvui/components/AiDvPartyOrg/AiDvPartyOrg.vue
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<template>
|
||||||
|
<div class="partyOrg">
|
||||||
|
21313
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { VueOkrTree } from 'vue-okr-tree'
|
||||||
|
import 'vue-okr-tree/dist/vue-okr-tree.css'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AiPartyOrg',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
VueOkrTree
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -16,6 +16,7 @@
|
|||||||
import Summary8 from './components/Summary8'
|
import Summary8 from './components/Summary8'
|
||||||
import Summary9 from './components/Summary9'
|
import Summary9 from './components/Summary9'
|
||||||
import Summary10 from './components/Summary10'
|
import Summary10 from './components/Summary10'
|
||||||
|
import Summary11 from './components/Summary11'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AiDvSummary',
|
name: 'AiDvSummary',
|
||||||
@@ -31,7 +32,8 @@
|
|||||||
Summary7,
|
Summary7,
|
||||||
Summary8,
|
Summary8,
|
||||||
Summary9,
|
Summary9,
|
||||||
Summary10
|
Summary10,
|
||||||
|
Summary11
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
107
project/dvui/layout/AiDvSummary/components/Summary11.vue
Normal file
107
project/dvui/layout/AiDvSummary/components/Summary11.vue
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
<template>
|
||||||
|
<div class="Summary11">
|
||||||
|
<div class="summary5-item" v-for="(item, index) in data" :key="index">
|
||||||
|
<img class="left" src="https://cdn.cunwuyun.cn/dvcp/dv/img/ms.png">
|
||||||
|
<div class="middle">
|
||||||
|
<h2>{{ item[keys] }}</h2>
|
||||||
|
<p>{{ item[value] }}</p>
|
||||||
|
<img src="https://cdn.cunwuyun.cn/dvcp/dv/img/dh.svg">
|
||||||
|
</div>
|
||||||
|
<img class="right" src="https://cdn.cunwuyun.cn/dvcp/dv/img/ms.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Summary11',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
|
||||||
|
keys: {
|
||||||
|
type: String,
|
||||||
|
default: 'key'
|
||||||
|
},
|
||||||
|
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: 'value'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted () {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.Summary11 {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary5-item {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
& > img {
|
||||||
|
width: 50px;
|
||||||
|
height: 102px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
position: relative;
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle {
|
||||||
|
flex: 1;
|
||||||
|
// padding: 0 8px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
height: 27px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #CEE1FF;
|
||||||
|
line-height: 27px;
|
||||||
|
text-shadow: 0px 4px 4px rgba(86, 0, 0, 0.1);
|
||||||
|
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 8px 0 4px;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #CEE1FF;
|
||||||
|
line-height: 35px;
|
||||||
|
text-shadow: 0px 4px 4px rgba(117, 9, 9, 0.1);
|
||||||
|
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -49,14 +49,11 @@
|
|||||||
})
|
})
|
||||||
|
|
||||||
this.arr = v.map(v => {
|
this.arr = v.map(v => {
|
||||||
console.log(v[this.value] / sum)
|
|
||||||
return {
|
return {
|
||||||
...v,
|
...v,
|
||||||
ratio: Number((v[this.value] / sum).toFixed(2)) * 100
|
ratio: Number((v[this.value] / sum).toFixed(2)) * 100
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log(this.arr)
|
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true
|
||||||
|
|||||||
Reference in New Issue
Block a user