SunLinMES/iMES_Net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
sun__lin
2026-02-06 18:34:35 +08:00
commit f7f4c94c00
3285 changed files with 563208 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
iMES.WebApi/wwwroot/BiManage/AppPage/DATABI/vue/Yb_Btn.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<el-col :sm="24" :md="pzoption.mdwidth">
<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-form-item :label="pzoption.title">
<el-button :icon="childpro.icon" @click="queryYB" :type="childpro.bttype" size="mini" style="vertical-align:bottom;">{{ childpro.placeholder }}</el-button>
</el-form-item>
<el-dialog title="组件属性" :visible.sync="dialogInputVisible">
<el-form :model="childpro">
<el-form-item label="按钮名称">
<el-input v-model="childpro.placeholder" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="按钮图标">
<el-input v-model="childpro.icon" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="按钮样式">
<el-select v-model="childpro.bttype" placeholder="请选择">
<el-option value="primary"></el-option>
<el-option value="success"></el-option>
<el-option value="info"></el-option>
<el-option value="danger"></el-option>
</el-select>
</el-form-item>
<el-form-item label="按钮执行代码执行">
<el-input v-model="childpro.jscode" :autosize="{ minRows: 6, maxRows: 9}" autocomplete="off" type="textarea"></el-input>
</el-form-item>
</el-form>
</el-dialog>
</el-col>
</template>
<script>
module.exports = {
props: ['pzoption', 'index'],
data: function () {
return {
dialogInputVisible: false,
childpro: {
placeholder: "搜索按钮",
jscode: "app.GetYBData()",
icon:"el-icon-search",
bttype:"primary"
}
}
},
methods: {
delWid: function (wigdetcode) {
this.$root.nowwidget = {};//没这个删除不掉啊
_.remove(this.$root.FormData.wigetitems, function (obj) {
return obj.wigdetcode == wigdetcode;
});
},
senddata: function () {
this.$emit('data-change', JSON.stringify(this.childpro));
},
queryYB: function () {
try {
let jscode = this.childpro.jscode;
let func = new Function(jscode);
func()
} catch (e) {
app.$notify({
title: '成功',
message: '解析JS代码有误',
type: 'success'
});
}
}
},
mounted: function () {
var chi = this;
chi.$nextTick(function () {
if (chi.$root.addchildwig) {
chi.$root.addchildwig();//不能缺少
}
if (chi.pzoption.childpro.placeholder) {
chi.childpro = chi.pzoption.childpro
}
})
},
watch: {
childpro: { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
this.senddata();
},
deep: true
}
}
};
</script>

238
iMES.WebApi/wwwroot/BiManage/AppPage/DATABI/vue/Yb_Cascader.vue Normal file
View File

@@ -0,0 +1,238 @@
<template>
<el-col :sm="24" :md="pzoption.mdwidth">
<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-form-item :label="pzoption.title" :prop="'wigetitems.' + index + '.value'" :rules="childpro.rules">
<el-input v-model="pzoption.value" style="display:none">
</el-input>
<el-cascader v-model="childpro.svalue"
:options="childpro.options"
:props="childpro.props" v-if="!childpro.props.multiple"
@change="handleChange" filterable collapse-tags ref="refcascader" size="small"></el-cascader>
<el-cascader v-model="childpro.mvalue"
:options="childpro.options"
:props="childpro.props" v-if="childpro.props.multiple"
@change="handleChange" size="small" filterable collapse-tags></el-cascader>
</el-form-item>
<el-dialog title="组件属性" :visible.sync="dialogInputVisible" width="30%">
<el-form :model="childpro">
<el-form-item label="是否多选">
<el-switch v-model="childpro.props.multiple" size="mini" style="width:100%">
</el-switch>
</el-form-item>
<el-form-item label="value对应字段">
<el-input v-model="childpro.props.value" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="label对应字段">
<el-input v-model="childpro.props.label" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="父节点对应字段">
<el-input v-model="childpro.props.pvalue" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="默认值">
<el-input v-model="childpro.defval" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="选项更改时执行代码">
<el-input v-model="childpro.jscode" :autosize="{ minRows: 6, maxRows: 9}" autocomplete="off" type="textarea"></el-input>
</el-form-item>
</el-form>
</el-dialog>
</el-col>
</template>
<style>
.el-cascader {
width: 100%;
}
</style>
<script>
module.exports = {
props: ['pzoption', 'index'],
data: function () {
return {
dialogInputVisible: false,
childpro: {
wigname: "级联选择器",
defval: "",
jscode: "",
multiple: false,
mvalue: [],
svalue: "",
props: {
multiple: false,
emitPath: false,
expandTrigger: "hover",
value: "value",
label: "label",
pvalue: "pval"
},
options: []
}
}
},
methods: {
handleChange(value) {
},
delWid: function (wigdetcode) {
// 子组件中触发父组件方法ee并传值cc12345
this.$root.nowwidget = {};
_.remove(this.$root.FormData.wigetitems, function (obj) {
return obj.wigdetcode == wigdetcode;
});
},
getvatext: function (val) {
var chi = this;
var vatext = "";
var wig = _.find(chi.pzoption.dataset, function (item) {
return item[chi.childpro.props.value] == val;
});
if (typeof (wig) != "undefined") {
var wigp = _.find(chi.pzoption.dataset, function (item) {
return item[chi.childpro.props.value] == wig[chi.childpro.props.pvalue];
});
if (_.isUndefined(wigp)) {
vatext = wig[chi.childpro.props.label]
} else {
vatext = wigp[chi.childpro.props.label] + "/" + wig[chi.childpro.props.label];
var pwigp = _.find(chi.pzoption.dataset, function (item) {
return item[chi.childpro.props.value] == wigp[chi.childpro.props.pvalue];
});
if (!_.isUndefined(pwigp)) {
vatext = pwigp[chi.childpro.props.label] + "/" + vatext;
}
}
}
return vatext;
},
jsonToTree: function (jsonData, id, pid, children) {
for (var i = 0; i < jsonData.length; i++) {
jsonData[i][id] = jsonData[i][id] + "";
jsonData[i][pid] = jsonData[i][pid] + "";
}//数组里不能为数字
let result = [],
temp = {};
for (let i = 0; i < jsonData.length; i++) {
temp[jsonData[i][id]] = jsonData[i]; // 以id作为索引存储元素，可以无需遍历直接定位元素
}
for (let j = 0; j < jsonData.length; j++) {
let currentElement = jsonData[j];
let tempCurrentElementParent = temp[currentElement[pid]]; // 临时变量里面的当前元素的父元素
if (tempCurrentElementParent) {
// 如果存在父元素
if (!tempCurrentElementParent[children]) {
// 如果父元素没有chindren键
tempCurrentElementParent[children] = []; // 设上父元素的children键
}
tempCurrentElementParent[children].push(currentElement); // 给父元素加上当前元素作为子元素
} else {
// 不存在父元素，意味着当前元素是一级元素
result.push(currentElement);
}
}
return result;
}
},
mounted: function () {
var pro = this;
pro.$nextTick(function () {
if (pro.$root.addchildwig) {
pro.$root.addchildwig();//不能缺少,dom加载完成
}
if (pro.pzoption.childpro.wigname) {
pro.childpro = pro.pzoption.childpro;
pro.$root.UpdateYBData(pro.pzoption, function (ybdata) {
if (app.isview) {//添加页面
pro.pzoption.value = app.jxparam(pro.childpro.defval);
}
});
} else {
if (pro.pzoption.datatype == '2') {
pro.pzoption.staticdata = JSON.stringify([
{ 'label': '一月', 'value': "1", 'pval': "0" },
{ 'label': '二月', 'value': "2", 'pval': "1" },
{ 'label': '三月', 'value': "3", 'pval': "1" },
{ 'label': '四月', 'value': "4", 'pval': "3" }
]);
pro.$root.jxfiled(pro.pzoption);
pro.$root.addwd("label", pro.pzoption);
pro.$root.addwd("value", pro.pzoption);
pro.pzoption.dataset = JSON.parse(pro.pzoption.staticdata);
}
pro.pzoption.childpro = pro.childpro;
}
})
},
watch: {
'pzoption.value': { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
if (newV) {
var pro = this;
if (pro.pzoption.childpro.props.multiple) {
pro.pzoption.childpro.mvalue = newV.split(',');
pro.childpro.mvalue = newV.split(',');
} else {
pro.pzoption.childpro.svalue = newV;//为了变成字符
pro.childpro.svalue = newV;//为了变成字符
}
}
},
deep: true
},
'childpro.svalue': { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
var pro = this;
if (newV && !pro.pzoption.childpro.multiple) {
pro.pzoption.value = newV;
pro.pzoption.valuetext = pro.getvatext(pro.pzoption.value)
} else {
pro.pzoption.value = "";
pro.pzoption.valuetext = "";
}
var data = pro.pzoption.value;
let jscode = pro.childpro.jscode;
let func = new Function('data', jscode);
func(data)
},
deep: true
},
'childpro.mvalue': { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
var chi = this;
if (newV && chi.pzoption.childpro.multiple&&newV.length != 0 && JSON.stringify(newV) != JSON.stringify(oldV)) {
chi.pzoption.value = newV.join();
//多选valuetext没空搞
}
},
deep: true,
immediate: true//加载初始值
},
'pzoption.dataset': { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
var pro = this;
if (newV && newV.length != 0 && JSON.stringify(newV) != JSON.stringify(oldV)) {
var opidata = pro.jsonToTree(newV, pro.pzoption.childpro.props.value, pro.pzoption.childpro.props.pvalue, "children");
pro.childpro.options = opidata;
}
if (newV.length == 0) {
pro.childpro.options = [];
}
},
deep: true
},
}
};
</script>

