|
|
@@ -10,168 +10,170 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
- import {defineComponent, computed, markRaw, watch} from 'vue';
|
|
|
- import * as echarts from "echarts";
|
|
|
- import {get} from '@/api/common';
|
|
|
+import {defineComponent, computed, watch} from 'vue';
|
|
|
+import * as echarts from "echarts";
|
|
|
+import {get} from '@/api/common';
|
|
|
+import {v4 as uuidv4} from "uuid";
|
|
|
|
|
|
- export default defineComponent ({
|
|
|
- props:{
|
|
|
- wellId: null as any,
|
|
|
- lineColor : null as any,
|
|
|
- timeType : null as any, //日 day 月 month 年 year
|
|
|
- dataType : null as any//gas产气量 oil产油量
|
|
|
- },
|
|
|
- name : 'ChartCell',
|
|
|
- data() {
|
|
|
- return{
|
|
|
- loading : false,
|
|
|
- chartStyle: { width: "100%", height: "100%" },
|
|
|
- chartStylePopover: { width: "460px", height: "300px" },
|
|
|
- cell : null as any,
|
|
|
- chart : null as any,
|
|
|
- serieType : 'line',
|
|
|
- hovered : false,
|
|
|
- datas : null,
|
|
|
- id : Date.now()
|
|
|
- }
|
|
|
- },
|
|
|
- setup(props, context){
|
|
|
- console.log("ChartCell setup" , props, context);
|
|
|
+export default defineComponent({
|
|
|
+ props: {
|
|
|
+ wellId: null as any,
|
|
|
+ lineColor: null as any,
|
|
|
+ timeType: null as any, //日 day 月 month 年 year
|
|
|
+ dataType: null as any//gas产气量 oil产油量
|
|
|
+ },
|
|
|
+ name: 'ChartCell',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ chartStyle: {width: "100%", height: "100%"},
|
|
|
+ chartStylePopover: {width: "460px", height: "300px"},
|
|
|
+ cell: null as any,
|
|
|
+ chart: null as any,
|
|
|
+ serieType: 'line',
|
|
|
+ hovered: false,
|
|
|
+ datas: null,
|
|
|
+ id: uuidv4()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setup(props, context) {
|
|
|
+ console.log("ChartCell setup", props, context);
|
|
|
|
|
|
- const timeType = computed(() => {
|
|
|
- return props.timeType ? props.timeType : 'day'
|
|
|
- });
|
|
|
- const dataType = computed(() => {
|
|
|
- return props.dataType ? props.dataType : 'oil'
|
|
|
- });
|
|
|
- const wellId = computed(() => {
|
|
|
- return props.wellId ? props.wellId : null
|
|
|
- });
|
|
|
- //const id = computed(() => {
|
|
|
- // return wellId.value + "-" + dataType.value;
|
|
|
- //});
|
|
|
- const lineColor = computed(()=>{
|
|
|
- return props.lineColor? props.lineColor : '#0058D0';
|
|
|
- });
|
|
|
+ const timeType = computed(() => {
|
|
|
+ return props.timeType ? props.timeType : 'day'
|
|
|
+ });
|
|
|
+ const dataType = computed(() => {
|
|
|
+ return props.dataType ? props.dataType : 'oil'
|
|
|
+ });
|
|
|
+ const wellId = computed(() => {
|
|
|
+ return props.wellId ? props.wellId : null
|
|
|
+ });
|
|
|
+ //const id = computed(() => {
|
|
|
+ // return wellId.value + "-" + dataType.value;
|
|
|
+ //});
|
|
|
+ const lineColor = computed(() => {
|
|
|
+ return props.lineColor ? props.lineColor : '#0058D0';
|
|
|
+ });
|
|
|
|
|
|
- const units = {oil:'10kt', gas:'10^8m³',vol:'10kt'};
|
|
|
+ const units = {oil: '10kt', gas: '10^8m³', vol: '10kt'};
|
|
|
|
|
|
- return{
|
|
|
- timeType,
|
|
|
- dataType,
|
|
|
- wellId,
|
|
|
- lineColor,
|
|
|
- units
|
|
|
- }
|
|
|
- },
|
|
|
- mounted(){
|
|
|
- console.log("mounted chart-cell" , this.id);
|
|
|
- if(this.wellId!=null && this.wellId!=undefined && this.wellId.trim().length>0)
|
|
|
- this.readerCell();
|
|
|
+ return {
|
|
|
+ timeType,
|
|
|
+ dataType,
|
|
|
+ wellId,
|
|
|
+ lineColor,
|
|
|
+ units
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log("mounted chart-cell", this.id);
|
|
|
+ if (this.wellId != null && this.wellId != undefined && this.wellId.trim().length > 0)
|
|
|
+ this.readerCell();
|
|
|
|
|
|
- watch(
|
|
|
- () => this.wellId,
|
|
|
- (n, o) => {
|
|
|
- if(n!=o) {
|
|
|
- console.log("wellIdChangeLog",this.getChartId(), n, o);
|
|
|
- if(n!=null && n!=undefined && n.trim().length>0) {
|
|
|
- this.chartDispose();
|
|
|
- this.readerCell();
|
|
|
- }
|
|
|
+ watch(
|
|
|
+ () => this.wellId,
|
|
|
+ (n, o) => {
|
|
|
+ if (n != o) {
|
|
|
+ console.log("wellIdChangeLog", this.getChartId(), n, o);
|
|
|
+ if (n != null && n != undefined && n.trim().length > 0) {
|
|
|
+ this.chartDispose();
|
|
|
+ this.readerCell();
|
|
|
}
|
|
|
}
|
|
|
- );
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getChartId: function () {
|
|
|
+ return this.id + "-" + this.wellId;
|
|
|
},
|
|
|
- methods:{
|
|
|
- getChartId:function (){
|
|
|
- return this.id + "-" + this.wellId + "-" +this.dataType;
|
|
|
- },
|
|
|
- getDatas:async function(){
|
|
|
- //数据查询逻辑，如果不查询，改此方法返回数据即可
|
|
|
- if(this.datas==null){
|
|
|
- const result = await get('/factwell/getFactWellList',
|
|
|
- { wellId: this.wellId, timeType: this.timeType });
|
|
|
- this.datas = result.rows;
|
|
|
- }
|
|
|
- return this.datas;
|
|
|
- },
|
|
|
- getxAxis:async function (show){
|
|
|
- let dataArys = await this.getDatas();
|
|
|
- let xAxis = {type : 'category', data : [] as any, show : show, axisLabel:{rotate:50}};
|
|
|
- //数据组装，这里根据业务组装x轴数据
|
|
|
- (dataArys! as any).forEach(row=>{ xAxis.data.push(row.time_str) });
|
|
|
- return xAxis;
|
|
|
- },
|
|
|
- getyAxis:function (){
|
|
|
- return {type: 'value', show:false };
|
|
|
- },
|
|
|
- getSeries:async function (symbolSize){
|
|
|
- let dataArys = await this.getDatas();
|
|
|
- let series = [{type: this.serieType, data:[] as any, showSymbol:true, symbolSize:symbolSize, symbol: 'circle',
|
|
|
- itemStyle : {color:this.lineColor}, lineStyle : {width:1}}];
|
|
|
- //数据组装，这里根据业务组装y轴数据
|
|
|
- (dataArys! as any).forEach(row=>{ series[0].data.push(row[this.dataType]) });
|
|
|
- console.log("getSeries", series);
|
|
|
- return series;
|
|
|
- },
|
|
|
- readerCell: async function () {
|
|
|
- const option = {
|
|
|
- grid: { top: 2, left: 0, right: 0, bottom: 2, containLabel: false },
|
|
|
- xAxis: await this.getxAxis(false),
|
|
|
- yAxis: this.getyAxis(),
|
|
|
- series: await this.getSeries(2)
|
|
|
- };
|
|
|
- console.log("readerCell-"+this.serieType,option);
|
|
|
+ getDatas: async function () {
|
|
|
+ //数据查询逻辑，如果不查询，改此方法返回数据即可
|
|
|
+ if (this.datas == null) {
|
|
|
+ const result = await get('/factwell/getFactWellList',
|
|
|
+ {wellId: this.wellId, timeType: this.timeType});
|
|
|
+ this.datas = result.rows;
|
|
|
+ }
|
|
|
+ return this.datas;
|
|
|
+ },
|
|
|
+ getxAxis: async function (show) {
|
|
|
+ let dataArys = await this.getDatas();
|
|
|
+ let xAxis = {type: 'category', data: [] as any, show: show, axisLabel: {rotate: 50}};
|
|
|
+ //数据组装，这里根据业务组装x轴数据
|
|
|
+ (dataArys! as any).forEach(row => {
|
|
|
+ xAxis.data.push(row.time_str)
|
|
|
+ });
|
|
|
+ return xAxis;
|
|
|
+ },
|
|
|
+ getyAxis: function () {
|
|
|
+ return {type: 'value', show: false};
|
|
|
+ },
|
|
|
+ getSeries: async function (symbolSize) {
|
|
|
+ let dataArys = await this.getDatas();
|
|
|
+ let series = [{
|
|
|
+ type: this.serieType, data: [] as any, showSymbol: true, symbolSize: symbolSize, symbol: 'circle',
|
|
|
+ itemStyle: {color: this.lineColor}, lineStyle: {width: 1}
|
|
|
+ }];
|
|
|
+ //数据组装，这里根据业务组装y轴数据
|
|
|
+ (dataArys! as any).forEach(row => {
|
|
|
+ series[0].data.push(row[this.dataType])
|
|
|
+ });
|
|
|
+ console.log("getSeries", series);
|
|
|
+ return series;
|
|
|
+ },
|
|
|
+ readerCell: async function () {
|
|
|
+ const option = {
|
|
|
+ grid: {top: 2, left: 0, right: 0, bottom: 2, containLabel: false},
|
|
|
+ xAxis: await this.getxAxis(false),
|
|
|
+ yAxis: this.getyAxis(),
|
|
|
+ series: await this.getSeries(2)
|
|
|
+ };
|
|
|
+ console.log("readerCell-" + this.serieType, option);
|
|
|
|
|
|
- if(this.cell==null)
|
|
|
- this.cell = markRaw(echarts.init(document.getElementById('chart-'+this.getChartId()) as HTMLElement));
|
|
|
- if(this.cell!=null) {
|
|
|
- this.cell.setOption(option);
|
|
|
- this.cell.resize();
|
|
|
- }
|
|
|
- },
|
|
|
- readerChart: async function () {
|
|
|
- let xAxis = await this.getxAxis(true);
|
|
|
- xAxis['nameRotate'] = 0;
|
|
|
- let unitStr = "";
|
|
|
- if(this.units[this.dataType]) unitStr = "("+this.units[this.dataType]+")"
|
|
|
+ if (this.cell == null) {
|
|
|
+ this.cell = echarts.init(document.getElementById('chart-' + this.getChartId()));
|
|
|
+ this.cell.setOption(option);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ readerChart: async function () {
|
|
|
+ let xAxis = await this.getxAxis(true);
|
|
|
+ xAxis['nameRotate'] = 0;
|
|
|
+ let unitStr = "";
|
|
|
+ if (this.units[this.dataType]) unitStr = "(" + this.units[this.dataType] + ")"
|
|
|
|
|
|
- const option = {
|
|
|
- title: { text: '累产量趋势图' },
|
|
|
- tooltip: { trigger: 'item', triggerOn:"mousemove",showContent:true },
|
|
|
- grid: { top:'15%', left: '3%', right: '3%', bottom: '6%', containLabel: true },
|
|
|
- xAxis: xAxis,
|
|
|
- yAxis: { type: 'value', axisLabel: { formatter : '{value}'+unitStr}},
|
|
|
- series: await this.getSeries(5)
|
|
|
- };
|
|
|
- console.log("readerChart-"+this.serieType,option);
|
|
|
+ const option = {
|
|
|
+ title: {text: '累产量趋势图'},
|
|
|
+ tooltip: {trigger: 'item', triggerOn: "mousemove", showContent: true},
|
|
|
+ grid: {top: '15%', left: '3%', right: '3%', bottom: '6%', containLabel: true},
|
|
|
+ xAxis: xAxis,
|
|
|
+ yAxis: {type: 'value', axisLabel: {formatter: '{value}' + unitStr}},
|
|
|
+ series: await this.getSeries(5)
|
|
|
+ };
|
|
|
+ console.log("readerChart-" + this.serieType, option);
|
|
|
|
|
|
- if(this.chart==null)
|
|
|
- this.chart = markRaw(echarts.init(document.getElementById('popover-'+this.getChartId()) as HTMLElement));
|
|
|
- if(this.chart!=null) {
|
|
|
- this.chart.setOption(option);
|
|
|
- this.chart.resize();
|
|
|
- }
|
|
|
- },
|
|
|
- chartDispose:function (){
|
|
|
- if(this.chart!=null) this.chart.dispose();
|
|
|
- if(this.cell!=null) this.cell.dispose();
|
|
|
- this.chart = null;
|
|
|
- this.cell = null;
|
|
|
- this.datas = null;
|
|
|
- },
|
|
|
- onOpenChange:function(visible){
|
|
|
- console.log("onOpenChange", visible);
|
|
|
- if(visible) {
|
|
|
- setTimeout(this.readerChart, 10);
|
|
|
- }
|
|
|
- else{
|
|
|
- this.chart.dispose();
|
|
|
- this.chart = null;
|
|
|
- }
|
|
|
+ if (this.chart == null) {
|
|
|
+ this.chart = echarts.init(document.getElementById('popover-' + this.getChartId()));
|
|
|
+ this.chart.setOption(option);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ chartDispose: function () {
|
|
|
+ if (this.chart != null) this.chart.dispose();
|
|
|
+ if (this.cell != null) this.cell.dispose();
|
|
|
+ this.chart = null;
|
|
|
+ this.cell = null;
|
|
|
+ this.datas = null;
|
|
|
+ },
|
|
|
+ onOpenChange: function (visible) {
|
|
|
+ console.log("onOpenChange", visible);
|
|
|
+ if (visible) {
|
|
|
+ setTimeout(this.readerChart, 10);
|
|
|
+ } else {
|
|
|
+ /*this.chart.dispose();
|
|
|
+ this.chart = null;*/
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped></style>
|
