264 lines
10 KiB
Vue
264 lines
10 KiB
Vue
<style>
|
||
/* 背景色 */
|
||
.bg-0 {
|
||
background-color: #48b0f7 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.bg-4 {
|
||
background-color: #57c7d4 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.bg-7 {
|
||
background-color: #33cabb !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.bg-2 {
|
||
background-color: #fcc525 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.bg-3 {
|
||
background-color: #15c377 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
|
||
|
||
.bg-5 {
|
||
background-color: #faa64b !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.bg-6 {
|
||
background-color: #f96868 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.bg-1 {
|
||
background-color: #f96197 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.bg-8 {
|
||
background-color: #926dde !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.bg-9 {
|
||
background-color: #8d6658 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.el-card {
|
||
cursor: pointer;
|
||
}
|
||
.write {
|
||
color: #fff !important;
|
||
}
|
||
.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
|
||
-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||
box-shadow: 0 6px 12px 0 rgba(0,0,0,.1);
|
||
}
|
||
</style>
|
||
<template>
|
||
|
||
|
||
<el-col :sm="24" :md="pzoption.mdwidth" v-bind:style="{ height: pzoption.wigheight + 'px' }" style="overflow: auto; overflow-x: hidden;">
|
||
<i class="iconfont icon-shezhi pull-right widgetset hidden-print" @click.stop="dialogInputVisible = true"></i>
|
||
<i class="iconfont icon-shanchu pull-right widgetdel hidden-print" @click.stop="delWid(pzoption.wigdetcode)"></i>
|
||
<el-popover placement="right"
|
||
width="400"
|
||
trigger="hover">
|
||
<p style="font-weight:bold">组件数据</p>
|
||
<p v-text="JSON.stringify(pzoption.dataset)"></p>
|
||
<i slot="reference" class="iconfont icon-fabu pull-right widgetdel hidden-print" style="float:right;margin-right:10px"></i>
|
||
</el-popover>
|
||
<p style="FONT-SIZE: 16PX; MARGIN-BOTTOM: 5PX;height:22px" v-text="pzoption.title"></p>
|
||
<el-row :gutter="12">
|
||
<el-col :xs="24" :sm="12" :md="childpro.md" :lg="childpro.md" v-for="(item,index) in pzoption.dataset" :key="index" class="mt10" v-if="pzoption.wdlist.length>0">
|
||
<div @click="kblink(item,childpro.kbcode)">
|
||
<el-card shadow="hover" class="write" v-bind:style="{'background-color': childpro.kbcolor}">
|
||
<i class="el-icon-s-data" style="float: right;font-size: 22px;opacity: .9;"></i>
|
||
<div v-bind:style="{ fontSize: childpro.fz + 'px' }" v-if="pzoption.wdlist.length==1">
|
||
{{item[pzoption.dllist[0].colid]}}
|
||
<span style="font-size: 14px;"> {{childpro.dwname}}</span>
|
||
</div>
|
||
<div v-bind:style="{ fontSize: childpro.fz + 'px' }" v-if="pzoption.wdlist.length>1">
|
||
{{item[pzoption.wdlist[1].colid]}}
|
||
<span style="font-size: 14px;"> {{childpro.dwname}}</span>
|
||
</div>
|
||
|
||
|
||
<div style="font-size:14px"> {{item[pzoption.wdlist[0].colid]}}</div>
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="childpro.md" :lg="childpro.md" v-for="(item,index) in pzoption.dataset" :key="index" class="mt10" v-if="pzoption.wdlist.length==0&&pzoption.dllist.length>0">
|
||
<div @click="kblink(item,childpro.kbcode)">
|
||
<el-card shadow="hover" class="write" v-bind:style="{'background-color': childpro.kbcolor}">
|
||
<i class="el-icon-s-data" style="float: right;font-size: 22px;opacity: .9;"></i>
|
||
<div v-bind:style="{ fontSize: childpro.fz + 'px' }">{{item[pzoption.dllist[0].colid]}}<span style="font-size: 14px;"> {{childpro.dwname}}</span></div>
|
||
<div style="font-size:14px"> {{childpro.placeholder}}</div>
|
||
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-drawer :visible.sync="dialogInputVisible" direction="rtl" style="opacity:.9;" size="40%">
|
||
|
||
<el-form :model="childpro" style="padding:20px">
|
||
<el-form-item label="单位">
|
||
<el-input v-model="childpro.dwname" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="标题" style="display:none">
|
||
<el-input v-model="childpro.placeholder" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="背景色">
|
||
<el-color-picker v-model="childpro.kbcolor" style="width: 100%;"
|
||
show-alpha
|
||
:predefine="predefineColors">
|
||
</el-color-picker>
|
||
</el-form-item>
|
||
|
||
|
||
|
||
<el-form-item label="每行显示看板数量">
|
||
<el-radio-group v-model="childpro.md" size="mini" style="width:100%">
|
||
<el-radio-button :label="24">1个</el-radio-button>
|
||
<el-radio-button :label="12">2个</el-radio-button>
|
||
<el-radio-button :label="8">3个</el-radio-button>
|
||
<el-radio-button :label="6">4个</el-radio-button>
|
||
<el-radio-button :label="4">6个</el-radio-button>
|
||
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="标题字体大小">
|
||
<el-radio-group v-model="childpro.fz" size="mini" style="width:100%">
|
||
<el-radio-button :label="32">32px</el-radio-button>
|
||
<el-radio-button :label="28">28px</el-radio-button>
|
||
<el-radio-button :label="24">24px</el-radio-button>
|
||
<el-radio-button :label="18">18px</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="点击执行代码（JS）">
|
||
<el-input v-model="childpro.kbcode" autocomplete="off" type="textarea" :rows="3"></el-input>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
</el-drawer>
|
||
</el-col>
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
module.exports = {
|
||
props: ['pzoption', 'index'],
|
||
methods: {
|
||
delWid: function (wigdetcode) {
|
||
this.$root.nowwidget = {};//没这个删除不掉啊
|
||
_.remove(this.$root.FormData.wigetitems, function (obj) {
|
||
return obj.wigdetcode == wigdetcode;
|
||
});
|
||
},
|
||
kblink: function (rowdata, kbcode) {
|
||
if (kbcode) {
|
||
try {
|
||
let func = new Function('rowdata', kbcode);
|
||
func(rowdata)
|
||
} catch (e) {
|
||
app.$notify({
|
||
title: '成功',
|
||
message: '解析JS代码有误',
|
||
type: 'success'
|
||
});
|
||
}
|
||
}
|
||
|
||
},
|
||
senddata: function () {
|
||
this.pzoption.childpro = JSON.parse(JSON.stringify(this.childpro));
|
||
}
|
||
},
|
||
data: function () {
|
||
return {
|
||
dialogInputVisible: false,
|
||
predefineColors: [
|
||
'#ff4500',
|
||
'#ff8c00',
|
||
'#ffd700',
|
||
'#90ee90',
|
||
'#00ced1',
|
||
'#1e90ff',
|
||
'#c71585',
|
||
'rgba(255, 69, 0, 0.68)',
|
||
'rgb(255, 120, 0)',
|
||
'hsv(51, 100, 98)',
|
||
'hsva(120, 40, 94, 0.5)',
|
||
'hsl(181, 100%, 37%)',
|
||
'hsla(209, 100%, 56%, 0.73)',
|
||
'#c7158577'
|
||
],
|
||
childpro: {
|
||
kbcolor: 'rgba(31, 147, 255, 0.73)',
|
||
placeholder: "占位符",
|
||
dwname: "单位",
|
||
issign: false,
|
||
fz: 32,
|
||
md: 24,
|
||
kbcode: ""
|
||
|
||
}
|
||
}
|
||
},
|
||
mounted: function () {
|
||
var chi = this;
|
||
chi.$nextTick(function () {
|
||
if (chi.$root.addchildwig) {
|
||
chi.$root.addchildwig();//不能缺少
|
||
}
|
||
if (chi.pzoption.childpro.placeholder) {
|
||
//检测新增属性
|
||
_.forIn(chi.childpro, function (value, key) {
|
||
if (!_.has(chi.pzoption.childpro, key)) {
|
||
chi.pzoption.childpro[key] = value;
|
||
}
|
||
|
||
});
|
||
chi.childpro = chi.pzoption.childpro;
|
||
} else {
|
||
chi.pzoption.childpro = chi.childpro;
|
||
if (chi.pzoption.datatype == '2') {
|
||
chi.pzoption.staticdata = JSON.stringify([
|
||
{ '月份': '一月', '用户量': 1393 }
|
||
])
|
||
chi.$root.jxfiled(chi.pzoption)
|
||
chi.$root.addwd("月份", chi.pzoption)
|
||
chi.$root.addwd("用户量", chi.pzoption)
|
||
}
|
||
chi.pzoption.wigheight = 160;
|
||
chi.$root.UpdateYBData(chi.pzoption);
|
||
}
|
||
})
|
||
|
||
},
|
||
watch: {
|
||
childpro: { //深度监听，可监听到对象、数组的变化
|
||
handler(newV, oldV) {
|
||
this.senddata();
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
computed: {
|
||
// 仅读取
|
||
chiwid: function () {
|
||
|
||
}
|
||
}
|
||
};
|
||
</script> |