ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'gitee/master' into gitee-master

Browse Source
Raod 3 years ago
parent e84351fa1c 515e87583f
commit 3973da31ee
5 changed files with 164 additions and 139 deletions
Show Stats Download Patch File Download Diff File

101
report-ui/src/mixins/queryform.js
Unescape Escape View File

@ -1,4 +1,5 @@
import miment from 'miment'
import {getData} from '@/api/bigscreen'
export default {
data() {
return {
@ -52,7 +53,7 @@ export default {
// disabledDate(time){
// return time.getTime() > Date.now()
// }
}
},
}
},
computed: {
@ -91,6 +92,104 @@ export default {
},
handlerInputchange(val){
this.parseParamsBySelectInput(this.selectInput.keyname, val)
},
// 查询echarts 数据
queryEchartsData(params) {
return new Promise(async(resolve) => {
const { code, data } = await getData(params);
if(code != 200) return
const analysisData = this.analysisChartsData(params, data);
resolve(analysisData)
})
},
// 解析不同图标的数据
analysisChartsData(params, data) {
// widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图、widget-piechart 饼图、widget-hollow-piechart 空心饼图
// widget-funnel 漏斗图 widget-gauge 仪表盘
const chartType = params.chartType
if (
chartType == "widget-barchart" ||
chartType == "widget-linechart" ||
chartType == "widget-barlinechart"
) {
return this.barOrLineChartFn(params.chartProperties, data);
} else if (
chartType == "widget-piechart" ||
chartType == "widget-hollow-piechart" ||
chartType == "widget-funnel"
) {
return this.piechartFn(params.chartProperties, data);
} else if (chartType == "widget-gauge") {
return this.gaugeFn(params.chartProperties, data);
} else {
}
},
// 柱状图、折线图、折柱图
barOrLineChartFn(chartProperties, data) {
const ananysicData = {};
const xAxisList = [];
const series = [];
for (const key in chartProperties) {
const obj = {};
const seriesData = [];
const value = chartProperties[key];
obj["type"] = value;
for (let i = 0; i < data.length; i++) {
if (value.startsWith("xAxis")) {
// 代表为x轴
xAxisList[i] = data[i][key];
} else {
// 其他的均为series展示数据
seriesData[i] = data[i][key];
}
}
obj["data"] = seriesData;
if (!obj["type"].startsWith("xAxis")) {
series.push(obj);
}
}
ananysicData["xAxis"] = xAxisList;
ananysicData["series"] = series;
// console.log(ananysicData, '结果数据')
return ananysicData;
},
// 饼图或者空心饼图或者漏斗图
piechartFn(chartProperties, data) {
const ananysicData = [];
for (let i = 0; i < data.length; i++) {
const obj = {};
for (const key in chartProperties) {
const value = chartProperties[key];
if (value === "name") {
obj["name"] = data[i][key];
} else {
obj["value"] = data[i][key];
}
}
ananysicData.push(obj);
}
// console.log(ananysicData, '结果数据')
return ananysicData;
},
gaugeFn(chartProperties, data) {
const ananysicData = [];
for (let i = 0; i < data.length; i++) {
const obj = {};
for (const key in chartProperties) {
const value = chartProperties[key];
if (value === "name") {
obj["name"] = data[i][key];
} else {
obj["value"] = data[i][key];
}
}
if (!obj["unit"]) {
obj["unit"] = "%";
}
ananysicData.push(obj);
}
// console.log(ananysicData, '结果数据')
return ananysicData[0];
}
},
watch: {

100
report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<template>
<div>
<el-form label-width="80px" label-position="left">
<el-form label-width="100px" label-position="left">
<el-form-item label="数据集">
<el-select
size="mini"
@ -43,7 +43,7 @@
</div>
</template>
<script>
import { queryAllDataSet, detailBysetId, getData } from "@/api/bigscreen";
import { queryAllDataSet, detailBysetId } from "@/api/bigscreen";
import Dictionary from "@/components/Dictionary/index";
export default {
@ -108,105 +108,11 @@ export default {
chartProperties: this.chartProperties,
contextData
};
console.log(params);
const { code, data } = await getData(params);
const analysisData = this.analysisChartsData(data);
console.log(analysisData);
this.$emit("input", analysisData);
this.$emit("input", params);
this.$emit("change", params);
if (code != "200") return;
},
selectParams(val, key) {
this.chartProperties[key] = val;
},
// 解析不同图标的数据
analysisChartsData(data) {
// widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图、widget-piechart 饼图、widget-hollow-piechart 空心饼图
// widget-funnel 漏斗图 widget-gauge 仪表盘
const chartType = this.chartType;
if (
chartType == "widget-barchart" ||
chartType == "widget-linechart" ||
chartType == "widget-barlinechart"
) {
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 {
}
},
// 柱状图、折线图、折柱图
barOrLineChartFn(data) {
const ananysicData = {};
const xAxisList = [];
const series = [];
for (const key in this.chartProperties) {
const obj = {};
const seriesData = [];
const value = this.chartProperties[key];
obj["type"] = value;
for (let i = 0; i < data.length; i++) {
if (value.startsWith("xAxis")) {
// 代表为x轴
xAxisList[i] = data[i][key];
} else {
// 其他的均为series展示数据
seriesData[i] = data[i][key];
}
}
obj["data"] = seriesData;
if (!obj["type"].startsWith("xAxis")) {
series.push(obj);
}
}
ananysicData["xAxis"] = xAxisList;
ananysicData["series"] = series;
// console.log(ananysicData, '结果数据')
return ananysicData;
},
// 饼图或者空心饼图或者漏斗图
piechartFn(data) {
const ananysicData = [];
for (let i = 0; i < data.length; i++) {
const obj = {};
for (const key in this.chartProperties) {
const value = this.chartProperties[key];
if (value === "name") {
obj["name"] = data[i][key];
} else {
obj["value"] = data[i][key];
}
}
ananysicData.push(obj);
}
// console.log(ananysicData, '结果数据')
return ananysicData;
},
gaugeFn(data) {
const ananysicData = [];
for (let i = 0; i < data.length; i++) {
const obj = {};
for (const key in this.chartProperties) {
const value = this.chartProperties[key];
if (value === "name") {
obj["name"] = data[i][key];
} else {
obj["value"] = data[i][key];
}
}
if (!obj["unit"]) {
obj["unit"] = "%";
}
ananysicData.push(obj);
}
// console.log(ananysicData, '结果数据')
return ananysicData[0];
}
}
};

10
report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
Unescape Escape View File

@ -6,7 +6,7 @@
!-->
<template>
<div class="collapse-input-style">
<el-form label-width="80px" label-position="left">
<el-form label-width="100px" label-position="left">
<template v-for="(item, index) in options">
<div v-if="isShowForm(item, '[object Object]')" :key="index">
<el-form-item
@ -123,13 +123,15 @@
<!-- :options="optionsJavascript"-->
<!-- style="height: 190px"-->
<!-- />-->
<vue-json-editor v-model="formData[item.name]"
<vue-json-editor
v-model="formData[item.name]"
:show-btns="false"
:mode="'code'"
lang="zh"
class="my-editor"
@json-change="onJsonChange"
@json-save="onJsonSave" />
@json-save="onJsonSave"
/>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisibleStaticData = false"
>取 消</el-button
@ -263,7 +265,7 @@
<script>
import ColorPicker from "./colorPicker.vue";
import vueJsonEditor from 'vue-json-editor'
import vueJsonEditor from "vue-json-editor";
import "codemirror/lib/codemirror.css"; // 核心样式
import "codemirror/theme/cobalt.css"; // 引入主题后还需要在 options 中指定主题才会生效
// language

4
report-ui/src/views/report/bigscreen/designer/tools.js
Unescape Escape View File

@ -1481,11 +1481,11 @@ const widgetTools = [
},
{
type: 'el-input-number',
label: '刷新时间(秒)',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 30
value: 5000
},
{
type: 'el-button',

32
report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
Unescape Escape View File

@ -1,7 +1,6 @@
<template>
<div :style="styleObj">
<v-chart :options="options"
autoresize />
<v-chart :options="options" autoresize />
</div>
</template>
@ -55,7 +54,8 @@ export default {
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsSetup: {}
optionsSetup: {},
flagInter: null
};
},
computed: {
@ -73,7 +73,6 @@ export default {
watch: {
value: {
handler(val) {
console.log(val);
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.setup;
@ -289,12 +288,15 @@ export default {
// 数据解析
setOptionsData() {
const optionsSetup = this.optionsSetup;
console.log(optionsSetup);
const optionsData = this.optionsData; // 数据类型 静态 or 动态
console.log(optionsData);
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(optionsData.dynamicData, optionsSetup);
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
},
// 静态数据
staticDataFn(val, optionsSetup) {
@ -320,8 +322,24 @@ export default {
}
},
// 动态数据
dynamicDataFn (val, optionsSetup) {
dynamicDataFn(val, refreshTime, optionsSetup) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val, optionsSetup);
this.flagInter = setInterval(() => {
this.getEchartData(val, optionsSetup);
}, refreshTime);
} else {
this.getEchartData(val, optionsSetup);
}
},
getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(optionsSetup, res);
});
},
renderingFn(optionsSetup, val) {
// x轴
if (optionsSetup.verticalShow) {
this.options.xAxis.data = [];

Write Preview
Loading…
Cancel
Save