Merge remote-tracking branch 'origin/master'

vue/src/components/basic/chart/chart-cell.vue

@@ -0,0 +1,118 @@
+<template>
+  <a-popover trigger="hover"
+             placement="left"
+             @visibleChange="onOpenChange">
+    <template #content>
+      <div class="echart" :id="('popover-'+id)" :style="chartStylePopover"></div>
+    </template>
+    <div class="echart" :id="('chart-'+id)" :style="chartStyle"></div>
+  </a-popover>
+</template>
+
+<script lang="ts">
+  import {defineComponent, computed, markRaw} from 'vue';
+  import * as echarts from "echarts";
+
+  export  default defineComponent ({
+    props:{
+      datas : [] as any
+    },
+    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',
+        id : Date.now(),
+        hovered : false
+      }
+    },
+    setup(props, context){
+      console.log("ChartCell setup" , props, context);
+
+      const datas = computed(() => {
+        return props.datas ? props.datas : []
+      });
+
+      return{
+        datas
+      }
+    },
+    mounted(){
+      console.log("mounted" , this.id);
+      this.readerCell();
+      //this.readerChart();
+    },
+    methods:{
+      getxAxis:function (show){
+        let xAxis = {type : 'category', data : [] as any, show : show, axisLabel:{rotate:50}};
+        //数据组装，这里根据业务组装x轴数据
+        xAxis.data = ['2023年1月', '2023年2月', '2023年3月', '2023年4月', '2023年5月', '2023年6月',
+          '2023年7月', '2023年8月', '2023年9月', '2023年10月', '2023年11月', '2023年12月'];
+        return xAxis;
+      },
+      getyAxis:function (){
+        return {type: 'value', min:'dataMin', max:'dataMax', show:false };
+      },
+      getSeries:function (showSymbol){
+        let series = [{type: this.serieType, data:[] as any, showSymbol:showSymbol}];
+        //数据组装，这里根据业务组装y轴数据
+        series[0].data = [820, 932, 901, 934, 1290, 1330,
+        2000, 3000, 4000, 5000, 5000, 6000];
+        console.log("getSeries", series);
+        return series;
+      },
+      readerCell: function () {
+        const option = {
+          grid: { top: 0, left: 0, right: 0, bottom: 0, containLabel: false },
+          xAxis: this.getxAxis(false),
+          yAxis: this.getyAxis(),
+          series: this.getSeries(false)
+        };
+        console.log("readerCell-"+this.serieType,option);
+
+        if(this.cell==null)
+          this.cell = markRaw(echarts.init(document.getElementById('chart-'+this.id) as HTMLElement));
+        if(this.cell!=null) {
+          this.cell.setOption(option);
+          this.cell.resize();
+        }
+      },
+      readerChart: function () {
+        let xAxis = this.getxAxis(true);
+        xAxis['nameRotate'] = 0;
+        const option = {
+          title: { left: 'center', text: '累产量趋势图' },
+          tooltip: { trigger: 'item', triggerOn:"mousemove",showContent:true },
+          grid: { top:'15%', left: '8%', right: '3%', bottom: '6%', containLabel: true },
+          xAxis: xAxis,
+          yAxis: { name:'累产量', nameGap: 50, nameLocation:'center', type: 'value'},
+          series: this.getSeries(true)
+        };
+        console.log("readerChart-"+this.serieType,option);
+
+        if(this.chart==null)
+          this.chart = markRaw(echarts.init(document.getElementById('popover-'+this.id) as HTMLElement));
+        if(this.chart!=null) {
+          this.chart.setOption(option);
+          this.chart.resize();
+        }
+      },
+      onOpenChange:function(visible){
+        console.log("onOpenChange", visible);
+        if(visible) {
+          setTimeout(this.readerChart, 100);
+        }
+        else{
+          this.chart.dispose();
+          this.chart = null;
+        }
+      }
+    }
+  })
+</script>
+
+<style lang="less" scoped></style>

vue/src/components/basic/chart/chart-prod-dynamics.vue

