|
|
@@ -0,0 +1,138 @@
|
|
|
+<template>
|
|
|
+ <div class="echart" :id="('popover-'+getChartId())" :style="chartStylePopover"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+ import {defineComponent, computed, markRaw, watch} from 'vue';
|
|
|
+ import * as echarts from "echarts";
|
|
|
+ import {get} from '@/api/common';
|
|
|
+
|
|
|
+ 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 : 'ChartBase',
|
|
|
+ data() {
|
|
|
+ return{
|
|
|
+ loading : false,
|
|
|
+ chartStylePopover: { width: "100%" , height: "230px" },
|
|
|
+ chart : null as any,
|
|
|
+ serieType : 'bar',
|
|
|
+ hovered : false,
|
|
|
+ datas : null,
|
|
|
+ id : Date.now()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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 lineColor = computed(()=>{
|
|
|
+ return props.lineColor? props.lineColor : '#0058D0';
|
|
|
+ });
|
|
|
+
|
|
|
+ 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.readerChart();
|
|
|
+
|
|
|
+ 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.readerChart();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+
|
|
|
+ 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:'3%', 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();
|
|
|
+ this.chart = null;
|
|
|
+ this.datas = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped></style>
|
xiaoqiao