党建主题适配
@@ -5,8 +5,9 @@
|
|||||||
style="height: 100%; width: 100%;"
|
style="height: 100%; width: 100%;"
|
||||||
v-if="data.type !== 'display'"
|
v-if="data.type !== 'display'"
|
||||||
:title="data.title"
|
:title="data.title"
|
||||||
|
:theme="theme"
|
||||||
:border="data.border || ''">
|
:border="data.border || ''">
|
||||||
<AiDvSummary v-if="data.type === 'summary'" :summaryTitle="data.summaryTitle" :key="`summary${index}`" :type="data.display" :data="values"/>
|
<AiDvSummary v-if="data.type === 'summary'" :theme="theme" :summaryTitle="data.summaryTitle" :key="`summary${index}`" :type="data.display" :data="values"/>
|
||||||
<AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="values"/>
|
<AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="values"/>
|
||||||
<dv-scroll-board
|
<dv-scroll-board
|
||||||
v-if="data.type === 'table'"
|
v-if="data.type === 'table'"
|
||||||
@@ -34,11 +35,13 @@
|
|||||||
v-else-if="data.type === 'AiDvTable'"
|
v-else-if="data.type === 'AiDvTable'"
|
||||||
:heigth="'100%'"
|
:heigth="'100%'"
|
||||||
:stripe="data.stripe"
|
:stripe="data.stripe"
|
||||||
|
:theme="theme"
|
||||||
:isShowIndex="data.isShowIndex"
|
:isShowIndex="data.isShowIndex"
|
||||||
:data="values">
|
:data="values">
|
||||||
</AiDvTable>
|
</AiDvTable>
|
||||||
<AiRanking
|
<AiRanking
|
||||||
v-else-if="data.type === 'AiRanking'"
|
v-else-if="data.type === 'AiRanking'"
|
||||||
|
:theme="theme"
|
||||||
:heigth="'100%'"
|
:heigth="'100%'"
|
||||||
:data="values">
|
:data="values">
|
||||||
</AiRanking>
|
</AiRanking>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="AiDvPanel">
|
<section class="AiDvPanel">
|
||||||
<component :is="border" :title="title" v-if="border">
|
<component :is="border" :title="title" v-if="border" :theme="theme">
|
||||||
<template v-if="$slots.title" #title>
|
<template v-if="$slots.title" #title>
|
||||||
<slot name="title"/>
|
<slot name="title"/>
|
||||||
</template>
|
</template>
|
||||||
@@ -24,7 +24,11 @@ export default {
|
|||||||
components: { Border0, Border1, Border2, Border3, Border4, Border5, border6 },
|
components: { Border0, Border1, Border2, Border3, Border4, Border5, border6 },
|
||||||
props: {
|
props: {
|
||||||
title: {default: "请传入标题"},
|
title: {default: "请传入标题"},
|
||||||
border: {default: "border0"}
|
border: {default: "border0"},
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
default: '0'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
},
|
},
|
||||||
|
|||||||
BIN
components/layout/AiDvPanel/asset/ic-badge.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
components/layout/AiDvPanel/asset/title-6-dj.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
@@ -1,6 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="border6">
|
<section class="border6" :class="'border6-' + theme">
|
||||||
|
<div class="border6-title">
|
||||||
|
<img src="../asset/ic-badge.png" v-if="theme === '1'" />
|
||||||
<h2>{{ title }}</h2>
|
<h2>{{ title }}</h2>
|
||||||
|
</div>
|
||||||
<div class="slot">
|
<div class="slot">
|
||||||
<slot/>
|
<slot/>
|
||||||
</div>
|
</div>
|
||||||
@@ -10,9 +13,8 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'border6',
|
name: 'border6',
|
||||||
props: {
|
|
||||||
title: String
|
props: ['title', 'theme']
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -20,20 +22,33 @@ export default {
|
|||||||
.border6 {
|
.border6 {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
h2 {
|
.border6-title {
|
||||||
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 26px;
|
// line-height: 26px;
|
||||||
padding: 4px 0 0 22px;
|
padding: 4px 0 0 22px;
|
||||||
color: #fff;
|
box-sizing: border-box;
|
||||||
font-size: 22px;
|
|
||||||
font-weight: normal;
|
|
||||||
font-family: PingFangSC-Medium, PingFang SC;
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
background-image: url(../asset/title6.png);
|
background-image: url(../asset/title6.png);
|
||||||
background-position: bottom;
|
background-position: bottom;
|
||||||
background-size: 100% 7px;
|
background-size: 100% 7px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
line-height: 1;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: normal;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 16px;
|
top: 16px;
|
||||||
@@ -47,6 +62,15 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.border6-1 .border6-title {
|
||||||
|
background-image: url(../asset/title-6-dj.png);
|
||||||
|
background-position: bottom;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
background: #FFA086;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.slot {
|
.slot {
|
||||||
height: calc(100% - 40px);
|
height: calc(100% - 40px);
|
||||||
padding-top: 19px;
|
padding-top: 19px;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="AiSummary">
|
<div class="AiSummary">
|
||||||
<component :is="type" :data="data" :keys="keys" :value="value" :summaryTitle="summaryTitle"></component>
|
<component :is="type" :theme="theme" :data="data" :keys="keys" :value="value" :summaryTitle="summaryTitle"></component>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -65,6 +65,11 @@
|
|||||||
value: {
|
value: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'value'
|
default: 'value'
|
||||||
|
},
|
||||||
|
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
default: '0'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="summary12">
|
<div class="summary12" :class="'summary12-' + theme">
|
||||||
<div class="summary12-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
|
<div class="summary12-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
|
||||||
<h2>{{ item[keys] }}</h2>
|
<h2>{{ item[keys] }}</h2>
|
||||||
<p>{{ item[value] }}</p>
|
<p>{{ item[value] }}</p>
|
||||||
@@ -25,6 +25,11 @@
|
|||||||
value: {
|
value: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'value'
|
default: 'value'
|
||||||
|
},
|
||||||
|
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
default: '0'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -72,5 +77,11 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.summary12-1 .summary12-item {
|
||||||
|
p {
|
||||||
|
color: #FAD88E;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="summary13">
|
<div class="summary13" :class="'summary13-' + theme">
|
||||||
<div class="summary13-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
|
<div class="summary13-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
|
||||||
<h2>{{ item[keys] }}:</h2>
|
<h2>{{ item[keys] }}:</h2>
|
||||||
<p>{{ item[value] }}</p>
|
<p>{{ item[value] }}</p>
|
||||||
@@ -25,6 +25,11 @@
|
|||||||
value: {
|
value: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'value'
|
default: 'value'
|
||||||
|
},
|
||||||
|
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
default: '0'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -98,5 +103,9 @@
|
|||||||
content: ' ';
|
content: ' ';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.summary13-1 {
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="aiDvTable">
|
<div class="aiDvTable" :class="'aiDvTable-' + theme">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<span
|
<span
|
||||||
v-for="(item, index) in header"
|
v-for="(item, index) in header"
|
||||||
@@ -49,6 +49,11 @@
|
|||||||
stripe: {
|
stripe: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '1'
|
default: '1'
|
||||||
|
},
|
||||||
|
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
default: '0'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -114,6 +119,26 @@
|
|||||||
.aiDvTable {
|
.aiDvTable {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
min-height: 20px;
|
||||||
|
background-clip: content-box;
|
||||||
|
box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -196,5 +221,39 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.aiDvTable-1 {
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
min-height: 20px;
|
||||||
|
background-clip: content-box;
|
||||||
|
box-shadow: 0 0 0 5px rgba(250, 181, 108, 0.5) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
box-shadow: 1px 1px 5px rgba(50, 181, 108, 0.5) inset;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
background: #6e2d2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
div {
|
||||||
|
i {
|
||||||
|
color: #FFA086;
|
||||||
|
background: url(./asset/rankbg-dj.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
BIN
components/layout/AiDvTable/asset/rankbg-dj.png
Normal file
|
After Width: | Height: | Size: 285 B |
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="AiRanking">
|
<div class="AiRanking" :class="'AiRanking-' + theme">
|
||||||
<div class="AiRanking-item" v-for="(item, index) in list" :key="index" :class="'AiRanking-item' + (index + 1)">
|
<div class="AiRanking-item" v-for="(item, index) in list" :key="index" :class="'AiRanking-item' + (index + 1)">
|
||||||
<i>{{ index + 1 }}</i>
|
<i>{{ index + 1 }}</i>
|
||||||
<h2>{{ item.name }}</h2>
|
<h2>{{ item.name }}</h2>
|
||||||
@@ -24,6 +24,11 @@
|
|||||||
data: {
|
data: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
|
},
|
||||||
|
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
default: '0'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -162,5 +167,46 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.AiRanking-1 {
|
||||||
|
.AiRanking-item {
|
||||||
|
background: url(./asset/ranking4-dj.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
&.AiRanking-item1 {
|
||||||
|
background: url(./asset/ranking1-dj.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.AiRanking-item2 {
|
||||||
|
background: url(./asset/ranking2-dj.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.AiRanking-item3 {
|
||||||
|
background: url(./asset/ranking3-dj.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.AiRanking-item__rate {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
position: relative;
|
||||||
|
width: calc(100% - 6px);
|
||||||
|
height: 6px;
|
||||||
|
background: linear-gradient(90deg, #ffbb45ff 0%, #ff3e18ff 98%);
|
||||||
|
|
||||||
|
i {
|
||||||
|
border: 1px solid #AA9E93;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
background: #FAB56C;
|
||||||
|
box-shadow: 0 0 10px 0 #fab56c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
BIN
components/layout/AiRanking/asset/ranking1-dj.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
components/layout/AiRanking/asset/ranking2-dj.png
Normal file
|
After Width: | Height: | Size: 3.6 KiB |
BIN
components/layout/AiRanking/asset/ranking3-dj.png
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
components/layout/AiRanking/asset/ranking4-dj.png
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
@@ -63,13 +63,8 @@
|
|||||||
style="height: 100%"
|
style="height: 100%"
|
||||||
:title="$route.query.name"
|
:title="$route.query.name"
|
||||||
:theme="dashboard.theme"
|
:theme="dashboard.theme"
|
||||||
:background="dashboard.theme == 1 ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj_bg.png' : (dashboard.backgroundImage[0].url || '')">
|
:background="dashboard.theme == 1 ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj_bg.png' : (dashboard.backgroundImage.length ? dashboard.backgroundImage[0].url : '')">
|
||||||
<div style="width: 100%; height: 100%">
|
<div style="width: 100%; height: 100%">
|
||||||
<AiDvBackground
|
|
||||||
:theme="dashboard.theme"
|
|
||||||
v-if="dashboard.backgroundImage.length || dashboard.theme === '1'"
|
|
||||||
:src="dashboard.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : dashboard.backgroundImage[0].url">
|
|
||||||
</AiDvBackground>
|
|
||||||
<vue-draggable-resizable
|
<vue-draggable-resizable
|
||||||
:w="item.width"
|
:w="item.width"
|
||||||
:h="item.height"
|
:h="item.height"
|
||||||
|
|||||||
@@ -54,23 +54,5 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.preview {
|
.preview {
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 5px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-corner {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
min-height: 20px;
|
|
||||||
background-clip: content-box;
|
|
||||||
box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ export default {
|
|||||||
return ['#00F9FF', '#1890FF', '#B13BFF', '#FC3BFF', '#95FF44', '#ea7ccc']
|
return ['#00F9FF', '#1890FF', '#B13BFF', '#FC3BFF', '#95FF44', '#ea7ccc']
|
||||||
}
|
}
|
||||||
|
|
||||||
return ['#D4380D', '#CF1322', '#D55800', '#FA8C16', '#FFC53D', '#FFA940', '#FFC53D', '#780000']
|
return ['#00F9FF', '#1890FF', '#B13BFF', '#FC3BFF', '#95FF44', '#ea7ccc']
|
||||||
},
|
},
|
||||||
|
|
||||||
chartOptions() {
|
chartOptions() {
|
||||||
@@ -200,8 +200,6 @@ export default {
|
|||||||
this.initChart()
|
this.initChart()
|
||||||
this.getChartData()
|
this.getChartData()
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log(this.data)
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
this.timer && clearInterval(this.timer)
|
this.timer && clearInterval(this.timer)
|
||||||
|
|||||||