268
iMES.WebApi/wwwroot/BiManage/AppPage/DATABI/vue/Yb_Chart.vue Normal file
View File

@@ -0,0 +1,268 @@
<style>
.el-drawer__header {
display: none
}
</style>
<template>
<el-col :sm="24" :md="pzoption.mdwidth">
<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>
<i class="iconfont icon-shuaxin pull-right widgetdel hidden-print" title="刷新图表" @click.stop="refchart(pzoption.wigdetcode)"></i>
<i @click.stop="dialogDataVisible = !dialogDataVisible" class="iconfont icon-fabu pull-right hidden-print" style="float:right;margin-right:10px"></i>
<div v-bind:style="{ height: pzoption.wigheight + 'px' }" v-show="!dialogDataVisible">
<ve-chart :data="childpro.chartData" :id="'qjchat'+pzoption.wigdetcode" :toolbox="childpro.toolbox" :series="childpro.series" :extend="childpro.chartExtend" :settings="childpro.chartSettings" :legend="childpro.legend" :title="childpro.title" style="margin-top:20px;width:100%" :ref="pzoption.wigdetcode+'vechart'" height="100%"></ve-chart>
</div>
<pl-table class="qjTable" :height="pzoption.wigheight" v-show="dialogDataVisible" :data="pzoption.dataset" stripe border fit use-virtual big-data-checkbox>
<pl-table-column type="index" width="60"> </pl-table-column>
<pl-table-column v-for="col in pzoption.wdlist" :prop="col.colid" :label="col.colname" :key="col.colid" align="center" :colid="col.colid" sortable>
<template slot-scope="scope">
<span>{{scope.row[col.colid]}}</span>
</template>
</pl-table-column>
<pl-table-column v-for="col in pzoption.dllist" :prop="col.colid" :label="col.colname" :key="col.colid" align="center" :colid="col.colid" sortable>
<template slot-scope="scope">
<span>{{scope.row[col.colid]}}</span>
</template>
</pl-table-column>
</pl-table>
<!--<el-dialog title="组件属性" :visible.sync="dialogInputVisible" style="opacity:.9">
</el-dialog>-->
<el-drawer :visible.sync="dialogInputVisible" direction="rtl" style="opacity:.9;" size="40%">
<el-form :model="childpro" style="padding:20px">
<el-form-item label="图表类型">
<el-radio-group v-model="childpro.chartSettings.type" size="mini" style="width:100%">
<el-radio-button label="pie">饼图</el-radio-button>
<el-radio-button label="ring">环状图</el-radio-button>
<el-radio-button label="line">线图</el-radio-button>
<el-radio-button label="histogram">柱状图</el-radio-button>
<el-radio-button label="bar">横柱图</el-radio-button>
<el-radio-button label="funnel">漏斗图</el-radio-button>
<el-radio-button label="radar">雷达图</el-radio-button>
</el-radio-group>
</el-form-item>
<el-tabs>
<el-tab-pane label="基本属性" style="min-height: 360px;">
<el-form-item label="图表标题">
<el-input v-model="childpro.title.text" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="标题布局">
<el-radio-group v-model="childpro.title.left" size="mini" style="width:100%">
<el-radio-button label="left">居左</el-radio-button>
<el-radio-button label="center">居中</el-radio-button>
<el-radio-button label="right">居右</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="标题Top距离">
<el-input-number v-model="childpro.title.top" controls-position="right" :min="1" :max="100"></el-input-number>
</el-form-item>
<el-form-item label="南丁格尔图" v-if="childpro.chartSettings.type=='pie'||childpro.chartSettings.type=='ring'">
<el-radio-group v-model="childpro.chartSettings.roseType" size="mini" style="width:100%">
<el-radio-button label="">正常饼图</el-radio-button>
<el-radio-button label="radius">南丁格尔图</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="漏斗图顺序" v-if="childpro.chartSettings.type=='funnel'">
<el-switch v-model="childpro.chartSettings.ascending" size="mini" style="width:100%">
</el-switch>
</el-form-item>
</el-tab-pane>
</el-tabs>
<el-tab-pane label="更多属性">
</el-tab-pane>
</el-form>
</el-drawer>
</el-col>
</template>
<script>
module.exports = {
props: {
index: Number,
pzoption: Object
},
data() {
return {
dialogInputVisible: false,
dialogDataVisible: false,
childpro: {
placeholder: "统计图表",
charttabtype: "0",
chartSettings: {
type: "pie",
roseType: '',
ascending: false,
label: {
formatter: '{b}:{c}({d}%)'
}
},
chartExtend: {
series: {
radius: '50%',
center: ['50%', '50%']
}
},
legend: {
bottom: 10,
left: 'center',
show: true
},
title: {
text: "饼图",
left: 'center',
top: 10,
textStyle: {
fontSize: 16
}
},
toolbox: {
feature: {
//dataZoom: {
// yAxisIndex: 'none'
//},
//dataView: { readOnly: true },
//magicType: { type: ['line', 'bar'] },
//restore: {},
//saveAsImage: {}
}
},
chartData: {
}
}
};
},
methods: {
delWid: function (wigdetcode) {
this.$root.nowwidget = { rules: { required: false, message: '请填写信息', trigger: 'blur' } };//没这个删除不掉啊
_.remove(this.$root.FormData.wigetitems, function (obj) {
return obj.wigdetcode == wigdetcode;
});
},
senddata: function () {
this.pzoption.childpro = JSON.parse(JSON.stringify(this.childpro));
},
refchart: function (wigdetcode) {
this.$refs[wigdetcode + 'vechart'].echarts.resize()
}
},
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;
chi.senddata();
if (chi.pzoption.datatype == '2') {
chi.pzoption.staticdata = JSON.stringify([
{ '月份': '一月', '用户量': 1393, '应用数量': 1093, '点击量': 2093 },
{ '月份': '二月', '用户量': 3530, '应用数量': 3230, '点击量': 1230 },
{ '月份': '三月', '用户量': 2923, '应用数量': 2623, '点击量': 1623 },
{ '月份': '四月', '用户量': 1723, '应用数量': 1423, '点击量': 2423 }
])
}
chi.childpro.chartSettings.type = chi.pzoption.charttype;
chi.$root.UpdateYBData(chi.pzoption);
}
})
},
watch: {
'pzoption.dataset': { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
var chi = this;
chi.$refs[chi.pzoption.wigdetcode + 'vechart'].echarts.clear();//清理画布
var chi = chi;
if (chi.pzoption.dataset.length > 0) {
chi.$refs[chi.pzoption.wigdetcode + 'vechart'].echarts.hideLoading();
var keys = [];
var tempdata = [];
_.forEach(chi.pzoption.dataset, function (obj) {
var dataobj = {};
_.forEach(chi.pzoption.wdlist, function (wd) {
dataobj[wd.colname] = obj[wd.colid];
})
_.forEach(chi.pzoption.dllist, function (dl) {
dataobj[dl.colname] = obj[dl.colid];
})
tempdata.push(dataobj);
})
for (var i in tempdata[0]) {
keys.push(i);
}
chi.childpro.chartData = {
columns: keys,
rows: tempdata
}
} else {
chi.childpro.chartData.rows = [];
chi.$refs[chi.pzoption.wigdetcode + 'vechart'].echarts.showLoading({
text: '暂无数据',
color: '#ffffff',
textColor: '#8a8e91',
maskColor: 'rgba(255, 255, 255, 0.8)',
})
}
},
deep: true
},
childpro: { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
this.refchart(this.pzoption.wigdetcode);
this.senddata();
},
deep: true
},
'childpro.chartSettings.type': { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
if (newV == "ring") {
this.childpro.chartExtend.series.radius = ['40%', '50%'];
} else {
this.childpro.chartExtend.series.radius = '50%';
}
if (newV == "funnel") {
this.childpro.chartSettings.ascending = false;
}
if (newV == "line" || newV == "histogram" || newV == "bar") {
this.childpro.chartExtend.series.markPoint = {
data: [
{ type: 'max', name: '最大值' },
//{ type: 'min', name: '最小值' }
]
};
}
},
deep: true
}
}
};
</script>