@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <a-form
+      ref="formRef"
+      name="advanced_search"
+      class="ant-advanced-search-form"
+      :model="formState"
+      @finish="onFinish"
+    >
+      <a-row :gutter="24">
+        <a-col :span="8">
+          <a-form-item
+            label="统计起止日期"
+            :label-col="{span:8}">
+            <a-range-picker format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']" @change="onRangeChange"/>
+          </a-form-item>
+        </a-col>
+
+        <a-col :span="4">
+          <a-form-item
+            name="selectType"
+            label="统计维度"
+            :label-col="{span:12}">
+            <a-select
+              v-model:value="formState.selectType"
+              :options="getOptions()"
+            ></a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="6">
+          <a-form-item
+            name="tempNo"
+            label="数据项"
+            :label-col="{span:8}">
+            <a-select
+              v-model:value="formState.dataTypes"
+              mode="multiple"
+              placeholder="..."
+              max-tag-count="responsive"
+              :options="getTypeOptions()"
+            ></a-select>
+          </a-form-item>
+        </a-col>
+
+        <a-col :span="6">
+          <a-button type="primary" html-type="submit" @click="onFinish">查询</a-button>
+        </a-col>
+      </a-row>
+    </a-form>
+    <div class="echart" :id="('chart-'+id)" :style="getChartStyle()"></div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {defineComponent, computed, markRaw, ref, reactive} from 'vue';
+  import * as echarts from "echarts";
+  import dayjs from 'dayjs';
+  import type {FormInstance} from 'ant-design-vue';
+
+  export  default defineComponent ({
+    props:{
+      datas : [] as any
+    },
+    name : 'ChartProdDynmics',
+    data() {
+      return{
+        loading : false,
+        chartStyle: { width: "100%", height: "100%" },
+        chart : null as any,
+        serieType : 'line',
+        id : Date.now(),
+        hovered : false,
+        height : 130
+      }
+    },
+    setup(props, context){
+      console.log("ChartCell setup" , props, context);
+
+      const datas = computed(() => {
+        return props.datas ? props.datas : []
+      });
+
+      const formRef = ref<FormInstance>();
+      const formState = reactive({
+        selectType: "日",  beiginDate: '', endDate: '',
+        dataTypes : ['0', '1', '2', '5']
+      });
+
+      return{
+        datas,
+        formRef,
+        formState
+      }
+    },
+    mounted(){
+      console.log("mounted" , this.id);
+      this.readerChart();
+    },
+    methods:{
+      onFinish:function (){
+        this.readerChart();
+      },
+      getChartStyle:function (){
+        return { width: "100%", height: (this.height) * this.getTypes().length + 160 + "px" };
+      },
+      getOptions:function (){
+        return [{label:'日', value:'0'},
+          {label:'月', value:'1'},
+          {label:'年', value:'2'}];
+      },
+      getTypeOptions:function (){
+        return [{label:'产油量', value:'0'},
+          {label:'产水量', value:'1'},
+          {label:'产液量', value:'2'},
+          {label:'产气量', value:'3'},
+          {label:'含水率', value:'4'},
+          {label:'油井开井数', value:'5'}];
+      },
+      getTypes:function (){
+        return this.getTypeOptions().filter((item) => {
+          return this.formState.dataTypes.indexOf(item.value) >=0;
+        });
+      },
+      getxDatas:function (){
+        //根据后台数据生成需要显示的数据集
+        let day = dayjs();
+        let arys = [] as any;
+        for(let i=0;i<12;i++){
+          day = day.add(1, 'day');
+          arys.push(day.format('YYYY-MM-DD'));
+        }
+        console.log("getxDatas",arys);
+        return arys;
+      },
+      getyDatas:function (){
+        //根据后台数据生成需要显示的数据集
+        let datas = [] as any;
+        let xLength = this.getxDatas().length;
+        for(let i=0;i< this.getTypes().length;i++){
+          let arys = [] as any;
+          for(let n=0;n<xLength;n++){
+            arys.push(parseInt(Math.random() * (10000 - 1000 + 1) + 1000));
+          }
+          datas.push(arys);
+        }
+        console.log("getyDatas",datas);
+        return datas;
+      },
+      getGrids:function (){
+        let grids = [] as any;
+        let showList = this.getTypes();
+        for(let i=0;i< showList.length;i++){
+          let top = 20 + i * (this.height) + i * 10;
+          grids.push({ left:'10%', top: top + 'px', width:'86%', height: (this.height-30) + 'px'});
+        }
+        console.log("getGrids",grids);
+        return grids;
+      },
+      getxAxis:function (){
+        let xAxis = [] as any;
+        let showList = this.getTypes();
+        for(let i=0;i< showList.length;i++){
+          let row = { gridIndex : i, type : 'category',
+            data : this.getxDatas(),
+            show : (i+1)==showList.length,
+            axisLabel:{rotate:50}};
+          xAxis.push(row);
+        }
+        console.log("getxAxis",xAxis);
+        return xAxis;
+      },
+      getyAxis:function (){
+        let yAxis = [] as any;
+        let showList = this.getTypes();
+        for(let i=0;i< showList.length;i++){
+          let row = { gridIndex : i,
+            name:showList[i].label,
+            nameGap: 50,
+            nameLocation:'center',
+            type : 'value'};
+          yAxis.push(row);
+        }
+        console.log("getyAxis",yAxis);
+        return yAxis;
+      },
+      getSeries:function (){
+        let series = [] as any;
+        let showList = this.getTypes();
+        let yDatas = this.getyDatas();
+        for(let i=0;i< showList.length;i++){
+          let row = { xAxisIndex : i, yAxisIndex: i, type : this.serieType, data: yDatas[i] };
+          series.push(row);
+        }
+        console.log("getSeries",series);
+        return series;
+      },
+      readerChart: function () {
+        const option = {
+          tooltip: { trigger: 'item', triggerOn:"mousemove",showContent:true },
+          grid: this.getGrids(),
+          xAxis: this.getxAxis(),
+          yAxis: this.getyAxis(),
+          series: this.getSeries()
+        };
+        console.log("readerChart-"+this.serieType,option);
+
+        if(this.chart!=null) this.chart.dispose();
+        this.chart = markRaw(echarts.init(document.getElementById('chart-'+this.id) as HTMLElement));
+        this.chart.setOption(option);
+      }
+    }
+  })
+</script>
+
+<style lang="less" scoped></style>

vue/src/views/position/test.vue

@@ -25,6 +25,25 @@
       <!--热门搜索历史使用示例，实际应用改样式即可-->
       <QueryHistoryList ref="queryHistoryList" :maxRows="20"></QueryHistoryList>
     </div>
+
+    <a-divider orientation="left">列表单元格中显示简单的曲线图</a-divider>
+    <div style="width:1000px;">
+      <a-table :columns="columns" :data-source="data">
+        <template #bodyCell="{ column, text }">
+          <template v-if="column.dataIndex === 'chart'">
+            <div style="height:40px">
+              <!--列表单元格中显示曲线图，数据需要根据业务库整理-->
+              <ChartCell></ChartCell>
+            </div>
+          </template>
+        </template>
+      </a-table>
+    </div>
+
+    <a-divider orientation="left">Grid类型的图表</a-divider>
+    <div style="width:1200px;">
+      <ChartProdDynmics></ChartProdDynmics>
+    </div>
   </div>
 </template>
 
@@ -33,10 +52,12 @@ import {ref,defineComponent,watch} from "vue";
 import { useRoute} from 'vue-router';
 import QueryHistoryList from '@/components/basic/querylog/history-list.vue'
 import QueryHistoryComplete from '@/components/basic/querylog/history-complete.vue'
+import ChartCell from '@/components/basic/chart/chart-cell.vue'
+import ChartProdDynmics from '@/components/basic/chart/chart-prod-dynamics.vue'
 
 export default defineComponent({
   name: 'QueryTest',
-  components: {QueryHistoryList, QueryHistoryComplete},
+  components: {QueryHistoryList, QueryHistoryComplete, ChartCell, ChartProdDynmics},
   setup() {
     const route = useRoute();
     const queryHistoryComplete = ref<typeof QueryHistoryComplete>();
@@ -55,10 +76,27 @@ export default defineComponent({
       (queryHistoryComplete.value as any).saveHistory(formState.value.keyString);
     };
 
+    const columns = [
+      { title: 'Name', dataIndex: 'name', key: 'name', },
+      { title: 'Age', dataIndex: 'age', key: 'age', width: 80, },
+      { title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: true, },
+      { title: 'Long Column Long Column Long Column', dataIndex: 'address', key: 'address 2', ellipsis: true},
+      { title: 'ChartCell', dataIndex: 'chart', key: 'ChartCell', width:160}
+    ];
+
+    const data = [
+      { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park, New York No. 1 Lake Park', tags: ['nice', 'developer']},
+      { key: '2', name: 'Jim Green', age: 42, address: 'London No. 2 Lake Park, London No. 2 Lake Park', tags: ['loser']},
+      { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park', tags: ['cool', 'teacher']},
+    ];
+
     return {
       formState,
       onFinish,
-      queryHistoryComplete
+      queryHistoryComplete,
+
+      columns,
+      data
     };
   }
 });