kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

给echart提供个性化的地方

Browse Source
This commit is contained in:
aixianling
2024-03-25 15:51:15 +08:00
parent e2c0e919d3
commit 4c220621b5
3 changed files with 87 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/AiDvRender.vue
View File

@@ -25,7 +25,7 @@
:key="`chart-${index}`" :key="`chart-${index}`"
:theme="theme" :theme="theme"
:data="values" :data="values"
:ops="$echartTpls[data.config]"/> :ops="data.echartOps"/>
<AiDvTable <AiDvTable
v-else-if="currentType === 'AiDvTable'" v-else-if="currentType === 'AiDvTable'"
:heigth="'100%'" :heigth="'100%'"
@@ -256,7 +256,7 @@ export default {
font-weight: 600; font-weight: 600;
color: #FFFFFF; color: #FFFFFF;
line-height: 21px; line-height: 21px;
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.5); text-shadow: 0 2px 4px rgba(117, 9, 9, 0.5);
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%); background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;

183
packages/bigscreen/designer/components/componentConfig.vue
View File

@@ -25,114 +25,86 @@
<div class="layout-right__content--wrapper"> <div class="layout-right__content--wrapper">
<div class="layout-config__group"> <div class="layout-config__group">
<h2>组件设置</h2> <h2>组件设置</h2>
<div class="layout-config__item layout-config__item--input"> <config-item label="标题">
<label>标题</label> <el-input v-model="config.summaryTitle" size="mini" v-if="config.display === 'summary2'"/>
<div class="layout-config__item--right"> <el-input v-else v-model="config.title" size="mini"/>
<el-input v-model="config.title" size="mini"></el-input> </config-item>
</div> <config-item label="边框" v-if="config.type !== 'display'">
</div> <el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable>
<div class="layout-config__item layout-config__item--input" v-if="config.display === 'summary2'"> <el-option
<label>标题</label> v-for="(item, index) in borderList"
<div class="layout-config__item--right"> :key="index"
<el-input v-model="config.summaryTitle" size="mini"></el-input> :label="item"
</div> :value="item">
</div> </el-option>
<div class="layout-config__item" v-if="config.type !== 'display'"> </el-select>
<label>边框</label> </config-item>
<div class="layout-config__item--right"> <config-item label="echart选项" v-if="/Chart/.test(config.type)" top-label>
<el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable> <json-editor v-model="config.echartOps"/>
<el-option </config-item>
v-for="(item, index) in borderList" <config-item label="视频地址" v-if="config.type === 'video'">
:key="index" <el-input v-model="config.src" size="mini"/>
:label="item" </config-item>
:value="item">
</el-option>
</el-select>
</div>
</div>
<div class="layout-config__item layout-config__item--input" v-if="config.type === 'video'">
<label>视频地址</label>
<div class="layout-config__item--right">
<el-input v-model="config.src" size="mini"></el-input>
</div>
</div>
<config-item label="图片URL" v-if="config.type=='img'"> <config-item label="图片URL" v-if="config.type=='img'">
<el-input v-model="config.src" size="mini" clearable placeholder="请输入图片URL"/> <el-input v-model="config.src" size="mini" clearable placeholder="请输入图片URL"/>
</config-item> </config-item>
<div class="layout-config__item" v-if="config.type === 'monitor'"> <config-item label="视频类型" v-if="config.type === 'monitor'">
<label>视频类型</label> <ai-select size="mini" v-model="config.monitorType" :select-list="monitorTypes"/>
<div class="layout-config__item--right"> </config-item>
<ai-select size="mini" v-model="config.monitorType" :select-list="monitorTypes"/> <config-item label="样式" v-if="config.type === 'AiRanking'">
</div> <el-select size="mini" v-model="config.subType" placeholder="请选择样式" clearable>
</div> <el-option label="样式1" value="Ranking1"></el-option>
<div class="layout-config__item" v-if="config.type === 'AiRanking'"> <el-option label="样式2" value="Ranking2"></el-option>
<label>样式</label> <el-option label="样式3" value="Ranking3"></el-option>
<div class="layout-config__item--right"> </el-select>
<el-select size="mini" v-model="config.subType" placeholder="请选择样式" clearable> </config-item>
<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-select>
</div>
</div>
<template v-if="config.type === 'table' || config.type === 'AiDvTable'"> <template v-if="config.type === 'table' || config.type === 'AiDvTable'">
<div class="layout-config__item"> <config-item label="显示排名">
<label>显示排名</label> <el-select size="mini" v-model="config.isShowIndex" placeholder="请选择" clearable>
<div class="layout-config__item--right"> <el-option
<el-select size="mini" v-model="config.isShowIndex" placeholder="请选择" clearable> v-for="(item, index) in tableStatus"
<el-option :key="index"
v-for="(item, index) in tableStatus" :label="item.label"
:key="index" :value="item.value">
:label="item.label" </el-option>
:value="item.value"> </el-select>
</el-option> </config-item>
</el-select> <config-item label="斑马纹" v-if="config.type === 'AiDvTable'">
</div> <el-select size="mini" v-model="config.stripe" placeholder="请选择" clearable>
</div> <el-option
<div class="layout-config__item" v-if="config.type === 'AiDvTable'"> label="是"
<label>斑马纹</label> value="1">
<div class="layout-config__item--right"> </el-option>
<el-select size="mini" v-model="config.stripe" placeholder="请选择" clearable> <el-option
<el-option label="否"
label="是" value="0">
value="1"> </el-option>
</el-option> </el-select>
<el-option </config-item>
label="否" <config-item label="简易样式" v-if="config.type === 'AiDvTable'">
value="0"> <el-select size="mini" v-model="config.simple" placeholder="请选择" clearable>
</el-option> <el-option
</el-select> label="是"
</div> value="1">
</div> </el-option>
<div class="layout-config__item" v-if="config.type === 'AiDvTable'"> <el-option
<label>简易样式</label> label="否"
<div class="layout-config__item--right"> value="0">
<el-select size="mini" v-model="config.simple" placeholder="请选择" clearable> </el-option>
<el-option label="是" value="1"/> </el-select>
<el-option label="否" value="0"/> </config-item>
</el-select> <config-item label="表格行数" v-if="config.type !== 'AiDvTable'">
</div> <el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"/>
</div> </config-item>
<div class="layout-config__item" v-if="config.type !== 'AiDvTable'"> <config-item v-if="config.type === 'AiDvTable'" v-for="(item, i) in config.config" :label="`第${i+1}列`">
<label>表格行数</label> <el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
<div class="layout-config__item--right"> <el-option label="居中" value="center"></el-option>
<el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" <el-option label="居左" value="left"></el-option>
controls-position="right"></el-input-number> <el-option label="居右" value="right"></el-option>
</div> </el-select>
</div> <el-color-picker v-model="item.color" class="mar-h10" size="mini"/>
<div class="layout-config__item table-config" v-if="config.type === 'AiDvTable'" <el-input-number v-model="item.width" label="描述文字" controls-position="right" size="mini"/>
v-for="(item, index) in config.config" :key="index"> </config-item>
<label>第{{ index + 1 }}列</label>
<div class="layout-config__item--right">
<el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
<el-option label="居中" value="center"></el-option>
<el-option label="居左" value="left"></el-option>
<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" label="描述文字" controls-position="right"></el-input-number>
</div>
</div>
</template> </template>
<template v-if="config.type === 'map'"> <template v-if="config.type === 'map'">
<div class="layout-config__item"> <div class="layout-config__item">
@@ -235,10 +207,11 @@ import ConfigItem from "./configItem.vue";
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue"; import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
import {monitorTypes} from "../config"; import {monitorTypes} from "../config";
import AiDvSummary from "../../../../components/layout/AiDvSummary/AiDvSummary.vue"; import AiDvSummary from "../../../../components/layout/AiDvSummary/AiDvSummary.vue";
import JsonEditor from "./jsonEditor.vue";
export default { export default {
name: 'componentConfig', name: 'componentConfig',
components: {AiDvSummary, AiDialogBtn, ConfigItem}, components: {JsonEditor, AiDvSummary, AiDialogBtn, ConfigItem},
props: { props: {
config: {default: () => ({})}, config: {default: () => ({})},
instance: Function, instance: Function,

23
packages/bigscreen/designer/viewport.vue
View File

@@ -190,9 +190,9 @@
:total="images.length" :total="images.length"
:colConfigs="colConfigs" :colConfigs="colConfigs"
@getList="() => {}"> @getList="() => {}">
<el-table-column slot="img" prop="素材地址" label="素材" align="center"> <el-table-column :slot="'img'" prop="素材地址" label="素材" align="center">
</el-table-column> </el-table-column>
<el-table-column slot="options" width="140px" fixed="right" label="操作" align="center"> <el-table-column :slot="'options'" width="140px" fixed="right" label="操作" align="center">
<template slot-scope="{ row, $index }"> <template slot-scope="{ row, $index }">
<div class="table-options"> <div class="table-options">
<el-button type="text" @click="removeImg($index)">删除</el-button> <el-button type="text" @click="removeImg($index)">删除</el-button>
@@ -313,6 +313,7 @@ export default {
comps: v => { comps: v => {
const obj = {} const obj = {}
v.components.map(e => e.list.map(c => c.list.map(com => { v.components.map(e => e.list.map(c => c.list.map(com => {
com.echartOps = com.echartOps || v.$echartTpls[com.type]
obj[com.type] = com obj[com.type] = com
}))) })))
return obj return obj
@@ -351,11 +352,9 @@ export default {
}) })
oInput.remove() oInput.remove()
}, },
removeImg(index) { removeImg(index) {
this.images.splice(index, 1) this.images.splice(index, 1)
}, },
onImageConfirm() { onImageConfirm() {
if (!this.form.images.length) { if (!this.form.images.length) {
return this.$message.error('请上传图片') return this.$message.error('请上传图片')
@@ -383,7 +382,6 @@ export default {
this.componentList.splice(this.activeIndex, 1) this.componentList.splice(this.activeIndex, 1)
this.componentList.unshift(item) this.componentList.unshift(item)
}, },
getInfo(id) { getInfo(id) {
id && this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => { id && this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
if (res?.data) { if (res?.data) {
@@ -394,7 +392,6 @@ export default {
} }
}) })
}, },
back(params) { back(params) {
if (!!params) { if (!!params) {
const {id} = this.$route.query const {id} = this.$route.query
@@ -424,6 +421,9 @@ export default {
}, },
//从资产中新建时使用 //从资产中新建时使用
clone(e) { clone(e) {
if (/Chart/.test(e.type)) {
e.echartOps = this.$echartTpls[e.config]
}
this.componentList.push(this.deepClone(e)) this.componentList.push(this.deepClone(e))
}, },
onChange() { onChange() {
@@ -432,13 +432,8 @@ export default {
deepClone(obj) { deepClone(obj) {
if (obj instanceof Object) { if (obj instanceof Object) {
let newObj = {} let newObj = {}
if (Array.isArray(obj)) { if (Array.isArray(obj)) {
let arr = [] return this.$copy(obj)
obj.forEach(item => {
arr.push(this.deepClone(item))
})
return arr
} else if (typeof obj == 'function') { } else if (typeof obj == 'function') {
newObj = obj.bind(newObj) newObj = obj.bind(newObj)
} else { } else {
@@ -460,13 +455,11 @@ export default {
} }
} }
} }
return newObj return newObj
} else { } else {
return obj return obj
} }
}, },
onContextmenu(e, index) { onContextmenu(e, index) {
this.menuX = e.clientX + 10 this.menuX = e.clientX + 10
this.menuY = e.clientY + 10 this.menuY = e.clientY + 10
@@ -485,7 +478,6 @@ export default {
this.componentList.splice(this.activeIndex, 1) this.componentList.splice(this.activeIndex, 1)
this.activeIndex = -1 this.activeIndex = -1
}, },
onActivated(index) { onActivated(index) {
this.activeIndex = index this.activeIndex = index
}, },
@@ -499,7 +491,6 @@ export default {
item.width = w item.width = w
item.height = h item.height = h
}, },
initCanvas() { initCanvas() {
let widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth let widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
let heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight let heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight