大屏 图层
qianlishi
3 years ago
parent
4fda028a29
commit
13b17e3b6e
@ -1,193 +1,213 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-form label-width="80px"
|
<el-form label-width="80px" label-position="left">
|
||||||
label-position="left">
|
|
||||||
<el-form-item label="数据集">
|
<el-form-item label="数据集">
|
||||||
<el-select v-model="dataSetValue"
|
<el-select
|
||||||
clearable
|
size="mini"
|
||||||
placeholder="请选择"
|
v-model="dataSetValue"
|
||||||
@change="selectDataSet">
|
clearable
|
||||||
<el-option v-for="item in dataSet"
|
placeholder="请选择"
|
||||||
:key="item.code"
|
@change="selectDataSet"
|
||||||
:label="item.setName"
|
>
|
||||||
:value="item.id" />
|
<el-option
|
||||||
|
v-for="item in dataSet"
|
||||||
|
:key="item.code"
|
||||||
|
:label="item.setName"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-for="(item, index) in userNameList"
|
<el-form-item
|
||||||
:key="index"
|
v-for="(item, index) in userNameList"
|
||||||
:label="item.paramName">
|
:key="index"
|
||||||
<el-input v-model="item.sampleItem" />
|
:label="item.paramName"
|
||||||
|
>
|
||||||
|
<el-input v-model="item.sampleItem" size="mini" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-for="item in setParamList"
|
<el-form-item v-for="item in setParamList" :key="item" :label="item">
|
||||||
:key="item"
|
<Dictionary
|
||||||
:label="item">
|
v-model="params"
|
||||||
<Dictionary v-model="params"
|
:dict-key="'CHART_PROPERTIES'"
|
||||||
:dict-key="'CHART_PROPERTIES'"
|
@input="selectParams($event, item)"
|
||||||
@input="selectParams($event, item)" />
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-button style="width: 100%"
|
<el-button
|
||||||
type="primary"
|
style="width: 100%"
|
||||||
plain
|
type="primary"
|
||||||
@click="saveDataBtn">刷新</el-button>
|
plain
|
||||||
|
size="mini"
|
||||||
|
@click="saveDataBtn"
|
||||||
|
>刷新</el-button
|
||||||
|
>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { queryAllDataSet, detailBysetId, getData } from '@/api/bigscreen'
|
import { queryAllDataSet, detailBysetId, getData } from "@/api/bigscreen";
|
||||||
import Dictionary from '@/components/Dictionary/index'
|
import Dictionary from "@/components/Dictionary/index";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DynamicComponents',
|
name: "DynamicComponents",
|
||||||
components: {
|
components: {
|
||||||
Dictionary,
|
Dictionary
|
||||||
},
|
},
|
||||||
model: {
|
model: {
|
||||||
prop: 'formData',
|
prop: "formData",
|
||||||
event: 'input',
|
event: "input"
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
chartType: String,
|
chartType: String,
|
||||||
props: ['formData'],
|
props: ["formData"]
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
dataSetValue: '',
|
dataSetValue: "",
|
||||||
dataSet: [], // 数据集
|
dataSet: [], // 数据集
|
||||||
userNameList: [], // 用户
|
userNameList: [], // 用户
|
||||||
setParamList: [], // 对应的不同的图形数据参数
|
setParamList: [], // 对应的不同的图形数据参数
|
||||||
params: {},
|
params: {},
|
||||||
chartProperties: {},
|
chartProperties: {}
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
setCode () {
|
setCode() {
|
||||||
let code = ''
|
let code = "";
|
||||||
this.dataSet.forEach((el) => {
|
this.dataSet.forEach(el => {
|
||||||
if (el.id == this.dataSetValue) {
|
if (el.id == this.dataSetValue) {
|
||||||
code = el.setCode
|
code = el.setCode;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
return code
|
return code;
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.loadDataSet()
|
this.loadDataSet();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async loadDataSet () {
|
async loadDataSet() {
|
||||||
const { code, data } = await queryAllDataSet()
|
const { code, data } = await queryAllDataSet();
|
||||||
this.dataSet = data
|
this.dataSet = data;
|
||||||
if (code != '200') return
|
if (code != "200") return;
|
||||||
},
|
},
|
||||||
async selectDataSet () {
|
async selectDataSet() {
|
||||||
const { code, data } = await detailBysetId(this.dataSetValue)
|
const { code, data } = await detailBysetId(this.dataSetValue);
|
||||||
this.userNameList = data.dataSetParamDtoList
|
this.userNameList = data.dataSetParamDtoList;
|
||||||
this.setParamList = data.setParamList
|
this.setParamList = data.setParamList;
|
||||||
if (code != '200') return
|
if (code != "200") return;
|
||||||
},
|
},
|
||||||
async saveDataBtn () {
|
async saveDataBtn() {
|
||||||
const contextData = {}
|
const contextData = {};
|
||||||
for (let i = 0; i < this.userNameList.length; i++) {
|
for (let i = 0; i < this.userNameList.length; i++) {
|
||||||
contextData[this.userNameList[i].paramName] = this.userNameList[i].sampleItem
|
contextData[this.userNameList[i].paramName] = this.userNameList[
|
||||||
|
i
|
||||||
|
].sampleItem;
|
||||||
}
|
}
|
||||||
const params = {
|
const params = {
|
||||||
chartType: this.chartType,
|
chartType: this.chartType,
|
||||||
setCode: this.setCode,
|
setCode: this.setCode,
|
||||||
chartProperties: this.chartProperties,
|
chartProperties: this.chartProperties,
|
||||||
contextData,
|
contextData
|
||||||
}
|
};
|
||||||
const { code, data } = await getData(params)
|
const { code, data } = await getData(params);
|
||||||
const analysisData = this.analysisChartsData(data)
|
const analysisData = this.analysisChartsData(data);
|
||||||
console.log(analysisData)
|
console.log(analysisData);
|
||||||
this.$emit('input', analysisData)
|
this.$emit("input", analysisData);
|
||||||
if (code != '200') return
|
if (code != "200") return;
|
||||||
},
|
},
|
||||||
selectParams (val, key) {
|
selectParams(val, key) {
|
||||||
this.chartProperties[key] = val
|
this.chartProperties[key] = val;
|
||||||
},
|
},
|
||||||
// 解析不同图标的数据
|
// 解析不同图标的数据
|
||||||
analysisChartsData (data) {
|
analysisChartsData(data) {
|
||||||
// widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图、widget-piechart 饼图、widget-hollow-piechart 空心饼图
|
// widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图、widget-piechart 饼图、widget-hollow-piechart 空心饼图
|
||||||
// widget-funnel 漏斗图 widget-gauge 仪表盘
|
// widget-funnel 漏斗图 widget-gauge 仪表盘
|
||||||
const chartType = this.chartType
|
const chartType = this.chartType;
|
||||||
if (chartType == 'widget-barchart' || chartType == 'widget-linechart' || chartType == 'widget-barlinechart') {
|
if (
|
||||||
return this.barOrLineChartFn(data)
|
chartType == "widget-barchart" ||
|
||||||
} else if (chartType == 'widget-piechart' || chartType == 'widget-hollow-piechart' || chartType == 'widget-funnel') {
|
chartType == "widget-linechart" ||
|
||||||
return this.piechartFn(data)
|
chartType == "widget-barlinechart"
|
||||||
} else if (chartType == 'widget-gauge') {
|
) {
|
||||||
return this.gaugeFn(data)
|
return this.barOrLineChartFn(data);
|
||||||
|
} else if (
|
||||||
|
chartType == "widget-piechart" ||
|
||||||
|
chartType == "widget-hollow-piechart" ||
|
||||||
|
chartType == "widget-funnel"
|
||||||
|
) {
|
||||||
|
return this.piechartFn(data);
|
||||||
|
} else if (chartType == "widget-gauge") {
|
||||||
|
return this.gaugeFn(data);
|
||||||
} else {
|
} else {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 柱状图、折线图、折柱图
|
// 柱状图、折线图、折柱图
|
||||||
barOrLineChartFn (data) {
|
barOrLineChartFn(data) {
|
||||||
const ananysicData = {}
|
const ananysicData = {};
|
||||||
const xAxisList = []
|
const xAxisList = [];
|
||||||
const series = []
|
const series = [];
|
||||||
for (const key in this.chartProperties) {
|
for (const key in this.chartProperties) {
|
||||||
const obj = {}
|
const obj = {};
|
||||||
const seriesData = []
|
const seriesData = [];
|
||||||
const value = this.chartProperties[key]
|
const value = this.chartProperties[key];
|
||||||
obj['type'] = value
|
obj["type"] = value;
|
||||||
for (let i = 0; i < data.length; i++) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
if (value.startsWith('xAxis')) {
|
if (value.startsWith("xAxis")) {
|
||||||
// 代表为x轴
|
// 代表为x轴
|
||||||
xAxisList[i] = data[i][key]
|
xAxisList[i] = data[i][key];
|
||||||
} else {
|
} else {
|
||||||
// 其他的均为series展示数据
|
// 其他的均为series展示数据
|
||||||
seriesData[i] = data[i][key]
|
seriesData[i] = data[i][key];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
obj['data'] = seriesData
|
obj["data"] = seriesData;
|
||||||
if (!obj['type'].startsWith('xAxis')) {
|
if (!obj["type"].startsWith("xAxis")) {
|
||||||
series.push(obj)
|
series.push(obj);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ananysicData['xAxis'] = xAxisList
|
ananysicData["xAxis"] = xAxisList;
|
||||||
ananysicData['series'] = series
|
ananysicData["series"] = series;
|
||||||
// console.log(ananysicData, '结果数据')
|
// console.log(ananysicData, '结果数据')
|
||||||
return ananysicData
|
return ananysicData;
|
||||||
},
|
},
|
||||||
|
|
||||||
// 饼图或者空心饼图或者漏斗图
|
// 饼图或者空心饼图或者漏斗图
|
||||||
piechartFn (data) {
|
piechartFn(data) {
|
||||||
const ananysicData = []
|
const ananysicData = [];
|
||||||
for (let i = 0; i < data.length; i++) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
const obj = {}
|
const obj = {};
|
||||||
for (const key in this.chartProperties) {
|
for (const key in this.chartProperties) {
|
||||||
const value = this.chartProperties[key]
|
const value = this.chartProperties[key];
|
||||||
if (value === 'name') {
|
if (value === "name") {
|
||||||
obj['name'] = data[i][key]
|
obj["name"] = data[i][key];
|
||||||
} else {
|
} else {
|
||||||
obj['value'] = data[i][key]
|
obj["value"] = data[i][key];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ananysicData.push(obj)
|
ananysicData.push(obj);
|
||||||
}
|
}
|
||||||
// console.log(ananysicData, '结果数据')
|
// console.log(ananysicData, '结果数据')
|
||||||
return ananysicData
|
return ananysicData;
|
||||||
},
|
},
|
||||||
gaugeFn (data) {
|
gaugeFn(data) {
|
||||||
const ananysicData = []
|
const ananysicData = [];
|
||||||
for (let i = 0; i < data.length; i++) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
const obj = {}
|
const obj = {};
|
||||||
for (const key in this.chartProperties) {
|
for (const key in this.chartProperties) {
|
||||||
const value = this.chartProperties[key]
|
const value = this.chartProperties[key];
|
||||||
if (value === 'name') {
|
if (value === "name") {
|
||||||
obj['name'] = data[i][key]
|
obj["name"] = data[i][key];
|
||||||
} else {
|
} else {
|
||||||
obj['value'] = data[i][key]
|
obj["value"] = data[i][key];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!obj['unit']) {
|
if (!obj["unit"]) {
|
||||||
obj['unit'] = '%'
|
obj["unit"] = "%";
|
||||||
}
|
}
|
||||||
ananysicData.push(obj)
|
ananysicData.push(obj);
|
||||||
}
|
}
|
||||||
// console.log(ananysicData, '结果数据')
|
// console.log(ananysicData, '结果数据')
|
||||||
return ananysicData[0]
|
return ananysicData[0];
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="sass" scoped></style>
|
<style lang="sass" scoped></style>
|
||||||
|
|||||||
Loading…
Reference in New Issue