diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js index 3eb437ef..8a27114f 100644 --- a/report-ui/src/mixins/queryform.js +++ b/report-ui/src/mixins/queryform.js @@ -124,7 +124,7 @@ export default { } else if (chartType == "widget-gauge") { return this.gaugeFn(params.chartProperties, data); } else if (chartType == "widget-text") { - return this.text(params.chartProperties, data) + return this.widgettext(params.chartProperties, data) } else { } @@ -195,24 +195,23 @@ export default { } // console.log(ananysicData, '结果数据') return ananysicData[0]; - } - }, - text(chartProperties, data) { - debugger - 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]; + }, + widgettext(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); } - ananysicData.push(obj); - } - return ananysicData; + return ananysicData; + }, }, watch: { 'selectInput.keyname'(newVal, oldVal) { diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetText.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetText.vue index ba9c8afc..7951981a 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetText.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetText.vue @@ -18,7 +18,8 @@ export default { }, data() { return { - options: {} + options: {}, + optionsData: {} }; }, computed: { @@ -47,14 +48,49 @@ export default { value: { handler(val) { this.options = val; + this.optionsData = val.data + this.setOptionsData() }, deep: true } }, mounted() { this.options = this.value; + this.optionsData = this.value.data + this.setOptionsData() }, - methods: {} + methods: { + // 数据解析 + setOptionsData() { + const optionsData = this.optionsData; // 数据类型 静态 or 动态 + optionsData.dataType == "staticData" + ? this.staticDataFn(optionsData.staticData) + : this.dynamicDataFn( + optionsData.dynamicData, + optionsData.refreshTime + ); + }, + staticDataFn(val) { + }, + dynamicDataFn(val, refreshTime) { + if (!val) return; + if (this.ispreview) { + this.getEchartData(val); + this.flagInter = setInterval(() => { + this.getEchartData(val); + }, refreshTime); + } else { + this.getEchartData(val); + } + }, + getEchartData(val) { + const data = this.queryEchartsData(val); + data.then(res => { + this.styleColor.text = res[0].value + this.$forceUpdate(); + }); + }, + } }; </script> diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetText2.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetText2.vue deleted file mode 100644 index d89b4eb2..00000000 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetText2.vue +++ /dev/null @@ -1,167 +0,0 @@ -<!-- - * @Author: lide1202@hotmail.com - * @Date: 2021-3-13 11:04:24 - * @Last Modified by: lide1202@hotmail.com - * @Last Modified time: 2021-3-13 11:04:24 - !--> -<template> - <div class="text" :style="styleObj"> - <v-chart :options="options" autoresize /> - </div> -</template> - -<script> -export default { - name: "WidgetText", - components: {}, - props: { - value: Object, - ispreview: Boolean - }, - data() { - return { - options: { - legend: { - textStyle: { - color: "#fff" - } - }, - series: [ - { - type: "text", - data: [], - emphasis: { - itemStyle: { - borderRadius: null - } - } - } - ], - }, - optionsStyle: {}, // 样式 - optionsData: {}, // 数据 - optionsSetup: {}, - flagInter: null - }; - }, - computed: { - /* transStyle() { - return this.objToOne(this.options); - }, - styleColor() { - return { - position: this.ispreview ? "absolute" : "static", - color: this.transStyle.color, - "font-weight": this.transStyle.fontWeight, - text: this.transStyle.text, - "font-size": this.transStyle.fontSize + "px", - "letter-spacing": this.transStyle.letterSpacing + "em", - background: this.transStyle.background, - "text-align": this.transStyle.textAlign, - width: this.transStyle.width + "px", - height: this.transStyle.height + "px", - left: this.transStyle.left + "px", - top: this.transStyle.top + "px", - right: this.transStyle.right + "px" - }; - },*/ - styleObj() { - return { - position: this.ispreview ? "absolute" : "static", - width: this.optionsStyle.width + "px", - height: this.optionsStyle.height + "px", - left: this.optionsStyle.left + "px", - top: this.optionsStyle.top + "px", - background: this.optionsSetup.background - }; - }, - }, - /* watch: { - value: { - handler(val) { - this.options = val; - }, - deep: true - } - },*/ - watch: { - value: { - handler(val) { - this.optionsStyle = val.position; - this.optionsData = val.data; - this.optionsCollapse = val.collapse; - this.optionsSetup = val.setup; - this.editorOptions(); - }, - deep: true - } - }, - /* mounted() { - this.options = this.value; - },*/ - mounted() { - this.optionsStyle = this.value.position; - this.optionsData = this.value.data; - this.optionsCollapse = this.value.setup; - this.optionsSetup = this.value.setup; - this.editorOptions(); - }, - methods: { - // 修改图标options属性 - editorOptions() { - this.setOptionsTitle(); - this.setOptionsX(); - this.setOptionsY(); - this.setOptionsTop(); - this.setOptionsTooltip(); - this.setOptionsMargin(); - this.setOptionsLegend(); - this.setOptionsColor(); - this.setOptionsData(); - }, - //静态数据 - staticDataFn(val) { - const staticData = JSON.parse(val); - for (const key in this.options.series) { - if (this.options.series[key].type == "text") { - this.options.series[key].data = staticData; - } - } - }, - // 动态数据 - dynamicDataFn(val, refreshTime) { - console.log() - if (!val) return; - if (this.ispreview) { - this.getEchartData(val); - this.flagInter = setInterval(() => { - this.getEchartData(val); - }, refreshTime); - } else { - this.getEchartData(val); - } - }, - getEchartData(val) { - const data = this.queryEchartsData(val); - data.then(res => { - this.renderingFn(res); - }); - }, - renderingFn(val) { - for (const key in this.options.series) { - if (this.options.series[key].type == "text") { - this.options.series[key].data = val; - } - } - } - } -}; -</script> - -<style scoped lang="scss"> -.text { - width: 100%; - height: 100%; - overflow: hidden; -} -</style>