Merge branch 'build' of http://git.sinoecare.com/sinoecare/digital_village_v2/dvcp_v2_webapp into build
This commit is contained in:
liuye
@@ -37,12 +37,14 @@
|
||||
:stripe="data.stripe"
|
||||
:theme="theme"
|
||||
:isShowIndex="data.isShowIndex"
|
||||
:config="dvTableConfig"
|
||||
:data="values">
|
||||
</AiDvTable>
|
||||
<AiRanking
|
||||
v-else-if="data.type === 'AiRanking'"
|
||||
:theme="theme"
|
||||
:heigth="'100%'"
|
||||
:subType="data.subType"
|
||||
:data="values">
|
||||
</AiRanking>
|
||||
<ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1" :is3dAround="data.is3dAround === '1'"
|
||||
@@ -86,7 +88,8 @@ export default {
|
||||
chartList,
|
||||
map: null,
|
||||
lib: null,
|
||||
timer: null
|
||||
timer: null,
|
||||
dvTableConfig: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -102,12 +105,24 @@ export default {
|
||||
currentType: v => v.data.type
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
values: {
|
||||
immediate: true,
|
||||
deep: true, handler() {
|
||||
if (this.currentType == 'map') {
|
||||
// this.renderMap()
|
||||
}
|
||||
|
||||
if (this.currentType === 'AiDvTable') {
|
||||
this.dvTableConfig = this.data[this.data.dataType].map((v, i) => {
|
||||
return {
|
||||
color: this.data.config[i] ? (this.data.config[i].color || '') : '',
|
||||
width: this.data.config[i] ? (this.data.config[i].width || '') : '',
|
||||
align: this.data.config[i] ? (this.data.config[i].align || '') : ''
|
||||
}
|
||||
})
|
||||
|
||||
this.data.config = this.dvTableConfig
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
}"
|
||||
v-for="(item, index) in componentList"
|
||||
:key="index">
|
||||
<ai-dv-render :instance="instance" :data="item" :index="index" :theme="dashboard.theme"/>
|
||||
<ai-dv-render :instance="instance" :key="index" :data="item" :index="index" :theme="dashboard.theme"/>
|
||||
</div>
|
||||
</div>
|
||||
<components v-else :is="component" :dict="dict" :instance="instance" :nav="meta"/>
|
||||
@@ -85,7 +85,7 @@ export default {
|
||||
this.dashboard = JSON.parse(res.data.config).dashboard
|
||||
|
||||
this.componentList.forEach((item, index) => {
|
||||
if (item.dataType !== 'staticData' && ((item.type.indexOf('Chart') > -1) || ['display', 'table', 'map', 'summary'].includes(item.type))) {
|
||||
if (item.dataType !== 'staticData' && ((item.type.indexOf('Chart') > -1) || ['display', 'table', 'map', 'summary', 'AiRanking', 'AiDvTable'].includes(item.type))) {
|
||||
this.getSourceData(item, index)
|
||||
}
|
||||
if (item.type === 'monitor' && item.monitorType === 'cmcc') {
|
||||
|
||||
@@ -12,20 +12,14 @@ export default {
|
||||
type: 'bar', label: {show: true, position: 'insideBottom', color: '#fff'},
|
||||
barWidth: 24,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(123, 165, 255, .2)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
|
||||
colorStops: [{offset: 0, color: '#42BBFF'}, {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}]
|
||||
}
|
||||
},
|
||||
// backgroundStyle: {
|
||||
// color: 'rgba(123, 165, 255, .2)'
|
||||
// },
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
|
||||
colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}]
|
||||
// colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,5 +19,4 @@ export default {
|
||||
axisPointer: {
|
||||
type: 'none', show: true, triggerTooltip: false,
|
||||
},
|
||||
daemon: {type: 'bar', barWidth: 12, stack: 'stack'}
|
||||
}
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
:style="{
|
||||
width: item.width + 'px',
|
||||
textAlign: item.align,
|
||||
flex: item.width ? 'inherit' : 1
|
||||
width: config[index].width ? config[index].width + 'px' : '',
|
||||
textAlign: config[index].align,
|
||||
flex: config[index].width ? 'inherit' : 1
|
||||
}">
|
||||
{{ item.v }}
|
||||
</span>
|
||||
@@ -18,10 +18,10 @@
|
||||
v-for="(column, i) in item"
|
||||
:key="i"
|
||||
:style="{
|
||||
color: column.color,
|
||||
textAlign: column.align,
|
||||
width: column.width + 'px',
|
||||
flex: column.width ? 'inherit' : 1
|
||||
color: config[i].color,
|
||||
textAlign: config[i].align,
|
||||
width: config[i].width ? config[i].width + 'px' : '',
|
||||
flex: config[i].width ? 'inherit' : 1
|
||||
}">
|
||||
<i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
|
||||
<span :title="column.v">{{ column.v }}</span>
|
||||
@@ -54,6 +54,11 @@
|
||||
theme: {
|
||||
type: String,
|
||||
default: '0'
|
||||
},
|
||||
|
||||
config: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
|
||||
@@ -80,6 +85,7 @@
|
||||
|
||||
methods: {
|
||||
init (value) {
|
||||
console.log(this.config)
|
||||
if (!value.length) {
|
||||
this.header = []
|
||||
this.body = []
|
||||
@@ -88,7 +94,6 @@
|
||||
}
|
||||
|
||||
const headerKey = Object.keys(value[0])[0]
|
||||
console.log(Object.keys(value[0]))
|
||||
const bodyKey = Object.keys(value[0]).filter(v => {
|
||||
return v !== headerKey && ['color', 'width', 'align'].indexOf(v) === -1
|
||||
})
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
<section class="AiDvWrapper" :class="'AiDvWrapper' + theme">
|
||||
<dv-full-screen-container>
|
||||
<div class="viewPanel column" flex :style="{backgroundImage:`url('${background}')`}">
|
||||
<component :is="headerComponent" v-bind="{...$props,...$data}" @fullscreen="handleFullScreen" @setting="e=>dialog=e" @change="e=>$emit('change',e)"/>
|
||||
<component :is="headerComponent" v-bind="{...$props,...$data}" v-model="active" @fullscreen="handleFullScreen" @setting="e=>dialog=e"
|
||||
@change="e=>$emit('change',e)"/>
|
||||
<div class="fill">
|
||||
<slot/>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div flex class="content">
|
||||
<b class="headerTitle" v-text="title"/>
|
||||
<el-tabs class="fill" v-model="current" @tab-click="$emit('change', current)">
|
||||
<el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" :name="tab.name"/>
|
||||
<el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" :name="tab.id"/>
|
||||
</el-tabs>
|
||||
<div class="rightPane" flex>
|
||||
<div class="item" v-text="currentTime"/>
|
||||
@@ -17,6 +17,10 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "primary",
|
||||
model: {
|
||||
prop: "active",
|
||||
event: "change"
|
||||
},
|
||||
props: {
|
||||
title: String,
|
||||
views: {default: () => []},
|
||||
@@ -53,6 +57,7 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.current = this.$copy(this.active)
|
||||
// this.getWeather()
|
||||
}
|
||||
}
|
||||
@@ -157,11 +162,11 @@ export default {
|
||||
background-position: left center;
|
||||
|
||||
&.setting {
|
||||
background-image: url("../assets/settingIcon.png")!important;
|
||||
background-image: url("../assets/settingIcon.png") !important;
|
||||
}
|
||||
|
||||
&.fullscreen {
|
||||
background-image: url("../assets/fullscreenIcon.png")!important;
|
||||
background-image: url("../assets/fullscreenIcon.png") !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +1,22 @@
|
||||
<template>
|
||||
<div class="AiRanking" :class="'AiRanking-' + theme">
|
||||
<div class="AiRanking-item" v-for="(item, index) in list" :key="index" :class="'AiRanking-item' + (index + 1)">
|
||||
<i>{{ index + 1 }}</i>
|
||||
<h2>{{ item.name }}</h2>
|
||||
<span>{{ item.value }}</span>
|
||||
<div class="AiRanking-item__rate--wrapper">
|
||||
<div class="AiRanking-item__rate" :style="{width: item.rate + '%'}">
|
||||
<div class="bar">
|
||||
<span></span>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="subType" :theme="theme" :data="data"></component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Ranking1 from './components/Ranking1'
|
||||
import Ranking2 from './components/Ranking2'
|
||||
import Ranking3 from './components/Ranking3'
|
||||
export default {
|
||||
name: 'AiRanking',
|
||||
|
||||
components: {
|
||||
Ranking1,
|
||||
Ranking2,
|
||||
Ranking3
|
||||
},
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
@@ -29,43 +26,11 @@
|
||||
theme: {
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
data: {
|
||||
handler (v) {
|
||||
this.init(v)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
init (v) {
|
||||
if (!v.length) {
|
||||
this.list = []
|
||||
return false
|
||||
}
|
||||
|
||||
const total = this.sum(v.map(v => v.value))
|
||||
this.list = v.map(e => {
|
||||
return {
|
||||
...e,
|
||||
rate: ((Number(e.value) / total) * 100).toFixed(2)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
sum (arr) {
|
||||
return arr.reduce((x, y) => x + y)
|
||||
subType: {
|
||||
type: String,
|
||||
default: 'Ranking1'
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -74,183 +39,47 @@
|
||||
<style lang="scss" scoped>
|
||||
.AiRanking {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-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;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.AiRanking-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
margin-bottom: 16px;
|
||||
padding-right: 18px;
|
||||
background: url(./asset/ranking4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
&.AiRanking-item1 {
|
||||
background: url(./asset/ranking1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.AiRanking-item2 {
|
||||
background: url(./asset/ranking2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
min-height: 20px;
|
||||
background-clip: content-box;
|
||||
box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
|
||||
}
|
||||
|
||||
&.AiRanking-item3 {
|
||||
background: url(./asset/ranking3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.AiRanking-item__rate--wrapper {
|
||||
flex: 1;
|
||||
background: #6F7171;
|
||||
}
|
||||
|
||||
.AiRanking-item__rate {
|
||||
position: relative;
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
width: calc(100% - 6px);
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, #ffbb45ff 0%, #76f7b8ff 98%);
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
z-index: 12;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #596269;
|
||||
border-radius: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
z-index: 11;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #e1ffee;
|
||||
box-shadow: 0 0 10px 0 #26F0F7;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 90px;
|
||||
margin-left: 20px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 90px;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
|
||||
}
|
||||
|
||||
&.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--wrapper {
|
||||
flex: 1;
|
||||
background: #928D7C;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-corner {
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
::-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 {
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: 1px 1px 5px rgba(50, 181, 108, 0.5) inset;
|
||||
}
|
||||
}
|
||||
|
||||
216
components/layout/AiRanking/components/Ranking1.vue
Normal file
216
components/layout/AiRanking/components/Ranking1.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="Ranking1" :class="'Ranking1-' + theme">
|
||||
<div class="Ranking1-item" v-for="(item, index) in list" :key="index" :class="'Ranking1-item' + (index + 1)">
|
||||
<i>{{ index + 1 }}</i>
|
||||
<h2>{{ item.name }}</h2>
|
||||
<span>{{ item.value }}</span>
|
||||
<div class="Ranking1-item__rate--wrapper">
|
||||
<div class="Ranking1-item__rate" :style="{width: item.rate + '%'}">
|
||||
<div class="bar">
|
||||
<span></span>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Ranking1',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
theme: {
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
data: {
|
||||
handler (v) {
|
||||
this.init(v)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
init (v) {
|
||||
if (!v.length) {
|
||||
this.list = []
|
||||
return false
|
||||
}
|
||||
|
||||
const total = this.sum(v.map(v => v.value))
|
||||
this.list = v.map(e => {
|
||||
return {
|
||||
...e,
|
||||
rate: ((Number(e.value) / total) * 100).toFixed(2)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
sum (arr) {
|
||||
return arr.reduce((x, y) => x + y)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Ranking1 {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.Ranking1-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
margin-bottom: 16px;
|
||||
padding-right: 18px;
|
||||
background: url(../asset/ranking4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&.Ranking1-item1 {
|
||||
background: url(../asset/ranking1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.Ranking1-item2 {
|
||||
background: url(../asset/ranking2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.Ranking1-item3 {
|
||||
background: url(../asset/ranking3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.Ranking1-item__rate--wrapper {
|
||||
flex: 1;
|
||||
background: #6F7171;
|
||||
}
|
||||
|
||||
.Ranking1-item__rate {
|
||||
position: relative;
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
width: calc(100% - 6px);
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, #ffbb45ff 0%, #76f7b8ff 98%);
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
z-index: 12;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #596269;
|
||||
border-radius: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
z-index: 11;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #e1ffee;
|
||||
box-shadow: 0 0 10px 0 #26F0F7;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 90px;
|
||||
margin-left: 20px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 90px;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.Ranking1-1 {
|
||||
.AiRanking-item {
|
||||
background: url(../asset/ranking4-dj.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&.Ranking1-item1 {
|
||||
background: url(../asset/ranking1-dj.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.Ranking1-item2 {
|
||||
background: url(../asset/ranking2-dj.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.Ranking1-item3 {
|
||||
background: url(../asset/ranking3-dj.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.Ranking1-item__rate--wrapper {
|
||||
flex: 1;
|
||||
background: #928D7C;
|
||||
}
|
||||
|
||||
.Ranking1-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>
|
||||
156
components/layout/AiRanking/components/Ranking2.vue
Normal file
156
components/layout/AiRanking/components/Ranking2.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="Ranking2" :class="'Ranking2-' + theme">
|
||||
<div class="Ranking-item" v-for="(item, index) in list" :key="index" :class="'Ranking-item' + (index + 1)">
|
||||
<div class="Ranking-item__top">
|
||||
<div class="left">
|
||||
<i>{{ index + 1 > 9 ? '' : '0' }}{{ index + 1 }}</i>
|
||||
<h2>{{ item.name }}</h2>
|
||||
</div>
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
<div class="Ranking-item__rate--wrapper">
|
||||
<div class="Ranking-item__rate" :style="{width: item.rate + '%'}">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Ranking2',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
theme: {
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
data: {
|
||||
handler (v) {
|
||||
this.init(v)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
init (v) {
|
||||
if (!v.length) {
|
||||
this.list = []
|
||||
return false
|
||||
}
|
||||
|
||||
const total = this.sum(v.map(v => v.value))
|
||||
this.list = v.map(e => {
|
||||
return {
|
||||
...e,
|
||||
rate: ((Number(e.value) / total) * 100).toFixed(2)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
sum (arr) {
|
||||
return arr.reduce((x, y) => x + y)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Ranking2 {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.Ranking-item {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.Ranking-item__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin-right: 11px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.Ranking-item__rate--wrapper {
|
||||
height: 6px;
|
||||
border-radius: 8px;
|
||||
background: rgba(128, 136, 142, 0.4);
|
||||
}
|
||||
|
||||
.Ranking-item__rate {
|
||||
position: relative;
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
height: 6px;
|
||||
border-radius: 8px;
|
||||
background: rgb(24, 254, 254);
|
||||
box-shadow: 0 0 4px 0 rgba(24, 254, 254, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.Ranking2-1 {
|
||||
.Ranking-item {
|
||||
.Ranking-item__rate--wrapper {
|
||||
background: rgba(121, 74, 59, 0.4);
|
||||
}
|
||||
|
||||
.Ranking-item__rate {
|
||||
position: relative;
|
||||
|
||||
.bar {
|
||||
background: rgb(255, 186, 68);
|
||||
box-shadow: 0 0 4px 0 rgba(255, 186, 68, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
151
components/layout/AiRanking/components/Ranking3.vue
Normal file
151
components/layout/AiRanking/components/Ranking3.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="Ranking3" :class="'Ranking3-' + theme">
|
||||
<div class="Ranking-item" v-for="(item, index) in list" :key="index" :class="'Ranking-item' + (index + 1)">
|
||||
<div class="Ranking-item__top">
|
||||
<div class="left">
|
||||
<i>No.{{ index + 1 > 9 ? '' : '0' }}{{ index + 1 }}</i>
|
||||
<h2>{{ item.name }}</h2>
|
||||
</div>
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
<div class="Ranking-item__rate--wrapper">
|
||||
<div class="Ranking-item__rate" :style="{width: item.rate + '%'}">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Ranking3',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
theme: {
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
data: {
|
||||
handler (v) {
|
||||
this.init(v)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
init (v) {
|
||||
if (!v.length) {
|
||||
this.list = []
|
||||
return false
|
||||
}
|
||||
|
||||
const total = this.sum(v.map(v => v.value))
|
||||
this.list = v.map(e => {
|
||||
return {
|
||||
...e,
|
||||
rate: ((Number(e.value) / total) * 100).toFixed(2)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
sum (arr) {
|
||||
return arr.reduce((x, y) => x + y)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Ranking3 {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.Ranking-item {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.Ranking-item__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
|
||||
i {
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin-right: 8px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.Ranking-item__rate--wrapper {
|
||||
height: 10px;
|
||||
background: rgb(26, 26, 26);
|
||||
}
|
||||
|
||||
.Ranking-item__rate {
|
||||
position: relative;
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
background: linear-gradient(270deg, rgb(54, 234, 175) 0%, rgb(75, 179, 210) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.Ranking3-1 {
|
||||
.Ranking-item {
|
||||
.Ranking-item__rate--wrapper {
|
||||
background: rgba(255, 217, 112, 0.16);
|
||||
}
|
||||
|
||||
.Ranking-item__rate {
|
||||
position: relative;
|
||||
|
||||
.bar {
|
||||
background: linear-gradient(90deg, rgb(249, 210, 103) 0%, rgb(241, 150, 70) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -396,6 +396,7 @@ export default {
|
||||
})
|
||||
},
|
||||
clone(e) {
|
||||
console.log(this.deepClone(e))
|
||||
this.componentList.push(this.deepClone(e))
|
||||
},
|
||||
|
||||
@@ -405,31 +406,42 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
deepClone(data, hash = new WeakMap()) {
|
||||
if (typeof data !== 'object' || data === null) {
|
||||
throw new TypeError('传入参数不是对象')
|
||||
}
|
||||
if (hash.has(data)) {
|
||||
return hash.get(data)
|
||||
}
|
||||
let newData = {}
|
||||
const dataKeys = Object.keys(data)
|
||||
dataKeys.forEach(value => {
|
||||
const currentDataValue = data[value]
|
||||
if (typeof currentDataValue !== "object" || currentDataValue === null) {
|
||||
newData[value] = currentDataValue
|
||||
} else if (Array.isArray(currentDataValue)) {
|
||||
newData[value] = [...currentDataValue]
|
||||
} else if (currentDataValue instanceof Set) {
|
||||
newData[value] = new Set([...currentDataValue])
|
||||
} else if (currentDataValue instanceof Map) {
|
||||
newData[value] = new Map([...currentDataValue])
|
||||
deepClone(obj) {
|
||||
if (obj instanceof Object) {
|
||||
let newObj = {}
|
||||
|
||||
if (Array.isArray(obj)) {
|
||||
let arr = []
|
||||
obj.forEach(item => {
|
||||
arr.push(this.deepClone(item))
|
||||
})
|
||||
return arr
|
||||
} else if (typeof obj == 'function') {
|
||||
newObj = obj.bind(newObj)
|
||||
} else {
|
||||
hash.set(data, data)
|
||||
newData[value] = this.deepClone(currentDataValue, hash)
|
||||
for (let key in obj) {
|
||||
let value = obj[key]
|
||||
if (typeof value == 'function') {
|
||||
newObj[key] = value.bind(newObj)
|
||||
} else if (typeof value == 'object') {
|
||||
if (Array.isArray(value)) {
|
||||
newObj[key] = []
|
||||
value.forEach(item => {
|
||||
newObj[key].push(this.deepClone(item))
|
||||
})
|
||||
} else {
|
||||
newObj[key] = this.deepClone(value)
|
||||
}
|
||||
} else {
|
||||
newObj[key] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
return newData
|
||||
|
||||
return newObj
|
||||
} else {
|
||||
return obj
|
||||
}
|
||||
},
|
||||
|
||||
onContextmenu(e, index) {
|
||||
|
||||
@@ -64,6 +64,17 @@
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item" v-if="config.type === 'AiRanking'">
|
||||
<label>样式</label>
|
||||
<div class="layout-config__item--right">
|
||||
<el-select size="mini" v-model="config.subType" placeholder="请选择样式" clearable>
|
||||
<el-option label="样式1" value="Ranking1"></el-option>
|
||||
<el-option label="样式2" value="Ranking2"></el-option>
|
||||
<el-option label="样式3" value="Ranking3"></el-option>
|
||||
<el-option label="样式4" value="Ranking4"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="config.type === 'table' || config.type === 'AiDvTable'">
|
||||
<div class="layout-config__item">
|
||||
<label>显示排名</label>
|
||||
@@ -99,7 +110,7 @@
|
||||
<el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item table-config" v-if="config.type === 'AiDvTable'" v-for="(item, index) in data" :key="index">
|
||||
<div class="layout-config__item table-config" v-if="config.type === 'AiDvTable'" v-for="(item, index) in config.config" :key="index">
|
||||
<label>第{{ index + 1 }}列</label>
|
||||
<div class="layout-config__item--right">
|
||||
<el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
|
||||
@@ -108,7 +119,7 @@
|
||||
<el-option label="居右" value="right"></el-option>
|
||||
</el-select>
|
||||
<el-color-picker v-model="item.color" style="margin: 0 10px;"></el-color-picker>
|
||||
<el-input-number v-model="item.width" :min="1" label="描述文字" controls-position="right"></el-input-number>
|
||||
<el-input-number v-model="item.width" label="描述文字" controls-position="right"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -202,13 +213,8 @@ export default {
|
||||
tableStatus: [
|
||||
{label: '是', value: '1'},
|
||||
{label: '否', value: '0'}
|
||||
],
|
||||
data: []
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.data = this.config[this.config.dataType]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -505,7 +505,23 @@ const components = [
|
||||
isShowIndex: '1',
|
||||
sourceDataId: '',
|
||||
api: '',
|
||||
config: [],
|
||||
config: [
|
||||
{
|
||||
width: '',
|
||||
color: '',
|
||||
align: ''
|
||||
},
|
||||
{
|
||||
width: '',
|
||||
color: '',
|
||||
align: ''
|
||||
},
|
||||
{
|
||||
width: '',
|
||||
color: '',
|
||||
align: ''
|
||||
}
|
||||
],
|
||||
apiData: [],
|
||||
dataType: 'staticData',
|
||||
dynamicData: [],
|
||||
@@ -527,6 +543,7 @@ const components = [
|
||||
dataX: '',
|
||||
dataY: [],
|
||||
rowNum: 7,
|
||||
subType: 'Ranking1',
|
||||
stripe: '1',
|
||||
isShowIndex: '1',
|
||||
sourceDataId: '',
|
||||
|
||||
@@ -3,31 +3,31 @@
|
||||
<template slot="content">
|
||||
<ai-search-bar class="search-bar">
|
||||
<template slot="left">
|
||||
<!-- <ai-select-->
|
||||
<!-- v-model="search.owner"-->
|
||||
<!-- filterable-->
|
||||
<!-- @change="search.current = 1, getList()"-->
|
||||
<!-- placeholder="群主"-->
|
||||
<!-- :selectList="userList">-->
|
||||
<!-- </ai-select>-->
|
||||
<!-- <ai-select-->
|
||||
<!-- v-model="search.owner"-->
|
||||
<!-- filterable-->
|
||||
<!-- @change="search.current = 1, getList()"-->
|
||||
<!-- placeholder="群主"-->
|
||||
<!-- :selectList="userList">-->
|
||||
<!-- </ai-select>-->
|
||||
<ai-select
|
||||
v-model="search.tagId"
|
||||
@change="search.current = 1, getList()"
|
||||
placeholder="选择标签"
|
||||
:selectList="subTags">
|
||||
v-model="search.tagId"
|
||||
@change="search.current = 1, getList()"
|
||||
placeholder="选择标签"
|
||||
:selectList="subTags">
|
||||
</ai-select>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input
|
||||
v-model="search.name"
|
||||
class="search-input"
|
||||
size="small"
|
||||
v-throttle="() => {search.current = 1, getList()}"
|
||||
placeholder="请输入群主/群名称"
|
||||
clearable
|
||||
@change="getList"
|
||||
@clear="search.current = 1, search.name = '', getList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
v-model="search.name"
|
||||
class="search-input"
|
||||
size="small"
|
||||
v-throttle="() => {search.current = 1, getList()}"
|
||||
placeholder="请输入群主/群名称"
|
||||
clearable
|
||||
@change="getList"
|
||||
@clear="search.current = 1, search.name = '', getList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
@@ -45,15 +45,15 @@
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
ref="aitableex"
|
||||
:current.sync="search.current"
|
||||
@selection-change="handleSelectionChange"
|
||||
:size.sync="search.size"
|
||||
v-loading="isLoading"
|
||||
@getList="getList">
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
ref="aitableex"
|
||||
:current.sync="search.current"
|
||||
@selection-change="handleSelectionChange"
|
||||
:size.sync="search.size"
|
||||
v-loading="isLoading"
|
||||
@getList="getList">
|
||||
<el-table-column slot="avatar" label="" width="80" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="avatar" style="text-align: right;justify-content: end;">
|
||||
@@ -89,20 +89,20 @@
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
<ai-dialog
|
||||
:visible.sync="isShow"
|
||||
width="800px"
|
||||
title="批量打标签"
|
||||
@close="chooseTags = []"
|
||||
@onConfirm="onConfirm">
|
||||
:visible.sync="isShow"
|
||||
width="800px"
|
||||
title="批量打标签"
|
||||
@close="chooseTags = []"
|
||||
@onConfirm="onConfirm">
|
||||
<div class="tags">
|
||||
<div class="tag-item" v-for="(item, index) in tags" :key="index">
|
||||
<h2>{{ item.name }}</h2>
|
||||
<div class="tag-item__right">
|
||||
<el-button
|
||||
:type="chooseTags.indexOf(item.id) === -1 ? '' : 'primary'"
|
||||
v-for="(item, index) in item.tagList"
|
||||
@click="choose(item.id)"
|
||||
:key="index">
|
||||
:type="chooseTags.indexOf(item.id) === -1 ? '' : 'primary'"
|
||||
v-for="(item, index) in item.tagList"
|
||||
@click="choose(item.id)"
|
||||
:key="index">
|
||||
{{ item.name }}
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -114,288 +114,285 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
export default {
|
||||
name: 'List',
|
||||
|
||||
props: {
|
||||
instance: Function, dict: Object
|
||||
},
|
||||
props: {
|
||||
instance: Function, dict: Object
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
name: '',
|
||||
// tagId: '',
|
||||
owner: ''
|
||||
},
|
||||
isLoading: false,
|
||||
isShow: false,
|
||||
ids: [],
|
||||
total: 10,
|
||||
chooseTags: [],
|
||||
tags: [],
|
||||
colConfigs: [
|
||||
{type: 'selection'},
|
||||
// {slot: 'avatar'},
|
||||
{slot: 'userinfo'},
|
||||
{prop: 'ownerName', label: '群主', align: 'center'},
|
||||
{slot: 'tags'},
|
||||
{
|
||||
prop: 'personCount', label: '群人数', align: 'center'
|
||||
},
|
||||
{prop: 'increase', label: '当日入群人数', align: 'center'},
|
||||
{prop: 'decrease', label: '当日退群人数', align: 'center'},
|
||||
{
|
||||
prop: 'createTime', label: '创建时间', align: 'left'
|
||||
},
|
||||
{slot: 'options', label: '操作', align: 'center'}],
|
||||
tableData: [],
|
||||
subTags: [],
|
||||
userList: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getTags()
|
||||
this.getSubTags()
|
||||
// this.getWxUserList()
|
||||
this.getList()
|
||||
this.isLoading = true
|
||||
},
|
||||
|
||||
methods: {
|
||||
getWxUserList () {
|
||||
this.instance.post(`/app/wxcp/wxuser/listByDepartId`, {
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.userList = res.data.map(item => {
|
||||
item.dictName = item.name
|
||||
item.dictValue = item.id
|
||||
|
||||
return item
|
||||
})
|
||||
}
|
||||
})
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
name: '',
|
||||
// tagId: '',
|
||||
owner: ''
|
||||
},
|
||||
isLoading: false,
|
||||
isShow: false,
|
||||
ids: [],
|
||||
total: 10,
|
||||
chooseTags: [],
|
||||
tags: [],
|
||||
colConfigs: [
|
||||
{type: 'selection'},
|
||||
// {slot: 'avatar'},
|
||||
{slot: 'userinfo'},
|
||||
{prop: 'ownerName', label: '群主', align: 'center'},
|
||||
{prop: 'departmentName', label: '部门', align: 'center'},
|
||||
{prop: 'areaName', label: '地区', align: 'center'},
|
||||
{slot: 'tags'},
|
||||
{prop: 'personCount', label: '群人数', align: 'center'},
|
||||
{prop: 'increase', label: '当日入群人数', align: 'center'},
|
||||
{prop: 'decrease', label: '当日退群人数', align: 'center'},
|
||||
{prop: 'createTime', label: '创建时间', align: 'left'},
|
||||
{slot: 'options', label: '操作', align: 'center'}],
|
||||
tableData: [],
|
||||
subTags: [],
|
||||
userList: []
|
||||
}
|
||||
},
|
||||
|
||||
update() {
|
||||
this.instance.post(`/app/wxcp/wxgroup/sync`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('更新成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
getSubTags() {
|
||||
this.instance.post(`/app/wxcp/wxgroupchattag/listAllTag`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.subTags = res.data?.map(item => {
|
||||
return {
|
||||
dictName: item.name,
|
||||
dictValue: item.id
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
this.getTags()
|
||||
this.getSubTags()
|
||||
// this.getWxUserList()
|
||||
this.getList()
|
||||
this.isLoading = true
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.instance.post(`/app/wxcp/wxgroup/list`, null, {
|
||||
params: {
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
this.isLoading = false
|
||||
}).catch(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getWxUserList() {
|
||||
this.instance.post(`/app/wxcp/wxuser/listByDepartId`, {}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.userList = res.data.map(item => {
|
||||
item.dictName = item.name
|
||||
item.dictValue = item.id
|
||||
|
||||
choose(id) {
|
||||
const index = this.chooseTags.indexOf(id)
|
||||
if (index === -1) {
|
||||
this.chooseTags.push(id)
|
||||
} else {
|
||||
this.chooseTags.splice(index, 1)
|
||||
return item
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
onConfirm(type = 0) {
|
||||
if (type == 0 && !this.chooseTags.length) {
|
||||
return this.$message.error('请选择标签')
|
||||
update() {
|
||||
this.instance.post(`/app/wxcp/wxgroup/sync`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('更新成功')
|
||||
this.getList()
|
||||
}
|
||||
this.instance.post(`/app/wxcp/wxgroupchattag/markTagForWeb`, {
|
||||
tagIds: this.chooseTags, groupIds: this.ids.map(v => v.id), type,
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
type == 0 ? (this.isShow = false) : false
|
||||
this.$message.success(type == 0 ? "添加成功" : "删除成功")
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
getTags() {
|
||||
this.instance.post(`/app/wxcp/wxgroupchattag/listAll?size=999`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tags = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onAdd() {
|
||||
this.$emit('change', {
|
||||
type: 'add'
|
||||
})
|
||||
},
|
||||
|
||||
handleSelectionChange(e) {
|
||||
this.ids = e
|
||||
},
|
||||
|
||||
removeAll() {
|
||||
this.remove(this.ids.map(v => v.id).join(','))
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/apppetition/delete?ids=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
getSubTags() {
|
||||
this.instance.post(`/app/wxcp/wxgroupchattag/listAllTag`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.subTags = res.data?.map(item => {
|
||||
return {
|
||||
dictName: item.name,
|
||||
dictValue: item.id
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toDetail(id) {
|
||||
this.$emit('change', {
|
||||
type: 'detail', params: {
|
||||
id: id
|
||||
getList() {
|
||||
this.instance.post(`/app/wxcp/wxgroup/list`, null, {
|
||||
params: {
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
this.isLoading = false
|
||||
}).catch(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
choose(id) {
|
||||
const index = this.chooseTags.indexOf(id)
|
||||
if (index === -1) {
|
||||
this.chooseTags.push(id)
|
||||
} else {
|
||||
this.chooseTags.splice(index, 1)
|
||||
}
|
||||
},
|
||||
|
||||
onConfirm(type = 0) {
|
||||
if (type == 0 && !this.chooseTags.length) {
|
||||
return this.$message.error('请选择标签')
|
||||
}
|
||||
this.instance.post(`/app/wxcp/wxgroupchattag/markTagForWeb`, {
|
||||
tagIds: this.chooseTags, groupIds: this.ids.map(v => v.id), type,
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
type == 0 ? (this.isShow = false) : false
|
||||
this.$message.success(type == 0 ? "添加成功" : "删除成功")
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getTags() {
|
||||
this.instance.post(`/app/wxcp/wxgroupchattag/listAll?size=999`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tags = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onAdd() {
|
||||
this.$emit('change', {
|
||||
type: 'add'
|
||||
})
|
||||
},
|
||||
|
||||
handleSelectionChange(e) {
|
||||
this.ids = e
|
||||
},
|
||||
|
||||
removeAll() {
|
||||
this.remove(this.ids.map(v => v.id).join(','))
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/apppetition/delete?ids=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
onAdd() {
|
||||
this.$emit('change', {
|
||||
type: 'add'
|
||||
})
|
||||
}
|
||||
toDetail(id) {
|
||||
this.$emit('change', {
|
||||
type: 'detail', params: {
|
||||
id: id
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onAdd() {
|
||||
this.$emit('change', {
|
||||
type: 'add'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-tags {
|
||||
.el-tag {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid #D0D4DC;
|
||||
background: #F3F4F7;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: #222222;
|
||||
.table-tags {
|
||||
.el-tag {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid #D0D4DC;
|
||||
background: #F3F4F7;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: #222222;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tags {
|
||||
.tag-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 30px;
|
||||
padding-top: 30px;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
margin-right: 8px;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 88px;
|
||||
margin-right: 40px;
|
||||
text-align: right;
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
text-align: right;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #CCCCCC;
|
||||
}
|
||||
}
|
||||
|
||||
.userinfo {
|
||||
.tags {
|
||||
.tag-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
padding-bottom: 30px;
|
||||
padding-top: 30px;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
|
||||
.userinfo-right__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.userinfo-right__bottom {
|
||||
text-align: left;
|
||||
.el-tag {
|
||||
margin-right: 8px;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
font-style: normal;
|
||||
h2 {
|
||||
width: 88px;
|
||||
margin-right: 40px;
|
||||
text-align: right;
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-right: 8px;
|
||||
color: #222222;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #2EA222;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
text-align: right;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #CCCCCC;
|
||||
}
|
||||
}
|
||||
|
||||
.userinfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
|
||||
.userinfo-right__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.userinfo-right__bottom {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
font-style: normal;
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-right: 8px;
|
||||
color: #222222;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #2EA222;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user