96
iMES.WebApi/wwwroot/BiManage/AppPage/DATABI/vue/Yb_Checkbox.vue Normal file
View File

@@ -0,0 +1,96 @@
<template>
<el-col :sm="24" :md="pzoption.mdwidth">
<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-form-item :label="pzoption.title" :prop="'wigetitems.' + index + '.value'">
<el-checkbox-group v-model="childpro.mvalue" @change="selchange" size="small">
<el-checkbox label="2020"></el-checkbox>
<el-checkbox label="2019"></el-checkbox>
<el-checkbox label="2018"></el-checkbox>
<el-checkbox label="2017"></el-checkbox>
<el-checkbox label="2016"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-dialog title="组件属性" :visible.sync="dialogInputVisible">
<el-form :model="childpro">
<el-form-item label="默认值">
<el-input v-model="childpro.defval" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="是否多选">
<el-switch v-model="childpro.multiple" size="mini" style="width:100%">
</el-switch>
</el-form-item>
<el-form-item label="勾选框更改时执行事件">
<el-input v-model="childpro.jscode" :autosize="{ minRows: 6, maxRows: 9}" autocomplete="off" type="textarea"></el-input>
</el-form-item>
</el-form>
</el-dialog>
</el-col>
</template>
<script>
module.exports = {
props: ['pzoption', 'index'],
data: function () {
return {
dialogInputVisible: false,
childpro: {
placeholder: "占位符",
mvalue: ['2020'],
jscode: "",
defval: "",
jscode: "",
multiple: false
}
}
},
methods: {
delWid: function (wigdetcode) {
// 子组件中触发父组件方法ee并传值cc12345
this.$root.nowwidget = {};
_.remove(this.$root.FormData.wigetitems, function (obj) {
return obj.wigdetcode == wigdetcode;
});
},
selchange: function () {
try {
var data = JSON.parse(JSON.stringify(this.pzoption));
let jscode = this.childpro.jscode;
let func = new Function('data', jscode);
func(data)
} catch (e) {
app.$notify({
title: '成功',
message: '解析JS代码有误',
type: 'success'
});
}
}
},
mounted: function () {
var chi = this;
chi.$nextTick(function () {
if (chi.$root.addchildwig) {
chi.$root.addchildwig();//不能缺少
}
if (chi.pzoption.childpro.placeholder) {
chi.childpro = chi.pzoption.childpro
}
})
},
watch: {
'childpro.mvalue': { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
if (newV) {
this.pzoption.value = newV.join();
}
},
deep: true
}
}
};
</script>

121
iMES.WebApi/wwwroot/BiManage/AppPage/DATABI/vue/Yb_Date.vue Normal file
View File

@@ -0,0 +1,121 @@
<template>
<el-col :sm="24" :md="pzoption.mdwidth">
<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-form-item :label="pzoption.title">
<el-input v-model="pzoption.value" style="display:none">
</el-input>
<el-date-picker align="right" size="small" :type="childpro.itemtype" :placeholder="childpro.placeholder" :value-format="childpro.dateformat" v-model="childpro.chivalue">
</el-date-picker>
</el-form-item>
<el-dialog title="组件属性" :visible.sync="dialogInputVisible">
<el-form :model="childpro">
<el-form-item label="默认当前时间">
<el-switch v-model="childpro.ishasdefault"></el-switch>
</el-form-item>
<el-form-item label="日期类型">
<el-radio v-model="childpro.itemtype" label="year">年</el-radio>
<el-radio v-model="childpro.itemtype" label="month">月</el-radio>
<el-radio v-model="childpro.itemtype" label="date">日</el-radio>
<el-radio v-model="childpro.itemtype" label="datetime">时间</el-radio>
</el-form-item>
</el-form>
</el-dialog>
</el-col>
</template>
<script>
module.exports = {
data() {
return {
dialogInputVisible: false,
childpro: {
placeholder: "",
itemtype: "date",
chivalue: "",
dateformat: "yyyy-MM-dd",
ishasdefault: false
}
};
},
props: ['pzoption', 'index'],
methods: {
delWid: function (wigdetcode) {
this.$root.nowwidget = {};
_.remove(this.$root.FormData.wigetitems, function (obj) {
return obj.wigdetcode == wigdetcode;
});
},
senddata: function () {
this.pzoption.childpro = JSON.parse(JSON.stringify(this.childpro));
}
},
mounted: function () {
var chi = this;
chi.$nextTick(function () {
chi.childpro.disabled = app.isview;
if (chi.$root.addchildwig) {
chi.$root.addchildwig();//不能缺少
}
if (chi.pzoption.childpro.dateformat) {
chi.childpro = chi.pzoption.childpro;
} else {
chi.senddata();
}
if (chi.childpro.ishasdefault && app.isview) {
//浏览模式且有默认值的时候初始化
chi.childpro.chivalue = ComFunJS.getnowdate(chi.childpro.dateformat)
}
})
},
watch: {
childpro: { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
this.senddata();
},
deep: true
},
"childpro.chivalue": {
handler(newV, oldV) {
if (newV) {
this.pzoption.value = newV;
}
if (newV == null) {
//清空日期时不能为null
this.pzoption.value = "";
this.childpro.chivalue = "";
}
},
deep: true
},
"childpro.itemtype": { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
switch (newV) {
case "year":
this.childpro.dateformat = "yyyy";
break;
case "month":
this.childpro.dateformat = "yyyy-MM";
break;
case "date":
this.childpro.dateformat = "yyyy-MM-dd";
break;
case "datetime":
this.childpro.dateformat = "yyyy-MM-dd HH:mm";
break;
default:
this.childpro.dateformat = "yyyy-MM-dd";
}
},
deep: true
}
}
};
</script>

177
iMES.WebApi/wwwroot/BiManage/AppPage/DATABI/vue/Yb_DateSE.vue Normal file
View File

