134 lines
2.7 KiB
Vue
134 lines
2.7 KiB
Vue
<template>
|
|
<section class="AppCentralTaskDV">
|
|
<!-- <ai-dv-background :src="bgImage"/>-->
|
|
<div class="coreTask">
|
|
<div class="leftBox">
|
|
<div class="boxTitle">{{ coreTaskData.titleText }}</div>
|
|
<dv-scroll-board v-if="refresh" :config="coreTaskData"/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {scrollBoard} from '@jiaminghi/data-view'
|
|
import bgImage from '../assets/centralTask/bg.png'
|
|
import Vue from "vue";
|
|
|
|
Vue.use(scrollBoard)
|
|
export default {
|
|
name: "AppCentralTaskDV",
|
|
label: "数据大屏-重点工作",
|
|
props: {
|
|
nav: {default: () => ({})}
|
|
},
|
|
inject: {
|
|
dv: {default: ""}
|
|
},
|
|
computed: {
|
|
coreTaskData() {
|
|
return {
|
|
headerHeight: 52,
|
|
header: ['基层组织建设', "社区治理", "便民服务效能", "城市管理"],
|
|
headerBGC: 'rgba(0, 113, 255, 0.5)',
|
|
oddRowBGC: "rgba(5, 65, 139, 0.5)",
|
|
evenRowBGC: "rgba(5, 65, 139, 0.5)",
|
|
waitTime: 6000,
|
|
align: ["center", "start", "center", "center"],
|
|
rowNum: 5,
|
|
...this.nav.data,
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {bgImage, refresh: true}
|
|
},
|
|
watch: {
|
|
nav: {
|
|
deep: true,
|
|
handler() {
|
|
this.refresh = false
|
|
this.$nextTick(() => this.refresh = true)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AppCentralTaskDV {
|
|
height: 100%;
|
|
padding: 0 0 60px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.coreTask {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 53px;
|
|
margin-top: 56px;
|
|
|
|
.leftBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("../assets/centralTask/box.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0 40px 42px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.boxTitle {
|
|
height: 68px;
|
|
width: 534px;
|
|
background-image: url("../assets/centralTask/titleBox.png");
|
|
text-align: center;
|
|
font-size: 22px;
|
|
font-weight: 400;
|
|
color: #71F8FF;
|
|
transform: translateY(-32px);
|
|
line-height: 68px;
|
|
}
|
|
|
|
::v-deep .dv-scroll-board {
|
|
width: 100%;
|
|
flex: 1;
|
|
min-height: 0;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
|
|
.header {
|
|
color: #9FDBFB;
|
|
font-size: 20px;
|
|
|
|
.header-item {
|
|
text-align: center;
|
|
border: 1px solid #054596;
|
|
}
|
|
}
|
|
|
|
.row-item {
|
|
color: #68F0FC;
|
|
font-size: 18px;
|
|
overflow: hidden;
|
|
|
|
.ceil {
|
|
border: 1px solid #054596;
|
|
border-top: none;
|
|
position: relative;
|
|
line-height: 30px;
|
|
white-space: normal;
|
|
padding: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|