@@ -0,0 +1,177 @@
<template>
<el-col :sm="24" :md="pzoption.mdwidth">
<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-form-item :label="pzoption.title">
<el-input v-model="pzoption.value" style="display:none">
</el-input>
<el-date-picker v-model="childpro.chivalue" v-if="childpro.datetype=='d'"
align="right"
size="small"
type="daterange"
range-separator="-"
:value-format="childpro.dateformat"
format="yy 年 MM 月 dd 日"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="childpro.pickerOptionsd"
unlink-panels >
</el-date-picker>
<el-date-picker v-model="childpro.chivalue" v-if="childpro.datetype=='m'"
type="monthrange"
align="right"
size="small"
unlink-panels
:value-format="childpro.dateformat"
range-separator="-"
start-placeholder="开始月份"
end-placeholder="结束月份"
:picker-options="childpro.pickerOptionsd1">
</el-date-picker>
</el-form-item>
<el-dialog title="组件属性" :visible.sync="dialogInputVisible">
<el-form :model="childpro">
<el-form-item label="默认当前时间">
<el-switch v-model="childpro.ishasdefault"></el-switch>
</el-form-item>
<el-form-item label="起止类型">
<el-radio-group v-model="childpro.datetype" size="mini" style="width:100%">
<el-radio-button label="d">日</el-radio-button>
<el-radio-button label="m">月</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
</el-dialog>
</el-col>
</template>
<script>
module.exports = {
data() {
return {
dialogInputVisible: false,
childpro: {
placeholder: "占位符",
dateformat: "yyyy-MM-dd",
ishasdefault: true,
disabled: false,
chivalue: [],
datetype: "d",
pickerOptionsd: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
debugger;
alert(1)
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
pickerOptionsd1: {
shortcuts: [{
text: '本月',
onClick(picker) {
picker.$emit('pick', [new Date(), new Date()]);
}
}, {
text: '今年至今',
onClick(picker) {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近六个月',
onClick(picker) {
debugger;
alert(1)
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
picker.$emit('pick', [start, end]);
}
}]
}
}
};
},
props: ['pzoption', 'index'],
methods: {
delWid: function (wigdetcode) {
this.$root.nowwidget = {};
_.remove(this.$root.FormData.wigetitems, function (obj) {
return obj.wigdetcode == wigdetcode;
});
},
senddata: function () {
this.pzoption.childpro = JSON.parse(JSON.stringify(this.childpro));
}
},
mounted: function () {
var chi = this;
chi.$nextTick(function () {
chi.childpro.disabled = app.isview;
if (chi.$root.addchildwig) {
chi.$root.addchildwig();//不能缺少
}
if (chi.pzoption.childpro.dateformat) {
chi.childpro = chi.pzoption.childpro;
} else {
chi.senddata();
}
if (chi.childpro.ishasdefault && app.isview) {
var nowdate = ComFunJS.getnowdate('yyyy-mm') + "-01";
chi.childpro.chivalue = [nowdate, nowdate];
}
})
},
watch: {
childpro: { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
this.senddata();
},
deep: true
},
"childpro.chivalue": {
handler(newV, oldV) {
if (newV && newV.length > 0) {
var sdate = newV[0];
var temp = this.childpro.datetype;
var edate = ComFunJS.format(ComFunJS.DateAdd(ComFunJS.StringToDate(newV[1]), temp, 1), 'yyyy-MM-dd');
this.pzoption.value = sdate + "," + edate;
}
if (newV == null) {
//清空日期时不能为null
this.childpro.chivalue = "";
}
},
deep: true
}
}
};
</script>

64
iMES.WebApi/wwwroot/BiManage/AppPage/DATABI/vue/Yb_Input.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<el-col :sm="24" :md="pzoption.mdwidth">
<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-form-item :label="pzoption.title" :prop="'wigetitems.' + index + '.value'">
<el-input :placeholder="childpro.placeholder" v-model="pzoption.value" size="small" clearable>
</el-input>
</el-form-item>
<el-dialog title="组件属性" :visible.sync="dialogInputVisible">
<el-form :model="childpro">
<el-form-item label="占位符">
<el-input v-model="childpro.placeholder" autocomplete="off"></el-input>
</el-form-item>
</el-form>
</el-dialog>
</el-col>
</template>
<script>
module.exports = {
props: ['pzoption', 'index'],
data: function () {
return {
dialogInputVisible: false,
childpro: {
placeholder: "占位符"
}
}
},
methods: {
delWid: function (wigdetcode) {
// 子组件中触发父组件方法ee并传值cc12345
this.$root.nowwidget = {};
_.remove(this.$root.FormData.wigetitems, function (obj) {
return obj.wigdetcode == wigdetcode;
});
},
senddata: function () {
this.pzoption.childpro = JSON.parse(JSON.stringify(this.childpro));
}
},
mounted: function () {
var chi = this;
chi.$nextTick(function () {
if (chi.$root.addchildwig) {
chi.$root.addchildwig();//不能缺少
}
if (chi.pzoption.childpro.placeholder) {
chi.childpro = chi.pzoption.childpro
}
})
},
watch: {
childpro: { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
this.senddata();
},
deep: true
}
}
};
</script>

264
iMES.WebApi/wwwroot/BiManage/AppPage/DATABI/vue/Yb_KB.vue Normal file
View File

@@ -0,0 +1,264 @@
<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>

108
iMES.WebApi/wwwroot/BiManage/AppPage/DATABI/vue/Yb_Month.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<el-col :sm="24" :md="pzoption.mdwidth">
<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-form-item :label="pzoption.title">
<el-input v-model="pzoption.value" style="display:none">
</el-input>
<el-date-picker align="right" :type="childpro.itemtype" :placeholder="childpro.placeholder" :value-format="childpro.dateformat" v-model="pzoption.value">
</el-date-picker>
</el-form-item>
<el-dialog title="组件属性" :visible.sync="dialogInputVisible">
<el-form :model="childpro">
<el-form-item label="默认当前时间">
<el-switch v-model="childpro.ishasdefault"></el-switch>
</el-form-item>
<el-form-item label="日期类型">
<el-radio v-model="childpro.itemtype" label="year">年</el-radio>
<el-radio v-model="childpro.itemtype" label="month">月</el-radio>
<el-radio v-model="childpro.itemtype" label="date">日</el-radio>
<el-radio v-model="childpro.itemtype" label="datetime">时间</el-radio>
</el-form-item>
</el-form>
</el-dialog>
</el-col>
</template>
<script>
module.exports = {
data() {
return {
dialogInputVisible: false,
childpro: {
placeholder: "",
itemtype: "date",
dateformat: "yyyy-MM-dd",
ishasdefault: false
}
};
},
props: ['pzoption', 'index'],
methods: {
delWid: function (wigdetcode) {
this.$root.nowwidget = {};
_.remove(this.$root.FormData.wigetitems, function (obj) {
return obj.wigdetcode == wigdetcode;
});
},
senddata: function () {
this.$emit('data-change', JSON.stringify(this.childpro));
}
},
mounted: function () {
var chi = this;
chi.$nextTick(function () {
chi.childpro.disabled = app.isview;
if (chi.$root.addchildwig) {
chi.$root.addchildwig();//不能缺少
}
if (chi.pzoption.childpro.dateformat) {
chi.childpro = chi.pzoption.childpro;
} else {
chi.senddata();
}
if (chi.childpro.ishasdefault && app.isview) {
//浏览模式且有默认值的时候初始化
chi.pzoption.value = ComFunJS.getnowdate(chi.childpro.dateformat)
}
})
},
watch: {
childpro: { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
this.senddata();
},
deep: true
},
"childpro.itemtype": { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
switch (newV) {
case "year":
this.childpro.dateformat = "yyyy";
break;
case "month":
this.childpro.dateformat = "yyyy-MM";
break;
case "date":
this.childpro.dateformat = "yyyy-MM-dd";
break;
case "datetime":
this.childpro.dateformat = "yyyy-MM-dd HH:mm";
break;
default:
this.childpro.dateformat = "yyyy-MM-dd";
}
},
deep: true
}
}
};
</script>

150
iMES.WebApi/wwwroot/BiManage/AppPage/DATABI/vue/Yb_Select.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<el-col :sm="24" :md="pzoption.mdwidth">
<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-form-item :label="pzoption.title">
<el-select v-model="pzoption.value" style="width:100%" v-if="!childpro.multiple&&pzoption.wdlist.length>0" size="small" @change="selchange" filterable clearable>
<el-option v-for="item in pzoption.dataset" v-if="pzoption.wdlist.length==1"
:key="item[pzoption.wdlist[0].colid]"
:label="item[pzoption.wdlist[0].colid]"
:value="item[pzoption.wdlist[0].colid]+''">
</el-option>
<el-option v-for="item in pzoption.dataset" v-if="pzoption.wdlist.length>1"
:key="item[pzoption.wdlist[1].colid]"
:label="item[pzoption.wdlist[0].colid]"
:value="item[pzoption.wdlist[1].colid]+''">
</el-option>
</el-select>
<el-select v-model="childpro.mvalue" style="width:100%" v-if="childpro.multiple" @change="selchange" size="small" multiple filterable clearable>
<el-option v-for="item in pzoption.dataset" v-if="pzoption.wdlist.length==1"
:key="item[pzoption.wdlist[0].colid]"
:label="item[pzoption.wdlist[0].colid]"
:value="item[pzoption.wdlist[0].colid]">
</el-option>
<el-option v-for="item in pzoption.dataset" v-if="pzoption.wdlist.length>1"
:key="item[pzoption.wdlist[1].colid]"
:label="item[pzoption.wdlist[0].colid]"
:value="item[pzoption.wdlist[1].colid]">
</el-option>
</el-select>
</el-form-item>
<el-dialog title="组件属性" :visible.sync="dialogInputVisible" width="40%">
<el-form-item label="是否多选">
<el-switch v-model="childpro.multiple" size="mini" style="width:100%">
</el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input v-model="childpro.defval" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="下拉框更改时执行代码">
<el-input v-model="childpro.jscode" :autosize="{ minRows: 6, maxRows: 9}" autocomplete="off" type="textarea"></el-input>
</el-form-item>
</el-dialog>
</el-col>
</template>
<script>
module.exports = {
props: ['pzoption', 'index'],
data: function () {
return {
dialogInputVisible: false,
childpro: {
placeholder: "请选择",
itemtype: "text",
mvalue: [],
datatype: "0",
datasql: "",
defval: "",
jscode: "",
multiple: false
}
}
},
methods: {
delWid: function (wigdetcode) {
// 子组件中触发父组件方法ee并传值cc12345
this.$root.nowwidget = {};
_.remove(this.$root.FormData.wigetitems, function (obj) {
return obj.wigdetcode == wigdetcode;
});
},
senddata: function () {
this.pzoption.childpro = JSON.parse(JSON.stringify(this.childpro));
},
selchange: function () {
try {
var data = JSON.parse(JSON.stringify(this.pzoption));
let jscode = this.childpro.jscode;
let func = new Function('data', jscode);
func(data)
} catch (e) {
app.$notify({
title: '成功',
message: '解析JS代码有误',
type: 'success'
});
}
}
},
mounted: function () {
var chi = this;
chi.$nextTick(function () {
if (chi.$root.addchildwig) {
chi.$root.addchildwig();//不能缺少
}
if (chi.pzoption.childpro.itemtype) {
//检测新增属性
_.forIn(chi.childpro, function (value, key) {
if (!_.has(chi.pzoption.childpro, key)) {
chi.pzoption.childpro[key] = value;
}
});
chi.childpro = chi.pzoption.childpro;
chi.$root.UpdateYBData(chi.pzoption, function (ybdata) {
chi.pzoption.value = app.jxparam(chi.childpro.defval);
});
} else {
if (chi.pzoption.datatype == '2') {
chi.pzoption.staticdata = JSON.stringify([
{ 'lable': '一月', 'val': 1393 },
{ 'lable': '二月', 'val': 3530 },
{ 'lable': '三月', 'val': 2923 },
{ 'lable': '四月', 'val': 1723 }
])
chi.$root.jxfiled(chi.pzoption)
chi.$root.addwd("lable", chi.pzoption)
chi.$root.addwd("val", chi.pzoption)
}
chi.pzoption.mdwidth = 6;
chi.pzoption.childpro = chi.childpro;
}
})
},
watch: {
childpro: { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
this.senddata();
},
deep: true
},
'childpro.mvalue': { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
if (newV) {
this.pzoption.value = newV.join();
}
},
deep: true
}
}
};
</script>

812
iMES.WebApi/wwwroot/BiManage/AppPage/DATABI/vue/Yb_Table.vue Normal file
View File

@@ -0,0 +1,812 @@
<template>
<el-col :sm="24" :md="pzoption.mdwidth">
<i class="iconfont icon-shezhi pull-right widgetset hidden-print" style="line-height:40px; margin-right: 10px;" @click.stop="dialogFormVisible = true"></i>
<i class="iconfont icon-shanchu pull-right widgetdel hidden-print" style="line-height:40px" @click.stop="delWid(pzoption.wigdetcode)"></i>
<div class="tab-filter-type" v-show="childpro.isexport">
<div class="input-group col-xs-12 col-md-6 col-sm-6" style="margin-bottom:10PX;">
<div class="input-group-btn">
<button type="button" style="min-width:120PX;height: 34px;" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{sear.colname}} <span class="caret"></span></button>
<ul class="dropdown-menu">
<li v-for="fi in pzoption.wdlist" @click="sel(fi)"><a href="#" v-text="fi.colname"></a></li>
<li v-for="fi in pzoption.dllist" @click="sel(fi)"><a href="#" v-text="fi.colname"></a></li>
</ul>
</div>
<el-select placeholder="请选择筛选类型" size="mini" v-model="searitem.cal" class="form-control filter" style="height: 34px;width:30%;padding:0px">
<el-option label="包含" value="0"></el-option>
<el-option label="小于" value="1"></el-option>
<el-option label="大于" value="2"></el-option>
<el-option label="不等于" value="3"></el-option>
<el-option label="等于" value="4"></el-option>
<el-option label="在列表中(逗号隔开)" value="5"></el-option>
</el-select>
<input type="text" class="form-control" style="height: 34px;width:65%;border-left-width: 0px;" v-model="searitem.qvalue" placeholder="输入关键字搜索数据">
<span class="input-group-btn" v-show="searitem.qvalue">
<button class="btn btn-warning" style="height: 34px;" @click="reset" type="button">重置</button>
</span>
</div>
</div>
<div style="width:100%;height:40px; padding-left:10px; line-height:40px; border: 1px solid #EBEEF5;border-bottom: 0px;">
{{pzoption.title}},共计找到{{datalength}}条数据
<a class="tabletool" @click.stop="dialogFiledVisible = true" v-show="childpro.isexport">字段筛选</a>
<!--<a class="tabletool" v-show="childpro.isexport">数据过滤</a>-->
<a class="tabletool hidden-xs" @click="exportxls()" v-show="childpro.isexport">导出</a>
<!--<el-tooltip content="导出Excel" placement="top">
<i class="el-icon-share" v-if="childpro.isexport" style="float:right;margin-right:10px;line-height:40px;cursor:pointer" @click="exportxls()"></i>
</el-tooltip>
<el-tooltip content="搜索" placement="top">
<i class="el-icon-search" @click.stop="dialogTableVisible = true" style="float:right;margin-right:10px;line-height:40px;cursor:pointer"></i>
</el-tooltip>-->
<!--<el-button type="primary" size="mini" v-if="childpro.isexport" icon="el-icon-edit" style="float:right;margin-top: 5px;margin-right:10px" @click="exportxls()"></el-button>-->
</div>
<pl-table class="qjTable" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" style="font-size: 10px" v-loading="childpro.loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="pzoption.dataset" @selection-change="handleSelectionChange" stripe border fit use-virtual big-data-checkbox @header-dragend="widchange" :row-class-name="tableRowClassName" :summary-method="getSummaries" :show-summary="pzoption.ishj" :height="pzoption.wigheight">
<pl-table-column type="selection" width="45" v-if="childpro.issel">
</pl-table-column>
<pl-table-column v-for="col in pzoption.wdlist" :prop="col.colid" :label="col.colname" :key="col.colid" v-if="col.ishide" :width="col.width" min-width="120" align="center" :colid="col.colid" :show-overflow-tooltip="col.istip" sortable>
<template slot-scope="scope">
<span>{{mang(scope.row[col.colid],col)}}</span>
</template>
</pl-table-column>
<pl-table-column v-for="col in pzoption.dllist" :prop="col.colid" :label="col.colname" :key="col.colid" v-if="col.ishide" :width="col.width" min-width="120" align="center" :colid="col.colid" :show-overflow-tooltip="col.istip" sortable>
<template slot-scope="scope">
<span>{{mang(scope.row[col.colid],col)}}</span>
</template>
</pl-table-column>
<pl-table-column type="index" width="60" fixed="left"> </pl-table-column>
<pl-table-column label="操作列" min-width="120" align="center" v-if="childpro.iscz" fixed="left" :width="childpro.czwidth">
<template slot-scope="scope">
<el-button v-for="(czcol,index) in childpro.czltabledata" :key="index" ms-if="czcol.colname" @click="mangcol(scope.row,czcol)" :type="czcol.bttype" size="mini">{{czcol.colname}}</el-button>
</template>
</pl-table-column>
</pl-table>
<el-pagination background @current-change="handleCurrentChange" :page-size="childpro.pagesize" :current-page="childpro.nowpage" layout="prev, pager, next" :total="pzoption.datatotal" v-if="pzoption.datatype=='0'&&childpro.ispagination" style="text-align:center;margin-top:8px"></el-pagination>
<el-drawer :visible.sync="dialogFormVisible" direction="rtl" style="opacity:.9;" size="40%">
<div class="padding20">
<el-form :model="childpro" style="padding:20px" label-position="top" label-width="80px">
<el-form-item label="高级表格(添加筛选,导出,字段选择功能)">
<el-switch v-model="childpro.isexport"></el-switch>
</el-form-item>
<el-form-item label="是否分页">
<el-switch v-model="childpro.ispagination"></el-switch>
</el-form-item>
<el-form-item label="是否添加check列">
<el-switch v-model="childpro.issel"></el-switch>
</el-form-item>
<el-form-item label="每页显示数量" v-if="childpro.ispagination">
<el-input-number v-model="childpro.pagesize"></el-input-number>
</el-form-item>
<el-form-item label="是否添加操作列">
<el-switch v-model="childpro.iscz"></el-switch>
</el-form-item>
</el-form>
<el-table :data="childpro.czltabledata" style="width:100%;min-height:300px;margin-top:10px" class="data-table" v-if="childpro.iscz" stripe border>
<el-table-column label="操作列">
<el-table-column fixed="right"
label="样式"
width="80">
<template slot-scope="scope">
<el-button @click="delczl(scope.$index, childpro.czltabledata)" type="danger" size="mini">删除</el-button>
</template>
</el-table-column>
<el-table-column fixed="right"
label="样式"
width="120">
<template slot-scope="scope">
<el-select v-model="scope.row.bttype" placeholder="请选择">
<el-option value="primary"></el-option>
<el-option value="success"></el-option>
<el-option value="info"></el-option>
<el-option value="danger"></el-option>
<el-option value="text"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column fixed="right"
label="操作名称"
width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.colname" placeholder="请输入名称"></el-input>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作Code(JS)">
<template slot-scope="scope">
<el-input v-model="scope.row.jscode" placeholder="请输入点击操作按钮后执行得JS代码" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
</template>
</el-table-column>
</el-table-column>
</el-table>
<el-button v-if="childpro.iscz" @click="addczl()" type="success" size="mini">添加操作列</el-button>
</div>
</el-drawer>
<el-dialog title="表格筛选" :visible.sync="dialogTableVisible" class="qfiter" center>
<el-table :data="childpro.gridData" stripe border fit>
<el-table-column label="筛选字段" min-width="120" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.qfiled" placeholder="请选择" size="mini" clearable>
<el-option v-for="item in pzoption.wdlist"
:key="item.colid"
:label="item.colname"
:value="item.colid">
</el-option>
<el-option v-for="item in pzoption.dllist"
:key="item.colid"
:label="item.colname"
:value="item.colid">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="筛选类型" min-width="120" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.cal" placeholder="请选择" size="mini" clearable>
<el-option label="包含" value="0"></el-option>
<el-option label="小于" value="1"></el-option>
<el-option label="大于" value="2"></el-option>
<el-option label="不等于" value="3"></el-option>
<el-option label="等于" value="4"></el-option>
<el-option label="在列表中(逗号隔开)" value="5"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="筛选值" min-width="120" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.qvalue" size="mini"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="100">
<template slot-scope="scope">
<el-button @click.native.prevent="delRow(scope.$index,childpro.gridData)"
type="text"
size="small">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="primary" size="mini" class="mt10 pull-right" @click="addRow">添加过滤<i class="el-icon-plus"></i></el-button>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogTableVisible = false">取 消</el-button>
<el-button type="primary" @click="confiter">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="字段筛选" :visible.sync="dialogFiledVisible" center>
<el-checkbox v-for="(filed,index) in pzoption.wdlist" :key="index" v-model="filed.ishide">{{filed.colname}}</el-checkbox>
</el-dialog>
</el-col>
</template>
<style>
.qfiter .el-table td, .qfiter .el-table th {
padding: 8px 0;
}
.el-dialog__footer {
margin-top: 30PX;
}
.tableRowClassName {
}
.qjTable .el-table td, .qjTable .el-table th {
HEIGHT: 44PX !IMPORTANT;
FONT-SIZE: 13PX;
padding: 6px 0;
}
.tabletool {
float: right;
margin-right: 10px;
color: dodgerblue;
font-size: 13PX;
}
.filter .el-input__inner {
height: 32px;
line-height: 32px;
border: 0px;
}
</style>
<script>
module.exports = {
props: ['pzoption', 'index'],
data() {
return {
datalength: "0",
dialogFormVisible: false,
dialogTableVisible: false,
dialogFiledVisible: false,
loading: true,
sear: {},
nowcell: { rowindex: "0", colindex: "0", rowspan: "1", colspan: "1" },
searitem: {
qfiled: "",
cal: "0",
qvalue: ""
},
childpro: {
gridData: [],
multipleSelection: "",
isexport: true,
czltabledata: [{ colname: "操作一", jscode: "", bttype: "primary" }],//操作列数据
ispagination: false,
iscz: false,
issel: false,
loading: false,
nowpage: 1,
pagesize: 0,
locadata: [],
czwidth: "120"
}
};
},
methods: {
sel: function (col) {
var pro = this;
pro.sear = col;
pro.searitem.qfiled = col.colid;
// pro.seardata();
},
seardata: function () {
var pro = this;
var q = pro.searitem;
if (q.qvalue) {
var tabledata = JSON.parse(sessionStorage.getItem("tabledata"));
const dv = new DataSet.View().source(tabledata);
var redata = [];
var calval = q.qvalue;
if (calval) {
switch (q.cal) {
case "0": //包含
{
dv.transform({
type: 'filter',
callback(row) { // 判断某一行是否保留，默认返回true
return row[q.qfiled].indexOf(calval) > -1;
}
});
}
break;
case "1": //小于
{
dv.transform({
type: 'filter',
callback(row) { // 判断某一行是否保留，默认返回true
return row[q.qfiled] < calval;
}
});
}
break;
case "2": //大于
{
dv.transform({
type: 'filter',
callback(row) { // 判断某一行是否保留，默认返回true
return row[q.qfiled] > calval;
}
});
}
break;
case "3": //不等于
{
dv.transform({
type: 'filter',
callback(row) { // 判断某一行是否保留，默认返回true
return row[q.qfiled] != calval;
}
});
}
break;
case "4": //等于
{
dv.transform({
type: 'filter',
callback(row) { // 判断某一行是否保留，默认返回true
return row[q.qfiled] == calval;
}
});
}
break;
case "5": //在列表中
{
dv.transform({
type: 'filter',
callback(row) { // 判断某一行是否保留，默认返回true
var bl = false;
for (var i = 0; i < calval.split(",").length; i++) {
if (row[q.qfiled].indexOf(calval.split(",")[i]) > -1) {
bl = true;
break;
}
}
return bl;
}
});
}
break;
default: {
}
}
}
redata = dv.rows;
pro.pzoption.dataset = redata;
} else {
pro.pzoption.dataset = JSON.parse(sessionStorage.getItem("tabledata"));
}
},
reset: function () {
this.searitem.qvalue = "";
// this.seardata();
},
senddata: function () {
this.pzoption.childpro = JSON.parse(JSON.stringify(this.childpro));
},
handleSelectionChange(val) {
this.childpro.multipleSelection = val;
},
addczl: function () {
this.childpro.czltabledata.push({ colname: "操作" + this.childpro.czltabledata.length, jscode: "", bttype: "primary" });
},
delczl: function (index, rows) {
rows.splice(index, 1);
},
initpagedata: function (datalen) {
this.childpro.pagecount = datalen;
},
handleCurrentChange: function (val) {
var chi = this;
chi.childpro.nowpage = val;
chi.pzoption.childpro.nowpage = val;
chi.$root.UpdateYBData(chi.pzoption);
},
tableRowClassName({ row, rowIndex }) {
//把每一行的索引放进row
row.index = rowIndex;
},
addRow: function () {
var chi = this;
if (typeof (chi.childpro.gridData) == "undefined") {
chi.childpro.gridData = [];
}
chi.childpro.gridData.push({
qfiled: '',
qftype: '',
cal: '0',
qvalue: ''
});
},
delRow: function (index, rows) {
rows.splice(index, 1);
},
confiter: function () {
var chi = this;
if (_.findIndex(chi.childpro.gridData, function (o) { return !o.qvalue; }) > -1) {
this.$notify.error({
title: '错误',
message: '过滤值不能为空'
});
} else {
chi.dialogTableVisible = false;
if (chi.childpro.gridData.length > 0) {
var tabledata = JSON.parse(sessionStorage.getItem("tabledata"));
const dv = new DataSet.View().source(tabledata);
var redata = [];
_.forEach(chi.childpro.gridData, function (q) {
var calval = q.qvalue;
if (calval) {
switch (q.cal) {
case "0": //包含
{
dv.transform({
type: 'filter',
callback(row) { // 判断某一行是否保留，默认返回true
return row[q.qfiled].indexOf(calval) > -1;
}
});
}
break;
case "1": //小于
{
dv.transform({
type: 'filter',
callback(row) { // 判断某一行是否保留，默认返回true
return row[q.qfiled] < calval;
}
});
}
break;
case "2": //大于
{
dv.transform({
type: 'filter',
callback(row) { // 判断某一行是否保留，默认返回true
return row[q.qfiled] > calval;
}
});
}
break;
case "3": //不等于
{
dv.transform({
type: 'filter',
callback(row) { // 判断某一行是否保留，默认返回true
return row[q.qfiled] != calval;
}
});
}
break;
case "4": //等于
{
dv.transform({
type: 'filter',
callback(row) { // 判断某一行是否保留，默认返回true
return row[q.qfiled] == calval;
}
});
}
break;
case "5": //在列表中
{
dv.transform({
type: 'filter',
callback(row) { // 判断某一行是否保留，默认返回true
var bl = false;
for (var i = 0; i < calval.split(",").length; i++) {
if (row[q.qfiled].indexOf(calval.split(",")[i]) > -1) {
bl = true;
break;
}
}
return bl;
}
});
}
break;
default: {
}
}
}
})
redata = dv.rows;
chi.pzoption.dataset = redata;
} else {
chi.pzoption.dataset = JSON.parse(sessionStorage.getItem("tabledata"));
}
}
},
confiled: function myfunction() {
var chi = this;
chi.dialogFiledVisible = false;
},
mangcol: function (rowdata, coldata) {
try {
let jscode = coldata.jscode;
let func = new Function('rowdata', jscode);
func(rowdata)
} catch (e) {
app.$notify({
title: '成功',
message: '解析JS代码有误',
type: 'success'
});
}
},
mang: function (val, col) {
var ysval = val;
_.forEach(col.mapdata, function (obj) {
if (val == obj.val) {
ysval = obj.ysval;
}
})
return ysval;
},
delWid: function (wigdetcode) {
this.$root.nowwidget = { rules: { required: false, message: '请填写信息', trigger: 'blur' } };
_.remove(this.$root.FormData.wigetitems, function (obj) {
return obj.wigdetcode == wigdetcode;
});
},
exportxls: function () {
var title = [];
_.forEach(this.pzoption.wdlist, function (obj) {
title.push({ "value": obj.colname, "type": "ROW_HEADER_HEADER", "datatype": "string", "colid": obj.colid })
})
_.forEach(this.pzoption.dllist, function (obj) {
title.push({ "value": obj.colname, "type": "ROW_HEADER_HEADER", "datatype": "string", "colid": obj.colid })
})
this.JSONToExcelConvertor(this.pzoption.dataset, this.pzoption.title + ComFunJS.getnowdate('yyyy-mm-dd'), title);
},
JSONToExcelConvertor: function (JSONData, FileName, ShowLabel) {
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var excel = '<table>';
//设置表头
var row = "<tr>";
for (var i = 0, l = ShowLabel.length; i < l; i++) {
//解决身份证问题
row += '<td style="' + "mso-number-format:'\@';\"" + ">" + ShowLabel[i].value + '</td>';
}
//换行
excel += row + "</tr>";
//设置数据
for (var i = 0; i < arrData.length; i++) {
var row = "<tr>";
for (var j = 0; j < ShowLabel.length; j++) {
//解决身份证问题
var value = arrData[i][ShowLabel[j].colid];
row += '<td style="' + "mso-number-format:'\@';\"" + ">\t" + value + "</td>";
}
excel += row + "</tr>";
}
excel += "</table>";
var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
excelFile += '; charset=UTF-8">';
excelFile += "<head>";
excelFile += "<!--[if gte mso 9]>";
excelFile += "<xml>";
excelFile += "<x:ExcelWorkbook>";
excelFile += "<x:ExcelWorksheets>";
excelFile += "<x:ExcelWorksheet>";
excelFile += "<x:Name>";
excelFile += "{worksheet}";
excelFile += "</x:Name>";
excelFile += "<x:WorksheetOptions>";
excelFile += "<x:DisplayGridlines/>";
excelFile += "</x:WorksheetOptions>";
excelFile += "</x:ExcelWorksheet>";
excelFile += "</x:ExcelWorksheets>";
excelFile += "</x:ExcelWorkbook>";
excelFile += "</xml>";
excelFile += "<![endif]-->";
excelFile += "</head>";
excelFile += "<body>";
excelFile += excel;
excelFile += "</body>";
excelFile += "</html>";
var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = FileName + ".xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
objectSpanMethod: function ({ row, column, rowIndex, columnIndex }) {
if (column.hasOwnProperty("label")) {
try {
var temparr = [];
temparr = _.concat(temparr, this.pzoption.wdlist, this.pzoption.dllist);
var temp = _.find(temparr, function (obj) {
return obj.colname == column.label
}).hbdata;
var hbs = temp.split(",");
for (var i = 0; i < hbs.length; i++) {
var hb = hbs[i].split('-');
if (columnIndex == hb[0]) {
if (rowIndex == hb[1]) {
return {
rowspan: hb[2],
colspan: 1
};
}
var tempar = [];
for (var m = 1; m < hb[2] * 1; m++) {
tempar.push(hb[1] * 1 + m);
}
if (tempar.indexOf(rowIndex) > -1) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
} catch (e) {
}
}
},
getSummaries: function (param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
var temparr = [];
temparr = _.concat(temparr, this.pzoption.wdlist, this.pzoption.dllist);
var col = _.find(temparr, function (obj) {
return obj.colname == column.label && obj.ishj == true;
})
if (col) {
var temphj = 0;
_.forEach(data, function (obj) {
if (obj[col.colid]) {
temphj = temphj * 1 + obj[col.colid] * 1;
}
})
sums[index] = temphj;
} else {
sums[index] = "";
}
});
return sums;
},
widchange: function (newWidth, oldWidth, column, event) {
var pro = this;
_.forEach(this.$root.FormData.wigetitems, function (wiget) {
var temp = {};
if (wiget.wigdetcode == pro.pzoption.wigdetcode) {
_.forEach(wiget.wdlist, function (col) {
if (column.label == col.colname) {
col.width = newWidth;
}
})
_.forEach(wiget.dllist, function (col) {
if (column.label == col.colname) {
col.width = newWidth;
}
})
if (column.label == "操作列") {
pro.childpro.czwidth = newWidth;
}
}
})
}
},
watch: {
childpro: { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
// this.senddata();
},
deep: true
},
'pzoption.dataset': { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
if (newV) {
this.datalength = newV.length;
if (this.childpro.gridData.length == 0 && !this.searitem.qvalue) {
sessionStorage.setItem("tabledata", JSON.stringify(newV))
}
}
},
deep: true
},
'childpro.ispagination': { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
if (newV) {
this.childpro.pagesize = 20;
} else {
this.childpro.pagesize = 0;
}
},
deep: true
},
'pzoption.wdlist': { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
if (newV) {
localStorage.setItem(this.pzoption.wigdetcode + "fileddata", JSON.stringify(this.pzoption.wdlist));
}
},
deep: true
},
'searitem': {
handler(newV, oldV) {
if (newV) {
// debugger;
var s = newV;
this.seardata();
}
},
deep: true
}
},
mounted: function () {
var chi = this;
chi.$nextTick(function () {
if (chi.$root.addchildwig) {
chi.$root.addchildwig();//不能缺少
}
if (chi.pzoption.childpro.nowpage) {
//检测新增属性
_.forIn(chi.childpro, function (value, key) {
if (!_.has(chi.pzoption.childpro, key)) {
chi.pzoption.childpro[key] = value;
}
});
chi.childpro = chi.pzoption.childpro;
if (localStorage.getItem(chi.pzoption.wigdetcode + "fileddata")) {
chi.pzoption.wdlist = JSON.parse(localStorage.getItem(chi.pzoption.wigdetcode + "fileddata"))
}
} else {
chi.pzoption.childpro = chi.childpro;
if (chi.pzoption.datatype == '2') {
chi.pzoption.staticdata = JSON.stringify([
{ '月份': '一月', '用户量': 1393, '应用数量': 1093, '点击量': 2093 },
{ '月份': '二月', '用户量': 3530, '应用数量': 3230, '点击量': 1230 },
{ '月份': '三月', '用户量': 2923, '应用数量': 2623, '点击量': 1623 },
{ '月份': '四月', '用户量': 1723, '应用数量': 1423, '点击量': 2423 }
])
chi.$root.jxfiled(chi.pzoption)
chi.$root.addwd("月份", chi.pzoption);
chi.$root.addwd("用户量", chi.pzoption);
chi.$root.addwd("应用数量", chi.pzoption);
chi.$root.addwd("点击量", chi.pzoption);
}
chi.pzoption.wigheight = 438;
chi.$root.UpdateYBData(chi.pzoption);
}
if (chi.pzoption.wdlist.length > 0) {
chi.sear = chi.pzoption.wdlist[0];
chi.searitem.qfiled = chi.sear.colid;
}
})
}
};
</script>

56
iMES.WebApi/wwwroot/BiManage/AppPage/DATABI/vue/qjLine.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<el-col :sm="24" :md="pzoption.mdwidth">
<i class="iconfont icon-shanchu pull-right widgetdel hidden-print" @click.stop="delWid(pzoption.wigdetcode)"></i>
<div class="Ui_Ct_Line padding10">
<div v-text="pzoption.title"></div>
</div>
</el-col>
</template>
<style>
.Ui_Ct_Line {
-ms-flex-align: center !important;
align-items: center !important;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.Ui_Ct_Line > * {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
display: block;
min-height: 1px;
padding: 0 20px;
}
.Ui_Ct_Line::before, .Ui_Ct_Line::after {
content: ' ';
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
display: block;
position: relative;
width: 100%;
min-height: 1px;
background-color: #CBCBCB;
}
</style>
<script>
module.exports = {
props: ['pzoption', 'index'],
methods: {
delWid: function (wigdetcode) {
// 子组件中触发父组件方法ee并传值cc12345
this.$root.nowwidget = { };
_.remove(this.$root.FormData.wigetitems, function (obj) {
return obj.wigdetcode == wigdetcode;
});
}
}
};
</script>

214
iMES.WebApi/wwwroot/BiManage/AppPage/DATABI/vue/qjTab.vue Normal file
View File

@@ -0,0 +1,214 @@
<template>
<el-col :sm="24" :md="pzoption.mdwidth">
<i class="iconfont icon-shezhi pull-right widgetset hidden-print" @click.stop="showdig()"></i>
<i class="iconfont icon-shanchu pull-right widgetdel hidden-print" @click.stop="delWid(pzoption.wigdetcode)"></i>
<el-tabs :type="childpro.tabtype" style="margin-top:10px" v-model="childpro.TabsValue">
<el-tab-pane v-for="(item, index) in childpro.Tabs" :key="item.name" :label="item.title" :name="item.name" style="min-height:200px"></el-tab-pane>
</el-tabs>
<el-dialog title="组件属性" :visible.sync="dialogInputVisible">
<el-form>
<el-form-item label="Tab样式">
<el-radio v-model="childpro.tabtype" label="">样式一</el-radio>
<el-radio v-model="childpro.tabtype" label="card">样式二</el-radio>
<el-radio v-model="childpro.tabtype" label="border-card">样式三</el-radio>
</el-form-item>
</el-form>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>页面组件(点击下面组件加入到对应Tab中去)</span>
</div>
<div class="item">
<el-row>
<el-button v-for="(item, index) in tempwigs" size="small" @click="totab(item)" style="margin-top:10px">{{item.wigdetcode}}{{item.title}}</el-button>
</el-row>
</div>
</el-card>
<el-button size="small" @click="addTab(childpro.TabsValue)" style="margin-top:10px;display:none">
添加Table
</el-button>
<el-tabs :type="childpro.tabtype" v-model="childpro.TabsValue" style="margin-top:10px" closable @tab-remove="removeTab">
<el-tab-pane v-for="(item, index) in childpro.Tabs" :key="item.name" :label="item.title" :name="item.name" style="min-height:200px">
<el-form>
<el-form-item label="Tab名称">
<el-input v-model="item.title" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<el-row style="margin-top:10px">
<el-button v-for="(el, elindex) in item.content" size="small" @click="towigs(el,elindex)">{{el.wigdetcode}}{{el.title}}</el-button>
</el-row>
</el-tab-pane>
</el-tabs>
<!--<span slot="footer" class="dialog-footer">
<el-button @click="dialogInputVisible = false">取 消</el-button>
<el-button type="primary" @click="qd()">确 定</el-button>
</span>-->
</el-dialog>
</el-col>
</template>
<script>
module.exports = {
props: ['pzoption', 'index'],
data: function () {
return {
dialogInputVisible: false,
iscontrols: false,
tempwigs: [],
childpro: {
placeholder: "区域一",
disabled: false,
height: [200, 200, 200],
tabIndex: 2,
tabtype: "border-card",
TabsValue: '1',
Tabs: [{
title: '标签一',
name: '1',
content: []
}, {
title: '标签二',
name: '2',
content: []
}, {
title: '标签三',
name: '3',
content: []
}]
}
}
},
methods: {
delWid: function (wigdetcode) {
// 子组件中触发父组件方法ee并传值cc12345
this.$root.nowwidget = {};
_.remove(this.$root.FormData.wigetitems, function (obj) {
return obj.wigdetcode == wigdetcode;
});
},
totab: function (item) {
var acttabname = this.childpro.TabsValue;
this.childpro.Tabs.forEach((tab, index) => {
_.remove(tab.content, function (obj) {
return obj.wigdetcode == item.wigdetcode;
});
});//先删除原有的
this.childpro.Tabs.forEach((tab, index) => {
if (tab.name === acttabname) {
tab.content.push(item);
}
});//再添加
},
towigs: function (item, elindex) {
debugger;
var cho = this;
var acttabname = cho.childpro.TabsValue;
cho.childpro.Tabs.forEach((tab, index) => {
if (tab.name === acttabname) {
tab.content.splice(elindex, 1);
}
});
},
qd: function () {
},
showdig: function () {
this.dialogInputVisible = true;
var cho = this;
cho.tempwigs = [];
//this.tempwigs = tabs.filter(tab => tab.name !== targetName);
_.forEach(this.$root.FormData.wigetitems, function (wig) {
if (wig.component != "qjTab") {
cho.tempwigs.push({ title: wig.title, wigdetcode: wig.wigdetcode });
}
});
},
senddata: function () {
this.pzoption.childpro = JSON.parse(JSON.stringify(this.childpro));
},
addTab(targetName) {
let newTabName = ++this.childpro.tabIndex + '';
this.childpro.Tabs.push({
title: 'NewTab',
name: newTabName,
content: []
});
this.childpro.TabsValue = newTabName;
},
removeTab(targetName) {
this.$confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let tabs = this.childpro.Tabs;
let activeName = this.childpro.TabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.childpro.TabsValue = activeName;
this.childpro.Tabs = tabs.filter(tab => tab.name !== targetName);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
mounted: function () {
var pro = this;
pro.$nextTick(function () {
if (pro.$root.addchildwig) {
pro.$root.addchildwig();//不能缺少,dom加载完成
}
if (pro.pzoption.childpro.TabsValue) {
pro.childpro = pro.pzoption.childpro;
} else {
pro.pzoption.childpro = pro.childpro;
pro.pzoption.mdwidth = 24;
pro.senddata();
}
})
},
watch: {
childpro: { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
this.senddata();
},
deep: true
},
'childpro.TabsValue': {
handler(newV, oldV) {
var pro = this;
if (newV) {
//切换得时候需要重新渲染图
_.forEach(pro.childpro.Tabs[newV - 1].content, function (wig) {
if (_.startsWith(wig.wigdetcode, "qjChart") > -1) {
pro.$root.UpdateYBData(pro.$root.getwiget(wig.wigdetcode))
}
});
}
},
deep: true
}
}
};
</script>